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`