# 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      # 全局样式
```

## 开发指南

### 安装依赖
```bash
npm install
```

### 启动开发服务器
```bash
npm run dev
```

### 构建生产版本
```bash
npm run build
```

### 代码检查
```bash
npm run lint
```

### 运行测试
```bash
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