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()
+ },
+ }
+}