Merge pull request #95 from magicdawn/feat-ranking

feat: ranking
magicdawn · May 16, 2024 · 7cb8b50 · 7cb8b50
2 parents 154f2f7 + da94daa
commit 7cb8b50
Show file tree

Hide file tree

Showing 40 changed files with 1,186 additions and 220 deletions.
diff --git a/src/common/emotion-css.ts b/src/common/emotion-css.ts
@@ -18,3 +18,12 @@ export const antdBtnTextStyle = css`
   display: inline-block;
   margin-top: 2px;
 `
+
+export const antdCss = {
+  btn: css`
+    ${flexCenterStyle}
+    >span {
+      ${antdBtnTextStyle}
+    }
+  `,
+}
diff --git a/src/components/AntdApp.tsx b/src/components/AntdApp.tsx
@@ -106,6 +106,11 @@ function GlobalStyle() {
             ${colorPrimaryIdentifier}: ${colorPrimary};
             --${APP_NAME}-color: ${c};
             --${APP_NAME}-bg-color: ${bg};
+
+            --${APP_NAME}-border-color: #eee;
+            body.dark {
+              --${APP_NAME}-border-color: #333;
+            }
           }
 
           .${APP_NAME_ROOT_CLASSNAME} {

diff --git a/src/components/ModalSettings/tab-panes/pane-filter.tsx b/src/components/ModalSettings/tab-panes/pane-filter.tsx
@@ -22,9 +22,10 @@ export function TabPaneFilter() {
       <div className={styles.settingsGroup}>
         <div className={styles.settingsGroupTitle}>
           内容过滤
-          <HelpInfo iconProps={{ name: 'Tips' }}>
+          <HelpInfo>
             启用过滤会大幅降低加载速度, 谨慎开启! <br />
-            仅推荐类 Tab 生效
+            视频/图文/影视: 仅推荐类 Tab 生效 <br />
+            UP/标题: 推荐类 / 综合热门 / 每周必看 / 排行榜 等 Tab 生效
           </HelpInfo>
           <SwitchSettingItem
             configKey='filterEnabled'
@@ -130,6 +131,8 @@ export function TabPaneFilter() {
                 <HelpInfo>
                   根据 UP 过滤视频
                   <br />
+                  作用范围: 推荐 / 综合热门 / 每周必看 / 排行榜
+                  <br />
                   P.S B站官方支持黑名单, 对于不喜欢的 UP 可以直接拉黑
                   <br />
                   P.S 这里是客户端过滤, 与黑名单功能重复, 后期版本可能会删除这个功能
@@ -154,7 +157,8 @@ export function TabPaneFilter() {
                 <span>标题</span>
                 <HelpInfo>
                   根据标题关键词过滤视频 <br />
-                  支持正则(i), 语法：/abc|\d+/
+                  支持正则(i), 语法：/abc|\d+/ <br />
+                  作用范围: 推荐 / 综合热门 / 每周必看 / 排行榜
                 </HelpInfo>
                 <SwitchSettingItem
                   configKey='filterByTitleEnabled'

diff --git a/src/components/ModalSettings/tab-panes/pane-video-source-tab-config.tsx b/src/components/ModalSettings/tab-panes/pane-video-source-tab-config.tsx
@@ -6,7 +6,7 @@ import { EAppApiDevice } from '$define/index.shared'
 import { IconPark } from '$icon-park'
 import { cx } from '$libs'
 import { useIsDarkMode } from '$modules/dark-mode'
-import { updateSettings, useSettingsSnapshot } from '$modules/settings'
+import { initialSettings, updateSettings, useSettingsSnapshot } from '$modules/settings'
 import { AntdMessage } from '$utility'
 import type { DragEndEvent } from '@dnd-kit/core'
 import { DndContext, PointerSensor, closestCenter, useSensor, useSensors } from '@dnd-kit/core'
@@ -19,6 +19,7 @@ import {
 } from '@dnd-kit/sortable'
 import { CSS } from '@dnd-kit/utilities'
 import { Button, Checkbox, Col, Popconfirm, Radio } from 'antd'
+import { cloneDeep, pick } from 'lodash'
 import styles from '../index.module.scss'
 
 export function TabPaneVideoSourceTabConfig() {
@@ -50,7 +51,9 @@ export function TabPaneVideoSourceTabConfig() {
               title='确定'
               description='确定不是手欠点着玩? 再点一次确定吧~'
               onConfirm={() => {
-                updateSettings({ hidingTabKeys: [], customTabKeysOrder: [] })
+                updateSettings(
+                  cloneDeep(pick(initialSettings, ['hidingTabKeys', 'customTabKeysOrder'])),
+                )
               }}
             >
               <Button>重置</Button>

diff --git a/src/components/ModalSettings/theme.shared.tsx b/src/components/ModalSettings/theme.shared.tsx
@@ -6,6 +6,8 @@ import LX_THEMES from './lx-themes.json'
 export const colorPrimaryIdentifier = `--${APP_NAME}-color-primary`
 export const colorPrimaryValue = `var(${colorPrimaryIdentifier})`
 
+export const borderColorValue = `var(--${APP_NAME}-border-color)`
+
 export interface LxTheme {
   id: string
   name: string

diff --git a/src/components/RecGrid/index.tsx b/src/components/RecGrid/index.tsx
@@ -12,7 +12,7 @@ import { VideoCard } from '$components/VideoCard'
 import type { VideoCardEmitter, VideoCardEvents } from '$components/VideoCard/index.shared'
 import { borderRadiusValue } from '$components/VideoCard/index.shared'
 import type { IVideoCardData } from '$components/VideoCard/process/normalize'
-import { type RecItemExtraType, type RecItemType } from '$define'
+import { type RecItemType, type RecItemTypeOrSeparator } from '$define'
 import { EApiType } from '$define/index.shared'
 import { $headerHeight } from '$header'
 import { IconPark } from '$icon-park'
@@ -471,7 +471,7 @@ export const RecGrid = forwardRef<RecGridRef, RecGridProps>(function RecGrid(
     )
   }
 
-  const renderItem = (item: RecItemExtraType) => {
+  const renderItem = (item: RecItemTypeOrSeparator) => {
     if (item.api === EApiType.Separator) {
       return (
         <Divider

diff --git a/src/components/RecGrid/useRefresh.ts b/src/components/RecGrid/useRefresh.ts
@@ -3,13 +3,15 @@ import { useRefInit } from '$common/hooks/useRefInit'
 import { useRefState } from '$common/hooks/useRefState'
 import { useCurrentUsingTab } from '$components/RecHeader/tab'
 import { ETabType, TabConfig } from '$components/RecHeader/tab.shared'
-import type { RecItemExtraType } from '$define'
+import type { RecItemTypeOrSeparator } from '$define'
 import type { IService } from '$modules/recommend/base'
 import { DynamicFeedRecService, dynamicFeedFilterStore } from '$modules/recommend/dynamic-feed'
 import { FavRecService } from '$modules/recommend/fav'
 import { PcRecService } from '$modules/recommend/pc'
 import { PopularGeneralService } from '$modules/recommend/popular-general'
 import { PopularWeeklyService } from '$modules/recommend/popular-weekly'
+import { RankingService } from '$modules/recommend/ranking/ranking-service'
+import { rankingStore } from '$modules/recommend/ranking/ranking-usage-info'
 import { WatchLaterRecService } from '$modules/recommend/watchlater'
 import { settings } from '$modules/settings'
 import { nextTick } from '$utility'
@@ -32,6 +34,7 @@ const serviceFactories = {
   [ETabType.Fav]: () => new FavRecService(),
   [ETabType.PopularGeneral]: () => new PopularGeneralService(),
   [ETabType.PopularWeekly]: () => new PopularWeeklyService(),
+  [ETabType.Ranking]: () => new RankingService(rankingStore.slug),
 } satisfies Partial<Record<ETabType, (options?: OnRefreshOptions) => IService>>
 
 export type ServiceMapKey = keyof typeof serviceFactories
@@ -65,7 +68,7 @@ export function useRefresh({
 }: {
   tab: ETabType
   debug: Debugger
-  fetcher: (opts: FetcherOptions) => Promise<RecItemExtraType[]>
+  fetcher: (opts: FetcherOptions) => Promise<RecItemTypeOrSeparator[]>
   recreateService: boolean
   preAction?: () => void | Promise<void>
   postAction?: () => void | Promise<void>
@@ -75,11 +78,11 @@ export function useRefresh({
 }) {
   const tab = useCurrentUsingTab()
 
-  const itemsCache = useRefInit<Partial<Record<ETabType, RecItemExtraType[]>>>(() => ({}))
+  const itemsCache = useRefInit<Partial<Record<ETabType, RecItemTypeOrSeparator[]>>>(() => ({}))
   const itemsHasCache = useRefInit<Partial<Record<ETabType, boolean>>>(() => ({}))
 
   const [hasMore, setHasMore, getHasMore] = useRefState(true)
-  const [items, setItems, getItems] = useRefState<RecItemExtraType[]>([])
+  const [items, setItems, getItems] = useRefState<RecItemTypeOrSeparator[]>([])
   useEffect(() => {
     tryit(() => {
       ;(unsafeWindow as any)[`${APP_KEY_PREFIX}_gridItems`] = items
@@ -166,7 +169,7 @@ export function useRefresh({
 
     await preAction?.()
 
-    let _items: RecItemExtraType[] = []
+    let _items: RecItemTypeOrSeparator[] = []
     let err: any
     const doFetch = async () => {
       try {
@@ -236,6 +239,9 @@ export function useRefresh({
         recreateFor(tab)
       }
     }
+    if (tab === ETabType.Ranking) {
+      recreateFor(tab)
+    }
 
     const _abortController = new AbortController()
     const _signal = _abortController.signal

diff --git a/src/components/RecHeader/RefreshButton.tsx b/src/components/RecHeader/RefreshButton.tsx
@@ -1,4 +1,4 @@
-import { antdBtnTextStyle, flexCenterStyle } from '$common/emotion-css'
+import { antdCss } from '$common/emotion-css'
 import type { OnRefresh } from '$components/RecGrid/useRefresh'
 import { useSettingsSnapshot } from '$modules/settings'
 import { shouldDisableShortcut } from '$utility/dom'
@@ -69,12 +69,14 @@ export const RefreshButton = forwardRef<RefreshButtonActions, RefreshButtonProps
       disabled={refreshing}
       className={className}
       style={style}
-      css={css`
-        ${flexCenterStyle}
-        &.ant-btn:not(:disabled):focus-visible {
-          outline: none;
-        }
-      `}
+      css={[
+        antdCss.btn,
+        css`
+          &.ant-btn:not(:disabled):focus-visible {
+            outline: none;
+          }
+        `,
+      ]}
       ref={btn}
       onClick={onClick}
     >
@@ -88,7 +90,7 @@ export const RefreshButton = forwardRef<RefreshButtonActions, RefreshButtonProps
       >
         <use href='#widget-roll'></use>
       </svg>
-      <span css={antdBtnTextStyle}>{text}</span>
+      <span>{text}</span>
     </Button>
   )
 })
diff --git a/src/components/RecHeader/index.tsx b/src/components/RecHeader/index.tsx
@@ -1,6 +1,6 @@
 import { baseDebug } from '$common'
 // import { useSticky } from 'react-use-sticky'
-import { antdBtnTextStyle, flexCenterStyle } from '$common/emotion-css'
+import { antdCss, flexCenterStyle } from '$common/emotion-css'
 import { useSticky } from '$common/hooks/useSticky'
 import { ModalSettings } from '$components/ModalSettings'
 import type { OnRefresh } from '$components/RecGrid/useRefresh'
@@ -176,8 +176,8 @@ export const RecHeader = forwardRef<
               />
 
               {showModalFeedEntry && (
-                <Button css={flexCenterStyle} onClick={showModalFeed}>
-                  <span css={antdBtnTextStyle}>查看更多</span>
+                <Button css={antdCss.btn} onClick={showModalFeed}>
+                  <span>查看更多</span>
                   <svg
                     css={css`
                       width: 12px;

diff --git a/src/components/RecHeader/tab.shared.tsx b/src/components/RecHeader/tab.shared.tsx
@@ -11,6 +11,7 @@ export enum ETabType {
   Fav = 'fav',
   PopularGeneral = 'popular-general',
   PopularWeekly = 'popular-weekly',
+  Ranking = 'ranking',
 }
 
 export type TabConfigItem = {
@@ -76,6 +77,14 @@ export const TabConfig: Record<ETabType, TabConfigItem> = {
     desc: '每周五晚 18:00 更新',
     anonymousUsage: true,
   },
+  [ETabType.Ranking]: {
+    icon: 'Ranking',
+    iconProps: { size: 15 },
+    label: '排行榜',
+    desc: '排行榜根据稿件内容质量，近期的数据综合展示，动态更新',
+    anonymousUsage: true,
+    swr: true,
+  },
 }
 
 export function TabIcon({

diff --git a/src/components/VideoCard/child-components/VideoCardActions.tsx b/src/components/VideoCard/child-components/VideoCardActions.tsx
@@ -2,7 +2,7 @@ import { colorPrimaryValue } from '$components/ModalSettings/theme.shared'
 import { cx } from '$libs'
 import { css } from '@emotion/react'
 import { useHover } from 'ahooks'
-import type { ComponentProps, ReactNode } from 'react'
+import { type ComponentProps, type ReactNode } from 'react'
 
 const baseZ = 3
 
@@ -83,20 +83,34 @@ export function VideoCardActionButton({
   tooltip: string
   visible?: boolean
 } & ComponentProps<'div'>) {
-  const wrapper = useRef(null)
-  const hovering = useHover(wrapper)
   visible ??= true
+  const { triggerRef, tooltipEl } = useTooltip({ inlinePosition, tooltip })
   return (
     <div
       {...divProps}
-      ref={wrapper}
+      ref={triggerRef}
       css={[S.button(visible)]}
       className={cx('action-button', className)}
     >
       {icon}
-      <span style={{ display: hovering ? 'block' : 'none' }} css={S.tooltip(inlinePosition)}>
-        {tooltip}
-      </span>
+      {tooltipEl}
     </div>
   )
 }
+
+export function useTooltip({
+  inlinePosition,
+  tooltip,
+}: {
+  inlinePosition: InlinePosition
+  tooltip: ReactNode
+}) {
+  const triggerRef = useRef(null)
+  const hovering = useHover(triggerRef)
+  const tooltipEl = (
+    <span style={{ display: hovering ? 'block' : 'none' }} css={S.tooltip(inlinePosition)}>
+      {tooltip}
+    </span>
+  )
+  return { triggerRef, tooltipEl }
+}
diff --git a/src/components/VideoCard/child-components/VideoCardBottom.tsx b/src/components/VideoCard/child-components/VideoCardBottom.tsx
@@ -33,6 +33,7 @@ export function VideoCardBottom({
     // adpater specific
     appBadge,
     appBadgeDesc,
+    rankingDesc,
   } = cardData
 
   const isNormalVideo = goto === 'av'
@@ -123,21 +124,24 @@ export function VideoCardBottom({
             css={css`
               display: flex;
               margin-top: 15px;
+              column-gap: 5px;
             `}
           >
-            <a href={authorHref} target='_blank' onClick={handleVideoLinkClick}>
-              {authorFace ? (
-                <Avatar src={getAvatarSrc(authorFace)} />
-              ) : (
-                <Avatar>{authorName?.[0] || appBadgeDesc?.[0] || ''}</Avatar>
-              )}
-            </a>
+            {!!authorMid && (
+              <a href={authorHref} target='_blank' onClick={handleVideoLinkClick}>
+                {authorFace ? (
+                  <Avatar src={getAvatarSrc(authorFace)} />
+                ) : (
+                  <Avatar>{authorName?.[0] || appBadgeDesc?.[0] || ''}</Avatar>
+                )}
+              </a>
+            )}
 
             <div
               css={css`
                 flex: 1;
-                margin-left: 10px;
                 overflow: hidden;
+                margin-left: 5px;
               `}
             >
               <h3
@@ -203,6 +207,17 @@ export function VideoCardBottom({
                     {!!appBadgeDesc && <span className={styles.bangumiDesc}>{appBadgeDesc}</span>}
                   </a>
                 </Case>
+                <Case condition={rankingDesc}>
+                  <div
+                    css={css`
+                      color: #999;
+                      font-size: 12px;
+                      margin-top: 2px;
+                    `}
+                  >
+                    {rankingDesc}
+                  </div>
+                </Case>
               </Switch>
             </div>
           </div>