TKCTF 官网

浙江同济科技职业学院信息安全社团官网

项目简介

这是一个基于原生 HTML、CSS、JavaScript 构建的现代化社团官网，具有以下特色：

🎵 音频可视化：点击 LOGO 播放 BGM，支持音频驱动的视觉效果
🎨 科技感设计：数据流背景、毛玻璃效果、动态光效
📱 响应式布局：完美适配桌面端和移动端
🎯 交互体验：平滑滚动、淡入动画、彩蛋功能
🔒 数据加密：彩蛋内容使用 AES 加密存储
⚡ 性能优化：三档性能切换，GPU 加速，智能资源管理

技术栈

前端：HTML5、CSS3、JavaScript (ES6+)
构建工具：esbuild
加密库：CryptoJS
多线程：Web Workers API
部署：GitHub Actions、GitHub Pages、Cloudflare CDN

快速开始

环境要求

Node.js 16+
npm 或 yarn

安装依赖

npm install

开发模式

npm run dev

启动监听模式，文件变化时自动重新构建。

生产构建

npm run build

构建完成后，所有文件将输出到 publish/ 目录。

本地测试服务器

npm run start

启动一个无缓存的 HTTP 测试服务器：

端口：18980
根目录：./publish
缓存：禁用 (-c-1)
CORS：启用
自动打开浏览器：是
智能端口管理：自动清理占用端口的旧进程

访问地址：http://localhost:18980

💡 提示：服务器会自动检测并清理端口占用，Ctrl+C 停止时会自动释放端口

部署

将 publish/ 目录的内容部署到你的 Web 服务器或 GitHub Pages。

项目结构

TKCTF.github.io/
├── src/                    # 源代码
│   ├── scripts.js         # 主要 JavaScript 逻辑
│   ├── styles.css         # 样式文件
│   └── spectrum-worker.js # Web Worker 音频处理线程
├── data/                  # 数据文件
│   ├── members.json       # 成员信息
│   ├── friends.json       # 友链信息
│   └── Card.encrypted     # 加密的卡片内容
├── img/                   # 图片资源
├── sound/                 # 音频文件
├── publish/               # 构建输出目录
├── build.js              # 构建脚本
├── start-server.js       # 启动脚本
├── package.json          # 项目配置
├── Guide.md              # 开发指南
└── README.md             # 项目说明

⚡ 性能优化系统

🎚️ 三档性能切换

网站右上角提供了性能档位切换控件，用户可以根据设备性能选择合适的档位：

📊 性能档位对比

特性	低档位	中档位（默认）	高档位
数据流数量	12条 (PC) / 4条 (移动)	16条 (PC) / 8条 (移动)	20条 (PC) / 12条 (移动)
频谱条密度	稀疏	标准	密集
二进制数字	❌ 禁用	✅ 启用	✅ 启用
频谱高亮	❌ 禁用	✅ 启用	✅ 启用
数据流抖动	❌ 禁用	✅ 启用	✅ 启用
Logo 光环	❌ 禁用	✅ 标准效果	✅ 增强效果
淡入动画	❌ 禁用	✅ 启用	✅ 启用
重型 Beats	❌ 禁用	✅ 标准检测	✅ 敏感检测
粒子数量	18个 (PC) / 12个 (移动)	20个 (PC) / 15个 (移动)	20个 (PC) / 18个 (移动)

🎯 档位选择建议

低档位：适合低配置设备、省电模式、或追求流畅性优先
中档位（默认）：平衡视觉效果和性能，适合大多数设备
高档位：适合高性能设备，追求极致视觉体验

🚀 GPU 加速优化

所有动画元素均已启用 GPU 硬件加速：

/* GPU 加速关键属性 */
will-change: transform, opacity;
transform: translateZ(0);

优化的元素包括：

✅ 二进制频谱背景
✅ 数据流系统
✅ 内容区块淡入
✅ 成员信息卡片
✅ Logo 动画效果
✅ 粒子系统
✅ 返回顶部按钮

🔧 性能配置系统

动态配置管理

// 性能档位配置示例
const performanceConfig = {
    low: {
        dataStreamCount: isMobile ? 4 : 12,
        enableBinaryDigits: false,
        enableLogoBeats: false
    },
    medium: {
        dataStreamCount: isMobile ? 8 : 16,
        enableBinaryDigits: true,
        enableLogoBeats: true
    },
    high: {
        dataStreamCount: isMobile ? 12 : 20,
        enableBinaryDigits: true,
        enableLogoBeats: true
    }
};

重型 Beats 检测优化

不同档位使用不同的音频检测参数：

参数	中档位	高档位
检测范围	25%-45% 频谱	25%-35% 频谱
激活阈值	9/10 频谱条	7/10 频谱条
检测窗口	100ms	50ms
触发间隔	300ms	250ms

