B站备注

B站用户备注脚本| Bilibili用户备注
Wrap lines
// ==UserScript==
// @name         B站备注
// @namespace    https://github.com/pxoxq
// @version      0.4.1
// @description  B站用户备注脚本| Bilibili用户备注
// @license      AGPL-3.0-or-later
// @author       pxoxq
// @match        https://*.bilibili.com/**
// @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant        GM_addElement
// @grant        GM_addStyle
// @grant        window.onurlchange
// @require      https://code.jquery.com/jquery-3.7.1.min.js
// ==/UserScript==

// -----------ElementGetter----------------
var elmGetter = function() {
  const win = window.unsafeWindow || document.defaultView || window;
  const doc = win.document;
  const listeners = new WeakMap();
  let mode = 'css';
  let $;
  const elProto = win.Element.prototype;
  const matches = elProto.matches ||
      elProto.matchesSelector ||
      elProto.webkitMatchesSelector || 
      elProto.mozMatchesSelector ||
      elProto.oMatchesSelector;
  const MutationObs = win.MutationObserver ||
      win.WebkitMutationObserver ||
      win.MozMutationObserver;
  function addObserver(target, callback) {
      const observer = new MutationObs(mutations => {
          for (const mutation of mutations) {
              if (mutation.type === 'attributes') {
                  callback(mutation.target);
                  if (observer.canceled) return;
              }
              for (const node of mutation.addedNodes) {
                  if (node instanceof Element) callback(node);
                  if (observer.canceled) return;
              }
          }
      });
      observer.canceled = false;
      observer.observe(target, {childList: true, subtree: true, attributes: true});
      return () => {
          observer.canceled = true;
          observer.disconnect();
      };
  }
  function addFilter(target, filter) {
      let listener = listeners.get(target);
      if (!listener) {
          listener = {
              filters: new Set(),
              remove: addObserver(target, el => listener.filters.forEach(f => f(el)))
          };
          listeners.set(target, listener);
      }
      listener.filters.add(filter);
  }
  function removeFilter(target, filter) {
      const listener = listeners.get(target);
      if (!listener) return;
      listener.filters.delete(filter);
      if (!listener.filters.size) {
          listener.remove();
          listeners.delete(target);
      }
  }
  function query(all, selector, parent, includeParent, curMode) {
      switch (curMode) {
          case 'css':
              const checkParent = includeParent && matches.call(parent, selector);
              if (all) {
                  const queryAll = parent.querySelectorAll(selector);
                  return checkParent ? [parent, ...queryAll] : [...queryAll];
              }
              return checkParent ? parent : parent.querySelector(selector);
          case 'jquery':
              let jNodes = $(includeParent ? parent : []);
              jNodes = jNodes.add([...parent.querySelectorAll('*')]).filter(selector);
              if (all) return $.map(jNodes, el => $(el));
              return jNodes.length ? $(jNodes.get(0)) : null;
          case 'xpath':
              const ownerDoc = parent.ownerDocument || parent;
              selector += '/self::*';
              if (all) {
                  const xPathResult = ownerDoc.evaluate(selector, parent, null, 7, null);
                  const result = [];
                  for (let i = 0; i < xPathResult.snapshotLength; i++) {
                      result.push(xPathResult.snapshotItem(i));
                  }
                  return result;
              }
              return ownerDoc.evaluate(selector, parent, null, 9, null).singleNodeValue;
      }
  }
  function isJquery(jq) {
      return jq && jq.fn && typeof jq.fn.jquery === 'string';
  }
  function getOne(selector, parent, timeout) {
      const curMode = mode;
      return new Promise(resolve => {
          const node = query(false, selector, parent, false, curMode);
          if (node) return resolve(node);
          let timer;
          const filter = el => {
              const node = query(false, selector, el, true, curMode);
              if (node) {
                  removeFilter(parent, filter);
                  timer && clearTimeout(timer);
                  resolve(node);
              }
          };
          addFilter(parent, filter);
          if (timeout > 0) {
              timer = setTimeout(() => {
                  removeFilter(parent, filter);
                  resolve(null);
              }, timeout);
          }
      });
  }
  return {
      get currentSelector() {
          return mode;
      },
      get(selector, ...args) {
          let parent = typeof args[0] !== 'number' && args.shift() || doc;
          if (mode === 'jquery' && parent instanceof $) parent = parent.get(0);
          const timeout = args[0] || 0;
          if (Array.isArray(selector)) {
              return Promise.all(selector.map(s => getOne(s, parent, timeout)));
          }
          return getOne(selector, parent, timeout);
      },
      each(selector, ...args) {
          let parent = typeof args[0] !== 'function' && args.shift() || doc;
          if (mode === 'jquery' && parent instanceof $) parent = parent.get(0);
          const callback = args[0];
          const curMode = mode;
          const refs = new WeakSet();
          for (const node of query(true, selector, parent, false, curMode)) {
              refs.add(curMode === 'jquery' ? node.get(0) : node);
              if (callback(node, false) === false) return;
          }
          const filter = el => {
              for (const node of query(true, selector, el, true, curMode)) {
                  const _el = curMode === 'jquery' ? node.get(0) : node;
                  if (refs.has(_el)) break;
                  refs.add(_el);
                  if (callback(node, true) === false) {
                      return removeFilter(parent, filter);
                  }
              }
          };
          addFilter(parent, filter);
      },
      create(domString, ...args) {
          const returnList = typeof args[0] === 'boolean' && args.shift();
          const parent = args[0];
          const template = doc.createElement('template');
          template.innerHTML = domString;
          const node = template.content.firstElementChild;
          if (!node) return null;
          parent ? parent.appendChild(node) : node.remove();
          if (returnList) {
              const list = {};
              node.querySelectorAll('[id]').forEach(el => list[el.id] = el);
              list[0] = node;
              return list;
          }
          return node;
      },
      selector(desc) {
          switch (true) {
              case isJquery(desc):
                  $ = desc;
                  return mode = 'jquery';
              case !desc || typeof desc.toLowerCase !== 'function':
                  return mode = 'css';
              case desc.toLowerCase() === 'jquery':
                  for (const jq of [window.jQuery, window.$, win.jQuery, win.$]) {
                      if (isJquery(jq)) {
                          $ = jq;
                          break;
                      };
                  }
                  return mode = $ ? 'jquery' : 'css';
              case desc.toLowerCase() === 'xpath':
                  return mode = 'xpath';
              default:
                  return mode = 'css';
          }
      }
  };
}();


// ==========防抖函数=============
function pxoDebounce(func, delay) {
  let timer = null;
  function _debounce(...arg) {
    timer && clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, arg);
      timer = null;
    }, delay);
  }
  return _debounce;
}

class DateUtils {
  static getCurrDateTimeStr() {
    let date = new Date();
    let year = date.getFullYear();
    let month = date.getMonth() + 1;
    let day = date.getDate();
    let hour = date.getHours();
    let minutes = date.getMinutes();
    let sec = date.getSeconds();
    return `${year}${month}${day}${hour}${minutes}${sec}`;
  }
}

/* =======================================
    IndexedDB   开始
======================================= */
class MyIndexedDB {
  request;
  db;
  dbName;
  dbVersion;
  store;

