@fjyueke/bify-mcp 1.0.0

package/metaData/components/navbar/api.md

@@ -0,0 +1,26 @@
+## API
+
+### Navbar Props
+
+| 参数          | 说明                                                    | 类型      | 默认值  |
+| ------------- | ------------------------------------------------------- | --------- | ------- |
+| title         | 标题                                                    | _string_  | `''`    |
+| bordered      | 是否显示下边框                                          | _boolean_ | `false`  |
+| fixed         | 是否固定在顶部                                          | _boolean_ | `false` |
+| safeArea      | 安全区域，可选值 `top` `bottom`，仅在`fixed=true`时有效 | _string_  | -       |
+| nativeSafeTop | 是否启用顶部安全区域原生属性                            | _boolean_ | `false` |
+| placeholder   | 固定在顶部时，是否在标签位置生成一个等高的占位元素      | _boolean_ | `false` |
+
+### Navbar.NavLeft Props
+
+| 参数     | 说明     | 类型        | 默认值 |
+| -------- | -------- | ----------- | ------ |
+| icon     | 左侧图标 | _Icon_      | -      |
+| children | 左侧文案 | _ReactNode_ | -      |
+
+### Navbar.NavRight Props
+
+| 参数     | 说明     | 类型        | 默认值 |
+| -------- | -------- | ----------- | ------ |
+| icon     | 右侧图标 | _Icon_      | -      |
+| children | 右侧文案 | _ReactNode_ | -      |

package/metaData/components/navbar/doc.md

@@ -0,0 +1,85 @@
+# Navbar 导航栏
+
+### 介绍
+
+为页面提供导航功能，常用于页面顶部。
+
+### 引入
+
+```tsx
+import { Navbar } from "@fjyueke/bify-core"
+```
+
+## 代码演示
+
+### 基础用法
+
+```tsx
+<Navbar title="标题" />
+```
+
+### 返回上级
+
+```tsx
+<Navbar title="标题">
+  <Navbar.NavLeft onClick={onClick}>返回</Navbar.NavLeft>
+  <Navbar.NavRight>按钮</Navbar.NavRight>
+</Navbar>
+```
+
+### 使用 NavLeft 和 NavRight
+
+```tsx
+<Navbar>
+  <Navbar.NavLeft>返回</Navbar.NavLeft>
+  <Navbar.Title>标题</Navbar.Title>
+  <Navbar.NavRight icon={<Search />} />
+</Navbar>
+```
+
+## API
+
+### Navbar Props
+
+| 参数          | 说明                                                    | 类型      | 默认值  |
+| ------------- | ------------------------------------------------------- | --------- | ------- |
+| title         | 标题                                                    | _string_  | `''`    |
+| bordered      | 是否显示下边框                                          | _boolean_ | `false`  |
+| fixed         | 是否固定在顶部                                          | _boolean_ | `false` |
+| safeArea      | 安全区域，可选值 `top` `bottom`，仅在`fixed=true`时有效 | _string_  | -       |
+| nativeSafeTop | 是否启用顶部安全区域原生属性                            | _boolean_ | `false` |
+| placeholder   | 固定在顶部时，是否在标签位置生成一个等高的占位元素      | _boolean_ | `false` |
+
+### Navbar.NavLeft Props
+
+| 参数     | 说明     | 类型        | 默认值 |
+| -------- | -------- | ----------- | ------ |
+| icon     | 左侧图标 | _Icon_      | -      |
+| children | 左侧文案 | _ReactNode_ | -      |
+
+### Navbar.NavRight Props
+
+| 参数     | 说明     | 类型        | 默认值 |
+| -------- | -------- | ----------- | ------ |
+| icon     | 右侧图标 | _Icon_      | -      |
+| children | 右侧文案 | _ReactNode_ | -      |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider](/components/config-provider/) 组件。
+
+| 名称                       | 默认值                    | 描述 |
+| -------------------------- | ------------------------- | ---- |
+| --navbar-z-index           | _1_                       | -    |
+| --navbar-height            | _46px \* $hd_             | -    |
+| --navbar-line-height       | _var(--line-height-lg)_   | -    |
+| --navbar-background-color  | _var(--white)_            | -    |
+| --navbar-icon-margin-right | _var(--padding-base)_     | -    |
+| --navbar-icon-font-size    | _16px \* $hd_             | -    |
+| --navbar-icon-color        | _var(--blue)_             | -    |
+| --navbar-text-color        | _var(--blue)_             | -    |
+| --navbar-title-font-size   | _var(--font-size-lg)_     | -    |
+| --navbar-title-font-weight | _var(--font-weight-bold)_ | -    |
+| --navbar-title-color       | _var(--text-color)_       | -    |