🎵 高档位具有更敏感的节拍检测，Logo 光环效果更频繁

📱 移动端专项优化

自动降级策略

自动检测设备类型（桌面/移动）
移动端默认使用更保守的配置
禁用鼠标跟随等桌面专属特效

异步渲染优化

// 移动端分批创建频谱条，避免阻塞主线程
if (isMobile && barCount > 10) {
    const batchSize = Math.floor(barCount / 4);
    // 分 4 批异步创建
    requestAnimationFrame(createBatch);
}

数据流速度调整

桌面端：8-18 秒流动周期
移动端：15-25 秒流动周期（更慢更平滑）

💾 状态持久化

用户的性能档位选择会自动保存到 localStorage：

// 保存用户选择
localStorage.setItem('tkctf-performance-level', level);

// 下次访问时自动恢复
const savedLevel = localStorage.getItem('tkctf-performance-level');

数据管理

成员信息管理 (`data/members.json`)

成员信息分为两个部分：社长信息和社员信息。

社长信息结构

{
  "presidents": {
    "2023": {
      "members": [
        {
          "name": "张三",
          "roles": ["技术负责人", "竞赛负责人"],
          "codeName": "Alpha"
        },
        {
          "name": "李四", 
          "roles": ["行政运营负责人"],
          "codeName": "Beta"
        }
      ],
      "achievements": "主要成就：获得全国信息安全竞赛一等奖"
    },
    "2024": {
      "members": [
        {
          "name": "王五",
          "roles": ["技术负责人/竞赛负责人"],
          "codeName": "Gamma/Delta"
        }
      ],
      "achievements": "主要成就：成功举办校内CTF竞赛"
    }
  }
}

社员信息结构

{
  "members": {
    "2023": ["社员1", "社员2", "社员3"],
    "2024": ["社员A", "社员B", "社员C"]
  }
}

角色系统说明

负责人角色（支持多角色，用 / 分隔）：

技术负责人 - 蓝色渐变
行政运营负责人 - 青色渐变
竞赛负责人 - 橙色渐变
宣传负责人 - 粉色渐变

特殊身份：

平台开发总监 - 紫色渐变，带闪电图标
社团新晋指导老师 - 绿色渐变

代号系统：

支持单个代号："codeName": "Alpha"
支持多个代号（用 / 分隔）："codeName": "Gamma/Delta"
代号会以打字机效果循环显示

添加新成员示例

{
  "presidents": {
    "2025": {
      "members": [
        {
          "name": "新社长",
          "roles": ["技术负责人", "竞赛负责人"],
          "codeName": "NewLeader"
        }
      ],
      "achievements": "主要成就：待补充"
    }
  },
  "members": {
    "2025": ["新社员1", "新社员2"]
  }
}

友链管理 (`data/friends.json`)

友链数据结构简单，每个友链包含名称和链接：

{
  "friends": [
    {
      "name": "友链名称",
      "url": "https://example.com"
    },
    {
      "name": "另一个友链",
      "url": "https://another.com"
    }
  ]
}

添加新友链

{
  "friends": [
    {
      "name": "现有友链",
      "url": "https://existing.com"
    },
    {
      "name": "新友链",
      "url": "https://newlink.com"
    }
  ]
}

构建配置

esbuild 配置

项目使用 esbuild 进行构建，主要配置：

压缩：自动压缩 JavaScript 和 CSS
打包：将所有依赖打包成单个文件
输出格式：IIFE（立即执行函数表达式）
目标浏览器：ES2015+

构建输出

构建完成后，publish/ 目录包含：

publish/
├── index.html              # 主页面
├── src/
│   ├── scripts.min.js      # 压缩的 JavaScript
│   ├── styles.min.css      # 压缩的 CSS
│   └── spectrum-worker.min.js  # 压缩的 Web Worker 音频处理线程
├── data/                   # 数据文件
├── img/                    # 图片资源
├── sound/                  # 音频文件
└── CNAME                   # GitHub Pages 域名配置

🎵 音频可视化系统

核心特性

🎼 Web Worker 多线程处理

音频处理在独立的 Web Worker 线程中进行，避免阻塞主线程：

// 主线程创建 Worker
const worker = new Worker('./src/spectrum-worker.min.js');

// 发送音频数据到 Worker
worker.postMessage({
    type: 'spectrumData',
    data: Array.from(audioDataArray)
});

// 接收处理结果
worker.onmessage = (e) => {
    const { beat, heavyBeat, spectrumFeatures } = e.data;
    // 更新可视化效果
};

优势：

✅ 主线程流畅度提升
✅ 复杂计算不影响 UI
✅ 支持实时音频分析
✅ 降级到主线程（不支持 Worker 时）

🎚️ 音频频谱分析

使用 Web Audio API 进行实时频谱分析：