  constructor(dbName, dbVersion, store) {
    this.dbName = dbName;
    this.dbVersion = dbVersion;
    this.store = store;
  }

  // 直接 await MyIndexedDB.create(xxxx)  获取实例对象
  static async create(dbName, dbVersion, store) {
    const obj = new MyIndexedDB(dbName, dbVersion, store);
    obj.db = await obj.getConnection();
    return obj;
  }

  // 通过 new MyIndexedDB(xxx) 获取实例对象后，还需要 await initDB() 一下
  async initDB() {
    return new Promise((resolve, rej) => {
      this.getConnection().then((res) => {
        this.db = res;
        resolve(this);
      });
    });
  }

  // 控制台打印错误
  consoleError(msg) {
    console.log(`[myIndexedDB]: ${msg}`);
  }

  // 获取连接；直接挂到 this.db 上
  // 需要注意，第一次的话，会初始化好 db、 store。但是之后就不会初始化 store，需要判断获取
  getConnection = async () => {
    return new Promise((resolve, rej) => {
      // console.log("连接到数据库： "+`--${this.dbName}--  --${this.dbVersion}--`)
      // 打开数据库，没有则新建
      this.request = indexedDB.open(this.dbName, this.dbVersion);
      this.request.onerror = (e) => {
        console.error(
          `连接 ${this.dbName} [IndexedDB] 失败. version: [${this.dbVersion}]`,
          e
        );
      };

      this.request.onupgradeneeded = async (event) => {
        const db = event.target.result;
        await this.createAndInitStore(
          db,
          this.store.conf.storeName,
          this.store.data,
          this.store.conf.uniqueIndex,
          this.store.conf.normalIndex
        );
        // await this.createAndInitStore(db);
        resolve(db);
      };

      this.request.onsuccess = (e) => {
        const db = e.target.result;
        resolve(db);
      };
    });
  };

  // 创建存储桶并初始化数据，默认是自增id
  async createAndInitStore(
    db = this.db,
    storeName = "",
    datas = [],
    uniqueIndex = [],
    normalIndex = []
  ) {
    if (!storeName || !datas) return;
    return new Promise((resolve, rej) => {
      // 自增id
      const store = db.createObjectStore(storeName, {
        keyPath: "id",
        autoIncrement: true,
      });
      // 设置两类索引
      uniqueIndex.forEach((item) => {
        store.createIndex(item, item, { unique: true });
      });
      normalIndex.forEach((item) => {
        store.createIndex(item, item, { unique: false });
      });

      // 初始填充数据
      store.transaction.oncomplete = (e) => {
        const rwStore = this.getCustomRWstore(storeName, db);
        datas.forEach((item) => {
          rwStore.add(item);
        });
        resolve(0);
      };
    });
  }

  // 获取所有数据
  async getAllDatas() {
    return new Promise((resolve, rej) => {
      const rwStore = this.getCustomRWstore();
      const req = rwStore.getAll();
      req.onsuccess = (e) => {
        resolve(req?.result);
      };
    });
  }

  // 添加一条数据
  async addOne(item) {
    return new Promise((resolve, rej) => {
      const rwStore = this.getCustomRWstore();
      const req = rwStore.add(item);
      req.onsuccess = () => {
        resolve(true);
      };
      req.onerror = () => {
        rej(false);
      };
    });
  }

  // 根据uid获取一条数据
  async getOne(id = 0) {
    return new Promise((resolve, rej) => {
      const rwStore = this.getCustomRWstore();
      const req = rwStore.get(id);
      req.onsuccess = () => {
        resolve(req.result);
      };
    });
  }

  // 查询一条数据， 字段column包含value子串
  async queryOneLike(column, value) {
    return new Promise((resolve, rej) => {
      const rwStore = this.getCustomRWstore();
      rwStore.openCursor().onsuccess = (event) => {
        const cursor = event.target.result;
        if (cursor) {
          const item = { ...cursor.value };
          if (item[column] && item[column].indexOf(value) > -1) {
            item.id = cursor.key;
            resolve(item);
          }
          cursor.continue();
        } else {
          resolve(false);
        }
      };
    });
  }

  // 查询一条数据， 字段column等于value
  async queryOneEq(column, value) {
    return new Promise((resolve, rej) => {
      const rwStore = this.getCustomRWstore();
      rwStore.openCursor().onsuccess = (event) => {
        const cursor = event.target.result;
        if (cursor) {
          const item = { ...cursor.value };
          if (item[column] == value) {
            item.id = cursor.key;
            resolve(item);
          }
          cursor.continue();
        } else {
          resolve(false);
        }
      };
    });
  }

  // 更新一条数据
  async updateOne(item) {
    return new Promise((resolve, rej) => {
      const rwStore = this.getCustomRWstore();
      const req = rwStore.put(item);
      req.onsuccess = () => {
        resolve(true);
      };
      req.onerror = (e) => {
        console.log(req);
        console.log(e);
        rej(false);
      };
    });
  }

  // 删除一条数据
  async delOne(id) {
    return new Promise((resolve, rej) => {
      const rwStore = this.getCustomRWstore();
      const req = rwStore.delete(id);
      req.onsuccess = () => {
        resolve(true);
      };
      req.onerror = (e) => {
        rej(false);
      };
    });
  }

  // 获取读写权限的存储桶 store。默认是this上挂的storename
  getCustomRWstore(storeName = this.store.conf.storeName, db = this.db) {
    return db.transaction(storeName, "readwrite").objectStore(storeName);
  }

  // 状态值为 done 时表示连接上了。db挂到了this上
  requestState() {
    return this.request.readyState;
  }
  isReady() {
    return this.request.readyState == "done";
  }

  // 关闭数据库链接
  closeDB() {
    this.db && this.db.close();
  }

  static setDBVersion(version) {
    localStorage.setItem("pxoxq-dbv", version);
  }

  static getDBVersion() {
    const v = localStorage.getItem("pxoxq-dbv");
    return v;
  }
}
/* =======================================
    IndexedDB    结束
======================================= */

/* =======================================
    配置数据库表   结束
======================================= */
class ConfigDB {
  static simplifyIdx = false;
  static autoWideMode = false;
  static playerHeight = 700;
  static memoMode = 0;
  static importMode = 0;

  static Keys = {
    simplifyIdx: "simplifyIdx",
    autoWideMode: "autoWideMode",
    playerHeight: "playerHeight",
    memoMode: "memoMode",
    importMode: "importMode",
  };

  static dbConfig = {
    DB_NAME: "bilibili_pxo",
    DB_V: MyIndexedDB.getDBVersion() ?? 2,
    store: {
      conf: {
        storeName: "conf",
      },
    },
  };

  static async connnectDB(func) {
    const myDb = await MyIndexedDB.create(
      this.dbConfig.DB_NAME,
      this.dbConfig.DB_V,
      this.dbConfig.store
    );
    const result = await func(myDb);
    myDb.closeDB();
    return result;
  }

  static async getConf() {
    const res = await this.connnectDB(async (db) => {
      const rrr = db.getOne("bconf");
      return rrr;
    });
    return res;
  }

  static async updateConf(conf) {
    const res = await this.connnectDB(async (db) => {
      const rrr = await db.updateOne(conf);
      return rrr;
    });
    return res;
  }

