ai/frontend/README.md

Pandora 前端应用

基于 Vue 3 + TypeScript + Vite 构建的现代化前端应用。

技术栈

• Vue 3: 现代化的前端框架
• TypeScript: 类型安全的JavaScript
• Vite: 快速的构建工具
• Tailwind CSS: 实用优先的CSS框架
• Vue Router: 客户端路由
• Pinia: 状态管理
• VueUse: 组合式工具库
• VeeValidate: 表单验证
• Vue Toastification: 通知组件

项目结构

src/
├── components/     # 可复用组件
├── views/         # 页面组件
├── stores/        # Pinia状态管理
├── utils/         # 工具函数
├── types/         # TypeScript类型定义
├── assets/        # 静态资源
├── router/        # 路由配置
├── App.vue        # 根组件
├── main.ts        # 应用入口
└── style.css      # 全局样式

开发指南

安装依赖

npm install

启动开发服务器

npm run dev

构建生产版本

npm run build

代码检查

npm run lint

运行测试

npm test

主要功能

1. Claude风格首页 - 现代化的AI助手风格界面，集成登录和注册功能
2. 用户仪表板 - 显示可用账号和统计信息
3. 管理后台 - 用户和权限管理界面
4. 响应式设计 - 适配各种设备尺寸
5. 深色模式 - 支持深色/浅色主题切换

组件说明

页面组件

• Home.vue - 首页，包含登录和注册功能
• Dashboard.vue - 用户仪表板
• Admin.vue - 管理后台
• NotFound.vue - 404页面

工具组件

• icons/ - SVG图标组件
• 更多组件开发中...

样式系统

使用 Tailwind CSS 构建，包含：

• 响应式设计
• 深色模式支持
• 自定义组件类
• 动画效果

状态管理

使用 Pinia 进行状态管理，主要store：

• 用户认证状态
• 应用配置
• 主题设置

路由配置

• / - 首页（包含登录/注册功能）
• /dashboard - 用户仪表板
• /admin - 管理后台
• /* - 404页面

开发规范

• 使用 TypeScript 严格模式
• 遵循 Vue 3 Composition API
• 使用 ESLint 和 Prettier
• 组件命名使用 PascalCase
• 文件命名使用 kebab-case