3.5 KiB

Raw Blame History

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集成、国际化支持、响应式设计和性能优化