  static async updateOne(key, val) {
    const res = await this.connnectDB(async (db) => {
      const config = await this.getConf();
      config[key] = val;
      const rrr = db.updateOne(config);
      return rrr;
    });
    return res;
  }

  static async updateSimplifyIdx(val) {
    return await this.updateOne(this.Keys.simplifyIdx, val);
  }

  static async updateAutoWideMode(val) {
    return await this.updateOne(this.Keys.autoWideMode, val);
  }

  static async updatePlayerHeight(val) {
    return await this.updateOne(this.Keys.playerHeight, val);
  }

  static async updateMemoMode(val) {
    return await this.updateOne(this.Keys.memoMode, val);
  }

  static async updateImportMode(val) {
    return await this.updateOne(this.Keys.importMode, val);
  }
}
/* =======================================
    配置数据库表   结束
======================================= */

/*=========================================
   哔站昵称功能对IndexedDB 进行的封装  开始
==========================================*/
class BilibiliMemoDB {
  static dbConfig = {
    DB_NAME: "bilibili_pxo",
    DB_V: MyIndexedDB.getDBVersion() ?? 2,
    store: {
      conf: {
        storeName: "my_friends",
      },
    },
  };

  static async connectDB(func) {
    const db = await MyIndexedDB.create(
      this.dbConfig.DB_NAME,
      this.dbConfig.DB_V,
      this.dbConfig.store
    );
    const result = await func(db);
    db.closeDB();
    return result;
  }

  static async addOne(uid) {
    const res = await this.connectDB(async (db) => {
      const rrr = await db.addOne(uid);
      return rrr;
    });
    return res;
  }

  static async getOne(uid) {
    const res = await this.connectDB(async (db) => {
      const rrr = await db.getOne(uid);
      return rrr;
    });
    return res;
  }

  static async queryEq(column, value) {
    const res = await this.connectDB(async (db) => {
      const rrr = await db.queryOneEq(column, value);
      return rrr;
    });
    return res;
  }

  static async queryLike(column, value) {
    const res = await this.connectDB(async (db) => {
      const rrr = await db.queryOneLike(column, value);
      return rrr;
    });
    return res;
  }

  static async getOneByBid(bid) {
    const res = await this.queryEq("bid", bid);
    return res;
  }

  static async getAll() {
    const res = await this.connectDB(async (db) => {
      const rrr = await db.getAllDatas();
      return rrr;
    });
    return res;
  }

  static async updateByIdAndMemo(id, memo) {
    const item = await this.getOne(id);
    item.nick_name = memo;
    const res = await this.updateOne(item);
    return res;
  }

  static async addOrUpdateMany(datas, ignore_mode = true) {
    for (const data of datas) {
      const _item = await this.getOneByBid(data.bid);
      if (_item) {
        if (!ignore_mode) {
          _item.nick_name = data.nick_name;
          _item.bname = data.bname;
          await this.updateOne(_item);
        }
      } else {
        if (!data.bid) continue;
        else {
          const _itm = {
            bid: data.bid,
            bname: data.bname,
            nick_name: data.nick_name,
          };
          await this.addOne(_itm);
        }
      }
    }
    return 1;
  }

  static async updateOne(item) {
    const res = await this.connectDB(async (db) => {
      const rrr = await db.updateOne(item);
      return rrr;
    });
    return res;
  }

  static async delByBid(bid) {
    const _item = this.getOneByBid(bid);
    if (_item) {
      return await this.delOne(_item.id);
    } else {
      return false;
    }
  }

  static async delOne(id) {
    const res = await this.connectDB(async (db) => {
      const rrr = await db.delOne(id);
      return rrr;
    });
  }
}
/*=========================================
   哔站昵称功能对IndexedDB 进行的封装  结束
==========================================*/

/* =======================================
    所有数据库表初始化   开始
======================================= */
class DBInit {
  static dbName = "bilibili_pxo";
  static dbV = "1";
  static storeList = [
    {
      name: "B站备注表",
      conf: {
        uniqueIndex: ["bid"],
        normalIndex: ["nick_name"],
        DB_NAME: "bilibili_pxo",
        storeName: "my_friends",
      },
      data: [
      ],
    },
    {
      name: "配置项表",
      conf: {
        DB_NAME: "bilibili_pxo",
        storeName: "conf",
      },
      data: [
        {
          id: "bconf",
          simplifyIdx: false,
          autoWideMode: false,
          playerHeight: 700,
          memoMode: 0,
          importMode: 0,
        },
      ],
    },
  ];

  static async initAllDB() {
    for (let idx = 0; idx < this.storeList.length; idx++) {
      const myDb = await MyIndexedDB.create(
        this.dbName,
        idx * 1 + 1,
        this.storeList[idx]
      );
      MyIndexedDB.setDBVersion(idx * 1 + 1);
      setTimeout(() => {
        myDb.closeDB();
      }, 100);
    }
  }
}
/* =======================================
    所有数据库表初始化   结束
======================================= */

