seven-design-ui 0.0.6 → 0.0.7

package/docs/components/message.mdx

@@ -1,297 +1,297 @@
----
-title: Message 消息提示
-description: 常用于主动操作后的反馈提示。与 Notification 的区别是后者更多用于系统级通知的被动提醒。
----
-
-import { MessageProvider, $message } from '@seven-design-ui/components'
-
-:::info
-所有演示都已包含在 MessageProvider 中，你可以直接点击按钮查看效果。
-:::
-
-## 基础用法
-
-默认情况下在顶部显示并在 3 秒后消失。你可以使用 placement 属性控制位置。
-
-```tsx preview
-function BasicMessage() {
-  return (
-    <MessageProvider>
-      <div>
-        <button
-          style={{
-            padding: '8px 16px',
-            backgroundColor: '#409eff',
-            color: 'white',
-            border: 'none',
-            borderRadius: '4px',
-            cursor: 'pointer',
-            fontSize: '14px'
-          }}
-          onClick={() => $message.info('这是一条普通的消息')}
-        >
-          显示消息
-        </button>
-      </div>
-      <MessageContainer />
-    </MessageProvider>
-  )
-}
-
-export default BasicMessage
-```
-
-## 不同状态
-
-用来显示「成功、警告、消息、错误、主要」类的操作反馈。
-
-```tsx preview
-function MessageTypes() {
-  const buttonStyle = {
-    padding: '8px 16px',
-    backgroundColor: '#409eff',
-    color: 'white',
-    border: 'none',
-    borderRadius: '4px',
-    cursor: 'pointer',
-    fontSize: '14px',
-    marginBottom: '8px'
-  }
-
-  return (
-    <MessageProvider>
-      <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
-        <button style={{...buttonStyle, backgroundColor: '#67c23a'}} onClick={() => $message.success('操作成功！')}>
-          成功消息
-        </button>
-        <button style={{...buttonStyle, backgroundColor: '#e6a23c'}} onClick={() => $message.warning('这是一条警告消息')}>
-          警告消息
-        </button>
-        <button style={{...buttonStyle, backgroundColor: '#f56c6c'}} onClick={() => $message.error('操作失败，请重试')}>
-          错误消息
-        </button>
-        <button style={{...buttonStyle, backgroundColor: '#409eff'}} onClick={() => $message.primary('这是一条主要消息')}>
-          主要消息
-        </button>
-        <button style={{...buttonStyle, backgroundColor: '#909399'}} onClick={() => $message.info('这是一条普通消息')}>
-          普通消息
-        </button>
-      </div>
-      <MessageContainer />
-    </MessageProvider>
-  )
-}
-
-export default MessageTypes
-```
-
-## Plain 背景
-
-设置 plain 为 true 可以显示纯色背景的消息。
-
-```tsx preview
-function PlainMessage() {
-  const buttonStyle = {
-    padding: '8px 16px',
-    backgroundColor: '#409eff',
-    color: 'white',
-    border: 'none',
-    borderRadius: '4px',
-    cursor: 'pointer',
-    fontSize: '14px',
-    marginBottom: '8px'
-  }
-
-  return (
-    <MessageProvider>
-      <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
-        <button style={{...buttonStyle, backgroundColor: '#67c23a'}} onClick={() => $message.success('纯色背景的成功消息', { plain: true })}>
-          纯色成功
-        </button>
-        <button style={{...buttonStyle, backgroundColor: '#e6a23c'}} onClick={() => $message.warning('纯色背景的警告消息', { plain: true })}>
-          纯色警告
-        </button>
-        <button style={{...buttonStyle, backgroundColor: '#f56c6c'}} onClick={() => $message.error('纯色背景的错误消息', { plain: true })}>
-          纯色错误
-        </button>
-      </div>
-      <MessageContainer />
-    </MessageProvider>
-  )
-}
-
-export default PlainMessage
-```
-
-## 可关闭的消息提示
-
-默认的 Message 是不可以被人工关闭的。如果你需要手动关闭功能，你可以把 showClose 设置为 true。此外，和 Notification 一样，Message 拥有可控的 duration，默认的关闭时间为 3000 毫秒，当把这个属性的值设置为 0 便表示该消息不会被自动关闭。
-
-```tsx preview
-function ClosableMessage() {
-  const buttonStyle = {
-    padding: '8px 16px',
-    backgroundColor: '#409eff',
-    color: 'white',
-    border: 'none',
-    borderRadius: '4px',
-    cursor: 'pointer',
-    fontSize: '14px',
-    marginBottom: '8px'
-  }
-
-  return (
-    <MessageProvider>
-      <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
-        <button style={{...buttonStyle, backgroundColor: '#909399'}} onClick={() => $message.info('这是一条可关闭的消息', {
-          showClose: true
-        })}>
-          可关闭消息
-        </button>
-        <button style={{...buttonStyle, backgroundColor: '#67c23a'}} onClick={() => $message.success('这条消息不会自动关闭', {
-          duration: 0,
-          showClose: true
-        })}>
-          永不自动关闭
-        </button>
-      </div>
-      <MessageContainer />
-    </MessageProvider>
-  )
-}
-
-export default ClosableMessage
-```
-
-## 位置控制
-
-使用 placement 属性可以控制消息显示的位置。
-
-```tsx preview
-function PositionMessage() {
-  const buttonStyle = {
-    padding: '8px 16px',
-    backgroundColor: '#409eff',
-    color: 'white',
-    border: 'none',
-    borderRadius: '4px',
-    cursor: 'pointer',
-    fontSize: '14px',
-    marginBottom: '8px'
-  }
-
-  return (
-    <MessageProvider>
-      <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
-        <button style={buttonStyle} onClick={() => $message.info('顶部居中的消息')}>
-          顶部居中
-        </button>
-        <button style={buttonStyle} onClick={() => $message.info('顶部左侧的消息', { placement: 'top-left' })}>
-          顶部左侧
-        </button>
-        <button style={buttonStyle} onClick={() => $message.info('顶部右侧的消息', { placement: 'top-right' })}>
-          顶部右侧
-        </button>
-        <button style={buttonStyle} onClick={() => $message.info('底部居中的消息', { placement: 'bottom' })}>
-          底部居中
-        </button>
-        <button style={buttonStyle} onClick={() => $message.info('底部左侧的消息', { placement: 'bottom-left' })}>
-          底部左侧
-        </button>
-        <button style={buttonStyle} onClick={() => $message.info('底部右侧的消息', { placement: 'bottom-right' })}>
-          底部右侧
-        </button>
-      </div>
-      <MessageContainer />
-    </MessageProvider>
-  )
-}
-
-export default PositionMessage
-```
-
-## 通用 API
-
-你也可以使用通用的 open 方法来显示消息，这样可以设置更多的选项。
-
-```tsx preview
-function OpenApiMessage() {
-  const buttonStyle = {
-    padding: '8px 16px',
-    backgroundColor: '#409eff',
-    color: 'white',
-    border: 'none',
-    borderRadius: '4px',
-    cursor: 'pointer',
-    fontSize: '14px'
-  }
-
-  return (
-    <MessageProvider>
-      <div style={{ display: 'flex', gap: '10px' }}>
-        <button style={buttonStyle} onClick={() => $message.open({
-          message: '自定义消息内容',
-          type: 'primary',
-          placement: 'top-right',
-          showClose: true,
-          duration: 5000,
-          plain: true,
-          onClose: () => {
-            console.log('消息已关闭')
-          }
-        })}>
-          通用API
-        </button>
-      </div>
-      <MessageContainer />
-    </MessageProvider>
-  )
-}
-
-export default OpenApiMessage
-```
-
-## API 参考
-
-### MessageOptions
-
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| message | 消息内容 | `string \| ReactNode` | - |
-| type | 消息类型 | `MessageType` | `'info'` |
-| placement | 消息位置 | `MessagePlacement` | `'top'` |
-| showClose | 是否显示关闭按钮 | `boolean` | `false` |
-| duration | 显示时长，单位毫秒，0表示不自动关闭 | `number` | `3000` |
-| plain | 是否为纯色背景 | `boolean` | `false` |
-| className | 自定义类名 | `string` | - |
-| onClose | 关闭时的回调函数 | `() => void` | - |
-
-### MessageType
-
-```tsx
-type MessageType = 'success' | 'warning' | 'error' | 'info' | 'primary'
-```
-
-### MessagePlacement
-
-```tsx
-type MessagePlacement = 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right'
-```
-
-### $message 方法
-
-| 方法 | 说明 | 参数 |
-| --- | --- | --- |
-| $message.info | 显示普通消息 | `(message, options?)` |
-| $message.success | 显示成功消息 | `(message, options?)` |
-| $message.warning | 显示警告消息 | `(message, options?)` |
-| $message.error | 显示错误消息 | `(message, options?)` |
-| $message.primary | 显示主要消息 | `(message, options?)` |
-| $message.open | 通用显示方法 | `(options)` |
-
-### 组件
-
-| 组件 | 说明 |
-| --- | --- |
-| MessageProvider | 消息提供者，需要包裹在应用根组件外层 |
+---
+title: Message 消息提示
+description: 常用于主动操作后的反馈提示。与 Notification 的区别是后者更多用于系统级通知的被动提醒。
+---
+
+import { MessageProvider, $message } from '@seven-design-ui/components'
+
+:::info
+所有演示都已包含在 MessageProvider 中，你可以直接点击按钮查看效果。
+:::
+
+## 基础用法
+
+默认情况下在顶部显示并在 3 秒后消失。你可以使用 placement 属性控制位置。
+
+```tsx preview
+function BasicMessage() {
+  return (
+    <MessageProvider>
+      <div>
+        <button
+          style={{
+            padding: '8px 16px',
+            backgroundColor: '#409eff',
+            color: 'white',
+            border: 'none',
+            borderRadius: '4px',
+            cursor: 'pointer',
+            fontSize: '14px'
+          }}
+          onClick={() => $message.info('这是一条普通的消息')}
+        >
+          显示消息
+        </button>
+      </div>
+      <MessageContainer />
+    </MessageProvider>
+  )
+}
+
+export default BasicMessage
+```
+
+## 不同状态
+
+用来显示「成功、警告、消息、错误、主要」类的操作反馈。
+
+```tsx preview
+function MessageTypes() {
+  const buttonStyle = {
+    padding: '8px 16px',
+    backgroundColor: '#409eff',
+    color: 'white',
+    border: 'none',
+    borderRadius: '4px',
+    cursor: 'pointer',
+    fontSize: '14px',
+    marginBottom: '8px'
+  }
+
+  return (
+    <MessageProvider>
+      <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
+        <button style={{...buttonStyle, backgroundColor: '#67c23a'}} onClick={() => $message.success('操作成功！')}>
+          成功消息
+        </button>
+        <button style={{...buttonStyle, backgroundColor: '#e6a23c'}} onClick={() => $message.warning('这是一条警告消息')}>
+          警告消息
+        </button>
+        <button style={{...buttonStyle, backgroundColor: '#f56c6c'}} onClick={() => $message.error('操作失败，请重试')}>
+          错误消息
+        </button>
+        <button style={{...buttonStyle, backgroundColor: '#409eff'}} onClick={() => $message.primary('这是一条主要消息')}>
+          主要消息
+        </button>
+        <button style={{...buttonStyle, backgroundColor: '#909399'}} onClick={() => $message.info('这是一条普通消息')}>
+          普通消息
+        </button>
+      </div>
+      <MessageContainer />
+    </MessageProvider>
+  )
+}
+
+export default MessageTypes
+```
+
+## Plain 背景
+
+设置 plain 为 true 可以显示纯色背景的消息。
+
+```tsx preview
+function PlainMessage() {
+  const buttonStyle = {
+    padding: '8px 16px',
+    backgroundColor: '#409eff',
+    color: 'white',
+    border: 'none',
+    borderRadius: '4px',
+    cursor: 'pointer',
+    fontSize: '14px',
+    marginBottom: '8px'
+  }
+
+  return (
+    <MessageProvider>
+      <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
+        <button style={{...buttonStyle, backgroundColor: '#67c23a'}} onClick={() => $message.success('纯色背景的成功消息', { plain: true })}>
+          纯色成功
+        </button>
+        <button style={{...buttonStyle, backgroundColor: '#e6a23c'}} onClick={() => $message.warning('纯色背景的警告消息', { plain: true })}>
+          纯色警告
+        </button>
+        <button style={{...buttonStyle, backgroundColor: '#f56c6c'}} onClick={() => $message.error('纯色背景的错误消息', { plain: true })}>
+          纯色错误
+        </button>
+      </div>
+      <MessageContainer />
+    </MessageProvider>
+  )
+}
+
+export default PlainMessage
+```
+
+## 可关闭的消息提示
+
+默认的 Message 是不可以被人工关闭的。如果你需要手动关闭功能，你可以把 showClose 设置为 true。此外，和 Notification 一样，Message 拥有可控的 duration，默认的关闭时间为 3000 毫秒，当把这个属性的值设置为 0 便表示该消息不会被自动关闭。
+
+```tsx preview
+function ClosableMessage() {
+  const buttonStyle = {
+    padding: '8px 16px',
+    backgroundColor: '#409eff',
+    color: 'white',
+    border: 'none',
+    borderRadius: '4px',
+    cursor: 'pointer',
+    fontSize: '14px',
+    marginBottom: '8px'
+  }
+
+  return (
+    <MessageProvider>
+      <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
+        <button style={{...buttonStyle, backgroundColor: '#909399'}} onClick={() => $message.info('这是一条可关闭的消息', {
+          showClose: true
+        })}>
+          可关闭消息
+        </button>
+        <button style={{...buttonStyle, backgroundColor: '#67c23a'}} onClick={() => $message.success('这条消息不会自动关闭', {
+          duration: 0,
+          showClose: true
+        })}>
+          永不自动关闭
+        </button>
+      </div>
+      <MessageContainer />
+    </MessageProvider>
+  )
+}
+
+export default ClosableMessage
+```
+
+## 位置控制
+
+使用 placement 属性可以控制消息显示的位置。
+
+```tsx preview
+function PositionMessage() {
+  const buttonStyle = {
+    padding: '8px 16px',
+    backgroundColor: '#409eff',
+    color: 'white',
+    border: 'none',
+    borderRadius: '4px',
+    cursor: 'pointer',
+    fontSize: '14px',
+    marginBottom: '8px'
+  }
+
+  return (
+    <MessageProvider>
+      <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
+        <button style={buttonStyle} onClick={() => $message.info('顶部居中的消息')}>
+          顶部居中
+        </button>
+        <button style={buttonStyle} onClick={() => $message.info('顶部左侧的消息', { placement: 'top-left' })}>
+          顶部左侧
+        </button>
+        <button style={buttonStyle} onClick={() => $message.info('顶部右侧的消息', { placement: 'top-right' })}>
+          顶部右侧
+        </button>
+        <button style={buttonStyle} onClick={() => $message.info('底部居中的消息', { placement: 'bottom' })}>
+          底部居中
+        </button>
+        <button style={buttonStyle} onClick={() => $message.info('底部左侧的消息', { placement: 'bottom-left' })}>
+          底部左侧
+        </button>
+        <button style={buttonStyle} onClick={() => $message.info('底部右侧的消息', { placement: 'bottom-right' })}>
+          底部右侧
+        </button>
+      </div>
+      <MessageContainer />
+    </MessageProvider>
+  )
+}
+
+export default PositionMessage
+```
+
+## 通用 API
+
+你也可以使用通用的 open 方法来显示消息，这样可以设置更多的选项。
+
+```tsx preview
+function OpenApiMessage() {
+  const buttonStyle = {
+    padding: '8px 16px',
+    backgroundColor: '#409eff',
+    color: 'white',
+    border: 'none',
+    borderRadius: '4px',
+    cursor: 'pointer',
+    fontSize: '14px'
+  }
+
+  return (
+    <MessageProvider>
+      <div style={{ display: 'flex', gap: '10px' }}>
+        <button style={buttonStyle} onClick={() => $message.open({
+          message: '自定义消息内容',
+          type: 'primary',
+          placement: 'top-right',
+          showClose: true,
+          duration: 5000,
+          plain: true,
+          onClose: () => {
+            console.log('消息已关闭')
+          }
+        })}>
+          通用API
+        </button>
+      </div>
+      <MessageContainer />
+    </MessageProvider>
+  )
+}
+
+export default OpenApiMessage
+```
+
+## API 参考
+
+### MessageOptions
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| message | 消息内容 | `string \| ReactNode` | - |
+| type | 消息类型 | `MessageType` | `'info'` |
+| placement | 消息位置 | `MessagePlacement` | `'top'` |
+| showClose | 是否显示关闭按钮 | `boolean` | `false` |
+| duration | 显示时长，单位毫秒，0表示不自动关闭 | `number` | `3000` |
+| plain | 是否为纯色背景 | `boolean` | `false` |
+| className | 自定义类名 | `string` | - |
+| onClose | 关闭时的回调函数 | `() => void` | - |
+
+### MessageType
+
+```tsx
+type MessageType = 'success' | 'warning' | 'error' | 'info' | 'primary'
+```
+
+### MessagePlacement
+
+```tsx
+type MessagePlacement = 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right'
+```
+
+### $message 方法
+
+| 方法 | 说明 | 参数 |
+| --- | --- | --- |
+| $message.info | 显示普通消息 | `(message, options?)` |
+| $message.success | 显示成功消息 | `(message, options?)` |
+| $message.warning | 显示警告消息 | `(message, options?)` |
+| $message.error | 显示错误消息 | `(message, options?)` |
+| $message.primary | 显示主要消息 | `(message, options?)` |
+| $message.open | 通用显示方法 | `(options)` |
+
+### 组件
+
+| 组件 | 说明 |
+| --- | --- |
+| MessageProvider | 消息提供者，需要包裹在应用根组件外层 |
 | MessageContainer | 消息容器组件，用于渲染消息列表 |

