From 89fb5495c050a78acf3069b7e6e77aecfb66fd00 Mon Sep 17 00:00:00 2001
From: mantou132 <709922234@qq.com>
Date: Sun, 24 Dec 2023 18:39:56 +0800
Subject: [PATCH] Use `<dy-list>`

---
 packages/webapp/package.json               |  4 +-
 packages/webapp/src/app.ts                 | 16 +------
 packages/webapp/src/elements/nav-link.ts   | 20 +++++++++
 packages/webapp/src/modules/chat.ts        | 30 ++++++++++---
 packages/webapp/src/modules/friend-item.ts |  6 +--
 packages/webapp/src/modules/friend-list.ts |  1 +
 packages/webapp/src/modules/game-item.ts   |  9 +---
 packages/webapp/src/modules/game-list.ts   | 52 +++++++++++++++++-----
 packages/webapp/src/modules/guest.ts       |  2 +-
 packages/webapp/src/modules/invite-item.ts |  2 +-
 packages/webapp/src/modules/msg.ts         |  6 +--
 packages/webapp/src/modules/mt-nav.ts      |  2 +-
 packages/webapp/src/modules/nav.ts         | 39 ++++++++++------
 packages/webapp/src/modules/stage.ts       |  2 +-
 packages/webapp/src/pages/mt-games.ts      |  8 ++--
 packages/webapp/src/store.ts               |  6 ++-
 yarn.lock                                  | 16 +++++++
 17 files changed, 151 insertions(+), 70 deletions(-)
 create mode 100644 packages/webapp/src/elements/nav-link.ts

diff --git a/packages/webapp/package.json b/packages/webapp/package.json
index 07c2fa8d..8ac7af6c 100644
--- a/packages/webapp/package.json
+++ b/packages/webapp/package.json
@@ -12,14 +12,14 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@mantou/gem": "^1.7.4",
+    "@mantou/gem": "^1.7.5",
     "@mantou/nes": "^1.0.14",
     "@mantou/nes-sandbox": "^0.0.13",
     "@nesbox/arcade": "^0.0.1",
     "@nesbox/fceux": "^0.0.1",
     "@nesbox/mtapp": "^0.0.1",
     "@nesbox/wasm4": "^0.0.1",
-    "duoyun-ui": "^1.1.4",
+    "duoyun-ui": "^1.1.5",
     "front-matter": "^4.0.2",
     "graphql": "^16.2.0",
     "jszip": "^3.10.0",
diff --git a/packages/webapp/src/app.ts b/packages/webapp/src/app.ts
index 50e23001..35528a71 100644
--- a/packages/webapp/src/app.ts
+++ b/packages/webapp/src/app.ts
@@ -15,7 +15,7 @@ import {
 } from '@mantou/gem';
 import { hotkeys } from 'duoyun-ui/lib/hotkeys';
 import { Loadbar } from 'duoyun-ui/elements/page-loadbar';
-import { createPath, RouteItem } from '@mantou/gem/elements/route';
+import { createPath } from '@mantou/gem/elements/route';
 import { routes, locationStore } from 'src/routes';
 import { DuoyunRouteElement } from 'duoyun-ui/elements/route';
 import { mediaQuery } from '@mantou/gem/helper/mediaquery';
@@ -48,18 +48,6 @@ import 'src/modules/friend-list';
 import 'src/modules/chat';
 import 'src/modules/nav';
 
