diff --git a/packages/layout/src/components/Toast/index.module.scss b/packages/layout/src/components/Toast/index.module.scss
new file mode 100644
index 0000000..fc373e0
--- /dev/null
+++ b/packages/layout/src/components/Toast/index.module.scss
@@ -0,0 +1,16 @@
+.body {
+ position: absolute;
+
+ bottom: 20%;
+ left: 50%;
+
+ background-color: rgba(0, 0, 0, 0.8);
+ color: #fff;
+
+ font-size: 15px;
+ padding: 8px 12px;
+ border-radius: 4px;
+
+ max-width: 50%;
+ white-space: pre-line;
+}
diff --git a/packages/layout/src/components/Toast/index.tsx b/packages/layout/src/components/Toast/index.tsx
new file mode 100644
index 0000000..9e9edb2
--- /dev/null
+++ b/packages/layout/src/components/Toast/index.tsx
@@ -0,0 +1,48 @@
+import { defineComponent } from 'vue'
+import { Popup } from '@0x30/vue-navigation-layout'
+import styles from './index.module.scss'
+import anime from 'animejs'
+
+const Toast = defineComponent({
+ name: 'Toast',
+ props: {
+ title: String,
+ className: String,
+ },
+ setup: (props) => {
+ return () =>
{props.title}
+ },
+})
+
+type ToastOptoions = {
+ duration?: number
+ className?: string
+}
+
+export const useToast = (title: string, options?: ToastOptoions) => {
+ const [show, close] = Popup({
+ onEnter(el, done) {
+ anime.set(el, { translateX: '-50%' })
+ anime({
+ targets: el,
+ opacity: [0, 1],
+ scale: [0.8, 1],
+ translateX: '-50%',
+ duration: 300,
+ easing: 'easeOutExpo',
+ complete: done,
+ })
+ },
+ onLeave(el, done) {
+ anime({
+ targets: el,
+ opacity: [1, 0],
+ duration: 300,
+ easing: 'easeInQuad',
+ complete: done,
+ })
+ },
+ })
+ show()
+ window.setTimeout(close, options?.duration ?? 2000)
+}
diff --git a/packages/layout/src/index.ts b/packages/layout/src/index.ts
index e208006..c957ca7 100644
--- a/packages/layout/src/index.ts
+++ b/packages/layout/src/index.ts
@@ -4,3 +4,4 @@ export * from './components/Safearea'
export { default as SidePage } from './components/SidePage'
export * from './components/Loading'
export * from './util/Popup'
+export * from './components/Toast'
\ No newline at end of file
diff --git a/src/views/home/index.tsx b/src/views/home/index.tsx
index 8af141d..8c3e72c 100644
--- a/src/views/home/index.tsx
+++ b/src/views/home/index.tsx
@@ -11,6 +11,7 @@ import DetailPage from '../detail'
import styles from './index.module.scss'
import { useHooks, wait } from '../../util'
+import { useToast } from '@0x30/vue-navigation-layout'
const Component = defineComponent({
name: 'HomePage',
@@ -68,6 +69,13 @@ const Component = defineComponent({
>
popup
+
SidePage