seven-design-ui 0.0.8 → 0.0.9

package/README.md

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

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.7bb45e79.js"></script><script defer src="/sevenDesign/static/js/index.ba92bedf.js"></script><link href="/sevenDesign/static/css/styles.17d2ee58.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>

package/docs/doc_build/CHANGELOG.html

@@ -1,15 +1,25 @@
 <!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">docs - 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.7bb45e79.js"></script><script defer src="/sevenDesign/static/js/index.ba92bedf.js"></script><link href="/sevenDesign/static/css/styles.17d2ee58.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="docLayout_af141 pt-0"><aside class="sidebar_dd719 rspress-sidebar "><div class="navTitleMask_fb17c"><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><div class="rspress-scrollbar sidebarContent_da296"><nav class="pb-2"></nav></div></aside><div class="flex-1 relative min-w-0"><div class="rspress-sidebar-menu-container "><div class="rspress-sidebar-menu"><button type="button" class="flex-center mr-auto"><div class="text-md mr-2"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M4 6h24v2H4zm0 18h24v2H4zm0-12h24v2H4zm0 6h24v2H4z"></path></svg></div><span class="text-sm">Menu</span></button><button type="button" class="flex-center ml-auto"><span class="text-sm">ON THIS PAGE</span><div class="text-md mr-2" style="transform:rotate(0deg);transition:transform 0.2s ease-out;margin-top:2px"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16 12 26l-1.4-1.4 8.6-8.6-8.6-8.6L12 6z"></path></svg></div></button><div class="rspress-local-toc-container "><ul><li><a href="#002" class="link_a7cea rspress-toc-link sm:text-normal text-sm" style="margin-left:0"><span class="rspress-toc-link-text block">0.0.2</span></a></li><li><a href="#patch-changes" class="link_a7cea rspress-toc-link sm:text-normal text-sm" style="margin-left:12px"><span class="rspress-toc-link-text block">Patch Changes</span></a></li></ul></div></div></div><div class="content_ff766 rspress-doc-container flex"><div class="flex-1 overflow-x-auto"><div class="rspress-doc"><!--$--><h1 id="docs" class="rspress-doc-title text-3xl mb-10 leading-10 tracking-tight title_fb7eb"><a class="link_a7cea header-anchor link_a9ef4 inline-link_f855c" aria-hidden="true" href="#docs">#</a>docs</h1>
+<h2 id="002" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_fb7eb"><a class="link_a7cea header-anchor link_a9ef4 inline-link_f855c" aria-hidden="true" href="#002">#</a>0.0.2</h2>
+<h3 id="patch-changes" class="mt-10 mb-2 leading-7 text-xl title_fb7eb"><a class="link_a7cea header-anchor link_a9ef4 inline-link_f855c" aria-hidden="true" href="#patch-changes">#</a>Patch Changes</h3>
+<ul class="list-disc pl-5 my-4 leading-7">
+<li class="[&amp;:not(:first-child)]:mt-2">79f0993: feat: 新增Form表单组件</li>
+<li class="[&amp;:not(:first-child)]:mt-2">Updated dependencies [79f0993]<!-- -->
+<ul class="list-disc pl-5 my-4 leading-7">
+<li class="[&amp;:not(:first-child)]:mt-2">@seven-design-ui/components@0.1.3</li>
+</ul>
+</li>
+</ul><!--/$--></div><div class="rspress-doc-footer"><footer class="mt-8"><div class="xs:flex pb-5 px-2 justify-end items-center"></div><div class="flex flex-col"></div><div class="flex flex-col sm:flex-row sm:justify-around gap-4 pt-6"><div class="prev_c92d1 flex flex-col"></div><div class="next_c11be flex flex-col"></div></div></footer></div></div><div class="aside-container_bc5fa"><div class="flex flex-col"><div id="aside-container" class="relative text-sm font-medium"><div class="leading-7 block text-sm font-semibold pl-3">ON THIS PAGE</div><nav class="mt-1"><ul class="relative"><li><a href="#002" title="0.0.2" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">0.0.2</span></a></li><li><a href="#patch-changes" title="Patch Changes" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:12px;font-weight:semibold"><span class="aside-link-text block">Patch Changes</span></a></li></ul></nav></div></div></div></div></div></div></section></div>
     <div id="search-container"></div>
   </body>
 </html>