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
主要功能
- Claude风格首页 - 现代化的AI助手风格界面，集成登录和注册功能
- 用户仪表板 - 显示可用账号和统计信息
- 管理后台 - 用户和权限管理界面
- 响应式设计 - 适配各种设备尺寸
- 深色模式 - 支持深色/浅色主题切换
组件说明
页面组件
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