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`)

页面模块

头部导航
- 品牌Logo和标题
- 导航菜单：首页、产品、行业解决方案、文档中心、了解我们
- 登录/注册按钮
Hero区域
- 背景视频（home.webm）
- 粒子动画覆盖层（ParticlesCanvas.vue）
- 渐变色标题：您专注业务，我们守护安全
- 副标题：展示产品服务范围
产品标签栏
- 6个产品分类标签
- 首个标签高亮显示
产品卡片展示
- Web安全加速
- DNS安全加速
- 扫描观测（漏洞扫描）
- 每个卡片包含：标题、描述、特性标签、操作按钮
安全洞见数据展示
- 背景图 + 动画效果
- 实时攻防态势数据：
  - 今日CC攻击次数: 19,009
  - 今日DDoS攻击峰值: 22,844
  - 今日WAF拦截次数: 56,870
定价方案
- Lite Plan ($999) - 项目上线初期
- Basic Plan ($1999) - 个人开发者
- Standard Plan ($4999) - 企业入门
- 每个方案包含：防护目标数、峰值设备数、线路、带宽、防御能力
安全架构展示
- 全景技术架构背景图
- 粒子动画（SecurityParticles.vue）
- 技术描述文字
行业解决方案
- 彩虹背景效果
- 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

安装依赖

pnpm install

启动开发服务器

pnpm dev

访问 http://localhost:3000

构建生产版本

pnpm build

预览生产构建

pnpm preview

生成静态站点

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`

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

TypeScript 配置

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

部署说明

构建输出

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

部署建议

使用 Nginx 反向代理
配置 HTTPS
启用 Gzip/Brotli 压缩
配置 CDN 加速静态资源

待完成功能

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

注意事项

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

浏览器兼容性

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

许可证

联系方式

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

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

PROJECT_OVERVIEW.md 8.1 KB 履歴 Raw

DDAC 安全防护官网项目文档

项目概述

技术栈

项目结构

核心功能

1. 设备检测与重定向

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

页面模块

动画效果

3. 组件说明

Header.vue

Footer.vue

ParticlesCanvas.vue

SecurityParticles.vue

样式设计

颜色方案

字体

设计特点

开发指南

环境要求

安装依赖

启动开发服务器

构建生产版本

预览生产构建

生成静态站点

路由配置

Nuxt 配置

nuxt.config.ts

TypeScript 配置

部署说明

构建输出

部署建议

待完成功能

注意事项

浏览器兼容性

许可证

联系方式

PROJECT_OVERVIEW.md 8.1 KB

履歴 Raw

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

`nuxt.config.ts`