From 836bc4cea35028915b6186a8fb614911a7b95127 Mon Sep 17 00:00:00 2001
From: stack-wuh <wuh131420@foxmail.com>
Date: Sat, 18 Dec 2021 17:59:36 +0800
Subject: [PATCH 1/2] =?UTF-8?q?bug(useAudio):=20:musical=5Fnote:=20?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8Daudio=E7=9A=84=E5=B1=9E=E6=80=A7=E5=9C=A8?=
 =?UTF-8?q?=E5=88=87=E6=8D=A2=E7=BD=91=E9=A1=B5=E4=B9=8B=E5=90=8E=E7=9A=84?=
 =?UTF-8?q?=E4=B8=A2=E5=A4=B1=E6=96=87=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/audio/useAudio.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/components/audio/useAudio.tsx b/components/audio/useAudio.tsx
index 076bdb5e..486836e4 100644
--- a/components/audio/useAudio.tsx
+++ b/components/audio/useAudio.tsx
@@ -301,8 +301,13 @@ const useAudio = (
 		}
 
 		if (audioRef && audioRef.canplay) {
-			const { canplay } = audioRef
-			dispatch({ type: 'STATUS', payload: { ...state, canplay } })
+			const { canplay, muted } = audioRef
+			const mutedStatus = muted ? 'open' : 'close'
+
+			dispatch({
+				type: 'STATUS',
+				payload: { ...state, canplay, muted, mutedStatus },
+			})
 		}
 	}, [audioRef, ops.traceList.length])
 

From c134cf9212f95dca182e468ae89945ec7b7183a0 Mon Sep 17 00:00:00 2001
From: stack-wuh <wuh131420@foxmail.com>
Date: Sat, 18 Dec 2021 21:03:52 +0800
Subject: [PATCH 2/2] =?UTF-8?q?fix(css):=20:bookmark=5Ftabs:=20=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D=E6=A0=B7=E5=BC=8F=E5=88=9D=E5=A7=8B=E5=8C=96=E7=9A=84?=
 =?UTF-8?q?=E8=89=B2=E5=BD=A9=E6=B8=90=E5=8F=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 styles/home.scss      |  21 ++--
 styles/layout.css     | 198 +++++++++++++++---------------
 styles/post.scss      |   8 +-
 styles/reset.css      |   2 +-
 styles/theme/root.css | 274 +++++++++++++++++++++---------------------
 5 files changed, 263 insertions(+), 240 deletions(-)

diff --git a/styles/home.scss b/styles/home.scss
index 1a4accb1..c6b7c487 100644
--- a/styles/home.scss
+++ b/styles/home.scss
@@ -37,20 +37,23 @@ $name: 'ww_home';
 
     img {
       transform: scale3d(1, 1, 1);
-      transition: var(--transition-base);
+      transition: transform .5s var(--transition-linear);
     }
 
     &:hover {
       & .lf img {
         transform: scale3d(1.3, 1.3, 1.3) rotateZ(-6deg);
-        transition: var(--transition-base);
+        transition: transform .5s var(--transition-linear);
+
       }
 
       & .title,
       & .description {
         transform: translateX(10px);
-        transition: var(--transition-base);
-        transition-delay: .1s;
+        transition-property: transform, background-size, color;
+        transition-timing-function: var(--transition-linear);
+        transition-duration: .5s;
+        transition-delay: .3s;
       }
 
       & .title {
@@ -59,7 +62,6 @@ $name: 'ww_home';
       }
 
       outline: 1px solid var(--color-primary-2);
-      transition: var(--transition-base);
     }
 
     &::before {
@@ -97,8 +99,11 @@ $name: 'ww_home';
       font-size: var(--font-size-medium);
       margin-bottom: 0;
       margin-top: 0;
+      color: inherit;
       line-height: var(--line-height-medium);
-      transition: var(--transition-base);
+      transition-property: background-size, transform, color;
+      transition-timing-function: var(--transition-linear);
+      transition-duration: .5s;
 
       &:hover {
         text-decoration: underline;
@@ -110,7 +115,9 @@ $name: 'ww_home';
       margin-top: var(--margin-base);
       font-size: 13px;
       line-height: 21px;
-      transition: var(--transition-base);
+      transition-property: background-size, transform, color;
+      transition-timing-function: var(--transition-linear);
+      transition-duration: .5s;
     }
   }
 }