/* =======================================
    菜单UI部分   结束
======================================= */
class BMenu {
  static menuStyle = `
  @media (max-width: 1190px){
    div#pxoxq-b-menu .pxoxq-menu-wrap{
      display: block;
      overflow-y: scroll;
      scrollbar-width: thin;
      height: 340px;
    }
    #pxoxq-b-menu .pxoxq-menu-wrap::-webkit-scrollbar{
      width: 5px;
    }
    #pxoxq-b-menu .pxoxq-menu-wrap::-webkit-scrollbar-thumb{
      background-color: #FC6296;
      border-radius: 6px;
    }
  }

  /* 菜单最外层 */
  #pxoxq-b-menu{
    text-align: initial;
    font-size: 15px;
    z-index: 999;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0px;
    height: 340px;
    padding: 8px 10px;
    background-color: white;
    transition: all .24s linear;
    border-top: 1px solid #c3c3c3;
  }
  #pxoxq-b-menu.pxoxq-hide{
    padding: unset;
    height: 0;
  }
  #pxoxq-b-menu button{
    background-color: #FC6296;
    border: 1px solid white;
    color: white;
    font-size: 13px;
    padding: 1px 6px;
    border-radius: 5px;
  }
  #pxoxq-b-menu button:hover{
    border: 1px solid #c5c5c5;
  }
  #pxoxq-b-menu button:active{
    opacity: .7;
  }
  #pxoxq-b-menu .pxoxq-tag{
    position: absolute;
    width: 24px;
    text-align: center;
    color: white;
    padding: 0px 6px;
    left: 2px;
    top: -21px;
    background-color: #FC6296;
    border-radius: 4px 4px 0 0;
    user-select: none;
    transition: all .3s linear;
  }
  
  #pxoxq-b-menu .pxoxq-tag:hover{
    letter-spacing: 3px;
  }
  #pxoxq-b-menu .pxoxq-tag:active{
    opacity: .5;
  }
  #pxoxq-b-menu .pxoxq-menu-wrap{
    display: flex;
  }
  #pxoxq-b-menu .pxoxq-menu-col {
    height: 340px;
    min-height: 340px;
    overflow-y: scroll;
    scrollbar-width: thin;
  }
  #pxoxq-b-menu .pxoxq-menu-col::-webkit-scrollbar{
    width: 5px;
  }
  #pxoxq-b-menu .pxoxq-menu-col::-webkit-scrollbar-thumb{
    background-color: #FC6296;
    border-radius: 6px;
  }
  #pxoxq-b-menu .pxoxq-menu-wrap .pxoxq-setting-wrap{
    flex-grow: 1;
  }
  #pxoxq-b-menu .setting-row:not(.import-row) {
    padding: 4px 0;
    display: flex;
    gap: 3px;
  }
  #pxoxq-b-menu .setting-row .pxoxq-label{
    font-weight: 600;
    color: rgb(100, 100, 100);
  }
  #pxoxq-b-menu .pxoxq-setting-wrap .setting-box{
    display: flex;
    gap: 22px;
  }
  #pxoxq-b-menu .setting-row .pxoxq-inline-label{
    display: inline-block;
    margin-right: 20px;
  }
  #pxoxq-player-h{
    width: 300px;
  }
  #pxoxq-b-menu .setting-row.memo-mode-row{
    display: flex;
    padding-bottom: 10px;
  }
  #pxoxq-b-menu .setting-item-import{
    display: flex;
    margin-bottom: 10px;
  }
  #pxoxq-b-menu .frd-import-btn{
    margin-left: 40px;
  }
  /* 右边部分 */
  #pxoxq-b-menu .pxoxq-menu-wrap .pxoxq-frd-wrap{
    border-left: 1px solid #d1d1d1;
    padding-left: 10px;
  }
  #pxoxq-b-menu .pxoxq-right-header{
    display: flex;
    padding-bottom: 6px;
    margin-bottom: 5px;
    border-bottom: 1px dotted #b2b2b2;
  }
  #pxoxq-b-menu .pxoxq-right-header .pxoxq-right-title{
    font-size: 18px;
    flex-grow: 1;
    text-align: center;
    font-weight: 600;
    color: #4b4b4b;
  }
  /* 右边表格部分 */
  #pxoxq-b-menu .pxoxq-frd-tab{
    white-space: nowrap;
    height: 340px;
  }
  #pxoxq-b-menu .pxoxq-frd-tab .pxoxq-tbody{
    height: 280px;
    overflow-y: scroll;
    scrollbar-width: thin;
  }
  #pxoxq-b-menu .pxoxq-frd-tab .pxoxq-tbody::-webkit-scrollbar{
    width: 4px;
  }
  #pxoxq-b-menu .pxoxq-frd-tab .pxoxq-tbody::-webkit-scrollbar-thumb{
    background-color: #FC6296;
    border-radius: 5px;
  }
  #pxoxq-b-menu .pxoxq-frd-tab .pxoxq-thead{
    font-weight: 600;
  }
  #pxoxq-b-menu .pxoxq-frd-tab .pxoxq-tr{
    border-bottom: 1px solid #dadada;
    /* text-align: center; */
  }
  #pxoxq-b-menu .pxoxq-frd-tab .pxoxq-tr .pxoxq-cell{
    display: inline-block;
    text-align: center;
    font-size: 14px;
    padding: 2px 3px;
  }
  #pxoxq-b-menu .pxoxq-frd-tab .pxoxq-col-1{
    width: 30px;
  }
  #pxoxq-b-menu .pxoxq-frd-tab .pxoxq-col-2{
    width: 120px;
  }
  #pxoxq-b-menu .pxoxq-frd-tab .pxoxq-col-3{
    width: 120px;
  }
  #pxoxq-b-menu .pxoxq-frd-tab .pxoxq-col-4{
    width: 180px;
  }
  #pxoxq-b-menu .pxoxq-frd-tab .pxoxq-col-5{
    width: 100px;
  }
  #pxoxq-b-menu .pxoxq-frd-tab .pxoxq-memo-ipt{
    outline: none;
    border: unset;
    text-align: center;
    padding: 2px 3px;
  }
  #pxoxq-b-menu .pxoxq-frd-tab .pxoxq-memo-ipt.active{
    border-bottom: 1px solid #ffb3e3;
    color:#FC6296;
  }
`;

  static wrapId = "pxoxq-b-menu";

  static saveDelay = 200;

  static importJson = "";

  static init() {
    this.injectMemuHtml();
    this.injectStyle();
  }

  static injectMemuHtml() {
    // 参数初始化
    const wrap = $("#pxoxq-b-menu");
    ConfigDB.getConf().then(async (_conf) => {
      const friendTab = await this.genFriendTab();
      const leftMenu = `
<h3>备注模块设置</h3>
<div class="setting-row memo-mode-row">
  <div class="pxoxq-label pxoxq-inline-label">备注显示模式</div>
  <div class="pxoxq-radio-item">
    <input class="pxoxq-memo-mode" ${
      _conf.memoMode == 0 ? "checked" : ""
    } value="0" type="radio" name="memo-mode" id="nope">
    <label for="nope">关闭备注功能</label>
  </div>
  <div class="pxoxq-radio-item">
    <input class="pxoxq-memo-mode" ${
      _conf.memoMode == 1 ? "checked" : ""
    } value="1" type="radio" name="memo-mode" id="nick-first">
    <label for="nick-first">昵称（备注）</label>
  </div>
  <div class="pxoxq-radio-item">
    <input class="pxoxq-memo-mode" ${
      _conf.memoMode == 2 ? "checked" : ""
    } value="2" type="radio" name="memo-mode" id="memo-first">
    <label for="memo-first">备注（昵称）</label>
  </div>
  <div class="pxoxq-radio-item">
    <input class="pxoxq-memo-mode" ${
      _conf.memoMode == 3 ? "checked" : ""
    } value="3" type="radio" name="memo-mode" id="just-memo">
    <label for="just-memo">备注</label>
  </div>
</div>
<div class="setting-row import-row">
  <div class="pxoxq-setting-item setting-item-import">
    <div class="pxoxq-label pxoxq-inline-label">导入数据</div>
    <input class="pxoxq-import-mode" ${
      _conf.importMode == 0 ? "checked" : ""
    } id="ignore-same" value="0" type="radio" checked name="import-mode">
    <label for="ignore-same">跳过重复项</label>
    <input class="pxoxq-import-mode" ${
      _conf.importMode == 1 ? "checked" : ""
    } id="update-same" value="1" type="radio" name="import-mode">
    <label for="update-same">覆盖重复项</label>
    <button class="frd-import-btn" type="button">导入</button>
  </div>
  <div class="pxoxq-setting-item">
    <textarea placeholder="请输入数据..." name="pxoxq-frd-json" id="pxoxq-frd-json" cols="80" rows="10"></textarea>
  </div>
</div>
      `;
      if (wrap && wrap.length > 0) {
        this.flushConfTab();
        this.flushFrdTab();
      } else {
        const _html = `
        <div id="pxoxq-b-menu" class="pxoxq-hide">
        <div class="pxoxq-tag">:)</div>
        <div class="pxoxq-menu-wrap">
          <div class="pxoxq-menu-col pxoxq-setting-wrap">
            ${leftMenu}
          </div>
  
          <div class="pxoxq-frd-wrap">
            <div class="pxoxq-right-header">
              <div class="pxoxq-right-title">昵称数据</div>
              <button class="pxoxq-export-frd-btn" type="button">导出当前数据</button>
            </div>
            <div class="pxoxq-tab-wrap">
              <div class="pxoxq-frd-tab">
                <div class="pxoxq-tr pxoxq-thead">
                    <div class="pxoxq-cell pxoxq-col-1">ID</div>
                    <div class="pxoxq-cell pxoxq-col-2">BilibiliID</div>
                    <div class="pxoxq-cell pxoxq-col-3">昵称</div>
                    <div class="pxoxq-cell pxoxq-col-4">备注</div>
                    <div class="pxoxq-cell pxoxq-col-5">操作</div>
                </div>
                <div class="pxoxq-tbody">
                  ${friendTab}
                </div>
              </div>
              </div>
            </div>
          </div>
        </div>
        `;
        $("body").append(_html);
        this.addListener();
      }
    });
  }

