@leapfuture-fastui/playground

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

📖 简介

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

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

🚀 在线访问

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

🎯 功能特性

🧩 组件展示

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

🌈 主题系统

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

📱 响应式测试

• 适配各种屏幕尺寸
• 移动端友好的交互体验
• 弹性布局演示

🛠 本地开发

安装依赖

# 在项目根目录
pnpm install

启动开发服务器

# 启动 Playground
pnpm dev

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

访问地址

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

📦 构建部署

构建静态文件

# 构建 playground
pnpm build

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

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

预览构建结果

cd playground && pnpm preview

部署到静态托管

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

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

Vercel 部署配置

{
  "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 部署配置

# 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 配置

// 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 配置

// 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 推荐扩展

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

开发脚本

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

🤝 贡献

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

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

📄 许可证

MIT License

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