\ No newline at end of file
diff --git a/styles/layout.css b/styles/layout.css
index bf5604a5..338f7683 100644
--- a/styles/layout.css
+++ b/styles/layout.css
@@ -1,156 +1,166 @@
 .layout {
-  position: relative;
-  width: 100%;
-  padding-top: 5.33rem;
-  box-sizing: border-box;
-  overflow: hidden;
-  transition:
-    width .5s cubic-bezier(0.075, 0.82, 0.165, 1),
-    height .5s cubic-bezier(0.075, 0.82, 0.165, 1),
-    border-radius .5s cubic-bezier(0.075, 0.82, 0.165, 1);
+	position: relative;
+	width: 100%;
+	padding-top: 5.33rem;
+	box-sizing: border-box;
+	overflow: hidden;
+	transition-property: width, height, border-radius;
+	transition-timing-function: var(--transition-ease);
+	transition-duration: 0.8s;
+	transition-delay: 0.5s;
 }
 
 .layout .app-root {
-  display: flex;
-  position: relative;
-  flex-direction: column;
+	display: flex;
+	position: relative;
+	flex-direction: column;
 }
 
 .layout header.header {
-  width: 100%;
-  height: 5rem;
-  box-sizing: border-box;
-  position: fixed;
-  top: 0;
-  z-index: 999;
+	width: 100%;
+	height: 5rem;
+	box-sizing: border-box;
+	position: fixed;
+	top: 0;
+	z-index: 999;
 }
 
 .layout footer.footer {
-  width: inherit;
-  height: 6.66rem;
-  box-sizing: border-box;
+	width: inherit;
+	height: 6.66rem;
+	box-sizing: border-box;
 }
 
 .layout main.main-container {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  padding: 0 1.5rem;
-  margin: 0 auto;
-  min-height: calc(100vh - 13.66rem);
-  transition: width .5s ease-in;
-  overflow: hidden;
+	display: flex;
+	flex-direction: row;
+	flex-wrap: nowrap;
+	padding: 0 1.5rem;
+	margin: 0 auto;
+	min-height: calc(100vh - 13.66rem);
+	transition-property: width, min-height, padding;
+	transition-duration: 0.8s;
+	transition-delay: 0.5s;
+	transition-timing-function: var(--transition-linear);
+	overflow: hidden;
 }
 
 .layout .main-nav {
-  width: 180px;
-  margin-right: 1.66rem;
-  position: relative;
-  transition: var(--transition-base);
+	width: 180px;
+	margin-right: 1.66rem;
+	position: relative;
+	transition-property: transform, margin-right;
+	transition-timing-function: var(--transition-linear);
+	transition-duration: 0.8s;
 }
 
 .layout .main-nav nav {
-  /* position: fixed; */
-  width: 180px;
-  height: 60vh;
-  max-height: 60vh;
+	width: 180px;
+	height: 60vh;
+	max-height: 60vh;
 }
 
 .layout .main-aside {
-  width: 160px;
-  transition: var(--transition-base);
+	width: 160px;
+	transition: transform var(--transition-ease),
+		visibility var(--transition-linear), opacity var(--transition-linear);
 }
 
 .layout-mobile footer.footer {
-  height: 5rem;
+	height: 5rem;
 }
 
 .layout .main {
-  flex: 1 0 auto;
-  width: 560px;
+	flex: 1 0 auto;
+	width: 560px;
 }
 
 .layout .mobile-main {
-  padding: 0 1.33rem;
-  padding-bottom: 0.66rem;
+	padding: 0 1.33rem;
+	padding-bottom: 0.66rem;
 }
 
 .layout .tablet-main {
-  padding: 0 1.33rem;
-  padding-bottom: 0.66rem;
+	padding: 0 1.33rem;
+	padding-bottom: 0.66rem;
 }
 
 .layout .is-pc {
-  width: 1076px;
+	width: 1076px;
 }
 