  static async genFriendTab() {
    const friends = await BilibiliMemoDB.getAll();
    let _html = "";

    for (const friend of friends) {
      _html += `
<div class="pxoxq-tr pxoxq-frd-row pxoxq-frd-${friend.id}">
  <div class="pxoxq-cell pxoxq-col-1">${friend.id}</div>
  <div class="pxoxq-cell pxoxq-col-2" title="${friend.bid}">${friend.bid}</div>
  <div class="pxoxq-cell pxoxq-col-3">${friend.bname}</div>
  <div class="pxoxq-cell pxoxq-col-4">
    <input class="pxoxq-memo-ipt pxoxq-memo-ipt-${friend.id}" data-id="${friend.id}"  type="text" value="${friend.nick_name}" readonly>
  </div>
  <div class="pxoxq-cell pxoxq-col-5">
    <button class="pxoxq-memo-edit-btn  pxoxq-memo-edit-btn-${friend.id}" data-id="${friend.id}" type="button">编辑</button>
    <button class="pxoxq-memo-del-btn" data-id="${friend.id}" type="button">删除</button>
  </div>
</div>
      `;
    }
    return _html;
  }

  static flushFrdTab() {
    this.genFriendTab().then((_tabHtml) => {
      $("#pxoxq-b-menu .pxoxq-frd-tab .pxoxq-tbody").html(_tabHtml);
    });
  }

  static flushConfTab() {
    ConfigDB.getConf().then((_conf) => {
      const mmRadios = $(".pxoxq-memo-mode");
      for (const item of mmRadios) {
        if (item.value == _conf.memoMode) {
          item.checked = true;
        } else {
          item.checked = false;
        }
      }
      const modeRadios = $(".pxoxq-import-mode");
      for (const item of modeRadios) {
        if (item.value == _conf.memoMode) {
          item.checked = true;
        } else {
          item.checked = false;
        }
      }
    });
  }

  static injectStyle() {
    GM_addStyle(this.menuStyle);
  }

  static addListener() {
    const wrapIdSelector = `#${this.wrapId}`;

    // 面板展开、折叠
    $("body").on(
      "click",
      wrapIdSelector + " .pxoxq-tag",
      pxoDebounce(this.toggleMenuHandler, this.saveDelay)
    );

    // 备注模式选框
    $("body").on(
      "click",
      ".pxoxq-memo-mode",
      pxoDebounce(this.memoModeHandler, this.saveDelay)
    );

    // 导入数据模式
    $("body").on(
      "click",
      ".pxoxq-import-mode",
      pxoDebounce(this.importModeHandler, this.saveDelay)
    );

    // 导入数据
    $("body").on("click", ".frd-import-btn", this.importFriendHandler);

    // 导出数据
    $("body").on(
      "click",
      ".pxoxq-export-frd-btn",
      pxoDebounce(this.exportFrdHandler, this.saveDelay * 2)
    );

    // 双击比编辑
    $("body").on("dblclick", "input.pxoxq-memo-ipt", this.editMemoHandler);

    // 编辑按钮编辑
    $("body").on(
      "click",
      ".pxoxq-memo-edit-btn",
      pxoDebounce(this.editMemoHandler, this.saveDelay)
    );

    // 保存昵称（更新
    $("body").on(
      "click",
      ".pxoxq-memo-save-btn",
      pxoDebounce(this.updateMemoHandler, this.saveDelay)
    );

    // 删除备注
    $("body").on(
      "click",
      ".pxoxq-memo-del-btn",
      pxoDebounce(this.delMemoHandler, this.saveDelay)
    );
  }

  // 折叠、打开面板
  static toggleMenuHandler() {
    $("#pxoxq-b-menu").toggleClass("pxoxq-hide");
    // 刷新面板数据
    if (
      document
        .getElementById("pxoxq-b-menu")
        .classList.value.indexOf("pxoxq-hide") < 0
    ) {
      BMenu.flushConfTab();
      BMenu.flushFrdTab();
    } else {
    }
  }

  static delMemoHandler() {
    const id = parseInt(this.dataset.id);
    const memo = $(".pxoxq-memo-ipt-" + id).val();
    if (confirm(`是否要删除备注【${memo}】？`)) {
      BilibiliMemoDB.delOne(id);
      $(".pxoxq-frd-tab .pxoxq-frd-" + id).remove();
    }
  }

  static updateMemoHandler() {
    const id = this.dataset.id;
    let editBtn = $(".pxoxq-memo-edit-btn-" + id);
    const memoInput = $(".pxoxq-memo-ipt-" + id);
    // 都需编辑按钮复原
    $(editBtn).text("编辑");
    $(editBtn).removeClass("pxoxq-memo-save-btn");
    memoInput[0].readOnly = true;
    $(memoInput).removeClass("active");
    const val = memoInput[0].value;
    BilibiliMemoDB.updateByIdAndMemo(parseInt(id), val);
  }

  static editMemoHandler() {
    const id = this.dataset.id;
    // pxoxq-memo-ipt-2
    let editBtn = $(".pxoxq-memo-edit-btn-" + id);
    const memoInput = $(".pxoxq-memo-ipt-" + id);
    if (!memoInput[0].readOnly) {
      return;
    }

    // 都需要给编辑按钮变个东西
    $(editBtn).text("保存");
    $(editBtn).addClass("pxoxq-memo-save-btn");

    memoInput[0].readOnly = false;
    $(memoInput).addClass("active");
  }

  // 导出数据
  static exportFrdHandler() {
    BilibiliMemoDB.getAll().then((_datas) => {
      const json_str = JSON.stringify(_datas);
      const dataURI =
        "data:text/plain;charset=utf-8," + encodeURIComponent(json_str);
      const link = document.createElement("a");
      link.href = dataURI;
      link.download = `${DateUtils.getCurrDateTimeStr()}.txt`;
      link.click();
    });
  }

  // 导入数据
  static importFriendHandler() {
    const textNode = $("#pxoxq-frd-json");
    const val = $(textNode).val();
    if (!/\S+/.test(val)) return;
    ConfigDB.getConf().then(async (_conf) => {
      try {
        const datas = JSON.parse(val);
        if (Array.isArray(datas)) {
          const ignore_mode = _conf.importMode == 1 ? false : true;
          await BilibiliMemoDB.addOrUpdateMany(datas, ignore_mode);
          BMenu.flushFrdTab();
          alert("导入成功");
        } else {
          throw Error("数据格式错误！");
        }
      } catch (e) {
        alert("导入失败：" + e);
      }
    });
  }

