feat:组件框架

docs/components/ComponentCard.tsx

@@ -0,0 +1,82 @@
+import React from 'react'
+
+interface ComponentCardProps {
+  title: string
+  desc: string
+  href: string
+  children: React.ReactNode
+}
+
+const cardStyle: React.CSSProperties = {
+  display: 'flex',
+  flexDirection: 'column',
+  border: '1px solid #e8e8e8',
+  borderRadius: 8,
+  textDecoration: 'none',
+  color: 'inherit',
+  transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+  background: '#fff',
+  overflow: 'hidden',
+}
+
+const previewStyle: React.CSSProperties = {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  padding: '28px 16px 20px',
+  background: '#fafafa',
+  minHeight: 72,
+  borderBottom: '1px solid #f0f0f0',
+  flexWrap: 'wrap',
+  gap: 8,
+}
+
+const infoStyle: React.CSSProperties = {
+  padding: '14px 16px',
+  flex: 1,
+}
+
+const titleStyle: React.CSSProperties = {
+  fontWeight: 500,
+  fontSize: 14,
+  color: 'rgba(0, 0, 0, 0.88)',
+  marginBottom: 2,
+}
+
+const descStyle: React.CSSProperties = {
+  fontSize: 12,
+  color: 'rgba(0, 0, 0, 0.45)',
+  lineHeight: 1.4,
+}
+
+export const ComponentCard: React.FC<ComponentCardProps> = ({ title, desc, href, children }) => {
+  const [hovered, setHovered] = React.useState(false)
+
+  const currentStyle: React.CSSProperties = {
+    ...cardStyle,
+    ...(hovered
+      ? {
+          borderColor: '#1890ff',
+          boxShadow: '0 4px 12px rgba(24, 144, 255, 0.15)',
+          transform: 'translateY(-2px)',
+        }
+      : {}),
+  }
+
+  return (
+    <a
+      href={href}
+      style={currentStyle}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+    >
+      <div style={previewStyle}>{children}</div>
+      <div style={infoStyle}>
+        <div style={titleStyle}>{title}</div>
+        <div style={descStyle}>{desc}</div>
+      </div>
+    </a>
+  )
+}
+
+export default ComponentCard

docs/guide/getting-started.md

@@ -1,6 +1,6 @@
 ---
-title: 快速开始
 nav: 指南
+title: 快速开始
 ---
 
 # 快速开始
@@ -8,13 +8,21 @@ nav: 指南
 ## 安装
 
 ```bash
-pnpm add @nova/ui
+npm install @Pika/ui
 ```
 
 ## 使用
 
 ```tsx
-import { Button } from '@nova/ui/components/Button'
+import { Button } from '@Pika/ui'
 
-export default () => <Button variant="solid">Hello Nova</Button>
+export default () => (
+  <Button variant="solid" color="primary">
+    Hello Pika
+  </Button>
+)
 ```
+
+## 主题
+
+Pika UI 支持通过 CSS 变量进行主题定制。

docs/guide/introduce.en-US.md

@@ -0,0 +1,35 @@
+---
+nav: Guide
+title: Introduction
+---
+
+# Pika UI
+
+AI-Native component library for modern visualization.
+
+## Features
+
+- **AI-First** — Zero-ambiguity APIs designed for AI code generation
+- **Type Safe** — Full type inference with TypeScript
+- **Flexible Theme** — Full theme customization via CSS variables
+- **Tree Shaking** — Modular architecture, only bundle what you use
+
+## Installation
+
+```bash
+npm install @Pika/ui
+# or
+pnpm add @Pika/ui
+```
+
+## Quick Start
+
+```tsx
+import { Button } from '@Pika/ui'
+
+export default () => (
+  <Button variant="solid" color="primary">
+    Hello Pika
+  </Button>
+)
+```

docs/guide/introduce.md

@@ -0,0 +1,35 @@
+---
+nav: 指南
+title: 介绍
+---
+
+# Pika UI
+
+AI-Native 组件库，为现代可视化应用构建而生。
+
+## 特性
+
+- **AI-First** — 专为 AI 代码生成设计的零歧义 API
+- **类型安全** — 基于 TypeScript 的完整类型推导
+- **主题灵活** — 基于 CSS 变量的全量主题定制
+- **按需加载** — 支持 Tree Shaking 的模块化架构
+
+## 安装
+
+```bash
+npm install @Pika/ui
+# 或
+pnpm add @Pika/ui
+```
+
+## 快速开始
+
+```tsx
+import { Button } from '@Pika/ui'
+
+export default () => (
+  <Button variant="solid" color="primary">
+    Hello Pika
+  </Button>
+)
+```

docs/index.md

@@ -1,3 +1,30 @@
-# Nova
-
-AI-Native 组件库：专为大模型代码生成优化的可视化 + UI 组件库。
+---
+title: Pika UI
+hero:
+  title: Pika UI
+  description: AI-Native 组件库，为现代可视化应用构建而生
+  actions:
+    - text: 开始使用
+      link: /guide/introduce
+    - text: 组件总览
+      link: /components
+features:
+  - title: AI-First
+    emoji: 🤖
+    description: 专为 AI 代码生成设计的零歧义 API，让 AI 准确理解每个组件的行为与边界
+  - title: 类型安全
+    emoji: 🛡️
+    description: 基于 TypeScript 的完整类型推导，提供编译时校验与 IDE 智能提示
+  - title: 主题灵活
+    emoji: 🎨
+    description: 基于 CSS 变量的全量主题定制，支持亮色/暗色一键切换
+  - title: 按需加载
+    emoji: ⚡
+    description: 支持 Tree Shaking 的模块化架构，只打包你使用的组件
+  - title: Accessibility
+    emoji: ♿
+    description: 遵循 WAI-ARIA 规范，确保无障碍访问体验
+  - title: 现代风格
+    emoji: ✨
+    description: 融合 Apple HIG 与 Material Design 的最佳实践，打造精致的视觉语言
+---