package/metaData/components/navbar/example/index.tsx

@@ -0,0 +1,28 @@
+import { Navbar } from "@fjyueke/bify-core"
+import { Search } from "@fjyueke/bify-icons"
+import Block from "../../../components/block"
+import Page from "../../../components/page"
+import "./index.scss"
+
+export default function NavbarDemo() {
+  return (
+    <Page title="Navbar 导航栏" className="navbar-demo">
+      <Block title="基础用法">
+        <Navbar title="标题" />
+      </Block>
+      <Block title="返回上级">
+        <Navbar title="标题">
+          <Navbar.NavLeft>返回</Navbar.NavLeft>
+          <Navbar.NavRight>按钮</Navbar.NavRight>
+        </Navbar>
+      </Block>
+      <Block title="使用 NavLeft 和 NavRight">
+        <Navbar>
+          <Navbar.NavLeft>返回</Navbar.NavLeft>
+          <Navbar.Title>标题</Navbar.Title>
+          <Navbar.NavRight icon={<Search />} />
+        </Navbar>
+      </Block>
+    </Page>
+  )
+}

package/metaData/components/notice-bar/api.md

@@ -0,0 +1,28 @@
+## API
+
+### Props
+
+| 参数       | 说明                                     | 类型               | 默认值  |
+| ---------- | ---------------------------------------- | ------------------ | ------- |
+| className  | 通知栏自定义类名                         | _string_           | -       |
+| style      | 通知栏自定义样式                         | _CSSProperties_    | -       |
+| children   | 通知文本内容                             | _ReactNode_        | -       |
+| delay      | 动画延迟时间 (ms)                        | _number \| string_ | `1000`  |
+| speed      | 滚动速率 (px/s)                          | _number \| string_ | `60`    |
+| scrollable | 是否开启滚动播放，内容长度溢出时默认开启 | _boolean_          | `false` |
+| wordwrap   | 是否开启文本换行，只在禁用滚动时生效     | _boolean_          | `false` |
+
+### Events
+
+| 事件名   | 说明                         | 回调参数            |
+| -------- | ---------------------------- | ------------------- |
+| onClick  | 点击通知栏时触发             | _event: MouseEvent_ |
+| onReplay | 每当滚动栏重新开始滚动时触发 | -                   |
+
+### 方法
+
+通过 ref 可以获取到 NoticeBar 实例并调用实例方法
+
+| 方法名                 | 说明                 | 参数 | 返回值 |
+| ---------------------- | -------------------- | ---- | ------ |
+| reset `v0.1.1-alpha.3` | 重置通知栏到初始状态 | -    | -      |

package/metaData/components/notice-bar/doc.md

