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``, - }, - { - ...routes.room, - content: html``, - }, - { pattern: '*', content: html`` }, -]; - const style = createCSSSheet(css` :host { display: contents; @@ -216,7 +204,7 @@ export class AppRootElement extends GemElement { return html` ${mediaQuery.isPhone ? html`` : ''}
- +
(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`