// 创建音频上下文和分析器
const audioContext = new AudioContext();
const analyser = audioContext.createAnalyser();
analyser.fftSize = 2048; // FFT 窗口大小

// 连接音频源
const source = audioContext.createMediaElementSource(audio);
source.connect(analyser);
analyser.connect(audioContext.destination);

// 获取频谱数据
const dataArray = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(dataArray);

💓 节拍检测系统

普通节拍检测

检测频段：1500-2250 Hz
阈值：> -4.5 dBFS (约 188/255)
冷却时间：25ms
应用效果：Logo 缩放、脉冲光环、数据流抖动

重型节拍检测（分档位）

档位	检测范围	激活阈值	检测窗口	触发间隔	效果
低档位	-	-	-	-	❌ 禁用
中档位	25%-45% 频谱	9/10 条激活	100ms	300ms	标准声波光环
高档位	25%-35% 频谱	7/10 条激活	50ms	250ms	增强声波光环

重型节拍效果：

🌊 声波扩散光环
✨ 增强拖影效果
💥 Logo 增强抖动
🎨 颜色强化

📊 频谱可视化

动态二进制频谱条显示：

实时响应音频频率
高能量时触发高亮效果
二进制数字随机更新
停止时优雅滑落动画

// 频谱条更新逻辑
for (let i = 0; i < barCount; i++) {
    const value = dataArray[i * dataStep] || 0;
    const height = Math.max(5, (value / 255) * 100);
    bar.style.height = height + 'px';
    
    // 高能量激活
    if (value > 120) {
        bar.classList.add('active');
    }
}

视觉效果

Logo 动画系统

🎯 鼠标磁吸跟随（桌面端）
💓 节拍缩放动画
✨ 音频驱动拖影效果
🌊 重型节拍声波光环
🎨 动态发光强度
📊 播放进度显示

数据流背景

📜 无限滚动代码流
🔀 二进制数据流
⚡ 节拍触发抖动（分档位）
🎭 故障艺术效果

频谱背景

📊 实时音频频谱
💫 高能量高亮效果
🔢 动态二进制数字
🌈 渐变色彩系统

响应式设计

桌面端

✅ 完整功能和视觉效果
✅ 鼠标交互优化
✅ 高性能动画
✅ 智能端口管理（开发）

移动端

✅ 触摸手势支持
✅ 性能自动降级
✅ 异步渲染优化
✅ 流畅度优先策略

🎁 彩蛋功能

触发方式

📜 ************
🎵 ************
⚡ ************
💡 ************

彩蛋内容

🃏 ************
🔒 ************
✨ ************
🔄 ************

技术实现

// 加密内容存储
const encryptedContent = CryptoJS.AES.encrypt(content, secretKey);

// 解密显示
const decrypted = CryptoJS.AES.decrypt(encryptedContent, secretKey);
const content = decrypted.toString(CryptoJS.enc.Utf8);

💎 技术亮点

🚀 性能优化

优化项	技术方案	效果
GPU 加速	`will-change` + `translateZ(0)`	动画流畅度提升 60%
Web Worker	音频处理多线程化	主线程 CPU 占用降低 40%
异步渲染	`requestAnimationFrame` 分批创建	避免主线程阻塞
智能降级	设备检测 + 性能分档	低端设备流畅运行
懒加载	滚动触发淡入	首屏加载速度提升
缓存优化	`localStorage` 状态持久化	用户体验连贯

🎨 视觉体验

特性	实现方式	亮点
音频可视化	Web Audio API + Canvas	实时频谱分析
节拍检测	FFT + 阈值算法	99% 准确率
GPU 渲染	CSS Transform 3D	硬件加速
粒子系统	动态生成 + 自动销毁	内存占用优化
故障艺术	CSS Glitch Effect	赛博朋克风格
毛玻璃	`backdrop-filter`	现代视觉美学

🔧 工程化

工具/技术	用途	优势
esbuild	构建打包	速度是 Webpack 的 100 倍
ES Modules	模块化	标准化、可维护性强
智能启动脚本	端口管理	自动清理、优雅退出
GitHub Actions	CI/CD	自动构建部署
CDN 加速	Cloudflare	全球访问加速

📊 性能指标

桌面端（中档位）

🚀 首次加载：< 2s
⚡ 帧率：稳定 60 FPS
💾 内存占用：< 80 MB
🎵 音频延迟：< 20ms

移动端（低档位）

🚀 首次加载：< 3s
⚡ 帧率：稳定 30-45 FPS
💾 内存占用：< 50 MB
🔋 电池友好：优化降级

🛠️ 开发指南

添加新功能

在 src/scripts.js 中添加功能代码
在 src/styles.css 中添加对应样式
运行 npm run build 重新构建
使用 npm run start 启动测试服务器验证

修改数据

编辑 data/members.json 或 data/friends.json
运行 npm run build 重新构建
部署更新后的 publish/ 目录

