82 lines
3.5 KiB
Markdown
82 lines
3.5 KiB
Markdown
# 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- -add-frontend-vue3-elementplus-i18n-template: 前端 Vue3 模板框架（Element Plus + I18n）- 已完成，包含完整的Vue3项目初始化、Element Plus集成、国际化支持、响应式设计和性能优化
|