@@ -0,0 +1,154 @@
+# NoticeBar 通知栏
+
+### 介绍
+
+用于循环播放展示一组消息通知。
+
+### 引入
+
+```tsx
+import { NoticeBar } from "@fjyueke/bify-core"
+```
+
+## 代码演示
+
+### 基础用法
+
+通过 `children` 属性设置通知栏的内容，通过 `NoticeBar.Icon` 组件设置通知栏左侧的图标。
+
+```tsx
+<NoticeBar scrollable>
+  <NoticeBar.Icon>
+    <VolumeOutlined />
+  </NoticeBar.Icon>
+  在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。
+</NoticeBar>
+```
+
+### 滚动播放
+
+通知栏的内容长度溢出时会自动开启滚动播放，通过 `scrollable` 属性可以控制该行为。
+
+```tsx
+<!-- 文字较短时，通过设置 scrollable 属性开启滚动播放 -->
+<van-notice-bar scrollable text="技术是开发它的人的共同灵魂。" />
+<NoticeBar scrollable>技术是开发它的人的共同灵魂。</NoticeBar>
+<!-- 文字较长时，通过禁用 scrollable 属性关闭滚动播放 -->
+<NoticeBar scrollable={false}>
+  在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。
+</NoticeBar>
+```
+
+### 多行展示
+
+文字较长时，可以通过设置 `wordwrap` 属性来开启多行展示。
+
+```tsx
+<NoticeBar wordwrap scrollable={false}>
+  在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。
+</NoticeBar>
+```
+
+### 通知栏模式
+
+通过 `NoticeBar.Action` 组件可以显示不同的通知栏模式。
+
+```tsx
+<NoticeBar scrollable={false}>
+  技术是开发它的人的共同灵魂。
+  <NoticeBar.Action>
+    <Cross />
+  </NoticeBar.Action>
+</NoticeBar>
+<WhiteSpace />
+<NoticeBar scrollable={false}>
+  技术是开发它的人的共同灵魂。
+  <NoticeBar.Action>
+    <ArrowRight />
+  </NoticeBar.Action>
+</NoticeBar>
+```
+
+### 自定义样式
+
+通过 `style` 属性设置文本颜色和背景色。
+
+```tsx
+<NoticeBar style={{ color: "#1989fa", background: "#ecf9ff" }}>
+  <NoticeBar.Icon>
+    <InfoOutlined />
+  </NoticeBar.Icon>
+  技术是开发它的人的共同灵魂。
+</NoticeBar>
+```
+
+### 垂直滚动
+
+搭配 NoticeBar 和 Swiper 组件可以实现垂直滚动的效果。
+
+```tsx
+<NoticeBar>
+  <NoticeBar.Icon>
+    <VolumeOutlined />
+  </NoticeBar.Icon>
+  <Swiper className="notice-swiper" direction="vertical" autoplay={3000}>
+    <Swiper.Item>内容 1</Swiper.Item>
+    <Swiper.Item>内容 2</Swiper.Item>
+    <Swiper.Item>内容 3</Swiper.Item>
+  </Swiper>
+</NoticeBar>
+```
+
+```scss
+.notice-swiper {
+  height: 40px * 2;
+  line-height: 40px * 2;
+}
+```
+
+## API
+
+### Props
+
+| 参数       | 说明                                     | 类型               | 默认值  |
+| ---------- | ---------------------------------------- | ------------------ | ------- |
+| className  | 通知栏自定义类名                         | _string_           | -       |
+| style      | 通知栏自定义样式                         | _CSSProperties_    | -       |
+| children   | 通知文本内容                             | _ReactNode_        | -       |
+| delay      | 动画延迟时间 (ms)                        | _number \| string_ | `1000`  |
+| speed      | 滚动速率 (px/s)                          | _number \| string_ | `60`    |
+| scrollable | 是否开启滚动播放，内容长度溢出时默认开启 | _boolean_          | `false` |
+| wordwrap   | 是否开启文本换行，只在禁用滚动时生效     | _boolean_          | `false` |
+
+### Events
+
+| 事件名   | 说明                         | 回调参数            |
+| -------- | ---------------------------- | ------------------- |
+| onClick  | 点击通知栏时触发             | _event: MouseEvent_ |
+| onReplay | 每当滚动栏重新开始滚动时触发 | -                   |
+
+### 方法
+
+通过 ref 可以获取到 NoticeBar 实例并调用实例方法
+
+| 方法名                 | 说明                 | 参数 | 返回值 |
+| ---------------------- | -------------------- | ---- | ------ |
+| reset `v0.1.1-alpha.3` | 重置通知栏到初始状态 | -    | -      |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider](/components/config-provider/) 组件。
+
+| 名称                          | 默认值                                | 描述 |
+| ----------------------------- | ------------------------------------- | ---- |
+| --notice-bar-height           | _40px \* $hd_                         | -    |
+| --notice-bar-padding          | _0 var(--padding-md)_                 | -    |
+| --notice-bar-wordwrap-padding | _var(--padding-xs) var(--padding-md)_ | -    |
+| --notice-bar-color            | _var(--orange-dark)_                  | -    |
+| --notice-bar-font-size        | _var(--font-size-md)_                 | -    |
+| --notice-bar-line-height      | _24px \* $hd_                         | -    |
+| --notice-bar-background-color | _var(--orange-light)_                 | -    |
+| --notice-bar-icon-size        | _16px \* $hd_                         | -    |
+| --notice-bar-icon-min-width   | _24px \* $hd_                         | -    |