  static importModeHandler() {
    ConfigDB.updateImportMode(this.value);
  }

  static memoModeHandler() {
    MemoGlobalConf.mode = this.value;
    ConfigDB.updateMemoMode(this.value);
  }
}
/* =======================================
    菜单UI部分   结束
======================================= */

/*............................................................................................
 Memo部分 开始
............................................................................................*/
/* =============================================
   一些配置参数   开始
=============================================*/
const memoClassPrefix = "pxo-memo";
const MemoGlobalConf = {
  mode: 1, // 【模式】 0：昵称替换成备注； 1：昵称(备注)； 2：(备注)昵称
  myFriends: [], // 好友信息列表
  memoClassPrefix,
  fansInputBlurDelay: 280, // 输入框防抖延迟
  fansInputBlurTimer: "",
  fansLoopTimer: "",
  memoStyle: `
  .content .be-pager li{
    z-index: 999;
    position: relative;
  }
  .pxo-frd{    
    color: #3fb9ffd4;
    font-weight:600;
    letter-spacing: 2px;
    border: 1px solid #ff88a973;
    border-radius: 6px;
    background: #ffa9c1a4;
    margin-top:-2px;
    padding: 2px 5px;}
  .h #h-name {
    background: #ffffffbd;
    padding: 5px 10px;
    border-radius: 6px;
    letter-spacing: 3px;
    line-height: 22px;
    font-size: 20px;
    box-shadow: 1px 1px 2px 2px #ffffff40;
    border: 1px solid #fff;
    color: #e87b99;
    overflow: hidden;
    transition:all .53s linear;
  }
  .h #h-name.hide{
    width:0px;
    padding:0px;
    height:0px;
    border:none;
  }
  .h .homepage-memo-input{
    border: none;
    outline:none;
    overflow:hidden;
    padding: 5px 6px;
    border-bottom:2px solid #ff0808;
    width: 230px;
    font-size: 17px;
    line-height: 22px;
    vertical-align: middle;
    background: #ffffffbd;;
    color: #f74979;
    font-weight:600;
    margin-right: 8px;
    transition:all .53s linear;
    border-radius: 5px 5px 0 0;
  }
  .h .homepage-memo-input.hide{
    width: 0px;
    padding: 0;
    border:none;

  }
  .${memoClassPrefix}-setting-box{
    display: inline-block;
    vertical-align:top;
    margin-top:-2px;
    line-height:20px;
    margin-left:18px;
  }
  .${memoClassPrefix}-setting-box div.btn{
    padding:2px 5px;
    user-select:none;
    display:inline-block;
    overflow: hidden;
    letter-spacing:2px;
    background:#e87b99cc;
    border:none;
    border-radius:5px;
    color:white;
    margin:0 3px;
    transition:all .53s linear;
  }
  .${memoClassPrefix}-setting-box div.btn.hide{
    height: 0px;
    width: 0px;
    opacity: 0.2;
    padding:0px;
  }
  .${memoClassPrefix}-setting-box div.btn:hover{
    box-shadow: 1px 1px 2px 1px #80808024;
    outline: .5px solid #e87b99fc;

  }
  .${memoClassPrefix}-setting-box input{
    border: none;
    outline:none;
    overflow:hidden;
    padding: 2px 3px;
    border-bottom:1px solid #c0c0c0;
    width: 190px;
    font-size: 16px;
    line-height: 18px;
    color: #ff739a;
    font-weight:600;
    vertical-align:top;
    transition:all .25s linear;
  }
  .${memoClassPrefix}-setting-box input.hide{
    width:0px;
    padding:0px;
  }
  `,
};
/* =============================================
   一些配置参数   结束
=============================================*/

/* =============================================
   定制日志输出   开始
=============================================*/
class MyLog {
  static prefix = "[BilibiliMemo]";

  static genMsg(msg, type = "") {
    return `${this.prefix} ${type}: ${msg}`;
  }

  static error(msg) {
    console.error(this.genMsg(msg, "error"));
  }

  static warn(msg) {
    console.warn(this.genMsg(msg, "warn"));
  }

  static success(msg) {
    console.info(this.genMsg(msg, "success"));
  }
  static log(msg, ...arg) {
    console.log(this.genMsg(msg), ...arg);
  }
}
/* =============================================
   定制日志输出   结束
=============================================*/

/* =============================================
   html 注入部分   开始
=============================================*/
class BilibiliMemoInjectoin {
  // 个人主页 替换 以及初始化
  static async injectUserHome(bid) {
    const user = await this.getUserInfoByBid(bid);
    elmGetter.get('#h-name').then(uname => {
      if(!uname) return
      let nickName = uname.innerHTML;
      if(user){
        $(uname).html(this.getNameStr(nickName, user.nick_name));
        $(uname).attr("data-id", user.id);
      }
      $(uname).attr("data-bid", bid);
      $(uname).attr("data-bname", nickName);
      // 添加备注模块
      const inputNode = `<input data-bname="${nickName}" data-bid="${bid}" class='${MemoGlobalConf.memoClassPrefix}-input hide homepage-memo-input'/>`
      $(uname).after(inputNode)
    })
  }
  // 个人主页 替换 更新
  static injectOneHomePage(user) {
    if (user) {
      const nickName = $(".h #h-name").attr("data-bname");
      $("#h-name").html(this.getNameStr(nickName, user.nick_name));
      $("#h-name").attr("data-id", user.id);
    }
  }

  // 个人关注、粉丝页替换 以及初始化
  static injectFanList() {
    elmGetter.each(".relation-list > li > div.content > a", async (user) => {
      try {
        let url = user.href;
        let uid = url.split("/")[3];
        const cPrefix = MemoGlobalConf.memoClassPrefix;
        if (!$(user.children).attr("data-bid")) {
          const userInfo = await this.getUserInfoByBid(uid);
          let nickName = $(user.children).html();
          $(user.children).attr("data-bname", nickName);
          $(user.children).attr("data-bid", uid);
          if (userInfo) {
            $(user.children).html(this.getNameStr(nickName, userInfo.nick_name));
            $(user.children).attr("data-id", userInfo.id);
            $(user).addClass("pxo-frd");
            $(user).addClass("pxo-frd-" + uid);
          }
          // 注入备注模块代码
          const memoBlock = `<div class='${cPrefix}-setting-${uid} ${cPrefix}-setting-box'>
            <input data-bname="${nickName}" data-bid='${uid}' class='${cPrefix}-input-${uid} hide'/>
            <div data-bid='${uid}' class='${cPrefix}-btn-bz btn bz-btn-${uid}'>备注</div>
            <div data-bid='${uid}' class='${cPrefix}-btn-cfm op-btn-${uid} btn cfm-btn-${uid} hide'>确认</div>
            <div data-bid='${uid}' class='${cPrefix}-btn-cancel op-btn-${uid} btn cancel-btn-${uid} hide'>取消</div>
            <div data-bid='${uid}' class='${cPrefix}-btn-del op-btn-${uid} btn del-btn-${uid} hide'>清除备注</div>
            </div>`;
          $(user).after(memoBlock);
        }
      } catch (e) {
        MyLog.error(e);
      }
    });
  }

