# Vue3 前端设计师工具

一个基于 Vue3 构建的现代化、响应式前端设计师工具应用，支持多端适配和国际化。

## 🚀 技术栈

### 核心框架
- **Vue 3** - 使用 Composition API 构建现代化应用
- **Vite** - 快速的构建工具和开发服务器
- **Pinia** - 轻量级状态管理解决方案
- **Vue Router 4** - 客户端路由管理

### 国际化
- **Vue I18n** - 完整的国际化解决方案
- 支持中文 (zh-CN) 和英文 (en-US)
- 动态语言切换

### 样式系统
- **原生 CSS** - 使用 Scoped CSS 和 CSS 变量
- **响应式设计** - 移动优先的响应式布局
- **主题系统** - 支持浅色、深色和高对比度主题
- **CSS 变量** - 完整的颜色、字体、间距变量系统

### 工具链
- **ESLint** - 代码质量检查
- **Prettier** - 代码格式化
- **现代 JavaScript** - ES6+ 语法

## 📱 多端适配

### 响应式断点
- **移动端**: < 768px
- **平板端**: 768px - 1024px  
- **桌面端**: > 1024px

### 特性
- 移动优先设计理念
- 自适应布局和字体大小
- 触摸友好的交互设计
- 键盘导航支持
- 平板横竖屏适配
- 移动端性能优化

## 🌍 国际化

### 支持语言
- 🇨🇳 中文 (zh-CN)
- 🇺🇸 English (en-US)

### 功能特性
- 自动检测浏览器语言
- 本地存储语言偏好
- 完整的文本翻译
- 日期时间格式化
- 数字货币格式化
- RTL 语言支持准备

## 🎨 主题系统

### 主题类型
- **浅色主题** - 明亮清晰的默认主题
- **深色主题** - 护眼的暗色主题
- **高对比度** - 无障碍访问专用

### 功能
- 系统主题自动检测
- 手动主题切换
- 平滑过渡动画
- 移动端状态栏颜色适配

## 📦 项目结构

```
src/
├── assets/                 # 静态资源
│   └── styles/            # 样式文件
│       ├── global.css     # 全局样式
│       ├── responsive.css # 响应式布局
│       └── themes.css     # 主题系统
├── components/            # 可复用组件
├── composables/           # 组合式函数
│   ├── useTheme.js       # 主题管理
│   ├── useI18n.js        # 国际化扩展
│   └── useResponsive.js  # 响应式检测
├── locales/               # 国际化文件
│   ├── lang/             # 语言包
│   │   ├── zh-CN.js      # 中文语言包
│   │   └── en-US.js      # 英文语言包
│   └── i18n.js           # i18n 配置
├── pages/                # 页面组件
├── router/               # 路由配置
│   └── index.js          # 路由定义
├── services/             # 服务层
│   └── api.js            # API 请求封装
├── stores/               # Pinia 状态管理
│   └── index.js          # Store 配置
├── App.vue               # 根组件
└── main.js               # 应用入口
```

## 🛠️ 开发命令

### 安装依赖
```bash
npm install
```

### 开发模式
```bash
npm run dev
```
启动开发服务器，支持热重载。

### 代码检查
```bash
npm run lint
```
运行 ESLint 检查代码质量。

### 代码格式化
```bash
npm run format
```
使用 Prettier 格式化代码。

### 构建生产版本
```bash
npm run build
```
构建优化后的生产版本。

### 预览构建结果
```bash
npm run preview
```
本地预览构建后的应用。

## 🎯 核心功能

### 响应式设计
- 移动优先的布局策略
- 基于断点的组件适配
- 自适应字体和间距系统
- 设备类型自动检测

### 性能优化
- 组件懒加载
- 路由懒加载
- 图片响应式优化
- 移动端动画性能优化

### 开发者体验
- 完整的开发工具链
- 热重载开发环境
- 代码规范检查
- 自动格式化

### 可访问性
- 高对比度主题支持
- 键盘导航支持
- 语义化 HTML 结构
- 适当的 ARIA 标签

## 🔧 环境配置

### 环境变量
创建 `.env` 文件配置环境变量：

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

# 开发配置
VITE_DEV_TOOLS=true
```

### 浏览器支持
- **移动端**: iOS 13+, Android 8+
- **桌面端**: Chrome 80+, Firefox 75+, Edge 80+
- **平板端**: iPadOS, Android 平板

## 🚀 快速开始

1. **克隆项目**
   ```bash
   git clone <repository-url>
   cd apps/FrontendDesigner
   ```

2. **安装依赖**
   ```bash
   npm install
   ```

3. **启动开发**
   ```bash
   npm run dev
   ```

4. **访问应用**
   打开浏览器访问 `http://localhost:5173`

## 📝 开发规范

### 代码规范
- 使用 ESLint 进行代码检查
- 使用 Prettier 进行代码格式化
- 遵循 Vue 3 最佳实践
- 优先使用 Composition API

### 组件开发
- 组件名使用 PascalCase
- 文件名使用 PascalCase
- Props 使用 camelCase
- 事件名使用 kebab-case

### 样式规范
- 使用 Scoped CSS
- 优先使用 CSS 变量
- 移动优先的响应式设计
- 语义化的类名

## 🔮 未来规划

- [ ] 添加单元测试
- [ ] 集成 E2E 测试
- [ ] 添加 PWA 支持
- [ ] 性能监控
- [ ] 更多国际化语言
- [ ] 暗色模式增强
- [ ] 组件库集成

## 📄 许可证

本项目使用 MIT 许可证。

## 🤝 贡献

欢迎提交 Issue 和 Pull Request 来改进这个项目。

## 📞 支持

如有问题或建议，请通过以下方式联系：
- 创建 GitHub Issue
- 发送邮件至项目维护者

---

**由 Vue3 + Vite 驱动 | 多端适配 | 国际化支持**