package/metaData/components/notice-bar/example/index.tsx

@@ -0,0 +1,107 @@
+import { NoticeBar, Swiper, WhiteSpace } from "@fjyueke/bify-core"
+import { ArrowRight, Cross, InfoOutlined, VolumeOutlined } from "@fjyueke/bify-icons"
+import Block from "../../../components/block"
+import Page from "../../../components/page"
+import "./index.scss"
+
+function BasicNoticeBar() {
+  return (
+    <NoticeBar scrollable>
+      <NoticeBar.Icon>
+        <VolumeOutlined />
+      </NoticeBar.Icon>
+      在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。
+    </NoticeBar>
+  )
+}
+
+function ScrollableNoticeBar() {
+  return (
+    <>
+      <NoticeBar scrollable>技术是开发它的人的共同灵魂。</NoticeBar>
+      <WhiteSpace />
+      <NoticeBar scrollable={false}>
+        在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。
+      </NoticeBar>
+    </>
+  )
+}
+
+function WordwrapNoticeBar() {
+  return (
+    <NoticeBar wordwrap scrollable={false}>
+      在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。
+    </NoticeBar>
+  )
+}
+
+function ActionNoticeBar() {
+  return (
+    <>
+      <NoticeBar scrollable={false}>
+        技术是开发它的人的共同灵魂。
+        <NoticeBar.Action>
+          <Cross />
+        </NoticeBar.Action>
+      </NoticeBar>
+      <WhiteSpace />
+      <NoticeBar scrollable={false}>
+        技术是开发它的人的共同灵魂。
+        <NoticeBar.Action>
+          <ArrowRight />
+        </NoticeBar.Action>
+      </NoticeBar>
+    </>
+  )
+}
+
+function NoticeBarWithCustomStyle() {
+  return (
+    <NoticeBar style={{ color: "#1989fa", background: "#ecf9ff" }}>
+      <NoticeBar.Icon>
+        <InfoOutlined />
+      </NoticeBar.Icon>
+      技术是开发它的人的共同灵魂。
+    </NoticeBar>
+  )
+}
+
+function NoticeBarWithVerticalScrolling() {
+  return (
+    <NoticeBar>
+      <NoticeBar.Icon>
+        <VolumeOutlined />
+      </NoticeBar.Icon>
+      <Swiper className="notice-swiper" direction="vertical" autoplay={3000}>
+        <Swiper.Item>内容 1</Swiper.Item>
+        <Swiper.Item>内容 2</Swiper.Item>
+        <Swiper.Item>内容 3</Swiper.Item>
+      </Swiper>
+    </NoticeBar>
+  )
+}
+
+export default function NoticeBarDemo() {
+  return (
+    <Page title="NoticeBar 通知栏" className="notice-bar-demo">
+      <Block title="基础用法">
+        <BasicNoticeBar />
+      </Block>
+      <Block title="滚动播放">
+        <ScrollableNoticeBar />
+      </Block>
+      <Block title="多行展示">
+        <WordwrapNoticeBar />
+      </Block>
+      <Block title="通知栏模式">
+        <ActionNoticeBar />
+      </Block>
+      <Block title="自定义样式">
+        <NoticeBarWithCustomStyle />
+      </Block>
+      <Block title="垂直滚动">
+        <NoticeBarWithVerticalScrolling />
+      </Block>
+    </Page>
+  )
+}

package/metaData/components/notify/api.md