  // 个人关注、粉丝页替换 单个
  static injectOneFans(user, userANode) {
    if (user && userANode) {
      const nickName = $(userANode.children).attr("data-bname");
      $(userANode.children).html(this.getNameStr(nickName, user.nick_name));
      $(userANode.children).attr("data-id", user.id);
      $(userANode).addClass("pxo-frd");
      $(userANode).addClass("pxo-frd-" + user.bid);
    }
  }

  static replaceMemo(uri) {
    /*
    uri 一共有几种形式：
    https://space.bilibili.com/28563843/fans/follow
    https://space.bilibili.com/28563843/fans/follow?tagid=-1
    https://space.bilibili.com/28563843/fans/fans
    https://space.bilibili.com/472118057/?spm_id_from=333.999.0.0
    
    1、换页是页内刷新，需要给页码搞个点击事件
    2、个人页形式跟其他不太一样
    */
    const uType = this.judgeUri(uri);
    // MyLog.success(`类型是：[${uType}]  ${uri}`);
    switch (uType) {
      case "-1":
        MyLog.warn("Uri获取失败");
        break;
      case "+1": //粉丝关注
        BilibiliMemoInjectoin.injectFanList();
        break;
      default: // 个人主页
        BilibiliMemoInjectoin.injectUserHome(uType);
    }
  }

  static judgeUri(uri) {
    /*
    -1    uri为空
    +x    +1：粉丝、关注 | +* 后续
    xxxx  纯数字，个人主页
    */
    if (!uri) return "-1";

    const uri_parts = uri.split("/"); // 0-https 1-'' 2-host 3-bid 4-fans/query 5-fans/follow
    // 这是 space 域下的处理，之后可能扩展到其他更多页面模块
    if (uri_parts[2] && "space.bilibili.com" == uri_parts[2]) {
      // 粉丝、关注列表 【归一类，处理方式一样】
      if (
        uri_parts.length > 4 &&
        uri_parts[4] == "fans" &&
        /(?=fans)|(?=follow)/.test(uri_parts[5])
      ) {
        return "+1";
      }
      // 个人主页
      else {
        return uri_parts[3].split("?")[0];
      }
    }
    return "-1";
  }

  // 根据bid获取用户信息 直接从数据库取吧
  static async getUserInfoByBid(bid) {
    const res = await BilibiliMemoDB.getOneByBid(bid);
    return res;
  }

  // 根据昵称、备注获取最终显示名
  static getNameStr(nickName, remark) {
    // span 标签用于判断是否已经替换过
    if (nickName.indexOf("<span>") > 0) {
      return nickName;
    }
    let res = "";
    if (MemoGlobalConf.mode == 1) {
      res = remark;
    } else if (MemoGlobalConf.mode == 2) {
      res = nickName + `(${remark})`;
    } else if (MemoGlobalConf.mode == 3) {
      res = remark + `(${nickName})`;
    }
    return res + "<span>";
  }

  // 注入css样式到头部
  static injectCSS(css) {
    GM_addStyle(css);
  }
}
/* =============================================
   html 注入部分   结束
=============================================*/

/* =============================================
   通用函数部分   开始
=============================================*/
class BMemoUtils {
  // 关注、粉丝列表页 备注编辑模块 编辑模式 / 正常模式
  static toggleMemoBox(bid, editMode = true) {
    if (editMode) {
      $(`.btn.op-btn-${bid}`).removeClass("hide");
      $(`.${MemoGlobalConf.memoClassPrefix}-input-${bid}`).removeClass("hide");
      $(`.btn.bz-btn-${bid}`).addClass("hide");
    } else {
      $(`.btn.op-btn-${bid}`).addClass("hide");
      $(`.${MemoGlobalConf.memoClassPrefix}-input-${bid}`).addClass("hide");
      $(`.btn.bz-btn-${bid}`).removeClass("hide");
    }
  }

  // 个人主页 编辑模式 / 正常模式
  static toggleUserHomeEditMode(editMode = true) {
    if (editMode) {
      $(".h #h-name").addClass("hide");
      $(".homepage-memo-input").removeClass("hide");
    } else {
      $(".h #h-name").removeClass("hide");
      $(".homepage-memo-input").addClass("hide");
    }
  }

  // 个人空间主页 编辑模式初始化
  static homePageEditModeHandler(bid) {
    this.toggleUserHomeEditMode();
    const inputNode = $(".homepage-memo-input")[0];
    const bName = $(inputNode).attr("data-bname");
    $(inputNode).focus();
    BilibiliMemoDB.getOneByBid(bid).then((user) => {
      if (user) {
        $(inputNode).val(user.nick_name);
      } else {
        $(inputNode).val(bName);
      }
    });
  }

  // 个人空间主页 编辑确认
  static homePageSetMemoHandler(bid) {
    const inputNode = $(".homepage-memo-input")[0];
    const bName = $(inputNode).attr("data-bname");
    const val = $(inputNode).val();
    const val_reg = /\S.*\S/;
    if (val && val_reg.test(val)) {
      const memo = val_reg.exec(val)[0];
      BilibiliMemoDB.getOneByBid(bid).then(async (user) => {
        if (user) {
          if (memo != user.nick_name) {
            user.nick_name = memo;
            user.bname = bName;
            await BilibiliMemoDB.updateOne(user);
            BilibiliMemoInjectoin.injectOneHomePage(user);
          }
          this.toggleUserHomeEditMode(false);
        } else {
          if (memo != bName) {
            user = {
              bid,
              nick_name: memo,
              bname: bName,
            };
            await BilibiliMemoDB.addOne(user);
            user = await BilibiliMemoDB.getOneByBid(bid);
            BilibiliMemoInjectoin.injectOneHomePage(user);
          }
          this.toggleUserHomeEditMode(false);
        }
      });
    }
  }

  // 删除备注
  static delMemoHandler(bid) {
    BilibiliMemoDB.getOneByBid(bid).then(async (_item) => {
      if (_item) {
        if (confirm(`是否删除备注【${_item.nick_name}】?`)) {
          await BilibiliMemoDB.delOne(_item.id);
          $("a.pxo-frd-" + bid).removeClass("pxo-frd");
          const nameSpan = $("a.pxo-frd-" + bid + " span.fans-name");
          $(nameSpan).text(nameSpan[0].dataset.bname);
        }
      }
    });
  }

  // 粉丝、关注页 编辑模式初始化
  static editModeHandler(bid) {
    const inputNode = $(`.${MemoGlobalConf.memoClassPrefix}-input-${bid}`)[0];
    BilibiliMemoDB.getOneByBid(bid).then((user) => {
      const val = $(inputNode).val();
      if (!/\S+/.test(val)) {
        if (user) {
          $(inputNode).val(user.nick_name);
        } else {
          $(inputNode).val($(inputNode).attr("data-bname"));
        }
      }
    });
    this.toggleMemoBox(bid);
    $(inputNode).focus();
  }

