# DDAC 安全防护官网项目文档

## 项目概述

DDAC 是一个网络安全防护服务官网，提供高防服务器、高防DNS、游戏盾SDK、高防CDN等安全产品。项目基于 Nuxt 3 框架开发，采用 PC 和 H5 双端设计，通过设备检测自动适配不同终端。

## 技术栈

- **框架**: Nuxt 4.2.2
- **Vue版本**: Vue 3.5.26
- **路由**: Vue Router 4.6.4
- **UI组件库**: Element Plus 2.13.1
- **样式预处理**: Sass 1.97.2
- **TypeScript**: 5.x
- **包管理器**: pnpm

## 项目结构

```
DDAC/
├── .github/                 # GitHub Actions 配置
├── .nuxt/                  # Nuxt 自动生成的配置文件
├── .output/                # 构建输出目录
├── app/                    # 应用源代码目录
│   ├── app.vue            # 应用入口组件
│   ├── assets/            # 静态资源
│   │   ├── images/        # 图片资源
│   │   │   └── home/      # 首页图片（20+ 张图标、背景图）
│   │   ├── scss/          # 全局样式文件
│   │   │   └── main.scss  # CSS 重置和全局样式
│   │   ├── svg/           # SVG 图标
│   │   └── video/         # 视频资源
│   │       └── home.webm  # 首页背景视频
│   ├── components/        # Vue 组件
│   │   ├── Header.vue     # 头部导航组件
│   │   ├── Footer.vue     # 底部组件
│   │   ├── ParticlesCanvas.vue      # 首页粒子动画组件
│   │   └── SecurityParticles.vue   # 安全架构粒子动画组件
│   └── pages/             # 页面路由（自动生成路由）
│       ├── index.vue      # 首页（设备检测重定向）
│       ├── pc/            # PC 端页面
│       │   ├── index.vue  # PC 首页
│       │   └── about.vue  # PC 关于页（占位）
│       └── h5/            # 移动端页面
│           ├── index.vue  # H5 首页（占位）
│           └── about.vue  # H5 关于页（占位）
├── node_modules/          # 依赖包
├── plugins/               # Nuxt 插件目录（当前为空）
├── public/                # 静态公共资源
│   ├── favicon.ico        # 网站图标
│   └── logo.png           # Logo 图片
├── .gitignore             # Git 忽略配置
├── nuxt.config.ts         # Nuxt 配置文件
├── package.json           # 项目依赖配置
├── pnpm-lock.yaml         # pnpm 锁文件
├── README.md              # 项目说明
└── tsconfig.json          # TypeScript 配置
```

## 核心功能

### 1. 设备检测与重定向
- **文件位置**: `app/pages/index.vue`
- **功能**: 自动检测用户设备类型（PC/移动端）
- **实现方式**: 通过 `navigator.userAgent` 检测移动端特征
- **重定向规则**:
  - 移动设备 → `/h5`
  - PC设备 → `/pc`

### 2. PC 首页 (`/pc/index.vue`)

#### 页面模块
1. **头部导航**
   - 品牌Logo和标题
   - 导航菜单：首页、产品、行业解决方案、文档中心、了解我们
   - 登录/注册按钮

2. **Hero区域**
   - 背景视频（`home.webm`）
   - 粒子动画覆盖层（`ParticlesCanvas.vue`）
   - 渐变色标题：您专注业务，我们守护安全
   - 副标题：展示产品服务范围

3. **产品标签栏**
   - 6个产品分类标签
   - 首个标签高亮显示

4. **产品卡片展示**
   - Web安全加速
   - DNS安全加速
   - 扫描观测（漏洞扫描）
   - 每个卡片包含：标题、描述、特性标签、操作按钮

5. **安全洞见数据展示**
   - 背景图 + 动画效果
   - 实时攻防态势数据：
     - 今日CC攻击次数: 19,009
     - 今日DDoS攻击峰值: 22,844
     - 今日WAF拦截次数: 56,870

6. **定价方案**
   - Lite Plan ($999) - 项目上线初期
   - Basic Plan ($1999) - 个人开发者
   - Standard Plan ($4999) - 企业入门
   - 每个方案包含：防护目标数、峰值设备数、线路、带宽、防御能力

7. **安全架构展示**
   - 全景技术架构背景图
   - 粒子动画（`SecurityParticles.vue`）
   - 技术描述文字

8. **行业解决方案**
   - 彩虹背景效果
   - 5大行业：金融、互联网、医疗健康、制造、教育
   - 15个客户案例展示
   - 雷达扫描动画