@@ -0,0 +1,28 @@
+## API
+
+### Props
+
+| 参数                        | 说明                                         | 类型                       | 默认值   |
+| --------------------------- | -------------------------------------------- | -------------------------- | -------- |
+| className                   | 自定义类名                                   | _string_                   | -        |
+| style                       | 组件样式                                     | _CSSProperties_            | -        |
+| defaultOpen                 | 默认是否显示消息提示                         | _boolean_                  | -        |
+| open                        | 是否显示消息提示                             | _boolean_                  | -        |
+| type                        | 类型，可选值为 `primary` `success` `warning` | _string_                   | `danger` |
+| color `v0.6.0-alpha.0`      | 字体颜色                                     | _string_                   | -        |
+| background `v0.6.0-alpha.0` | 背景颜色                                     | _string_                   | -        |
+| duration                    | 展示时长(ms)，值为 0 时，notify 不会消失     | _number_                   | `3000`   |
+| children                    | 展示文案，支持通过`\n`换行                   | _ReactNode_                | -        |
+| onClose                     | 关闭时的回调函数                             | _(open : boolean) => void_ | -        |
+
+### Options
+
+| 参数      | 说明                                         | 类型                       | 默认值   |
+| --------- | -------------------------------------------- | -------------------------- | -------- |
+| selector  | 自定义节点选择器                             | _string_                   | `notify` |
+| className | 自定义类名                                   | _string_                   | -        |
+| style     | 组件样式                                     | _CSSProperties_            | -        |
+| color     | 类型，可选值为 `primary` `success` `warning` | _string_                   | `danger` |
+| duration  | 展示时长(ms)，值为 0 时，notify 不会消失     | _number_                   | `3000`   |
+| message   | 展示文案，支持通过`\n`换行                   | _ReactNode_                | -        |
+| onClose   | 关闭时的回调函数                             | _(open : boolean) => void_ | -        |

package/metaData/components/notify/doc.md

@@ -0,0 +1,140 @@
+# Notify 消息提示
+
+### 介绍
+
+在页面顶部展示消息提示，支持函数调用和组件调用两种方式。
+
+### 函数调用
+
+版本 >= `v0.6.0-alpha.0`可以直接调用。低版本需要手动在页面（page）里挂载一个 Notify 组件并指定 id 为 `notify`。
+
+```tsx
+import { Cell, Notify } from "@fjyueke/bify-core"
+
+function ImperativeNotify() {
+  return (
+    <>
+      {/* <Notify id="notify" /> */}
+      <Cell title="函数调用" clickable isLink onClick={() => Notify.open("通知内容")} />
+    </>
+  )
+}
+```
+
+### 组件调用
+
+```tsx
+import { Cell, Notify } from "@fjyueke/bify-core"
+
+function BasicNotify() {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <>
+      <Notify open={open} onClose={setOpen}>
+        通知内容
+      </Notify>
+      <Cell title="基础用法" clickable onClick={() => setOpen(true)} />
+    </>
+  )
+}
+```
+
+## 代码演示
+
+### 基础用法
+
+```ts
+Notify.open("通知内容")
+```
+
+```tsx
+<Notify id="notify" open>
+  通知内容
+</Notify>
+```
+
+### 通知颜色
+
+预设 `primary`、`success`、`warning`、`danger` 四种通知颜色，默认为 `danger`。
+
+```ts
+Notify.open({ type: "primary", message: "通知内容" })
+Notify.open({ type: "success", message: "通知内容" })
+Notify.open({ type: "danger", message: "通知内容" })
+Notify.open({ type: "warning", message: "通知内容" })
+```
+
+```tsx
+<Notify open type="primary">通知内容</Notify>
+<Notify open type="success">通知内容</Notify>
+<Notify open type="danger">通知内容</Notify>
+<Notify open type="warning">通知内容</Notify>
+```
+
+### 自定义通知
+
+自定义消息通知的颜色和展示时长。
+
+```ts
+Notify.open({
+  color: "#ad0000",
+  background: "#ffe1e1",
+  message: "自定义颜色",
+})
+Notify.open({
+  duration: 1000,
+  message: "自定义时长",
+})
+```
+
+```tsx
+<Notify open style={{ color: "#ad0000", background: "#ffe1e1" }}>自定义颜色</Notify>
+<Notify open duration={1000}>自定义时长</Notify>
+```
+
+## API
+
+### Props
+
+| 参数                        | 说明                                         | 类型                       | 默认值   |
+| --------------------------- | -------------------------------------------- | -------------------------- | -------- |
+| className                   | 自定义类名                                   | _string_                   | -        |
+| style                       | 组件样式                                     | _CSSProperties_            | -        |
+| defaultOpen                 | 默认是否显示消息提示                         | _boolean_                  | -        |
+| open                        | 是否显示消息提示                             | _boolean_                  | -        |
+| type                        | 类型，可选值为 `primary` `success` `warning` | _string_                   | `danger` |
+| color `v0.6.0-alpha.0`      | 字体颜色                                     | _string_                   | -        |
+| background `v0.6.0-alpha.0` | 背景颜色                                     | _string_                   | -        |
+| duration                    | 展示时长(ms)，值为 0 时，notify 不会消失     | _number_                   | `3000`   |
+| children                    | 展示文案，支持通过`\n`换行                   | _ReactNode_                | -        |
+| onClose                     | 关闭时的回调函数                             | _(open : boolean) => void_ | -        |
+
+### Options
+
+| 参数      | 说明                                         | 类型                       | 默认值   |
+| --------- | -------------------------------------------- | -------------------------- | -------- |
+| selector  | 自定义节点选择器                             | _string_                   | `notify` |
+| className | 自定义类名                                   | _string_                   | -        |
+| style     | 组件样式                                     | _CSSProperties_            | -        |
+| color     | 类型，可选值为 `primary` `success` `warning` | _string_                   | `danger` |
+| duration  | 展示时长(ms)，值为 0 时，notify 不会消失     | _number_                   | `3000`   |
+| message   | 展示文案，支持通过`\n`换行                   | _ReactNode_                | -        |
+| onClose   | 关闭时的回调函数                             | _(open : boolean) => void_ | -        |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider](/components/config-provider/) 组件。
+
+| 名称                              | 默认值                                | 描述 |
+| --------------------------------- | ------------------------------------- | ---- |
+| --notify-color                    | _var(--white)_                        | -    |
+| --notify-padding                  | _var(--padding-xs) var(--padding-md)_ | -    |
+| --notify-font-size                | _var(--font-size-md)_                 | -    |
+| --notify-line-height              | _var(--line-height-md)_               | -    |
+| --notify-primary-background-color | _var(--primary-color)_                | -    |
+| --notify-success-background-color | _var(--success-color)_                | -    |
+| --notify-warning-background-color | _var(--warning-color)_                | -    |
+| --notify-danger-background-color  | _var(--danger-color)_                 | -    |

