# Project Context

## Purpose
DeotalandAi 是一个 AI 驱动的前端项目，采用现代化的 Vue3 技术栈，注重国际化支持和用户体验。项目旨在构建一个具有国际化功能的前端应用，并建立了完善的 AI 辅助开发工作流。

## Tech Stack
- **前端框架**: Vue 3 (最新稳定版)
- **UI 组件库**: Element Plus 2.x
- **国际化**: Vue I18n 9.x (中文/英文双语言支持)
- **构建工具**: Vite
- **图标系统**: Element Plus Icons + Feather Icons (统一 24px)
- **样式系统**: CSS 变量 + Normalize.css
- **字体**: Inter 字体 (Google Fonts 或本地托管)
- **自动化**: 
  - unplugin-auto-import (自动导入)
  - unplugin-vue-components (组件自动导入)
  - unplugin-icons (图标自动导入)
- **性能优化**:
  - vue3-lazyload (图片懒加载)
  - vue3-virtual-scroll-list (虚拟滚动)

## Project Conventions

### 代码风格
- **命名规范**: 
  - Vue 组件使用 PascalCase (e.g., `UserProfile.vue`)
  - 文件和文件夹使用 kebab-case (e.g., `user-profile`)
  - 变量和方法使用 camelCase
- **目录结构**: 
  - `src/assets/` - 静态资源
  - `src/components/` - 可复用组件
  - `src/locales/` - 国际化文件
  - `src/styles/` - 样式文件
  - `src/views/` - 页面组件
- **设计系统**:
  - 主色调: `#6B46C1` (紫色)
  - 边框圆角: 8px
  - 8px 网格间距系统
  - 全局过渡: `all 200ms ease-in-out`

### 架构模式
- **响应式设计**: 桌面优先 (1440px+)，适配平板 (768px) 和移动端 (375px)
- **组件化开发**: 高度组件化，可复用性强
- **国际化优先**: 所有文案通过 i18n 管理
- **渐进增强**: 基础功能 + 性能优化 + 视觉体验
- **AI 辅助开发**: 基于 OpenSpec 规范的工作流

### 测试策略
- **组件测试**: 优先关键组件的单元测试或快照测试
- **国际化测试**: 验证多语言切换和文案完整性
- **响应式测试**: 多设备尺寸适配验证
- **性能测试**: 大列表渲染和图片懒加载效果验证

### Git 工作流
- **OpenSpec 变更管理**: 所有重大变更通过 OpenSpec 提案系统
- **变更 ID 格式**: 动词开头 + 简短描述 (e.g., `add-frontend-vue3-elementplus-i18n-template`)
- **分支策略**: 基于变更 ID 创建特性分支
- **提交规范**: 遵循 OpenSpec 流程，变更完成后归档

## 域上下文
- **AI 项目特性**: 面向 AI 功能的用户界面设计
- **多语言用户**: 支持中文和英文用户群体
- **现代化体验**: 注重视觉设计、交互细节和性能表现
- **可扩展架构**: 为后续功能扩展预留结构空间

## 重要约束
- **设计一致性**: 必须遵循既定的设计系统和主题色彩
- **国际化完整性**: 所有用户可见文本必须支持中英双语
- **性能要求**: 大数据量展示需要支持虚拟滚动和懒加载
- **移动端适配**: 最小触摸目标 44px，适配移动端交互
- **AI 规范遵循**: 严格遵循 OpenSpec 工作流和文件组织规范

## 外部依赖
- **Google Fonts**: Inter 字体 (网络或本地)
- **Element Plus**: UI 组件库生态系统
- **Vite 生态系统**: 构建和开发工具链
- **Vue 生态系统**: Vue Router (如需要路由功能)
- **CDN 资源**: 图标库和字体文件 (fallback 到本地)

## Archived Changes
- 2025-11-12-13121765685-add-frontend-vue3-elementplus-i18n-template: 前端 Vue3 模板框架（Element Plus + I18n）- 已完成，包含完整的Vue3项目初始化、Element Plus集成、国际化支持、响应式设计和性能优化