开发原因

1.关注up过多，直播黄金时间，我想看的up每次找都需要点击更多，然后进行翻页。 为了解决这个痛点，所以制作了这一款插件。

版本迭代

1.第一个版本长这样有点丑。其实是因为懒，有些问题解决不了，所以用了别的方法实现了该功能。

2.最新版本就是我要的效果

1.不在线图片是灰色 2.点击图片即可跳到up主页 3.点击标题跳到直播间

安装地址: greasyfork.org/zh-CN/scrip…

开发技术

1.使用的是vite-plugin-monkey脚手架开发 2.react框架+antd-design

核心代码

function App() {
  const [open, setOpen] = useState(false);
  const [upListData, setUpListData] = useState([])
  // 当前页数
  const [currentPage, setCurrentPage] = useState(1)
  // 总数
  const [totalData, setTotalData] = useState(1)
  const showDrawer = () => {
    console.log(upListData)
    if (document.querySelector('.bili-header')) {
      document.querySelector('.bili-header').style.display='none'
    } else if (document.querySelector('.international-header.report-wrap-module')) {
      document.querySelector('.international-header.report-wrap-module').style.display = 'none'
    }
    setOpen(true);
  };
  const onClose = () => {
    setOpen(false);
    if (document.querySelector('.bili-header')) {
      document.querySelector('.bili-header').style.display=''
    } else if (document.querySelector('.international-header.report-wrap-module')) {
      document.querySelector('.international-header.report-wrap-module').style.display = ''
    }
  };

  useEffect(() => {
   request('get','https://api.live.bilibili.com/xlive/web-ucenter/user/following?page=1&page_size=9').then(
    res => {
      console.log(res)
      setUpListData(res.data.list)
      console.log(res.data.totalPage)
      setTotalData(res.data.count)
    }
   ).catch(
    err => {
      console.log(err)
    }
   )
  }, [])

  // 跳转页面
  const jumpPage = (jumpPage) => {
    request('get',`https://api.live.bilibili.com/xlive/web-ucenter/user/following?page=${jumpPage}&page_size=9`).then(
    res => {
      console.log(res)
      setUpListData(res.data.list)
      console.log(res.data.totalPage)
      setTotalData(res.data.count)
    }
   ).catch(
    err => {
      console.log(err)
    }
   )
  }

  const jumpHomePage = (uid) => {
    window.open(`https://space.bilibili.com/${uid}`)
  }

  const getImgStyle = (status) => {
    let selectFilter = status === 1 ? 'grayscale(0)' : 'grayscale(100%)'

    return {
      filter: selectFilter,
      cursor: 'pointer'
    }
  }

  return (
    <div>
      <Button type="primary" onClick={showDrawer}>
        打开直播up列表
      </Button>
      <Drawer
        title="你关注的up"
        placement="right"
        onClose={onClose}
        open={open}
      >
        <List
          itemLayout="horizontal"
          dataSource={upListData}
          renderItem={(item) => (
            <List.Item
              style={{
                backgroundColor: `${item.live_status === 1 ? 'skyblue' : ''}`,
              }}
            >
              <List.Item.Meta
                avatar={
                  <Avatar
                    src={item.face}
                    className={item.live_status === 1 ? 'imgOrigin' : 'imgGray'}
                    // style={getImgStyle(item.live_status)}
                    onClick={()=> {
                      jumpHomePage(item.uid)
                    }}
                    // ref={(node) => {
                    //   if (node && item.live_status === 0) {
                    //     node.style.setProperty('filter', 'grayscale(100%)', 'important');
                    //   }
                    // }}
                  />
                }
                title={
                  <div>
                    <span
                      style={{
                        backgroundColor: `${
                          item.live_status === 1 ? 'skyblue' : ''
                        }`,
                      }}
                    >
                      {item.uname}
                      {/* {item.live_status === 1 ? '开播' : '未开播'} */}
                    </span>
                  </div>
                }
                description={
                  <a
                    href={`https://live.bilibili.com/${item.roomid}`}
                    target="_blank"
                  >
                    直播标题: {item.title}
                  </a>
                }
              />
            </List.Item>
          )}
        />
        <Pagination
          current={currentPage}
          total={totalData}
          pageSize={9}
          size="small"
          simple
          onChange={(page) => {
            console.log(page);
            setCurrentPage(page);
            jumpPage(page);
          }}
        />
      </Drawer>
    </div>
  );
}

难点

1.图片变灰使用filter:grayscale(100%) 就会生效，但是谷歌浏览器优先级不够导致不生效。但是行内样式又不能写!important. 百度一番操作，使用ref,但是点击下一页再回去都变灰了，不知道什么原因。于是我对className进行三元表达式的判断。成功解决。