package/metaData/components/notify/example/index.tsx

@@ -0,0 +1,89 @@
+import { Cell, Notify } from "@fjyueke/bify-core"
+import Block from "../../../components/block"
+import Page from "../../../components/page"
+import "./index.scss"
+
+function BasicNotify() {
+  return (
+    <>
+      <Cell title="基础用法" clickable isLink onClick={() => Notify.open("文字提示")} />
+    </>
+  )
+}
+
+function CustomNotify() {
+  return (
+    <>
+      <Cell
+        title="自定义颜色"
+        clickable
+        isLink
+        onClick={() => {
+          Notify.open({
+            color: "#ad0000",
+            background: "#ffe1e1",
+            message: "自定义颜色",
+          })
+        }}
+      />
+      <Cell
+        title="自定义时长"
+        clickable
+        isLink
+        onClick={() =>
+          Notify.open({
+            duration: 1000,
+            message: "自定义时长",
+          })
+        }
+      />
+    </>
+  )
+}
+
+function NotifyWithPresetColors() {
+  return (
+    <>
+      <Cell
+        title="主要通知"
+        clickable
+        isLink
+        onClick={() => Notify.open({ color: "primary", message: "通知内容" })}
+      />
+      <Cell
+        title="成功通知"
+        clickable
+        isLink
+        onClick={() => Notify.open({ color: "success", message: "通知内容" })}
+      />
+      <Cell
+        title="危险通知"
+        clickable
+        isLink
+        onClick={() => Notify.open({ color: "danger", message: "通知内容" })}
+      />
+      <Cell
+        title="警告通知"
+        clickable
+        isLink
+        onClick={() => Notify.open({ color: "warning", message: "通知内容" })}
+      />
+    </>
+  )
+}
+
+export default function NotifyDemo() {
+  return (
+    <Page title="Notify 消息提示" className="notify-demo">
+      <Block variant="card" title="基础用法">
+        <BasicNotify />
+      </Block>
+      <Block variant="card" title="通知颜色">
+        <NotifyWithPresetColors />
+      </Block>
+      <Block variant="card" title="自定义配置">
+        <CustomNotify />
+      </Block>
+    </Page>
+  )
+}