# rainbow-sou-frontend

**Repository Path**: it4/rainbow-sou-frontend

## Basic Information

- **Project Name**: rainbow-sou-frontend
- **Description**: 一个简单的聚合搜索平台
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-16
- **Last Updated**: 2026-01-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, vite, Ant-Design

## README

# RainbowSou 聚合搜索平台 - 前端文档

## 项目简介

RainbowSou 是一个现代化的聚合搜索平台前端应用，旨在为用户提供一站式的搜索体验。通过整合多个搜索引擎的数据源，用户可以在一个界面上获得更全面、更准确的搜索结果。
![img.png](img.png)

## 技术栈

- **前端框架**: Vue 3
- **构建工具**: Vite
- **编程语言**: JavaScript
- **组件语法**: `<script setup>` SFCs
- **HTTP 客户端**: Axios
- **样式预处理器**: CSS

## 项目特点

### 🚀 高性能

- 利用 Vite 的快速冷启动和热重载功能
- 基于原生 ES 模块的按需加载
- Vue 3 的响应式系统优化

### 🎨 用户体验

- 直观简洁的用户界面设计
- 响应式布局，适配各种屏幕尺寸
- 流畅的交互体验和动画效果

### 🔧 开发友好

- 使用 Composition API 进行逻辑组织
- 模块化的组件设计
- 完善的请求管理和错误处理机制

## 项目结构

```
rainbow-sou-frontend/
├── public/                 # 静态资源
├── src/                    # 源代码目录
│   ├── assets/             # 静态资源
│   ├── components/         # 可复用组件
│   ├── views/              # 页面组件
│   ├── utils/              # 工具函数
│   │   └── request.js      # 请求配置和拦截器
│   ├── router/             # 路由配置
│   ├── store/              # 状态管理
│   ├── App.vue             # 主应用组件
│   └── main.js             # 应用入口
├── .gitignore              # Git 忽略配置
├── package.json            # 项目依赖和脚本
├── README.md               # 项目说明文档
└── vite.config.js          # Vite 配置文件
```

## 功能特性

### 搜索聚合

- 整合多个搜索引擎数据源
- 统一的搜索结果展示界面
- 智能排序和过滤功能

### 用户界面

- 响应式设计，支持移动端和桌面端
- 直观的搜索操作流程
- 清晰的结果分类展示

### 数据管理

- 集中的 API 请求处理
- 统一的错误处理机制
- 请求缓存和节流控制

## 开发环境搭建

### 系统要求

- Node.js v14 或更高版本
- npm 或 yarn 包管理器

### 安装步骤

1. **克隆项目**
   ```bash
   git clone <repository-url>
   cd rainbow-sou-frontend
   ```


2. **安装依赖**
   ```bash
   npm install
   # 或者使用 yarn
   yarn install
   ```


3. **启动开发服务器**
   ```bash
   npm run dev
   # 或者使用 yarn
   yarn dev
   ```


4. **构建生产版本**
   ```bash
   npm run build
   # 或者使用 yarn
   yarn build
   ```


5. **预览生产构建**
   ```bash
   npm run preview
   # 或者使用 yarn
   yarn preview
   ```

## 核心配置

### 请求配置 (`src/utils/request.js`)

- **基础URL**: `/api`
- **超时时间**: 5000ms
- **请求拦截器**: 统一处理请求配置
- **响应拦截器**: 统一处理响应数据和错误

### 路由配置

- 基于 Vue Router 的单页应用路由
- 支持懒加载和动态路由

## 代码规范

### 组件命名

- 使用 PascalCase 命名组件文件
- 组件名称应具有描述性

### 文件组织

- 按功能模块组织文件
- 组件、视图、工具函数分离

### 代码风格

- 使用 ESLint 进行代码检查
- 遵循 Vue 3 最佳实践

## 部署说明

### 构建

运行 `npm run build` 生成生产环境代码

### 部署

- 将 `dist` 目录部署到静态服务器
- 配置反向代理处理 API 请求

## 贡献指南

### 提交规范

- 遵循 conventional commits 规范
- 提交前运行 `npm run lint`

### 分支管理

- `main`: 生产环境分支
- `develop`: 开发主分支
- feature branches: 功能开发分支

## 常见问题

### 开发环境问题

- 确保 Node.js 版本符合要求
- 检查依赖包是否正确安装

### 构建问题

- 确保没有语法错误
- 检查路径引用是否正确

## 联系方式

如有问题或建议，请联系项目维护团队。

---

*此项目基于 Vue 3 + Vite 模板创建，更多信息请参阅 [Vue 文档](https://vuejs.org/) 和 [Vite 文档](https://vitejs.dev/)*