CCXC Vue SFC API
通过 Vue 依赖注入 (inject) 提供的渲染器核心功能。
快速开始
所有 API 均通过 Vue 的 inject 函数获取：
javascript
import { inject } from 'vue'
// 在 setup() 函数里
const api = inject('api')
const backend = inject('backend')
// ... 其他功能网络通信
api
签名
typescript
api(url: string, data: any, type: "normal" | "sp"): Promise<any>描述
与后端 API 进行安全通信的统一接口，支持常规请求和特殊权限请求。
参数
url- API 端点路径data- 请求数据载荷type- 请求类型"normal"- 标准用户请求"sp"- 特殊权限请求
示例
javascript
const userInfo = await api('/play/plugin/test01', { userId: 123 })backend
签名
typescript
backend(key: string, data: any): Promise<any>描述
调用在"题目脚本"中预定义的后端处理逻辑，实现动态题目交互和验证。
参数
key- 后端脚本标识符data- 传递给脚本的数据
示例
javascript
// 提交答案验证
const validation = await backend('c16_check_answer', {
puzzleId: 'crypto_001',
answer: 'FLAG{example}'
})
// 获取动态提示
const hint = await backend('c16_get_hint', { level: 2 })实用工具
adjustTextColor
签名
typescript
adjustTextColor(color: string): "#000000" | "#ffffff"描述
根据背景色自动选择最佳对比度的文本颜色，确保内容始终清晰可读。
参数
color- 背景颜色值（支持 HEX、RGB、HSL 等格式）
返回值
"#000000"- 黑色文本（适用于浅色背景）"#ffffff"- 白色文本（适用于深色背景）
示例
javascript
// 动态主题适配
const bgColor = '#3498db'
const textColor = adjustTextColor(bgColor) // 返回 "#ffffff"
// 应用到样式
const cardStyle = {
backgroundColor: bgColor,
color: textColor
}formatTimestamp
签名
typescript
formatTimestamp(timestamp: number, format?: string): string描述
将 Unix 时间戳转换为人类友好的时间字符串。
参数
timestamp- Unix 时间戳（毫秒）format- 可选的格式化模板
示例
javascript
const now = Date.now()
const formatted = formatTimestamp(now)
// 输出: "2025-07-09 14:30:25"
const custom = formatTimestamp(now, 'YYYY年MM月DD日')
// 输出: "2025年07月09日"markdownToHtml
签名
typescript
markdownToHtml(markdown: string): string描述
Markdown 渲染为 HTML。
参数
markdown- Markdown 格式的文本
示例
javascript
const md = `
## 题目描述
这是一道 **现代密码学** 题目，需要您：
1. 分析加密算法
2. 找到密钥
3. 解密得到 \`FLAG\`
`
const html = markdownToHtml(md)
// 转换为完整的 HTML 结构sleep
签名
typescript
sleep(ms: number): Promise<unknown>描述
异步延时器，在需要暂停执行或创建动画效果时使用。
参数
ms- 延时毫秒数
示例
javascript
// 创建打字机效果
for (const char of message) {
displayChar(char)
await sleep(50) // 每个字符间隔 50ms
}
// 延时后执行
await sleep(1000)
console.log('1秒后显示此消息')实时协作
ysync
类型
typescript
ysync: Yjs描述
基于 Yjs 的实时协作框架，让同队队员能够无缝同步状态、共享数据，打造真正的团队协作体验。
核心概念
- Y.Doc - 共享文档容器
- Y.Map - 键值对存储
- Y.Array - 共享数组
- Y.Text - 协作文本编辑
示例
javascript
// 获取协作实例
const ysync = inject('ysync')
const yDoc = ysync.yDoc
// 创建共享状态
const teamState = yDoc.getMap('team_progress')
const chatHistory = yDoc.getArray('chat_messages')
const sharedNotes = yDoc.getText('notes')
// 实时更新进度
teamState.set('current_puzzle', 'web_001')
teamState.set('solved_count', 5)
// 添加聊天消息
chatHistory.push([{
user: 'Alice',
message: '我找到了一个可疑的端点！',
timestamp: Date.now()
}])
// 协作编辑笔记
sharedNotes.insert(0, '🔍 发现线索：\n')
// 监听变更
teamState.observe((event) => {
console.log('队伍状态更新:', event.changes)
})高级用法
javascript
// 创建结构化数据同步
const puzzleSolutions = yDoc.getMap('solutions')
puzzleSolutions.set('crypto_001', {
solver: 'Bob',
flag: 'FLAG{crypto_master}',
solvedAt: new Date().toISOString(),
hints_used: 2
})
// 实现实时投票
const voting = yDoc.getMap('team_voting')
voting.set('next_puzzle_vote', {
options: ['web', 'pwn', 'reverse'],
votes: { Alice: 'web', Bob: 'pwn' }
})其他资源
Yjs 官方文档 - 深入了解实时协作