RMO-Front/README.md

# RMO一站式临床试验风险管理网站

## 项目简介

RMO（Risk Management Outsourcing）一站式临床试验风险管理网站，旨在介绍RMO模式，清晰展示申办者、研究机构、SMO、CRO在临床试验中各自应承担的职责，说明保险和保证金方式如何保障受试者安全。

## 技术栈

- **前端框架**: React 18.2.0
- **开发语言**: TypeScript
- **路由**: React Router DOM 6.20.0
- **构建工具**: Vite 5.0.8
- **样式**: CSS3 (原生CSS，无UI框架依赖)

## 项目结构

```
rmo-website/
├── public/                 # 静态资源
├── src/
│   ├── components/         # 公共组件
│   │   ├── Header.tsx      # 导航头部
│   │   ├── Footer.tsx      # 页脚
│   │   └── Layout.tsx     # 布局组件
│   ├── pages/              # 页面组件
│   │   ├── Home.tsx        # 首页
│   │   ├── Company.tsx     # 公司介绍
│   │   ├── Services.tsx    # 我们的服务
│   │   ├── Sponsor.tsx     # 申办方专区
│   │   ├── Institution.tsx # 试验机构专区
│   │   ├── Participant.tsx # 受试者专区
│   │   └── ServiceProvider.tsx # 服务方专区
│   ├── App.tsx             # 主应用组件
│   ├── main.tsx            # 入口文件
│   └── index.css           # 全局样式
├── index.html              # HTML模板
├── package.json            # 项目配置
├── tsconfig.json           # TypeScript配置
├── vite.config.ts          # Vite配置
└── README.md               # 项目说明
```

## 功能特性

### 主要页面

1. **首页**
   - 一站式风险管理模式图展示
   - RMO模式/理念/价值介绍
   - RMO模式服务方介绍
   - 快速导航到各角色专区

2. **公司介绍**
   - 临研安公司简介
   - 活动动态（研讨会、发布会、展会、培训会）
   - 资源中心（法律法规、条款标准、行业共识、视频）

3. **我们的服务**
   - 自保（专项风险管理基金）
   - 风险减量服务
   - 外溢风险管理服务
   - 保险服务

4. **申办方专区**
   - 风险管理体系（风险识别、风险评估、风险管理策略）
   - RMO模式解决方案
   - 操作流程

5. **试验机构专区**
   - 试验机构关注要点
   - 研究者支持
   - 伦理委员会支持

6. **受试者专区**
   - 临床试验介绍
   - 受试者权益
   - 损害救济

7. **服务方专区**
   - CRO支持
   - CDMO支持
   - SMO支持

## 安装和运行

### 前置要求

- Node.js >= 16.0.0
- npm >= 7.0.0 或 yarn >= 1.22.0

### 安装依赖

```bash
npm install
```

或

```bash
yarn install
```

### 开发模式运行

```bash
npm run dev
```

或

```bash
yarn dev
```

项目将在 `http://localhost:3000` 启动，浏览器会自动打开。

### 构建生产版本

```bash
npm run build
```

或

```bash
yarn build
```

构建产物将输出到 `dist` 目录。

### 预览生产版本

```bash
npm run preview
```

或

```bash
yarn preview
```

## 开发说明

### 添加新页面

1. 在 `src/pages/` 目录下创建新的页面组件
2. 在 `src/App.tsx` 中添加路由配置
3. 在 `src/components/Header.tsx` 中添加导航链接

### 样式规范

- 使用CSS变量定义主题色和通用样式（见 `src/index.css`）
- 每个组件/页面有独立的CSS文件
- 遵循响应式设计，支持移动端访问

### 代码规范

- 使用TypeScript进行类型检查
- 遵循React Hooks最佳实践
- 组件采用函数式组件

## 浏览器支持

- Chrome (最新版本)
- Firefox (最新版本)
- Safari (最新版本)
- Edge (最新版本)

## 项目特点

- ✅ 响应式设计，支持PC、平板、手机访问
- ✅ 现代化UI设计，专业美观
- ✅ 清晰的导航结构
- ✅ 完整的内容展示
- ✅ 快速加载，性能优化
- ✅ TypeScript类型安全

## 待完善功能

- [ ] 添加实际的一站式风险管理模式图（图片/可视化图表）
- [ ] 实现资源中心的文件下载功能
- [ ] 添加在线咨询功能
- [ ] 实现服务申请表单提交
- [ ] 添加数据统计展示
- [ ] 实现用户登录系统（如需要）

## 许可证

本项目为内部项目，版权归临研安所有。

## 联系方式

如有问题或建议，请联系：
- 邮箱：rmo@vdano.com
- 电话：4009-606-520

---

**最后更新**: 2025年1月