seven-design-ui 0.0.8 → 0.0.10

package/README.md

@@ -43,7 +43,7 @@ function App() {
 
 ## 📖 文档
 
-访问 [组件文档](https://sevendesign.dev) 查看完整的组件列表和使用指南。
+访问 [组件文档](https://7777even.github.io/sevenDesign/) 查看完整的组件列表和使用指南。
 
 ## 🔨 本地开发
 

package/docs/components/upload.mdx

@@ -0,0 +1,212 @@
+import { Upload, Button } from '@seven-design-ui/components'
+import React from 'react'
+
+# Upload 上传
+
+通过点击或者拖拽上传文件。
+
+## 基础用法
+
+通过 slot 你可以传入自定义的上传按钮类型和文字提示。 可通过设置 limit 和 on-exceed 来限制上传文件的个数和定义超出限制时的行为。 可通过设置 before-remove 来阻止文件移除操作。
+
+```tsx preview
+export default function Demo() {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+      <Upload
+        action="https://httpbin.org/post"
+        onSuccess={(response, file) => {
+          console.log('上传成功:', response, file);
+        }}
+        onError={(error, file) => {
+          console.log('上传失败:', error, file);
+        }}
+      >
+        <Button type="primary">点击上传</Button>
+      </Upload>
+    </div>
+  )
+}
+```
+
+## 覆盖前一个文件
+
+设置 limit 和 on-exceed 可以在选中时自动替换上一个文件。
+
+```tsx preview
+export default function Demo() {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+      <Upload
+        action="https://httpbin.org/post"
+        limit={1}
+        onExceed={(files, uploadFiles) => {
+          console.log('超出限制的文件:', files);
+        }}
+        onSuccess={(response, file) => {
+          console.log('上传成功:', response, file);
+        }}
+        onError={(error, file) => {
+          console.log('上传失败:', error, file);
+        }}
+      >
+        <Button type="primary">最多上传1个文件</Button>
+      </Upload>
+    </div>
+  )
+}
+```
+
+## 用户头像
+
+在 before-upload 钩子中限制用户上传文件的格式和大小。
+
+```tsx preview
+export default function Demo() {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+      <Upload
+        action="https://httpbin.org/post"
+        accept="image/*"
+        maxSize={1024 * 1024} // 1MB
+        beforeUpload={(file) => {
+          const isImage = file.type.startsWith('image/');
+          if (!isImage) {
+            alert('只能上传图片文件');
+            return false;
+          }
+          const isLt1M = file.size < 1024 * 1024;
+          if (!isLt1M) {
+            alert('图片大小不能超过1MB');
+            return false;
+          }
+          return true;
+        }}
+        onSuccess={(response, file) => {
+          console.log('上传成功:', response, file);
+        }}
+        onError={(error, file) => {
+          console.log('上传失败:', error, file);
+        }}
+      >
+        <Button type="primary">上传头像</Button>
+      </Upload>
+    </div>
+  )
+}
+```
+
+## 拖拽上传
+
+你可以将文件拖拽到特定区域以进行上传。
+
+```tsx preview
+export default function Demo() {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+      <Upload
+        action="https://httpbin.org/post"
+        drag
+        multiple
+        onSuccess={(response, file) => {
+          console.log('上传成功:', response, file);
+        }}
+        onError={(error, file) => {
+          console.log('上传失败:', error, file);
+        }}
+      />
+    </div>
+  )
+}
+```
+
+## 其他补充功能
+
+### 文件预览
+
+点击文件名可以预览文件（目前只支持日志输出，可根据需要扩展）。
+
+### 文件移除
+
+可以通过点击删除按钮移除文件，也可以通过 before-remove 钩子阻止移除操作。
+
+```tsx preview
+export default function Demo() {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+      <Upload
+        action="https://httpbin.org/post"
+        beforeRemove={(file, fileList) => {
+          return confirm(`确定要删除文件 ${file.name} 吗？`);
+        }}
+        onSuccess={(response, file) => {
+          console.log('上传成功:', response, file);
+        }}
+        onError={(error, file) => {
+          console.log('上传失败:', error, file);
+        }}
+        onRemove={(file, fileList) => {
+          console.log('文件已移除:', file, fileList);
+        }}
+      >
+        <Button type="primary">上传文件（可移除）</Button>
+      </Upload>
+    </div>
+  )
+}
+```
+
+## API
+
+### Props
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| action | 上传的地址 | `string` | - |
+| headers | 上传时附带的请求头部 | `Record<string, string>` | - |
+| name | 上传的文件字段名 | `string` | `file` |
+| data | 上传时附带的额外参数 | `Record<string, any>` | - |
+| accept | 接受上传的文件类型 | `string` | - |
+| multiple | 是否支持多选文件 | `boolean` | `false` |
+| disabled | 是否禁用 | `boolean` | `false` |
+| showFileList | 是否显示文件列表 | `boolean` | `true` |
+| fileList | 文件列表 | `UploadFile[]` | - |
+| drag | 是否支持拖拽上传 | `boolean` | `false` |
+| limit | 最大允许上传个数 | `number` | - |
+| maxSize | 文件大小限制，单位字节 | `number` | - |
+| className | 自定义类名 | `string` | - |
+| children | 子元素，用于自定义上传区域 | `ReactNode` | - |
+| beforeUpload | 上传文件之前的钩子 | `(file: File, fileList: UploadFile[]) => boolean \| Promise<boolean> \| File` | - |
+| beforeRemove | 文件移除之前的钩子 | `(file: UploadFile, fileList: UploadFile[]) => boolean \| Promise<boolean>` | - |
+| onExceed | 超出限制时的回调 | `(files: File[], uploadFiles: UploadFile[]) => void` | - |
+| onChange | 文件状态改变时的回调 | `(file: UploadFile, fileList: UploadFile[]) => void` | - |
+| onSuccess | 文件上传成功的回调 | `(response: any, file: UploadFile, fileList: UploadFile[]) => void` | - |
+| onError | 文件上传失败的回调 | `(error: any, file: UploadFile, fileList: UploadFile[]) => void` | - |
+| onRemove | 文件移除的回调 | `(file: UploadFile, fileList: UploadFile[]) => void` | - |
+| onPreview | 点击文件列表中已上传的文件时的回调 | `(file: UploadFile) => void` | - |
+
+### Events
+
+| 事件名 | 说明 | 类型 |
+| --- | --- | --- |
+| onChange | 文件状态改变时触发 | `(file: UploadFile, fileList: UploadFile[]) => void` |
+| onSuccess | 文件上传成功时触发 | `(response: any, file: UploadFile, fileList: UploadFile[]) => void` |
+| onError | 文件上传失败时触发 | `(error: any, file: UploadFile, fileList: UploadFile[]) => void` |
+| onRemove | 文件移除时触发 | `(file: UploadFile, fileList: UploadFile[]) => void` |
+| onPreview | 点击文件预览时触发 | `(file: UploadFile) => void` |
+| onExceed | 超出文件限制时触发 | `(files: File[], uploadFiles: UploadFile[]) => void` |
+
+### UploadFile
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| uid | 文件唯一标识 | `string` | - |
+| name | 文件名 | `string` | - |
+| size | 文件大小 | `number` | - |
+| type | 文件类型 | `string` | - |
+| status | 上传状态 | `'ready' \| 'uploading' \| 'success' \| 'error'` | `ready` |
+| percent | 上传进度百分比 | `number` | - |
+| raw | 原始File对象 | `File` | - |
+| url | 上传成功后的URL | `string` | - |
+| error | 错误信息 | `string` | - |
+| lastModified | 最后修改时间 | `number` | - |

package/docs/components/virtual-list.mdx

@@ -0,0 +1,414 @@
+import { VirtualList } from '@seven-design-ui/components'
+import React, { useState, useEffect, useCallback } from 'react'
+
+# VirtualList 虚拟列表
+
+虚拟列表组件，用于大数据量的列表渲染，通过只渲染可见区域的内容来提高性能。
+
+## 基础用法
+
+使用 `data` 指定数据源，`renderItem` 指定渲染函数。
+
+```tsx preview
+export default function Demo() {
+  const [data, setData] = useState([])
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    const loadData = async () => {
+      try {
+        const response = await fetch('https://randomuser.me/api/?results=20&inc=name,gender,email,nat,picture&noinfo')
+        const result = await response.json()
+        const formattedData = result.results.map((user, index) => ({
+          id: index + 1,
+          name: `${user.name.first} ${user.name.last}`,
+          email: user.email,
+          gender: user.gender,
+          country: user.nat,
+          avatar: user.picture.thumbnail
+        }))
+        setData(formattedData)
+      } catch (error) {
+        console.error('Failed to load data:', error)
+      } finally {
+        setLoading(false)
+      }
+    }
+    loadData()
+  }, [])
+
+  if (loading) {
+    return <div style={{ padding: '20px', textAlign: 'center' }}>加载中...</div>
+  }
+
+  return (
+    <VirtualList
+      data={data}
+      height={300}
+      itemHeight={70}
+      itemKey="id"
+      gap={8}
+      renderItem={(item, index) => (
+        <div style={{
+          padding: '12px',
+          border: '1px solid #e4e7ed',
+          borderRadius: '8px',
+          backgroundColor: '#fff',
+          display: 'flex',
+          alignItems: 'center',
+          gap: '12px'
+        }}>
+          <img
+            src={item.avatar}
+            alt={item.name}
+            style={{
+              width: '40px',
+              height: '40px',
+              borderRadius: '50%',
+              objectFit: 'cover'
+            }}
+          />
+          <div style={{ flex: 1 }}>
+            <div style={{ fontWeight: 'bold', marginBottom: '4px' }}>{item.name}</div>
+            <div style={{ color: '#666', fontSize: '14px' }}>
+              {item.email} • {item.country}
+            </div>
+          </div>
+        </div>
+      )}
+    />
+  )
+}
+```
+
+## 等高模式
+
+等高模式下，所有项目具有相同的高度，通过 `itemHeight` 指定项目高度。
+
+```tsx preview
+export default function Demo() {
+  const [data, setData] = useState([])
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    const loadData = async () => {
+      try {
+        const response = await fetch('https://randomuser.me/api/?results=20&inc=name,gender,email,nat,picture&noinfo')
+        const result = await response.json()
+        const formattedData = result.results.map((user, index) => ({
+          id: index + 1,
+          name: `${user.name.first} ${user.name.last}`,
+          email: user.email,
+          gender: user.gender,
+          country: user.nat,
+          avatar: user.picture.medium,
+          bio: `来自${user.nat}的${user.gender === 'male' ? '开发者' : '设计师'}，热爱技术创新。`
+        }))
+        setData(formattedData)
+      } catch (error) {
+        console.error('Failed to load data:', error)
+      } finally {
+        setLoading(false)
+      }
+    }
+    loadData()
+  }, [])
+
+  if (loading) {
+    return <div style={{ padding: '20px', textAlign: 'center' }}>加载中...</div>
+  }
+
+  return (
+    <VirtualList
+      data={data}
+      height={400}
+      itemHeight={100}
+      itemKey="id"
+      gap={12}
+      renderItem={(item, index) => (
+        <div style={{
+          padding: '16px',
+          border: '1px solid #e4e7ed',
+          borderRadius: '12px',
+          backgroundColor: '#fff',
+          height: '100%',
+          display: 'flex',
+          alignItems: 'center',
+          gap: '16px'
+        }}>
+          <img
+            src={item.avatar}
+            alt={item.name}
+            style={{
+              width: '60px',
+              height: '60px',
+              borderRadius: '50%',
+              objectFit: 'cover',
+              border: '2px solid #e4e7ed'
+            }}
+          />
+          <div style={{ flex: 1 }}>
+            <h4 style={{ margin: '0 0 8px 0', color: '#333' }}>{item.name}</h4>
+            <p style={{ margin: '0 0 8px 0', color: '#666', fontSize: '14px', lineHeight: '1.4' }}>
+              {item.bio}
+            </p>
+            <div style={{ fontSize: '12px', color: '#999' }}>
+              📧 {item.email} • 🌍 {item.country}
+            </div>
+          </div>
+        </div>
+      )}
+    />
+  )
+}
+```
+
+## 滚动加载更多
+
+通过 `requestMore` 属性实现滚动到底部时自动加载更多数据。
+
+```tsx preview
+export default function Demo() {
+  const [data, setData] = useState([])
+  const [loading, setLoading] = useState(false)
+  const fakeDataUrl = 'https://randomuser.me/api/?results=20&inc=name,gender,email,nat,picture&noinfo'
+
+  const loadMoreData = useCallback(async () => {
+    setLoading(true)
+    try {
+      const response = await fetch(fakeDataUrl)
+      const result = await response.json()
+      const newData = result.results.map((user, index) => ({
+        id: data.length + index + 1,
+        name: `${user.name.first} ${user.name.last}`,
+        email: user.email,
+        gender: user.gender,
+        country: user.nat,
+        avatar: user.picture.thumbnail
+      }))
+      setData(prev => [...prev, ...newData])
+    } catch (error) {
+      console.error('Failed to load data:', error)
+    } finally {
+      setLoading(false)
+    }
+  }, [data.length])
+
+  useEffect(() => {
+    loadMoreData()
+  }, [])
+
+  return (
+    <VirtualList
+      data={data}
+      height={400}
+      itemHeight={70}
+      itemKey="id"
+      gap={8}
+      requestMore={loadMoreData}
+      renderItem={(item, index) => (
+        <div style={{
+          padding: '12px',
+          border: '1px solid #e4e7ed',
+          borderRadius: '8px',
+          backgroundColor: '#fff',
+          display: 'flex',
+          alignItems: 'center',
+          gap: '12px'
+        }}>
+          <img
+            src={item.avatar}
+            alt={item.name}
+            style={{
+              width: '40px',
+              height: '40px',
+              borderRadius: '50%',
+              objectFit: 'cover'
+            }}
+          />
+          <div style={{ flex: 1 }}>
+            <div style={{ fontWeight: 'bold', marginBottom: '4px' }}>{item.name}</div>
+            <div style={{ color: '#666', fontSize: '14px' }}>
+              {item.email} • {item.country}
+            </div>
+          </div>
+        </div>
+      )}
+    />
+  )
+}
+```
+
+## 自定义样式
+
+通过 `className` 和内联样式自定义虚拟列表的外观。
+
+```tsx preview
+export default function Demo() {
+  const [data, setData] = useState([])
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    const loadData = async () => {
+      try {
+        const response = await fetch('https://randomuser.me/api/?results=20&inc=name,gender,email,nat,picture&noinfo')
+        const result = await response.json()
+        const formattedData = result.results.map((user, index) => ({
+          id: index + 1,
+          name: `${user.name.first} ${user.name.last}`,
+          email: user.email,
+          gender: user.gender,
+          country: user.nat,
+          avatar: user.picture.thumbnail,
+          status: ['活跃', '在线', '离线'][index % 3],
+          level: Math.floor(Math.random() * 100) + 1
+        }))
+        setData(formattedData)
+      } catch (error) {
+        console.error('Failed to load data:', error)
+      } finally {
+        setLoading(false)
+      }
+    }
+    loadData()
+  }, [])
+
+  const getStatusColor = (status) => {
+    switch (status) {
+      case '活跃': return '#67c23a'
+      case '在线': return '#e6a23c'
+      case '离线': return '#909399'
+      default: return '#909399'
+    }
+  }
+
+  const getStatusIcon = (status) => {
+    switch (status) {
+      case '活跃': return '🟢'
+      case '在线': return '🟡'
+      case '离线': return '⚪'
+      default: return '⚪'
+    }
+  }
+
+  if (loading) {
+    return <div style={{ padding: '20px', textAlign: 'center' }}>加载中...</div>
+  }
+
+  return (
+    <VirtualList
+      data={data}
+      height={400}
+      itemHeight={120}
+      itemKey="id"
+      gap={8}
+      className="custom-virtual-list"
+      renderItem={(item, index) => (
+        <div style={{
+          padding: '16px',
+          border: '2px solid #e4e7ed',
+          borderRadius: '12px',
+          backgroundColor: '#fafbfc',
+          display: 'flex',
+          alignItems: 'center',
+          gap: '16px',
+          boxShadow: '0 2px 8px rgba(0,0,0,0.05)',
+          transition: 'all 0.3s ease',
+          ':hover': {
+            boxShadow: '0 4px 16px rgba(0,0,0,0.1)',
+            borderColor: getStatusColor(item.status)
+          }
+        }}>
+          <div style={{ position: 'relative' }}>
+            <img
+              src={item.avatar}
+              alt={item.name}
+              style={{
+                width: '50px',
+                height: '50px',
+                borderRadius: '50%',
+                objectFit: 'cover',
+                border: `3px solid ${getStatusColor(item.status)}`
+              }}
+            />
+            <div style={{
+              position: 'absolute',
+              bottom: '-5px',
+              right: '-5px',
+              backgroundColor: '#fff',
+              borderRadius: '50%',
+              width: '20px',
+              height: '20px',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              fontSize: '12px'
+            }}>
+              {getStatusIcon(item.status)}
+            </div>
+          </div>
+          <div style={{ flex: 1 }}>
+            <div style={{ fontWeight: 'bold', marginBottom: '4px', color: '#333' }}>{item.name}</div>
+            <div style={{ fontSize: '14px', color: '#666', marginBottom: '8px' }}>
+              📧 {item.email} • 🌍 {item.country}
+            </div>
+            <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+              <span style={{
+                fontSize: '12px',
+                color: getStatusColor(item.status),
+                fontWeight: 'bold'
+              }}>
+                {item.status}
+              </span>
+              <div style={{
+                flex: 1,
+                height: '6px',
+                backgroundColor: '#e4e7ed',
+                borderRadius: '3px',
+                overflow: 'hidden'
+              }}>
+                <div style={{
+                  width: `${item.level}%`,
+                  height: '100%',
+                  backgroundColor: getStatusColor(item.status),
+                  transition: 'width 0.3s ease'
+                }} />
+              </div>
+              <span style={{
+                fontSize: '12px',
+                color: '#666',
+                fontWeight: 'bold'
+              }}>
+                Lv.{item.level}
+              </span>
+            </div>
+          </div>
+        </div>
+      )}
+    />
+  )
+}
+```
+
+## API 参考
+
+### VirtualListProps
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| data | `T[]` | - | 数据源数组 |
+| height | `number \| string` | - | 列表高度 |
+| itemHeight | `number` | 50 | 子项高度 |
+| renderItem | `(item: T, index: number) => ReactNode` | - | 子项渲染函数 |
+| requestMore | `() => Promise<void>` | - | 异步加载数据的方法 |
+| itemKey | `keyof T` | - | 作为子项key的值在item中对应的属性字段 |
+| gap | `number` | 0 | 子项间隔 |
+| onScroll | `(event: UIEvent<HTMLDivElement>) => void` | - | 滚动事件 |
+| className | `string` | - | 自定义类名 |
+| children | `ReactNode` | - | 子元素 |
+
+## 注意事项
+
+1. 请在使用时传入 `itemKey`，这对应你传入的 `data` 中单项的一个属性，保证它是唯一的。
+2. 或者选择在 `renderItem` 返回的元素中手动传入 `key` 值，不推荐使用 `index` 作为 `key`。
+3. 滚动加载功能需要配合 `requestMore` 属性使用，当用户滚动到列表底部时会自动触发加载更多数据。

package/docs/doc_build/404.html

@@ -1,15 +1,15 @@
 <!doctype html>
-<html >
+<html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="generator" content="Rspress v1.47.0">
-    <title data-rh="true"></title>
-  <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.9945b82b.js"></script><script defer src="/sevenDesign/static/js/index.7edcc197.js"></script><link href="/sevenDesign/static/css/styles.90fb98bd.css" rel="stylesheet"></head>
+    <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.e7b95f5f.js"></script><script defer src="/sevenDesign/static/js/index.a5987e76.js"></script><link href="/sevenDesign/static/css/styles.81f01bfc.css" rel="stylesheet"></head>
 
   <body >
-    <div id="root"></div>
+    <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>
     <div id="search-container"></div>
   </body>
 </html>