  // 粉丝、关注页编辑确认
  static setMemoHandler(bid) {
    const inputNode = $(`.${MemoGlobalConf.memoClassPrefix}-input-${bid}`)[0];
    const val = $(inputNode).val();
    const val_reg = /\S.*\S/;
    const bName = $(inputNode).attr("data-bname");
    if (val_reg.test(val)) {
      const memo = val_reg.exec(val)[0];
      const userANode = $(inputNode).parent().siblings("a")[0];
      BilibiliMemoInjectoin.getUserInfoByBid(bid).then(async (user) => {
        if (user) {
          if (user.nick_name != memo) {
            user.nick_name = memo;
            user.bname = bName;
            await BilibiliMemoDB.updateOne(user);
            BilibiliMemoInjectoin.injectOneFans(user, userANode);
          }
          this.toggleMemoBox(bid, false);
        } else {
          if (memo != bName) {
            user = {
              bid,
              nick_name: memo,
              bname: bName,
            };
            await BilibiliMemoDB.addOne(user);
            user = await BilibiliMemoDB.getOneByBid(bid);
            BilibiliMemoInjectoin.injectOneFans(user, userANode);
          }
          this.toggleMemoBox(bid, false);
        }
      });
    }
  }
}
/* =============================================
   通用函数部分   结束
=============================================*/
/*-----------------初始化 开始-----------------*/
async function BilibiliMemoInit() {
  // 注入样式
  BilibiliMemoInjectoin.injectCSS(MemoGlobalConf.memoStyle);

    // 个人主页双击修改事件
    $('body').on(
      'dblclick',
      `.h #h-name`,
      function(event){
        const bid = event.currentTarget.dataset.bid;
        BMemoUtils.homePageEditModeHandler(bid)
      }
    )
  
    // 个人主页搜索框失去焦点事件
    $('body').on(
      'focusout',
      '.homepage-memo-input',
      function(event){
        const bid = event.currentTarget.dataset.bid;
        BMemoUtils.homePageSetMemoHandler(bid)
      }
    )
  
    // 粉丝、关注页 备注按钮点击事件：
    $("body").on(
      "click",
      `.${MemoGlobalConf.memoClassPrefix}-setting-box div.${MemoGlobalConf.memoClassPrefix}-btn-bz`,
      function (event) {
        const bid = event.currentTarget.dataset.bid;
        BMemoUtils.editModeHandler(bid)
      }
    );
  
    // 删除备注按钮点击事件
    $("body").on(
      "click",
      `.${MemoGlobalConf.memoClassPrefix}-setting-box div.${MemoGlobalConf.memoClassPrefix}-btn-del`,
      function (event) {
        const bid = event.currentTarget.dataset.bid;
        BMemoUtils.delMemoHandler(bid)
      }
    )
  
    // 粉丝、关注页确认按钮点击事件
    $("body").on(
      "click",
      `.${MemoGlobalConf.memoClassPrefix}-setting-box .${MemoGlobalConf.memoClassPrefix}-btn-cfm`,
      function (event) {
        clearTimeout(MemoGlobalConf.fansInputBlurTimer)
        const bid = event.currentTarget.dataset.bid;
        BMemoUtils.setMemoHandler(bid)
      }
    );
  
    // 粉丝、关注页取消按钮点击事件
    $("body").on(
      "click",
      `.${MemoGlobalConf.memoClassPrefix}-setting-box .${MemoGlobalConf.memoClassPrefix}-btn-cancel`,
      function (event) {
        clearTimeout(MemoGlobalConf.fansInputBlurTimer)
        const bid = event.currentTarget.dataset.bid;
        BMemoUtils.toggleMemoBox(bid, false)
  
      })
  
    // 粉丝、关注页输入框市区焦点事件
    $("body").on(
      "focusout",
      `.${MemoGlobalConf.memoClassPrefix}-setting-box input`,
      function (event) {
        clearTimeout(MemoGlobalConf.fansInputBlurTimer)
        MemoGlobalConf.fansInputBlurTimer = setTimeout(()=>{
          const bid = event.currentTarget.dataset.bid;
          BMemoUtils.toggleMemoBox(bid, false)
        }, MemoGlobalConf.fansInputBlurDelay)
  
      })
}
/*-----------------初始化 结束-----------------*/

/*........................................................................................................................................
 Memo部分 结束
........................................................................................................................................*/

async function flushConf() {
  const _conf = await ConfigDB.getConf();
  MemoGlobalConf.mode = _conf.memoMode;
  return true;
}

/*+++++++++++++++++++++++++++++++++++++
  主程序初始化  开始
+++++++++++++++++++++++++++++++++++++*/
async function bilibiliCustomInit() {
  if (!MyIndexedDB.getDBVersion()) {
    await DBInit.initAllDB();
  }
  // 从数据库获取数据，刷新配置参数
  await flushConf();
  BMenu.init();
  if (MemoGlobalConf.mode == 0) return;
  const uri = window.location.href;
  BilibiliMemoInit().then((r) => {
    BilibiliMemoInjectoin.replaceMemo(uri);
  });
}
/*+++++++++++++++++++++++++++++++++++++
  主程序初始化  结束
+++++++++++++++++++++++++++++++++++++*/


function toNewOne(){
    const newScriptUrl = 'https://scriptcat.org/zh-CN/script-show-page/3059'
    let timeDiff = 2 * 24 * 60 * 60 * 1e3
    const never = localStorage.getItem('neverShow')
    let neverEnd = localStorage.getItem('neverEndTime')
    const curr = new Date().getTime()
    neverEnd = Number(neverEnd)
    if(never == 1 && neverEnd && curr - neverEnd < timeDiff){
        return 
    }
    const dog = document.createElement('dialog')
    dog.style.cssText = `border:none;border-radius:8px;padding:18px;border: 5px solid #E16689;position:fixed;top: 20vh;margin: 0 auto;`
    document.body.appendChild(dog)
    const h = document.createElement('h2')
    h.style.cssText = `color:#E16689;text-align:center;`
    dog.appendChild(h)
    h.innerText = 'B站备注 -- 全新版本来啦！！！！'
    const content = `<div style="font-size: 18px;line-height: 40px;">新版本已完成适配，支持导入这个版本导出的数据（可以从这个版本导出数据，然后导入到新版本）。<br>
    迁移完数据后，可以卸载当前版本，只保留新版本。<br>
    新版本在这里安装：<a target="_blank" style="color:blue;outline:none;" href="${newScriptUrl}">${newScriptUrl}</a>
    </div>`
    dog.insertAdjacentHTML('beforeend', content)
    const btnD = document.createElement('div')
    dog.appendChild(btnD)
    const cfm = document.createElement('button')
    const neverShow = document.createElement('button')
    btnD.appendChild(cfm)
    btnD.appendChild(neverShow)
    btnD.style.cssText = `text-align: right;`
    cfm.innerText = '已知晓'
    neverShow.innerText = '不再展示'
    cfm.style.cssText = `margin-left: 20px;color:white;font-weight:600;font-size: 18px;border:2px solid pink;outline:none;background: #E16689;border-radius:4px;padding: 8px 10px;`
    neverShow.style.cssText= cfm.style.cssText
    dog.showModal()
    cfm.addEventListener('click', function(){
        dog.close()
    })
    neverShow.addEventListener('click', function(){
        dog.close()
        localStorage.setItem('neverShow', 1)
        localStorage.setItem('neverEndTime', new Date().getTime())
    })
}

(function () {
    toNewOne()
  bilibiliCustomInit().then((res) => {
    console.log("init over");
  });
})();
欢迎访问Greasy Fork镜像
