deotalandAi/apps/FrontendDesigner

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               # 应用入口

🛠️ 开发命令

安装依赖

npm install

开发模式

npm run dev

启动开发服务器，支持热重载。

代码检查

npm run lint

运行 ESLint 检查代码质量。

代码格式化

npm run format

使用 Prettier 格式化代码。

构建生产版本

npm run build

构建优化后的生产版本。

预览构建结果

npm run preview

本地预览构建后的应用。

🎯 核心功能

响应式设计

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

性能优化

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

开发者体验

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

可访问性

• 高对比度主题支持
• 键盘导航支持
• 语义化 HTML 结构
• 适当的 ARIA 标签

🔧 环境配置

环境变量

创建 .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. 克隆项目

   git clone <repository-url>
   cd apps/FrontendDesigner
   

2. 安装依赖

   npm install
   

3. 启动开发

   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 驱动 | 多端适配 | 国际化支持