# vue开发模板

**Repository Path**: chao-zhengchao/vue-development-template

## Basic Information

- **Project Name**: vue开发模板
- **Description**: 使用tailwind css完成多种主题的适配
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-11-08
- **Last Updated**: 2025-11-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Future UI - 未来科技组件库

<div align="center">
  <h1>🚀 Future UI</h1>
  <p>基于 Vue 3 的未来科技风格组件库</p>
  
  [![Vue](https://img.shields.io/badge/Vue-3.5.13-4FC08D?style=flat-square&logo=vue.js)](https://vuejs.org/)
  [![Vite](https://img.shields.io/badge/Vite-6.0.5-646CFF?style=flat-square&logo=vite)](https://vitejs.dev/)
  [![TailwindCSS](https://img.shields.io/badge/TailwindCSS-3.4.14-06B6D4?style=flat-square&logo=tailwindcss)](https://tailwindcss.com/)
  [![Pinia](https://img.shields.io/badge/Pinia-2.3.0-FFD859?style=flat-square&logo=pinia)](https://pinia.vuejs.org/)
</div>

## ✨ 特性

- 🎨 **赛博朋克风格** - 独特的未来科技美学设计
- 🧩 **27+ 组件** - 涵盖基础、展示、数据、反馈等多个类别
- 🎭 **4种主题** - 星光白、深空黑、星云蓝、极光绿
- ⚡ **现代技术栈** - Vue 3 + Vite + Pinia + TailwindCSS
- 📱 **响应式设计** - 完美适配移动端和桌面端
- 🔧 **TypeScript 支持** - 完整的类型声明
- 🎪 **动画效果** - 丰富的交互动画和过渡效果
- 📦 **自动导入** - 组件和 API 自动导入，开发更高效

## 🚀 快速开始

### 环境要求

- Node.js >= 16.0.0
- npm >= 8.0.0

### 安装依赖

```bash
# 克隆项目
git clone https://github.com/your-username/future-ui.git

# 进入项目目录
cd future-ui

# 安装依赖
npm install
```

### 开发

```bash
# 启动开发服务器
npm run dev
```

访问 [http://localhost:5173](http://localhost:5173) 查看项目。

### 构建

```bash
# 构建生产版本
npm run build

# 预览构建结果
npm run preview
```

## 📁 项目结构

```
src/
├── api/                    # API 服务
│   ├── index.js           # API 主入口
│   ├── auth.js            # 认证相关 API
│   ├── components.js      # 组件相关 API
│   └── upload.js          # 文件上传 API
├── assets/                # 静态资源
├── components/            # 组件库
│   ├── button/           # 按钮组件
│   ├── input/            # 输入组件
│   ├── card/             # 卡片组件
│   ├── modal/            # 模态框组件
│   ├── notification/     # 通知组件
│   └── ...               # 其他组件
├── composables/          # 组合式函数
│   └── useTheme.js       # 主题管理
├── router/               # 路由配置
├── stores/               # 状态管理
│   ├── app.js            # 应用状态
│   ├── user.js           # 用户状态
│   └── components.js     # 组件状态
├── utils/                # 工具函数
│   ├── format.js         # 格式化工具
│   ├── validation.js     # 验证工具
│   ├── storage.js        # 存储工具
│   ├── soundEffects.js   # 音效工具
│   └── index.js          # 工具主入口
├── views/                # 页面视图
│   ├── Home.vue          # 首页
│   ├── Components.vue    # 组件展示页
│   └── components/       # 各组件演示页
├── App.vue               # 根组件
└── main.js               # 应用入口
```

## 🎨 组件分类

### 基础组件 (Basic)
- **按钮组件** - 7种变体：霓虹、玻璃、故障、全息、液体、量子、三色
- **输入组件** - 未来科技风格的输入框
- **选择器组件** - 下拉选择器
- **复选框组件** - 科技风格的复选框

### 展示组件 (Display)
- **卡片组件** - 展示内容的容器
- **徽章组件** - 状态标识
- **头像组件** - 用户头像展示

### 数据组件 (Data)
- **表格组件** - 数据表格展示
- **图表组件** - 5种图表类型：折线、柱状、面积、散点、雷达
- **列表组件** - 数据列表展示

### 反馈组件 (Feedback)
- **模态框组件** - 全息投影风格
- **通知组件** - 消息通知系统
- **提示组件** - 工具提示
- **弹出框组件** - 内容弹出框

### 加载组件 (Loading)
- **加载器组件** - 多种加载动画
- **进度条组件** - 量子粒子效果
- **骨架屏组件** - 内容加载占位

### 导航组件 (Navigation)
- **菜单组件** - 导航菜单
- **面包屑组件** - 路径导航

### 布局组件 (Layout)
- **网格组件** - 布局网格
- **分割线组件** - 内容分割

## 🎭 主题系统

Future UI 提供 4 种内置主题：

- **星光白 (Light)** - 优雅浅色主题
- **深空黑 (Dark)** - 经典深色主题  
- **星云蓝 (Blue)** - 梦幻渐变主题
- **极光绿 (Green)** - 自然清新主题

### 使用主题

```vue
<template>
  <div>
    <ThemeToggle />
  </div>
</template>

<script setup>
import { useTheme } from '@/composables/useTheme'

const { 
  isDark, 
  theme, 
  setTheme, 
  toggleTheme,
  availableThemes 
} = useTheme()

// 切换主题
const switchTheme = (themeName) => {
  setTheme(themeName)
}
</script>
```

## 🔧 状态管理

项目使用 Pinia 进行状态管理，包含以下 Store：

### App Store
```javascript
import { useAppStore } from '@/stores/app'

const appStore = useAppStore()

// 显示通知
appStore.showSuccess('操作成功')
appStore.showError('操作失败')

// 控制加载状态
appStore.setLoading(true, '处理中...')

// 管理模态框
const modalId = appStore.showModal({
  component: MyModal,
  props: { title: '标题' }
})
```

### User Store
```javascript
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()

// 用户登录
await userStore.login({ username, password })

// 更新用户资料
await userStore.updateProfile(profileData)

// 检查权限
if (userStore.hasPermission('admin')) {
  // 管理员操作
}
```

### Components Store
```javascript
import { useComponentsStore } from '@/stores/components'

const componentsStore = useComponentsStore()

// 收藏组件
componentsStore.toggleFavorite('buttons')

// 搜索组件
const results = componentsStore.searchComponents('button')

// 创建组件集合
componentsStore.createCollection('我的收藏', '常用组件', ['buttons', 'inputs'])
```

## 🛠️ 工具函数

### 格式化工具
```javascript
import { formatNumber, formatCurrency, formatFileSize } from '@/utils'

formatNumber(1234.56, { decimals: 2 }) // "1,234.56"
formatCurrency(1234.56) // "¥1,234.56"
formatFileSize(1048576) // "1.00 MB"
```

### 验证工具
```javascript
import { validateEmail, validatePhone, validatePassword } from '@/utils'

const emailResult = validateEmail('user@example.com')
const phoneResult = validatePhone('13800138000')
const passwordResult = validatePassword('MyPassword123!')
```

### 存储工具
```javascript
import { localStorage, sessionStorage } from '@/utils'

// 存储数据（支持过期时间、加密、压缩）
localStorage.set('user', userData, { expiry: 86400000 }) // 24小时后过期

// 获取数据
const user = localStorage.get('user', defaultUser)

// 检查存储使用情况
const info = storageManager.getInfo()
```

## 📡 API 服务

### 基础用法
```javascript
import { authAPI, componentsAPI, uploadAPI } from '@/api'

// 用户认证
const loginResult = await authAPI.login({ username, password })

// 获取组件列表
const components = await componentsAPI.getComponents()

// 文件上传
const uploadResult = await uploadAPI.uploadFile(file, {
  onProgress: (progress) => console.log(`上传进度: ${progress}%`)
})
```

### 请求拦截
API 服务自动处理：
- 认证 token 添加
- 加载状态管理
- 错误处理和用户提示
- 请求重试和超时控制

## 🎵 音效系统

```javascript
import soundEffects from '@/utils/soundEffects'

// 初始化音效系统
soundEffects.init()

// 播放音效
soundEffects.playClickSound()
soundEffects.playHoverSound()
soundEffects.playSuccessSound()

// 控制音效
soundEffects.setEnabled(false) // 禁用音效
soundEffects.setVolume(0.5)    // 设置音量
```

## 🔧 配置

### 环境变量

复制 `.env.example` 为 `.env.local` 并配置：

```bash
# API 配置
VITE_API_BASE_URL=http://localhost:3000/api

# 功能开关
VITE_ENABLE_MOCK=true
VITE_ENABLE_PWA=false

# 上传配置
VITE_UPLOAD_MAX_SIZE=10485760
```

### Vite 配置

项目已配置：
- 自动导入 Vue API 和组件
- 路径别名 `@` 指向 `src` 目录
- TypeScript 类型声明自动生成
- ESLint 配置自动生成

## 📦 构建部署

### 构建优化
- Tree-shaking 自动移除未使用代码
- 代码分割和懒加载
- 资源压缩和优化
- 现代浏览器优化

### 部署建议
- 使用 CDN 加速静态资源
- 启用 Gzip 压缩
- 配置缓存策略
- 使用 HTTPS

## 🤝 贡献指南

1. Fork 项目
2. 创建功能分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 创建 Pull Request

## 📄 许可证

本项目基于 MIT 许可证开源。详见 [LICENSE](LICENSE) 文件。

## 🙏 致谢

- [Vue.js](https://vuejs.org/) - 渐进式 JavaScript 框架
- [Vite](https://vitejs.dev/) - 下一代前端构建工具
- [TailwindCSS](https://tailwindcss.com/) - 实用优先的 CSS 框架
- [Pinia](https://pinia.vuejs.org/) - Vue 状态管理库

---

<div align="center">
  <p>用 ❤️ 和 ☕ 制作</p>
  <p>© 2024 Future UI. All rights reserved.</p>
</div>