#### 动画效果
- **粒子动画**: 从四周向中心汇聚的粒子效果
- **浮动动画**: 游戏盾图标上下浮动
- **雷达扫描**: 旋转扫描效果 + 闪烁点
- **渐变过渡**: 多处使用CSS渐变背景

### 3. 组件说明

#### Header.vue
- 使用 Element Plus 的 `el-row` 和 `el-col` 布局
- 响应式三列布局（6-12-6）
- 包含品牌标识、导航菜单、用户操作区

#### Footer.vue
- 5列导航链接：安全产品、安全服务、热搜榜单、文档中心、关于我们
- 行业解决方案入口
- 联系方式
- 版权信息

#### ParticlesCanvas.vue
- Canvas 粒子动画
- 30个粒子从随机位置向中心移动
- 到达中心后重新生成
- 支持 window resize 事件

#### SecurityParticles.vue
- 上升流动的粒子效果
- 60-600个粒子（根据屏幕面积自适应）
- 带有横向摆动效果
- 支持高DPI屏幕

## 样式设计

### 颜色方案
- **背景色**: `#030014`（深紫黑色）
- **主色调**: 紫色系（`#7C4DFF`、`#DEB9FF`、`#617FFF`）
- **文字色**: 白色 `#ffffff`、浅灰 `#bdbdbd`
- **强调色**: `#a39dff`、`#9b71ff`

### 字体
- **标题**: Source Han Sans CN（思源黑体）
- **英文/数字**: Roboto、Inter
- **字重**: 400（常规）、500（中粗）、700（粗体）

### 设计特点
- 渐变色背景和按钮
- 磨砂玻璃效果（`backdrop-filter: blur`）
- 悬浮阴影和边框发光效果
- CSS动画（浮动、闪烁、扫描）

## 开发指南

### 环境要求
- Node.js >= 18.x
- pnpm >= 8.x

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

### 启动开发服务器
```bash
pnpm dev
```
访问 `http://localhost:3000`

### 构建生产版本
```bash
pnpm build
```

### 预览生产构建
```bash
pnpm preview
```

### 生成静态站点
```bash
pnpm generate
```

## 路由配置

Nuxt 3 采用文件系统路由，路由结构如下：

```
/
├── index.vue          → /
├── pc/
│   ├── index.vue      → /pc
│   └── about.vue      → /pc/about
└── h5/
    ├── index.vue      → /h5
    └── about.vue      → /h5/about
```

## Nuxt 配置

### `nuxt.config.ts`
```typescript
export default defineNuxtConfig({
  modules: ['@element-plus/nuxt'],  // Element Plus 集成
  compatibilityDate: '2025-07-15',
  css: ['~/assets/scss/main.scss'], // 全局样式
})
```

### TypeScript 配置
- 支持模块系统：ESM
- 严格模式：已启用
- 类型检查：完整支持

## 部署说明

### 构建输出
- `.output/` 目录包含构建后的应用
- 支持静态导出（`nuxt generate`）
- 支持服务器端渲染部署

### 部署建议
1. 使用 Nginx 反向代理
2. 配置 HTTPS
3. 启用 Gzip/Brotli 压缩
4. 配置 CDN 加速静态资源

## 待完成功能

- [ ] 完善移动端 H5 页面设计
- [ ] 完成 PC 端关于页面
- [ ] 实现产品详情页
- [ ] 实现文档中心
- [ ] 添加用户登录/注册功能
- [ ] 添加后台管理系统
- [ ] 添加数据统计功能
- [ ] SEO 优化
- [ ] 性能优化（代码分割、懒加载）
- [ ] 添加单元测试和端到端测试

## 注意事项

1. **设备检测**: 当前通过 `window.location.href` 重定向，生产环境建议使用 Nuxt 中间件
2. **视频加载**: Hero 背景视频使用 WebM 格式，注意浏览器兼容性
3. **Canvas 性能**: 粒子动画在移动端可能会有性能问题，建议添加性能优化
4. **图片优化**: 静态资源较大，建议使用图片压缩和 CDN 加速
5. **SEO**: 当前页面 SEO 元数据较简单，建议完善

## 浏览器兼容性

- Chrome >= 90
- Firefox >= 88
- Safari >= 14
- Edge >= 90

## 许可证

Copyright © 2025 SUYUN, All Rights Reserved

## 联系方式

- 企业邮箱：support@yundun.com
- 官网：DDAC（待补充域名）

---

**文档生成时间**: 2025-01-19
**项目版本**: 1.0.0