npm package: @leapfuture-fastui/playground
Description: FastUI 组件开发测试环境
Latest version: 0.1.0

# @leapfuture-fastui/playground

FastUI 组件开发演示环境 - 实时预览和测试 FastUI 组件

## 📖 简介

这是 FastUI 组件库的开发演示环境，提供了所有组件的实时预览和交互测试。开发者可以在这里：

- 🎮 实时预览所有组件的效果
- 🔧 测试组件的各种属性和状态
- 🌓 体验主题切换功能
- 📱 测试响应式布局
- 🎨 验证设计一致性

## 🚀 在线访问

- **开发环境**: http://localhost:3000/
- **Storybook 文档**: http://localhost:6006/

## 🎯 功能特性

### 🧩 组件展示
- **Button 组件**: 展示所有变体、尺寸和状态
- **Input 组件**: 各种输入类型和功能测试
- **Card 组件**: 不同样式和交互模式
- **Tag 组件**: 标签的类型和交互功能
- **Icon 组件**: 图标库和动画效果

### 🌈 主题系统
- **主题切换**: 实时切换亮色/暗色主题
- **系统跟随**: 自动跟随系统主题设置
- **主题信息**: 显示当前主题状态信息
- **色彩演示**: 展示主题色彩系统

### 📱 响应式测试
- 适配各种屏幕尺寸
- 移动端友好的交互体验
- 弹性布局演示

## 🛠 本地开发

### 安装依赖

```bash
# 在项目根目录
pnpm install
```

### 启动开发服务器

```bash
# 启动 Playground
pnpm dev

# 或者只启动 playground
cd playground && pnpm dev
```

### 访问地址

- Playground: http://localhost:3000/
- 网络访问: 使用 `--host` 参数暴露到网络

## 📦 构建部署

### 构建静态文件

```bash
# 构建 playground
pnpm build

# 或者在 playground 目录下
cd playground && pnpm build
```

构建产物将输出到 `playground/dist/` 目录。

### 预览构建结果

```bash
cd playground && pnpm preview
```

### 部署到静态托管

构建后的 `dist` 目录可以直接部署到任何静态文件托管服务：

- **Vercel**: 连接 GitHub 仓库自动部署
- **Netlify**: 拖拽 dist 目录或连接仓库
- **GitHub Pages**: 上传到 gh-pages 分支
- **CDN**: 上传到任何 CDN 服务

#### Vercel 部署配置

```json
{
  "name": "fastui-playground",
  "version": 2,
  "builds": [
    {
      "src": "playground/package.json",
      "use": "@vercel/static-build",
      "config": {
        "distDir": "dist"
      }
    }
  ],
  "routes": [
    {
      "handle": "filesystem"
    },
    {
      "src": "/(.*)",
      "dest": "/index.html"
    }
  ]
}
```

#### Netlify 部署配置

```toml
# netlify.toml
[build]
  base = "playground/"
  command = "pnpm build"
  publish = "dist/"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200
```

## 📁 项目结构

```
playground/
├── src/
│   ├── App.vue          # 主应用组件
│   ├── main.ts          # 应用入口
│   └── theme.css        # 主题样式
├── dist/                # 构建输出目录
├── index.html           # HTML 模板
├── package.json         # 项目配置
├── vite.config.ts       # Vite 配置
├── tailwind.config.js   # Tailwind 配置
└── README.md            # 说明文档
```

## 🎨 自定义配置

### Vite 配置

```typescript
// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
      '@leapfuture-fastui/core': resolve(__dirname, '../packages/core/src')
    }
  },
  server: {
    port: 3000,
    open: true,
    host: true  // 暴露到网络
  },
  build: {
    outDir: 'dist',
    assetsDir: 'assets',
    sourcemap: true
  }
})
```

### Tailwind 配置

```javascript
// tailwind.config.js
module.exports = {
  content: [
    './index.html',
    './src/**/*.{vue,js,ts,jsx,tsx}',
    '../packages/core/src/**/*.{vue,js,ts,jsx,tsx}'
  ],
  darkMode: 'class',
  theme: {
    extend: {
      // 自定义主题扩展
    }
  },
  plugins: []
}
```

## 🧪 测试指南

### 组件测试清单

**Button 组件测试:**
- [ ] 所有变体正确显示
- [ ] 尺寸变化生效
- [ ] 加载状态动画
- [ ] 禁用状态交互
- [ ] 点击事件触发

**Input 组件测试:**
- [ ] 基础输入功能
- [ ] 密码显示切换
- [ ] 清除功能
- [ ] 图标显示
- [ ] 验证状态

**主题系统测试:**
- [ ] 主题切换生效
- [ ] 系统主题跟随
- [ ] 主题持久化
- [ ] 色彩正确应用

### 浏览器兼容性测试

**推荐测试浏览器:**
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)

**移动端测试:**
- iOS Safari
- Android Chrome
- 微信内置浏览器

## 🔧 开发工具

### VS Code 推荐扩展

```json
{
  "recommendations": [
    "vue.volar",
    "bradlc.vscode-tailwindcss",
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint"
  ]
}
```

### 开发脚本

```json
{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "type-check": "vue-tsc --noEmit"
  }
}
```

## 🤝 贡献

欢迎为 Playground 添加新的演示用例或改进现有功能：

1. 添加新的组件演示
2. 改进交互体验
3. 优化响应式布局
4. 增加测试用例
5. 完善文档说明

## 📄 许可证

MIT License

---

💡 **提示**: 这个 Playground 是开发和测试 FastUI 组件的最佳环境，建议在开发过程中始终保持运行状态。