diff --git a/registry/lib/components/style/custom-navbar/built-in-items.ts b/registry/lib/components/style/custom-navbar/built-in-items.ts index 3829023a4..1a598ef0b 100644 --- a/registry/lib/components/style/custom-navbar/built-in-items.ts +++ b/registry/lib/components/style/custom-navbar/built-in-items.ts @@ -4,7 +4,8 @@ import { ranking } from './ranking/ranking' import { userInfo } from './user-info/user-info' import { logo } from './logo/logo' import { home } from './home/home' -import { gamesIframe, livesIframe, mangaIframe } from './iframe/iframe' +import { livesIframe, mangaIframe } from './iframe/iframe' +import { games } from './games/games' import { blanks } from './flexible-blank/flexible-blank' import { bangumi, music, shop, match, creations } from './simple-links/simple-links' import { upload } from './upload/upload' @@ -23,7 +24,7 @@ export const getBuiltInItems = (): CustomNavbarItemInit[] => [ bangumi, ranking, music, - gamesIframe, + games, livesIframe, shop, match, diff --git a/registry/lib/components/style/custom-navbar/games/GamesPopup.vue b/registry/lib/components/style/custom-navbar/games/GamesPopup.vue new file mode 100644 index 000000000..50e36efb6 --- /dev/null +++ b/registry/lib/components/style/custom-navbar/games/GamesPopup.vue @@ -0,0 +1,170 @@ + + + diff --git a/registry/lib/components/style/custom-navbar/games/games.ts b/registry/lib/components/style/custom-navbar/games/games.ts new file mode 100644 index 000000000..8a2fc7d21 --- /dev/null +++ b/registry/lib/components/style/custom-navbar/games/games.ts @@ -0,0 +1,14 @@ +import { CustomNavbarItemInit } from '../custom-navbar-item' + +export const games: CustomNavbarItemInit = { + name: 'games', + displayName: '游戏中心', + content: '游戏中心', + + touch: true, + href: 'https://game.bilibili.com/', + + boundingWidth: 420, + noPopupPadding: true, + popupContent: () => import('./GamesPopup.vue').then(m => m.default), +} diff --git a/registry/lib/components/style/custom-navbar/games/types.ts b/registry/lib/components/style/custom-navbar/games/types.ts new file mode 100644 index 000000000..2d868e59a --- /dev/null +++ b/registry/lib/components/style/custom-navbar/games/types.ts @@ -0,0 +1,11 @@ +export interface GameListItem { + href: string + title: string + poster: string +} + +export interface GameInfo { + panel: GameListItem[] + list: GameListItem[] + banner: GameListItem +} diff --git a/registry/lib/components/style/custom-navbar/iframe/iframe.ts b/registry/lib/components/style/custom-navbar/iframe/iframe.ts index 2be4cd53e..7e88d918e 100644 --- a/registry/lib/components/style/custom-navbar/iframe/iframe.ts +++ b/registry/lib/components/style/custom-navbar/iframe/iframe.ts @@ -21,15 +21,6 @@ const getIframeItem = (config: NavbarIframeConfig): CustomNavbarItemInit & Navba noPopupPadding: true, transparentPopup: true, }) -export const gamesIframe = getIframeItem({ - src: 'https://www.bilibili.com/page-proxy/game-nav.html', - href: 'https://game.bilibili.com/', - width: 680, - height: 260, - lazy: true, - displayName: '游戏中心', - iframeName: 'games', -}) export const livesIframe = getIframeItem({ src: 'https://live.bilibili.com/blackboard/dropdown-menu.html', href: 'https://live.bilibili.com', diff --git a/registry/lib/components/style/custom-navbar/mixins.ts b/registry/lib/components/style/custom-navbar/mixins.ts index 1452f0785..40438896f 100644 --- a/registry/lib/components/style/custom-navbar/mixins.ts +++ b/registry/lib/components/style/custom-navbar/mixins.ts @@ -1,3 +1,4 @@ +import { onMounted } from 'vue' import { CustomNavbarItem } from './custom-navbar-item' export const popperMixin = Vue.extend({ @@ -25,3 +26,23 @@ export const popperMixin = Vue.extend({ }, }, }) + +export interface UsePopperProps { + item: CustomNavbarItem + container: HTMLElement +} +export const usePopper = (props: UsePopperProps) => { + onMounted(() => { + const navBarItem = props.item + const containerElement = props.container + if (containerElement) { + navBarItem?.usePopper(containerElement, containerElement.children[0] as HTMLElement) + } + }) + return { + popupShow() { + const navBarItem = props.item + navBarItem?.popper?.update() + }, + } +}