-const navRoutes: RouteItem[] = [
-  {
-    ...routes.game,
-    getContent: (params) => html`<m-nav page="game" id=${params[paramKeys.GAME_ID]}></m-nav>`,
-  },
-  {
-    ...routes.room,
-    content: html`<m-nav page="room"></m-nav>`,
-  },
-  { pattern: '*', content: html`<m-nav></m-nav>` },
-];
-
 const style = createCSSSheet(css`
   :host {
     display: contents;
@@ -216,7 +204,7 @@ export class AppRootElement extends GemElement {
     return html`
       ${mediaQuery.isPhone ? html`<m-side-nav ?open=${configure.sideNavState}></m-side-nav>` : ''}
       <div class=${classMap({ app: true, out: !!configure.sideNavState })}>
-        <dy-route .locationStore=${locationStore} .routes=${navRoutes}></dy-route>
+        <m-nav></m-nav>
         <div tabindex="-1" class="content" ?inert=${configure.sideNavState} ref=${this.contentRef.ref}>
           <main style="display: contents">
             <dy-route
diff --git a/packages/webapp/src/elements/nav-link.ts b/packages/webapp/src/elements/nav-link.ts
new file mode 100644
index 00000000..7949ea51
--- /dev/null
+++ b/packages/webapp/src/elements/nav-link.ts
@@ -0,0 +1,20 @@
+import { connectStore, customElement, state } from '@mantou/gem';
+import { DuoyunActiveLinkElement } from 'duoyun-ui/elements/link';
+import { locationStore } from 'src/routes';
+
+/**
+ * @customElement nesbox-nav-link
+ */
+@customElement('nesbox-nav-link')
+@connectStore(locationStore)
+export class NesboxNavLinkElement extends DuoyunActiveLinkElement {
+  @state match: boolean;
+
+  constructor() {
+    super();
+    this.effect(
+      () => (this.match = this.active),
+      () => [locationStore.path],
+    );
+  }
+}
diff --git a/packages/webapp/src/modules/chat.ts b/packages/webapp/src/modules/chat.ts
index c8b37a5d..4be2fcd9 100644
--- a/packages/webapp/src/modules/chat.ts
+++ b/packages/webapp/src/modules/chat.ts
@@ -10,6 +10,7 @@ import {
   RefObject,
 } from '@mantou/gem';
 import { hotkeys } from 'duoyun-ui/lib/hotkeys';
+import { fadeOut, commonAnimationOptions } from 'duoyun-ui/lib/animations';
 
 import { changeFriendChatDraft, friendStore, toggleFriendChatState } from 'src/store';
 import { createMessage, getMessages, readMessage } from 'src/services/api';
@@ -39,6 +40,13 @@ const style = createCSSSheet(css`
     box-shadow: 0 0.3em 0.75em rgba(0, 0, 0, calc(${theme.maskAlpha} - 0.15));
     box-sizing: border-box;
     border-radius: ${theme.normalRound};
+    animation: show 0.15s ${theme.timingFunction} forwards;
+  }
+  @keyframes show {
+    from {
+      transform: translate(0, 50%);
+      opacity: 0;
+    }
   }
   .header {
     display: flex;
@@ -119,28 +127,36 @@ export class MChatElement extends GemElement {
     })(evt);
   };
 
+  willMount() {
+    this.memo(
+      () => (this.inert = !friendStore.friendChatState),
+      () => [friendStore.friendChatState],
+    );
+  }
+
   mounted = () => {
     this.effect(
       async () => {
         if (friendStore.friendChatState) {
           await getMessages(friendStore.friendChatState);
-        }
-        // 保证用户看到信息后才清除未读
-        if (friendStore.friendChatState) {
-          readMessage(friendStore.friendChatState);
+          // 保证用户看到信息后才清除未读
+          friendStore.friendChatState && readMessage(friendStore.friendChatState);
+        } else {
+          await this.animate(fadeOut, commonAnimationOptions).finished;
+          this.inert = false;
+          this.update();
         }
       },
       () => [friendStore.friendChatState],
     );
     this.effect(
-      () => {
-        this.messageRef.element?.scrollTo(0, 10000);
-      },
+      () => this.messageRef.element?.scrollTo(0, 10000),
       () => [friendStore.messageIds[friendStore.friendChatState || 0]],
     );
   };
 
   render = () => {
+    if (this.inert) return undefined;
     if (!friendStore.friendChatState) {
       return html`
         <style>
diff --git a/packages/webapp/src/modules/friend-item.ts b/packages/webapp/src/modules/friend-item.ts
index 03e8e6f4..2fdcb0e5 100644
--- a/packages/webapp/src/modules/friend-item.ts
+++ b/packages/webapp/src/modules/friend-item.ts
@@ -25,10 +25,10 @@ const style = createCSSSheet(css`
     padding: 0.5em;
     gap: 0.5em;
   }
-  :host(:where(:--active, [data-active], :hover, :focus)) {
+  :host(:where(:state(active), [data-active], :hover, :focus)) {
     background-color: ${theme.lightBackgroundColor};
   }
-  :host .action:where(:--active, [data-active], :hover, :focus) {
+  :host .action:where(:state(active), [data-active], :hover, :focus) {
     background-color: ${theme.hoverBackgroundColor};
   }
   .avatar {
@@ -57,7 +57,7 @@ const style = createCSSSheet(css`
     padding: 0.2em;
   }
   :host(:hover) .action,
-  .action:where(:--active, [data-active], :hover) {
+  .action:where(:state(active), [data-active], :hover) {
     display: inline-flex;
   }
 `);
diff --git a/packages/webapp/src/modules/friend-list.ts b/packages/webapp/src/modules/friend-list.ts
index 469ff1cd..d0f38ef7 100644
--- a/packages/webapp/src/modules/friend-list.ts
+++ b/packages/webapp/src/modules/friend-list.ts
@@ -63,6 +63,7 @@ export class MFriendListElement extends GemElement {
       });
       applyFriend(input.value);
     } finally {
+      // use `focusVisible: false`
       activeElement?.focus();
     }
   };
diff --git a/packages/webapp/src/modules/game-item.ts b/packages/webapp/src/modules/game-item.ts
index 3449eef5..e52b7575 100644
--- a/packages/webapp/src/modules/game-item.ts
+++ b/packages/webapp/src/modules/game-item.ts
@@ -30,6 +30,7 @@ import 'duoyun-ui/elements/modal';
 const style = createCSSSheet(css`
   :host {
     position: relative;
+    display: block;
   }
   .actions {
     position: absolute;
@@ -101,13 +102,7 @@ export class MGameItemElement extends GemElement {
 
   render = () => {
     return html`
-      <img
-        draggable="false"
-        class="cover"
-        loading="lazy"
-        @click=${this.#onMoreClick}
-        src=${getCDNSrc(this.game.preview)}
-      />
+      <img draggable="false" class="cover" @click=${this.#onMoreClick} src=${getCDNSrc(this.game.preview)} />
       <dy-space class="actions" size="small">
         <dy-button data-cy="start" class="play" small ?hidden=${mediaQuery.isPhone} @click=${this.#onGameClick}>
           ${i18n.get('page.game.start')}
diff --git a/packages/webapp/src/modules/game-list.ts b/packages/webapp/src/modules/game-list.ts
index 23ad0407..7e7b8742 100644
--- a/packages/webapp/src/modules/game-list.ts
+++ b/packages/webapp/src/modules/game-list.ts
@@ -7,9 +7,11 @@ import {
   css,
   connectStore,
   boolattribute,
-  repeat,
   styleMap,
   numattribute,
+  RefObject,
+  refobject,
+  history,
 } from '@mantou/gem';
 import { isNotNullish } from 'duoyun-ui/lib/types';
 import { mediaQuery } from '@mantou/gem/helper/mediaquery';
@@ -25,10 +27,13 @@ import { gameKindList, gameSeriesList } from 'src/enums';
 import { ScGameKind, ScGameSeries } from 'src/generated/graphql';
 import { icons } from 'src/icons';
 
+import type { DuoyunListElement, PersistentState } from 'duoyun-ui/elements/list';
+
 import 'duoyun-ui/elements/heading';
 import 'duoyun-ui/elements/divider';
 import 'duoyun-ui/elements/select';
 import 'duoyun-ui/elements/picker';
+import 'duoyun-ui/elements/list';
 import 'duoyun-ui/elements/use';
 import 'src/modules/game-item';
 
@@ -52,7 +57,7 @@ const style = createCSSSheet(css`
     align-items: center;
     gap: 1em;
   }
-  .list {
+  .list::part(list) {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(12em, 1fr));
     grid-template-rows: max-content;
@@ -66,6 +71,9 @@ const style = createCSSSheet(css`
   }
 `);
 
+// 只缓存 all 列表，不然串数据
+let persistentState: PersistentState | undefined;
+
 /**
  * @customElement m-game-list
  */
@@ -73,8 +81,11 @@ const style = createCSSSheet(css`
 @adoptedStyle(style)
 @connectStore(store)
 @connectStore(locationStore)
+@connectStore(history.store)
 @connectStore(i18n.store)
 export class MGameListElement extends GemElement {
+  @refobject listRef: RefObject<DuoyunListElement>;
+
   @boolattribute favorite: boolean;
   @boolattribute recent: boolean;
   @boolattribute new: boolean;
@@ -125,6 +136,14 @@ export class MGameListElement extends GemElement {
     }
   };
 
+  #renderItem = (id: number) => {
+    const game = store.games[id];
+    if (!game) return html``;
+    return html`<m-game-item .game=${game} .favorited=${this.#favSet.has(id)}></m-game-item>`;
+  };
+
+  #getKey = (id: number) => id;
+
   #filteredData?: number[] = [];
   willMount = () => {
     this.memo(
@@ -165,6 +184,17 @@ export class MGameListElement extends GemElement {
     );
   };
 
+  mounted = () => {
+    this.effect(
+      () => {
+        if (this.all) {
+          persistentState = this.listRef.element?.persistentState;
+        }
+      },
+      () => [history.getParams().path],
+    );
+  };
+
   render = () => {
     if ((this.recent || this.new) && (!this.#data || this.#data.length < 4)) {
       return html`
@@ -249,14 +279,16 @@ export class MGameListElement extends GemElement {
             </div>
             <dy-divider></dy-divider>
           `}
-      <div class="list">
-        ${repeat(
-          this.#filteredData || [],
-          (id) =>
-            store.games[id] &&
-            html`<m-game-item .game=${store.games[id]!} .favorited=${this.#favSet.has(id)}></m-game-item>`,
-        )}
-      </div>
+      <dy-list
+        class="list"
+        ref=${this.listRef.ref}
+        .items=${this.#filteredData}
+        .key=${store.favoriteIds}
+        .infinite=${this.all}
+        .getKey=${this.#getKey}
+        .renderItem=${this.#renderItem}
+        .persistentState=${persistentState}
+      ></dy-list>
     `;
   };
 }
diff --git a/packages/webapp/src/modules/guest.ts b/packages/webapp/src/modules/guest.ts
index 289fdb0a..8da8b00a 100644
--- a/packages/webapp/src/modules/guest.ts
+++ b/packages/webapp/src/modules/guest.ts
@@ -23,7 +23,7 @@ const style = createCSSSheet(css`
     padding: 4px;
     border-radius: ${theme.normalRound};
   }
-  .menu:where(:hover, :--active, [data-active]) {
+  .menu:where(:hover, :state(active), [data-active]) {
     background-color: ${theme.hoverBackgroundColor};
   }
 `);
diff --git a/packages/webapp/src/modules/invite-item.ts b/packages/webapp/src/modules/invite-item.ts
index 810bfc13..d314eaed 100644
--- a/packages/webapp/src/modules/invite-item.ts
+++ b/packages/webapp/src/modules/invite-item.ts
@@ -32,7 +32,7 @@ const style = createCSSSheet(css`
     padding: 0.2em;
     opacity: 0.7;
   }
-  .action:where(:--active, [data-active], :hover, :focus) {
+  .action:where(:state(active), [data-active], :hover, :focus) {
     opacity: 1;
   }
   .invite-tip {
diff --git a/packages/webapp/src/modules/msg.ts b/packages/webapp/src/modules/msg.ts
index 466e2420..09506933 100644
--- a/packages/webapp/src/modules/msg.ts
+++ b/packages/webapp/src/modules/msg.ts
@@ -21,7 +21,7 @@ const style = createCSSSheet(css`
     flex-direction: column;
     align-items: flex-start;
   }
-  :host(:where(:--self, [data-self])) {
+  :host(:where(:state(self), [data-self])) {
     align-items: flex-end;
   }
   .body {
@@ -32,7 +32,7 @@ const style = createCSSSheet(css`
     background-color: ${theme.noticeColor};
     border-radius: ${theme.smallRound};
   }
-  :host(:where(:--self, [data-self])) .body {
+  :host(:where(:state(self), [data-self])) .body {
     background-color: ${theme.describeColor};
   }
   :host([last]) {
@@ -48,7 +48,7 @@ const style = createCSSSheet(css`
     left: 0;
     border-inline-color: ${theme.noticeColor} transparent;
   }
-  :host(:is(:--self, [data-self])) .body::after {
+  :host(:is(:state(self), [data-self])) .body::after {
     left: auto;
     right: 0;
     border-inline-color: transparent ${theme.describeColor};
diff --git a/packages/webapp/src/modules/mt-nav.ts b/packages/webapp/src/modules/mt-nav.ts
index a18be323..8fb76601 100644
--- a/packages/webapp/src/modules/mt-nav.ts
+++ b/packages/webapp/src/modules/mt-nav.ts
@@ -65,7 +65,7 @@ const style = createCSSSheet(css`
     opacity: 0.5;
     outline: none;
   }
-  .link:where(:--active, [data-active]) {
+  .link:where(:state(active), [data-active]) {
     opacity: 1;
   }
   .status {
diff --git a/packages/webapp/src/modules/nav.ts b/packages/webapp/src/modules/nav.ts
index af3e9b3a..3f53dba1 100644
--- a/packages/webapp/src/modules/nav.ts
+++ b/packages/webapp/src/modules/nav.ts
@@ -6,7 +6,6 @@ import {
   createCSSSheet,
   css,
   connectStore,
-  attribute,
   history,
   updateStore,
 } from '@mantou/gem';
@@ -17,7 +16,7 @@ import { focusStyle } from 'duoyun-ui/lib/styles';
 import { locationStore, routes } from 'src/routes';
 import { createPath, RouteItem } from 'duoyun-ui/elements/route';
 
-import { viewTransitionName } from 'src/constants';
+import { paramKeys, viewTransitionName } from 'src/constants';
 import { i18n } from 'src/i18n/basic';
 import {
   configure,
@@ -34,12 +33,14 @@ import { store } from 'src/store';
 import { icons } from 'src/icons';
 import { AppRootElement } from 'src/app';
 import { gotoLogin } from 'src/auth';
+import { matchRoute } from 'src/utils/common';
 
 import 'duoyun-ui/elements/link';
 import 'duoyun-ui/elements/use';
 import 'duoyun-ui/elements/action-text';
 import 'duoyun-ui/elements/button';
 import 'src/elements/tooltip';
+import 'src/elements/nav-link';
 import 'src/modules/avatar';
 import 'src/modules/badge';
 
@@ -76,7 +77,7 @@ const style = createCSSSheet(css`
     margin: auto;
     border-radius: ${theme.normalRound};
   }
-  .link:where(:--active, [data-active])::after {
+  .link:where(:state(match), [data-match])::after {
     background: currentColor;
   }
   .title {
@@ -113,10 +114,10 @@ const style = createCSSSheet(css`
     .icon {
       border-radius: 100%;
     }
-    .link:not(:where(:--active, [data-active])) {
+    .link:not(:where(:state(match), [data-match])) {
       display: none;
     }
-    .link:where(:--active, [data-active])::after {
+    .link:where(:state(match), [data-match])::after {
       display: none;
     }
     .play,
@@ -142,13 +143,23 @@ export const unmountedRoom = () => updateStore(navStore, { room: false });
 @connectStore(i18n.store)
 @connectStore(configure)
 export class MNavElement extends GemElement {
-  @attribute page: 'room' | 'game' | '';
+  get #gamePageParams() {
+    return matchRoute(routes.game);
+  }
+
+  get #gameId() {
+    return Number(this.#gamePageParams?.[paramKeys.GAME_ID]);
+  }
+
+  get #roomPageParams() {
+    return matchRoute(routes.room);
+  }
 
   #share = () => {
     navigator
       .share?.({
         url: location.href,
-        text: store.games[Number(this.id)]?.name,
+        text: store.games[this.#gameId]?.name,
       })
       .catch(() => {
         //
@@ -167,7 +178,7 @@ export class MNavElement extends GemElement {
   #renderLinks = () => {
     return [routes.games, routes.favorites, routes.rooms].map(
       (route: RouteItem) => html`
-        <dy-active-link class="link" .route=${route} .pattern=${route.pattern}>${route.title}</dy-active-link>
+        <nesbox-nav-link class="link" .route=${route} .pattern=${route.pattern}>${route.title}</nesbox-nav-link>
       `,
     );
   };
@@ -225,7 +236,7 @@ export class MNavElement extends GemElement {
   };
 
   #renderGameTitle = () => {
-    const gameId = Number(this.id);
+    const gameId = this.#gameId;
     return html`
       <dy-use
         data-cy="back"
@@ -288,9 +299,9 @@ export class MNavElement extends GemElement {
         }
       </style>
       <nav class="nav">
-        ${this.page === 'game'
+        ${this.#gamePageParams
           ? this.#renderGameTitle()
-          : this.page === 'room'
+          : this.#roomPageParams
           ? this.#renderRoomTitle()
           : mediaQuery.isPhone
           ? this.#renderNavMenu()
@@ -298,7 +309,7 @@ export class MNavElement extends GemElement {
         <span class="space" @dblclick=${this.#goTop}></span>
         ${!configure.user
           ? html`<dy-action-text @click=${gotoLogin} data-cy="login">${i18n.get('menu.account.login')}</dy-action-text>`
-          : this.page === 'game'
+          : this.#gamePageParams
           ? html`
               <dy-use
                 class="icon"
@@ -309,12 +320,12 @@ export class MNavElement extends GemElement {
                 @click=${this.#share}
               ></dy-use>
               ${mediaQuery.isPhone
-                ? this.#renderFavoriteBtn(Number(this.id))
+                ? this.#renderFavoriteBtn(this.#gameId)
                 : html`
                     <dy-button
                       data-cy="start"
                       class="play"
-                      @click=${() => createRoom({ gameId: Number(this.id), private: false })}
+                      @click=${() => createRoom({ gameId: this.#gameId, private: false })}
                     >
                       ${i18n.get('page.game.start')}
                     </dy-button>
diff --git a/packages/webapp/src/modules/stage.ts b/packages/webapp/src/modules/stage.ts
index 1ec0e827..b7fe2496 100644
--- a/packages/webapp/src/modules/stage.ts
+++ b/packages/webapp/src/modules/stage.ts
@@ -69,7 +69,7 @@ const style = createCSSSheet(css`
     display: block;
     background: black;
   }
-  :host(:where(:--playing, :state(playing))) {
+  :host(:where([data-playing], :state(playing))) {
     cursor: none;
   }
   .canvas {
diff --git a/packages/webapp/src/pages/mt-games.ts b/packages/webapp/src/pages/mt-games.ts
index 91e73a69..8c120716 100644
--- a/packages/webapp/src/pages/mt-games.ts
+++ b/packages/webapp/src/pages/mt-games.ts
@@ -56,16 +56,16 @@ const style = createCSSSheet(css`
     height: 100%;
     transition: all 0.3s ${theme.timingFunction};
   }
-  :host(:where([data-detail], :--detail)) {
+  :host(:where([data-detail], :state(detail))) {
     --size: min(calc(100vh - 10em), 20em, 28vw);
   }
-  :host(:where([data-detail], :--detail)) .rotor {
+  :host(:where([data-detail], :state(detail))) .rotor {
     height: var(--size);
   }
-  :host(:where([data-detail], :--detail)) nesbox-rotor {
+  :host(:where([data-detail], :state(detail))) nesbox-rotor {
     width: var(--size);
   }
-  :host(:where([data-detail], :--detail)) nesbox-rotor::part(other) {
+  :host(:where([data-detail], :state(detail))) nesbox-rotor::part(other) {
     opacity: 0;
   }
   .info,
diff --git a/packages/webapp/src/store.ts b/packages/webapp/src/store.ts
index e883a40b..d1742544 100644
--- a/packages/webapp/src/store.ts
+++ b/packages/webapp/src/store.ts
@@ -1,6 +1,7 @@
 import frontmatter from 'front-matter';
 import { ElementOf } from 'duoyun-ui/lib/types';
-import { createCacheStore } from 'duoyun-ui/lib/utils';
+import { createCacheStore, sleep } from 'duoyun-ui/lib/utils';
+import { commonAnimationOptions } from 'duoyun-ui/lib/animations';
 import { updateStore } from '@mantou/gem';
 
 import { localStorageKeys } from 'src/constants';
@@ -110,8 +111,9 @@ export const toggleFriendChatState = async (id?: number) => {
   if (id && id === friendStore.friendChatState) {
     // re-focus on friend chat
     updateStore(friendStore, { friendChatState: undefined });
-    await Promise.resolve();
   }
+  // wait close animation
+  await sleep(commonAnimationOptions.duration);
   updateStore(friendStore, {
     recentFriendChat: id || friendStore.friendChatState || friendStore.recentFriendChat,
     friendChatState: id,
diff --git a/yarn.lock b/yarn.lock
index 9673c634..f3cbbd72 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1259,6 +1259,13 @@
   dependencies:
     lit-html "^1.4.1"
 
+"@mantou/gem@^1.7.5":
+  version "1.7.5"
+  resolved "https://registry.yarnpkg.com/@mantou/gem/-/gem-1.7.5.tgz#789f3d7101f11be6c1c341a6e1ac29e07aa9347d"
+  integrity sha512-mlvLo4/7Q3ehSS1KwNrkB1cb1dsnKLLp0td6IpEJEzHehPe8Kzp4oRBTABQpDJN0+zDj62zdDwDPNQnVEGSJzQ==
+  dependencies:
+    lit-html "^1.4.1"
+
 "@mantou/nes-sandbox@^0.0.8":
   version "0.0.8"
   resolved "https://registry.yarnpkg.com/@mantou/nes-sandbox/-/nes-sandbox-0.0.8.tgz#c91824d44f8ffa359dc0241b658cf82cd3d3865b"
@@ -3892,6 +3899,15 @@ duoyun-ui@^0.0.65:
     deep-query-selector "^1.0.1"
     elkjs "^0.7.1"
 
+duoyun-ui@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/duoyun-ui/-/duoyun-ui-1.1.5.tgz#a573b4e5346e006f8580763c6d2c7259c2bbf628"
+  integrity sha512-TjcMzdk4GsB1WnRl0z6kCPEXKWp09ccJrr/6z/xY6jeznuD8tQ3Cs5NmcYiOnOSgq+pdZ9329YrRPrCxsmM67Q==
+  dependencies:
+    d3-geo "^3.0.1"
+    deep-query-selector "^1.0.1"
+    elkjs "^0.7.1"
+
 duplexer3@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/duplexer3/-/duplexer3-0.1.4.tgz#ee01dd1cac0ed3cbc7fdbea37dc0a8f1ce002ce2"