-.layout .config>* {
-  transition: var(--transition-base);
+.layout .config > * {
+	transition: var(--transition-base);
 }
 
 .layout .background {
-  position: fixed;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: 0;
-  background: url(../public/images/redux_mbox.webp) center center repeat;
-  background-attachment: fixed;
-  opacity: 0.15;
+	position: fixed;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	top: 0;
+	background: url(../public/images/redux_mbox.webp) center center repeat;
+	background-attachment: fixed;
+	opacity: 0.15;
 }
 
 @media screen and (max-width: 979px) {
-  .layout .main-nav {
-    visibility: hidden;
-    position: absolute;
-    z-index: -1;
-    opacity: 0;
-    transform: translateX(-1000%);
-    transition: var(--transition-base);
-  }
-
-  .layout .main-aside {
-    visibility: hidden;
-    position: absolute;
-    opacity: 0;
-  }
+	.layout .main-nav {
+		position: absolute;
+		opacity: 0;
+		z-index: -1;
+		transform: translateX(-200%);
+		transition-property: transform, opacity;
+		transition-timing-function: var(--transition-ease-in);
+		transition-duration: 0.5s;
+		transition-delay: 2s;
+	}
+
+	.layout .main-aside {
+		visibility: hidden;
+		position: absolute;
+		opacity: 0;
+	}
 }
 
-
 /** Transition Line **/
 .transition-line {
-  background: linear-gradient(90deg, #ffec3d, #0ebeff);
-  background-size: 0 3px;
-  background-repeat: no-repeat;
-  background-position: 0 100%;
-  transition: 1s all;
+	background: linear-gradient(90deg, #ffec3d, #0ebeff);
+	background-size: 0 3px;
+	background-repeat: no-repeat;
+	background-position: 0 100%;
+	transition: 1s all;
 }
 
 .transition-line:hover {
-  background-size: 100% 3px;
+	background-size: 100% 3px;
 }
 
 .transition-text {
-  background: linear-gradient(90deg, var(--color-primary-5), var(--color-primary-3));
-  background-size: 0 100px;
-  background-repeat: no-repeat;
-  background-position: 0 100%;
-  background-clip: text;
-  color: inherit;
-  transition: .5s all linear;
+	background: linear-gradient(
+		90deg,
+		var(--color-primary-5),
+		var(--color-primary-3)
+	);
+	background-size: 0 100px;
+	background-repeat: no-repeat;
+	background-position: 0 100%;
+	background-clip: text;
+	color: inherit;
+	transition: 0.5s all linear;
 }
 
 .transition-text:hover {
-  background-size: 100% 100%;
-  color: transparent;
+	background-size: 100% 100%;
+	color: transparent;
 }
 
 /** Base Layout 基础布局 **/
 .page {
-  width: inherit;
-  height: inherit;
-  padding: 4em;
-  min-height: 100vh;
-  box-sizing: border-box;
-  background-color: var(--background-color-primary);
-}
\ No newline at end of file
+	width: inherit;
+	height: inherit;
+	padding: 4em;
+	min-height: 100vh;
+	box-sizing: border-box;
+	background-color: var(--background-color-primary);
+}
diff --git a/styles/post.scss b/styles/post.scss
index 36a55dcb..7d430491 100644
--- a/styles/post.scss
+++ b/styles/post.scss
@@ -1105,16 +1105,18 @@ $name: ww_post__;
     color: var(--color-base-8);
     font-size: calc(var(--font-size-base) + 2px);
     line-height: calc(var(--font-size-base) + 10px);
-    transition: var(--transition-base);
+    transition-property: color, font-size, line-height;
+    transition-timing-function: var(--transition-ease-in);
+    transition-duration: .5s;
 
     a {
       color: var(--color-link);
       text-decoration: underline;
-      transition: color .5s ease;
+      transition: color .5s var(--transition-ease);
 
       &:hover {
         color: var(--color-default);
-        transition: color .5s ease;
+        transition: color .5s var(--transition-ease);
       }
     }
   }
diff --git a/styles/reset.css b/styles/reset.css
index 2ebb9d62..53a180fc 100644
--- a/styles/reset.css
+++ b/styles/reset.css
@@ -11,7 +11,7 @@ body,
 	font-weight: 400;
 	box-sizing: border-box;
 	scroll-behavior: smooth;
-	transition: background-color 0.5s ease;
+	transition: background-color 0.5s var(--transition-ease);
 }
 
 * {
diff --git a/styles/theme/root.css b/styles/theme/root.css
index ad172dd5..8267df62 100644
--- a/styles/theme/root.css
+++ b/styles/theme/root.css
@@ -1,136 +1,140 @@
 :root {
-  --padding-base: 8px;
-  --margin-base: 8px;
-  --border-radius-base: 3px;
-  --border-width-base: 1px;
-  --transition-base: all .5s ease;
-  --font-size-base: 14px;
-  --font-weight-base: 400;
-  --line-height-base: 22px;
-  --color-default: #0875e6;
-  --color-text-base: #a6a6a6;
-  --color-link: #1890ff;
-  --color-border: #d9d9d9;
-  --color-white-pure: #fff;
-  --color-black-pure: #000;
-
-  /** Function Colors 功能色彩 **/
-  --color-danger: #ff4d4f;
-  --color-warning: #faad14;
-  --color-success: #52c41a;
-  --color-link: #1890ff;
-
-
-  /* Padding */
-  --padding-base-2: calc(2 * var(--padding-base));
-  --padding-base-3: calc(3 * var(--padding-base));
-  --padding-base-4: calc(4 * var(--padding-base));
-
-  /* Margin */
-  --margin-base-2: calc(2 * var(--margin-base));
-  --margin-base-3: calc(3 * var(--margin-base));
-  --margin-base-4: calc(4 * var(--margin-base));
-
-  /** Font **/
-  --font-weight-regular: var(--font-size-base);
-  --font-weight-medium: var(calc(--font-size-base + 100));
-  --font-weight-large: var(calc(--font-size-base + 200));
-
-  --font-size-regular: var(--font-size-base);
-  --font-size-medium: calc(var(--font-size-base) + 2px);
-  --font-size-large: calc(var(--font-size-base) + 4px);
-  --font-size-less: calc(var(--font-size-base) - 2px);
-
-
-  /** Line Height **/
-  --line-height-regular: calc(var(--font-size-regular) + 10 - 2);
-  --line-height-medium: calc(var(--font-size-medium) + 10 - 2);
-  --line-height-large: calc(var(--font-size-large) + 10 - 2);
-
-  /** Border **/
-  --border-base: var(--border-width-base) solid var(--color-base-4);
-
-  /** Color List **/
-  --color-primary-1: #e6f6ff;
-  --color-primary-2: #abdfff;
-  --color-primary-3: #82cbff;
-  --color-primary-4: #59b4ff;
-  --color-primary-5: #2e93f2;
-  --color-primary-7: #0056bf;
-  --color-primary-8: #004099;
-  --color-primary-9: #002c73;
-  --color-primary-10: #001b4d;
-
-  /** Success colors **/
-  --color-success-1: #f6ffed;
-  --color-success-2: #d9f7be;
-  --color-success-3: #b7eb8f;
-  --color-success-4: #95de64;
-  --color-success-5: #73d13d;
-  --color-success-6: #52c41a;
-  --color-success-7: #389e0d;
-  --color-success-8: #237804;
-  --color-success-9: #135200;
-  --color-success-10: #092b00;
-
-  /** Danger colors **/
-  --color-danger-1: #fff1f0;
-  --color-danger-2: #ffccc7;
-  --color-danger-3: #ffa39e;
-  --color-danger-4: #ff7875;
-  --color-danger-5: #ff4d4f;
-  --color-danger-6: #f5222d;
-  --color-danger-7: #cf1322;
-  --color-danger-8: #a8071a;
-  --color-danger-9: #820014;
-  --color-danger-10: #5c0011;
-
-  /** Warning colors **/
-  --color-warning-1: #fffbe6;
-  --color-warning-2: #fff1b8;
-  --color-warning-3: #ffe58f;
-  --color-warning-4: #ffd666;
-  --color-warning-5: #ffc53d;
-  --color-warning-6: #faad14;
-  --color-warning-7: #d48806;
-  --color-warning-8: #ad6800;
-  --color-warning-9: #874d00;
-  --color-warning-10: #613400;
-
-  /** Info colors **/
-  --color-link-1: #e6f7ff;
-  --color-link-2: #bae7ff;
-  --color-link-3: #91d5ff;
-  --color-link-4: #69c0ff;
-  --color-link-5: #40a9ff;
-  --color-link-6: #096dd9;
-  --color-link-7: #096dd9;
-  --color-link-8: #0050b3;
-  --color-link-9: #003a8c;
-  --color-link-10: #002766;
-
-
-  /** Sunrise Colors **/
-  --color-yellow-1: #feffe6;
-  --color-yellow-2: #ffffb8;
-  --color-yellow-3: #fffb8f;
-  --color-yellow-4: #fff566;
-  --color-yellow-5: #ffec3d;
-  --color-yellow-6: #fadb14;
-  --color-yellow-7: #d4b106;
-  --color-yellow-8: #ad8b00;
-  --color-yellow-9: #876800;
-  --color-yellow-10: #614700;
-
-  /** Geekblue Colors **/
-  --color-geekblue-1: #f0f5ff;
-  --color-geekblue-2: #d6e4ff;
-  --color-geekblue-3: #adc6ff;
-  --color-geekblue-4: #85a5ff;
-  --color-geekblue-5: #597ef7;
-  --color-geekblue-6: #2f54eb;
-  --color-geekblue-7: #1d39c4;
-  --color-geekblue-8: #10239e;
-  --color-geekblue-9: #061178;
-  --color-geekblue-10: #030852;
-}
\ No newline at end of file
+	--padding-base: 8px;
+	--margin-base: 8px;
+	--border-radius-base: 3px;
+	--border-width-base: 1px;
+	--transition-base: all 0.5s ease;
+	--font-size-base: 14px;
+	--font-weight-base: 400;
+	--line-height-base: 22px;
+	--color-default: #0875e6;
+	--color-text-base: #a6a6a6;
+	--color-link: #1890ff;
+	--color-border: #d9d9d9;
+	--color-white-pure: #fff;
+	--color-black-pure: #000;
+
+	/** Function Colors 功能色彩 **/
+	--color-danger: #ff4d4f;
+	--color-warning: #faad14;
+	--color-success: #52c41a;
+	--color-link: #1890ff;
+
+	/* Padding */
+	--padding-base-2: calc(2 * var(--padding-base));
+	--padding-base-3: calc(3 * var(--padding-base));
+	--padding-base-4: calc(4 * var(--padding-base));
+
+	/* Margin */
+	--margin-base-2: calc(2 * var(--margin-base));
+	--margin-base-3: calc(3 * var(--margin-base));
+	--margin-base-4: calc(4 * var(--margin-base));
+
+	/** Font **/
+	--font-weight-regular: var(--font-size-base);
+	--font-weight-medium: var(calc(--font-size-base + 100));
+	--font-weight-large: var(calc(--font-size-base + 200));
+
+	--font-size-regular: var(--font-size-base);
+	--font-size-medium: calc(var(--font-size-base) + 2px);
+	--font-size-large: calc(var(--font-size-base) + 4px);
+	--font-size-less: calc(var(--font-size-base) - 2px);
+
+	/** Line Height **/
+	--line-height-regular: calc(var(--font-size-regular) + 10 - 2);
+	--line-height-medium: calc(var(--font-size-medium) + 10 - 2);
+	--line-height-large: calc(var(--font-size-large) + 10 - 2);
+
+	/** Border **/
+	--border-base: var(--border-width-base) solid var(--color-base-4);
+
+	/** Color List **/
+	--color-primary-1: #e6f6ff;
+	--color-primary-2: #abdfff;
+	--color-primary-3: #82cbff;
+	--color-primary-4: #59b4ff;
+	--color-primary-5: #2e93f2;
+	--color-primary-7: #0056bf;
+	--color-primary-8: #004099;
+	--color-primary-9: #002c73;
+	--color-primary-10: #001b4d;
+
+	/** Success colors **/
+	--color-success-1: #f6ffed;
+	--color-success-2: #d9f7be;
+	--color-success-3: #b7eb8f;
+	--color-success-4: #95de64;
+	--color-success-5: #73d13d;
+	--color-success-6: #52c41a;
+	--color-success-7: #389e0d;
+	--color-success-8: #237804;
+	--color-success-9: #135200;
+	--color-success-10: #092b00;
+
+	/** Danger colors **/
+	--color-danger-1: #fff1f0;
+	--color-danger-2: #ffccc7;
+	--color-danger-3: #ffa39e;
+	--color-danger-4: #ff7875;
+	--color-danger-5: #ff4d4f;
+	--color-danger-6: #f5222d;
+	--color-danger-7: #cf1322;
+	--color-danger-8: #a8071a;
+	--color-danger-9: #820014;
+	--color-danger-10: #5c0011;
+
+	/** Warning colors **/
+	--color-warning-1: #fffbe6;
+	--color-warning-2: #fff1b8;
+	--color-warning-3: #ffe58f;
+	--color-warning-4: #ffd666;
+	--color-warning-5: #ffc53d;
+	--color-warning-6: #faad14;
+	--color-warning-7: #d48806;
+	--color-warning-8: #ad6800;
+	--color-warning-9: #874d00;
+	--color-warning-10: #613400;
+
+	/** Info colors **/
+	--color-link-1: #e6f7ff;
+	--color-link-2: #bae7ff;
+	--color-link-3: #91d5ff;
+	--color-link-4: #69c0ff;
+	--color-link-5: #40a9ff;
+	--color-link-6: #096dd9;
+	--color-link-7: #096dd9;
+	--color-link-8: #0050b3;
+	--color-link-9: #003a8c;
+	--color-link-10: #002766;
+
+	/** Sunrise Colors **/
+	--color-yellow-1: #feffe6;
+	--color-yellow-2: #ffffb8;
+	--color-yellow-3: #fffb8f;
+	--color-yellow-4: #fff566;
+	--color-yellow-5: #ffec3d;
+	--color-yellow-6: #fadb14;
+	--color-yellow-7: #d4b106;
+	--color-yellow-8: #ad8b00;
+	--color-yellow-9: #876800;
+	--color-yellow-10: #614700;
+
+	/** Geekblue Colors **/
+	--color-geekblue-1: #f0f5ff;
+	--color-geekblue-2: #d6e4ff;
+	--color-geekblue-3: #adc6ff;
+	--color-geekblue-4: #85a5ff;
+	--color-geekblue-5: #597ef7;
+	--color-geekblue-6: #2f54eb;
+	--color-geekblue-7: #1d39c4;
+	--color-geekblue-8: #10239e;
+	--color-geekblue-9: #061178;
+	--color-geekblue-10: #030852;
+
+	/* tarnstion */
+	--transition-linear: cubic-bezier(0.82, 0.53, 0.58, 0.57);
+	--transition-ease: cubic-bezier(0.05, 0.35, 0.89, 0.46);
+	--transition-ease-out: cubic-bezier(0.53, 0.4, 0.15, 0.71);
+	--transition-ease-in-out: cubic-bezier(0, 1.19, 1, -0.27);
+	--transition-ease-in: cubic-bezier(0.2, 0.46, 0.43, 0.06);
+}