package/docs/doc_build/404.html

@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="generator" content="Rspress v1.47.0">
     <title data-rh="true">404 - SevenDesign</title><meta data-rh="true" name="description" content="企业级 React UI 组件库"/>
-  <script>{;const saved = localStorage.getItem('rspress-theme-appearance');const preferDark = window.matchMedia('(prefers-color-scheme: dark)').matches;const isDark = !saved || saved === 'auto' ? preferDark : saved === 'dark';document.documentElement.classList.toggle('dark', isDark);document.documentElement.style.colorScheme = isDark ? 'dark' : 'light';}</script><link rel="icon" href="/sevenDesign/logo.svg" type="image/svg+xml"><script defer src="/sevenDesign/static/js/styles.f2af9a40.js"></script><script defer src="/sevenDesign/static/js/lib-react.ce4199ca.js"></script><script defer src="/sevenDesign/static/js/lib-router.4000fe55.js"></script><script defer src="/sevenDesign/static/js/414.4bd5c320.js"></script><script defer src="/sevenDesign/static/js/index.40275d65.js"></script><link href="/sevenDesign/static/css/styles.d34980d1.css" rel="stylesheet"></head>
+  <script>{;const saved = localStorage.getItem('rspress-theme-appearance');const preferDark = window.matchMedia('(prefers-color-scheme: dark)').matches;const isDark = !saved || saved === 'auto' ? preferDark : saved === 'dark';document.documentElement.classList.toggle('dark', isDark);document.documentElement.style.colorScheme = isDark ? 'dark' : 'light';}</script><link rel="icon" href="/sevenDesign/logo.svg" type="image/svg+xml"><script defer src="/sevenDesign/static/js/styles.f2af9a40.js"></script><script defer src="/sevenDesign/static/js/lib-react.ce4199ca.js"></script><script defer src="/sevenDesign/static/js/lib-router.4000fe55.js"></script><script defer src="/sevenDesign/static/js/414.4bd5c320.js"></script><script defer src="/sevenDesign/static/js/index.37901975.js"></script><link href="/sevenDesign/static/css/styles.67114bef.css" rel="stylesheet"></head>
 
   <body >
     <div id="root"><link rel="preload" as="image" href="/sevenDesign/logo.svg"/><div class="navContainer_d18b1 rspress-nav px-6  sticky_ddfa7"><div class="container_e4235 flex justify-between items-center h-full"><div class="navBarTitle_c5f07"><a href="/sevenDesign/index.html" class="link_a7cea flex items-center w-full h-full text-base font-semibold transition-opacity duration-300 hover:opacity-60"><div class="mr-1 min-w-8"><img src="/sevenDesign/logo.svg" alt="logo" id="logo" class="rspress-logo dark:hidden"/><img src="/sevenDesign/logo.svg" alt="logo" id="logo" class="rspress-logo hidden dark:block"/></div></a></div><div class="flex flex-1 justify-end items-center"><div class="rightNav_a2fea"><div class="flex sm:flex-1 items-center sm:pl-4 sm:pr-2"><div class="rspress-nav-search-button navSearchButton_df1fb"><button><svg width="18" height="18" viewBox="0 0 32 32"><path fill="var(--rp-c-gray)" d="m29 27.586-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29ZM4 13a9 9 0 1 1 9 9 9.01 9.01 0 0 1-9-9"></path></svg><p class="searchWord_af2c1">Search</p><div style="opacity:0"><span></span><span>K</span></div></button></div><div class="mobileNavSearchButton_d85a9"><svg width="24" height="24" viewBox="0 0 32 32"><path fill="var(--rp-c-gray)" d="m29 27.586-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29ZM4 13a9 9 0 1 1 9 9 9.01 9.01 0 0 1-9-9"></path></svg></div></div><div class="rspress-nav-menu menu h-14"><a href="/sevenDesign/guide/introduction.html" class="link_a7cea "><div class="rspress-nav-menu-item singleItem_c1154  text-sm font-medium mx-1.5 px-3 py-2 flex items-center break-keep">指南</div></a><a href="/sevenDesign/components/button.html" class="link_a7cea "><div class="rspress-nav-menu-item singleItem_c1154  text-sm font-medium mx-1.5 px-3 py-2 flex items-center break-keep">组件</div></a></div><div class="flex-center flex-row"><div class="mx-2"><div class="md:mr-2 rspress-nav-appearance"><div class="p-1 border border-solid border-gray-300 text-gray-400  cursor-pointer rounded-md hover:border-gray-600 hover:text-gray-600 dark:hover:border-gray-200 dark:hover:text-gray-200 transition-all duration-300 w-7 h-7"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 24 24" class="dark:hidden" width="18" height="18" fill="currentColor"><path d="M12 18c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6m0-10c-2.2 0-4 1.8-4 4s1.8 4 4 4 4-1.8 4-4-1.8-4-4-4M12 4c-.6 0-1-.4-1-1V1c0-.6.4-1 1-1s1 .4 1 1v2c0 .6-.4 1-1 1M12 24c-.6 0-1-.4-1-1v-2c0-.6.4-1 1-1s1 .4 1 1v2c0 .6-.4 1-1 1M5.6 6.6c-.3 0-.5-.1-.7-.3L3.5 4.9c-.4-.4-.4-1 0-1.4s1-.4 1.4 0l1.4 1.4c.4.4.4 1 0 1.4-.1.2-.4.3-.7.3M19.8 20.8c-.3 0-.5-.1-.7-.3l-1.4-1.4c-.4-.4-.4-1 0-1.4s1-.4 1.4 0l1.4 1.4c.4.4.4 1 0 1.4-.2.2-.5.3-.7.3M3 13H1c-.6 0-1-.4-1-1s.4-1 1-1h2c.6 0 1 .4 1 1s-.4 1-1 1M23 13h-2c-.6 0-1-.4-1-1s.4-1 1-1h2c.6 0 1 .4 1 1s-.4 1-1 1M4.2 20.8c-.3 0-.5-.1-.7-.3-.4-.4-.4-1 0-1.4l1.4-1.4c.4-.4 1-.4 1.4 0s.4 1 0 1.4l-1.4 1.4c-.2.2-.4.3-.7.3M18.4 6.6c-.3 0-.5-.1-.7-.3-.4-.4-.4-1 0-1.4l1.4-1.4c.4-.4 1-.4 1.4 0s.4 1 0 1.4l-1.4 1.4c-.2.2-.5.3-.7.3"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 24 24" class="hidden dark:block" width="18" height="18" fill="currentColor"><path d="M12.1 22h-.9c-5.5-.5-9.5-5.4-9-10.9.4-4.8 4.2-8.6 9-9 .4 0 .8.2 1 .5s.2.8-.1 1.1c-2 2.7-1.4 6.4 1.3 8.4 2.1 1.6 5 1.6 7.1 0 .3-.2.7-.3 1.1-.1.3.2.5.6.5 1-.2 2.7-1.5 5.1-3.6 6.8-1.9 1.4-4.1 2.2-6.4 2.2M9.3 4.4c-2.9 1-5 3.6-5.2 6.8-.4 4.4 2.8 8.3 7.2 8.7 2.1.2 4.2-.4 5.8-1.8 1.1-.9 1.9-2.1 2.4-3.4-2.5.9-5.3.5-7.5-1.1-2.8-2.2-3.9-5.9-2.7-9.2"></path></svg></div></div></div><div class="social-links menu-item_e90a6 flex-center relative"><div class="flex-center h-full gap-x-4 transition-colors duration-300 md:mr-2"><a href="https://github.com/7777even/sevenDesign.git" target="_blank" rel="noopener noreferrer" class="social-links"><div class="social-links-icon_a4ad0"><div><svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 24 24"><path fill="currentColor" d="M12 .297c-6.63 0-12 5.373-12 12c0 5.303 3.438 9.8 8.205 11.385c.6.113.82-.258.82-.577c0-.285-.01-1.04-.015-2.04c-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729c1.205.084 1.838 1.236 1.838 1.236c1.07 1.835 2.809 1.305 3.495.998c.108-.776.417-1.305.76-1.605c-2.665-.3-5.466-1.332-5.466-5.93c0-1.31.465-2.38 1.235-3.22c-.135-.303-.54-1.523.105-3.176c0 0 1.005-.322 3.3 1.23c.96-.267 1.98-.399 3-.405c1.02.006 2.04.138 3 .405c2.28-1.552 3.285-1.23 3.285-1.23c.645 1.653.24 2.873.12 3.176c.765.84 1.23 1.91 1.23 3.22c0 4.61-2.805 5.625-5.475 5.92c.42.36.81 1.096.81 2.22c0 1.606-.015 2.896-.015 3.286c0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></div></div></a></div></div></div></div><div class="mobileNavMenu_e7045"><div class="navScreen_ec30c  rspress-nav-screen" id="navScreen"><div class="container_c935d"><div class="navMenu_b887b"><div class="navMenuItem_e7978 w-full"><a href="/sevenDesign/guide/introduction.html" class="link_a7cea "><div class="rspress-nav-menu-item singleItem_c1154  text-sm font-medium mx-1.5 px-3 py-2 flex items-center break-keep">指南</div></a></div><div class="navMenuItem_e7978 w-full"><a href="/sevenDesign/components/button.html" class="link_a7cea "><div class="rspress-nav-menu-item singleItem_c1154  text-sm font-medium mx-1.5 px-3 py-2 flex items-center break-keep">组件</div></a></div></div><div class="flex-center flex-col gap-2"><div class="mt-2 navAppearance_bf893 flex justify-center"></div><div class="social-links menu-item_e90a6 flex-center relative"><div class="flex-center h-full gap-x-4 transition-colors duration-300 md:mr-2"><a href="https://github.com/7777even/sevenDesign.git" target="_blank" rel="noopener noreferrer" class="social-links"><div class="social-links-icon_a4ad0"><div><svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 24 24"><path fill="currentColor" d="M12 .297c-6.63 0-12 5.373-12 12c0 5.303 3.438 9.8 8.205 11.385c.6.113.82-.258.82-.577c0-.285-.01-1.04-.015-2.04c-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729c1.205.084 1.838 1.236 1.838 1.236c1.07 1.835 2.809 1.305 3.495.998c.108-.776.417-1.305.76-1.605c-2.665-.3-5.466-1.332-5.466-5.93c0-1.31.465-2.38 1.235-3.22c-.135-.303-.54-1.523.105-3.176c0 0 1.005-.322 3.3 1.23c.96-.267 1.98-.399 3-.405c1.02.006 2.04.138 3 .405c2.28-1.552 3.285-1.23 3.285-1.23c.645 1.653.24 2.873.12 3.176c.765.84 1.23 1.91 1.23 3.22c0 4.61-2.805 5.625-5.475 5.92c.42.36.81 1.096.81 2.22c0 1.606-.015 2.896-.015 3.286c0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></div></div></a></div></div></div></div></div><button aria-label="mobile hamburger" class=" rspress-mobile-hamburger navHamburger_ac64c text-gray-500"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="currentColor"><circle cx="8" cy="16" r="2" fill="currentColor"></circle><circle cx="16" cy="16" r="2" fill="currentColor"></circle><circle cx="24" cy="16" r="2" fill="currentColor"></circle></svg></button></div></div></div></div><section><div class="m-auto mt-50 p-16 sm:p-8 sm:pt-24 sm:pb-40 text-center flex-center flex-col"><p class="text-6xl font-semibold">404</p><h1 class="leading-5 pt-3 text-xl font-bold">PAGE NOT FOUND</h1><div style="height:1px" class="mt-6 mx-auto mb-4.5 w-16 bg-gray-light-1"></div><div class="pt-5"><a class="py-2 px-4 rounded-2xl inline-block border-solid border-brand text-brand font-medium hover:border-brand-dark hover:text-brand-dark transition-colors duration-300" href="/sevenDesign/" aria-label="go to home">Take me home</a></div></div></section></div>