108 lines
2.2 KiB
Markdown
108 lines
2.2 KiB
Markdown
# 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 |