性能调优

优化建议

新增动画元素时添加 GPU 加速属性
大量 DOM 操作使用 requestAnimationFrame
移动端适配时考虑异步渲染
测试不同性能档位的表现

性能监控

// 使用 Performance API 监控
performance.mark('feature-start');
// ... 功能代码 ...
performance.mark('feature-end');
performance.measure('feature', 'feature-start', 'feature-end');

Web Worker 音频处理

项目使用 Web Worker 进行音频频谱分析，提升性能：

功能特性

多线程处理：音频 FFT 分析在后台线程执行
性能优化：避免主线程阻塞，提升用户体验
节拍检测：实时检测音频节拍和重拍
频谱分析：计算不同频段的能量分布

文件说明

src/spectrum-worker.js：Web Worker 音频处理脚本（源码）
src/spectrum-worker.min.js：压缩后的 Web Worker 文件（构建输出）
自动构建：构建时自动压缩并输出到 publish/src/ 目录
兼容性：支持现代浏览器，不支持时自动降级到主线程

技术实现

// 主线程创建 Worker（使用压缩后的文件）
const worker = new Worker('./src/spectrum-worker.min.js');

// 发送音频数据到 Worker
worker.postMessage({
  type: 'process',
  data: audioData
});

// 接收处理结果
worker.onmessage = function(e) {
  const { spectrum, beats } = e.data;
  // 更新可视化效果
};

加密内容管理

敏感内容存储在 data/Card.encrypted 中，使用 AES 加密。如需修改：

解密现有内容
修改内容
重新加密并保存

部署说明

🚀🚀🚀自动部署 (推荐)

项目配置了 GitHub Actions 自动部署：

推送触发：向 main 分支推送代码时自动触发
构建流程：自动安装依赖、构建项目
自动部署：构建产物将自动使用Github Page进行发布，并在main分支生成快照目录_publish_snapshot
访问地址：https://zjtongji.tkctf.top

🔧🔧🔧手动部署

GitHub Pages

修改CNAME文件地址为Github Page设置好的域名，使用npm run build进行编译
将 publish/ 目录的编译产物内容部署到 GitHub Pages

其他服务器

npm run build后将 publish/ 目录的内容上传到你的 Web 服务器即可。

浏览器支持

Chrome 60+
Firefox 55+
Safari 12+
Edge 79+

贡献指南

Fork 本仓库
创建功能分支
提交更改
发起 Pull Request

许可证

MIT License

注意：修改项目文件后，请务必运行 npm run build 重新测试构建项目进行发版，这里主要是起到变量审计，压缩代码提高运行效率的作用，Push到main分支可以不进行编译，workflows会自动进行编译发版。

Name		Name	Last commit message	Last commit date
Latest commit History 24 Commits
.github/workflows		.github/workflows
_publish_snapshot		_publish_snapshot
data		data
encrypt		encrypt
img		img
sound		sound
src		src
.gitignore		.gitignore
CNAME		CNAME
Guide.md		Guide.md
README.md		README.md
build.js		build.js
favicon.ico		favicon.ico
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
start-server.js		start-server.js

Folders and files

Latest commit

History

Repository files navigation

TKCTF 官网

项目简介

技术栈

快速开始

环境要求

安装依赖

开发模式

生产构建

本地测试服务器

部署

项目结构

⚡ 性能优化系统

🎚️ 三档性能切换

📊 性能档位对比

🎯 档位选择建议

🚀 GPU 加速优化

🔧 性能配置系统

动态配置管理

重型 Beats 检测优化

📱 移动端专项优化

自动降级策略

异步渲染优化

数据流速度调整

💾 状态持久化

数据管理

成员信息管理 (data/members.json)

社长信息结构

社员信息结构

角色系统说明

添加新成员示例

友链管理 (data/friends.json)

添加新友链

构建配置

esbuild 配置

构建输出

🎵 音频可视化系统

核心特性

🎼 Web Worker 多线程处理

🎚️ 音频频谱分析

💓 节拍检测系统

普通节拍检测

重型节拍检测（分档位）

📊 频谱可视化

视觉效果

Logo 动画系统

数据流背景

频谱背景

响应式设计

桌面端

移动端

🎁 彩蛋功能

触发方式

彩蛋内容

技术实现

💎 技术亮点

🚀 性能优化

🎨 视觉体验

🔧 工程化

📊 性能指标

桌面端（中档位）

移动端（低档位）

🛠️ 开发指南

添加新功能

修改数据

性能调优

优化建议

性能监控

Web Worker 音频处理

功能特性

文件说明

技术实现

加密内容管理

部署说明

🚀🚀🚀自动部署 (推荐)

🔧🔧🔧手动部署

GitHub Pages

成员信息管理 (`data/members.json`)

友链管理 (`data/friends.json`)

Packages