feat: 着陆页加 Windows 安装命令 + PowerShell 安装脚本
- 新增 install.ps1（与 install.sh 功能对等） - 着陆页 Step 1 加 macOS/Linux 和 Windows Tab 切换 - SVG 图标美化 Tab 按钮
This commit is contained in:
parent
f370632809
commit
aaa938ad45
170
agent/install.ps1
Normal file
170
agent/install.ps1
Normal file
@ -0,0 +1,170 @@
|
||||
# 黑手党提案 Agent — Windows 一键安装/更新脚本 (PowerShell)
|
||||
# 用法: irm https://git.brainwork.club/lidf/chanpinhsd/archive/main.zip -OutFile $env:TEMP\mafia.zip; Expand-Archive $env:TEMP\mafia.zip $env:TEMP\mafia -Force; & $env:TEMP\mafia\chanpinhsd\agent\install.ps1
|
||||
|
||||
$ErrorActionPreference = "Stop"
|
||||
|
||||
function Write-Info($msg) { Write-Host "[mafia] $msg" -ForegroundColor Green }
|
||||
function Write-Warn($msg) { Write-Host "[mafia] $msg" -ForegroundColor Yellow }
|
||||
function Write-Err($msg) { Write-Host "[mafia] $msg" -ForegroundColor Red; exit 1 }
|
||||
|
||||
$COPAW_HOME = if ($env:COPAW_HOME) { $env:COPAW_HOME } else { Join-Path $env:USERPROFILE ".copaw" }
|
||||
$AGENT_ID = "mafia-expert"
|
||||
$WORKSPACE_DIR = Join-Path $COPAW_HOME "workspaces\$AGENT_ID"
|
||||
$SCRIPT_DIR = Split-Path -Parent $MyInvocation.MyCommand.Path
|
||||
|
||||
# ── 检查 CoPaw ────────────────────────────────────────────────────────
|
||||
if (-not (Test-Path (Join-Path $COPAW_HOME "config.json"))) {
|
||||
Write-Err "CoPaw 未安装。请先安装 CoPaw 桌面客户端：https://copaw.agentscope.io"
|
||||
}
|
||||
Write-Info "CoPaw 已就绪"
|
||||
|
||||
# ── 创建工作区 ─────────────────────────────────────────────────────────
|
||||
Write-Info "配置 $AGENT_ID 工作区..."
|
||||
$dirs = @("skills", "cases", "iteration_reports", "memory")
|
||||
foreach ($d in $dirs) {
|
||||
$p = Join-Path $WORKSPACE_DIR $d
|
||||
if (-not (Test-Path $p)) { New-Item -ItemType Directory -Path $p -Force | Out-Null }
|
||||
}
|
||||
|
||||
# ── 核心配置 ───────────────────────────────────────────────────────────
|
||||
$coreFiles = @("AGENTS.md", "SOUL.md", "PROFILE.md", "HEARTBEAT.md", "agent.json")
|
||||
foreach ($f in $coreFiles) {
|
||||
$src = Join-Path $SCRIPT_DIR $f
|
||||
if (Test-Path $src) { Copy-Item $src (Join-Path $WORKSPACE_DIR $f) -Force }
|
||||
}
|
||||
|
||||
# MEMORY.md 只在首次创建
|
||||
$memPath = Join-Path $WORKSPACE_DIR "MEMORY.md"
|
||||
if (-not (Test-Path $memPath)) {
|
||||
$memSrc = Join-Path $SCRIPT_DIR "MEMORY.md"
|
||||
if (Test-Path $memSrc) { Copy-Item $memSrc $memPath }
|
||||
else { Set-Content $memPath "# 黑手党提案专家长期记忆" -Encoding UTF8 }
|
||||
}
|
||||
|
||||
# ── Skills（每次全量覆盖） ─────────────────────────────────────────────
|
||||
$skillsSrc = Join-Path $SCRIPT_DIR "skills"
|
||||
if (Test-Path $skillsSrc) {
|
||||
Get-ChildItem $skillsSrc -Directory | ForEach-Object {
|
||||
if ($_.Name -eq "mafia_agent_installer") { return }
|
||||
$target = Join-Path $WORKSPACE_DIR "skills\$($_.Name)"
|
||||
if (-not (Test-Path $target)) { New-Item -ItemType Directory -Path $target -Force | Out-Null }
|
||||
Copy-Item "$($_.FullName)\*" $target -Force -Recurse 2>$null
|
||||
}
|
||||
}
|
||||
|
||||
Write-Info "文件复制完成"
|
||||
|
||||
# ── 合并 skill.json ────────────────────────────────────────────────────
|
||||
Write-Info "注册自定义 Skills..."
|
||||
$wsSkillJson = Join-Path $WORKSPACE_DIR "skill.json"
|
||||
$repoSkillJson = Join-Path $SCRIPT_DIR "skill.json"
|
||||
|
||||
$pyScript = @"
|
||||
import json, os, time
|
||||
|
||||
ws_skill = r'$wsSkillJson'
|
||||
repo_skill = r'$repoSkillJson'
|
||||
|
||||
if os.path.exists(ws_skill):
|
||||
with open(ws_skill, encoding='utf-8') as f:
|
||||
manifest = json.load(f)
|
||||
else:
|
||||
manifest = {'schema_version': 'workspace-skill-manifest.v1', 'version': 0, 'skills': {}}
|
||||
|
||||
if os.path.exists(repo_skill):
|
||||
with open(repo_skill, encoding='utf-8') as f:
|
||||
repo = json.load(f)
|
||||
for name, skill_cfg in repo.get('skills', {}).items():
|
||||
manifest['skills'][name] = skill_cfg
|
||||
print(f' + {name}')
|
||||
|
||||
skills_dir = os.path.join(r'$WORKSPACE_DIR', 'skills')
|
||||
if os.path.isdir(skills_dir):
|
||||
for d in os.listdir(skills_dir):
|
||||
if d.startswith('.'):
|
||||
continue
|
||||
skill_md = os.path.join(skills_dir, d, 'SKILL.md')
|
||||
if os.path.exists(skill_md) and d not in manifest['skills']:
|
||||
manifest['skills'][d] = {
|
||||
'enabled': True,
|
||||
'channels': ['all'],
|
||||
'source': 'customized',
|
||||
'metadata': {
|
||||
'name': d,
|
||||
'description': '',
|
||||
'version_text': '1.0.0',
|
||||
'source': 'customized',
|
||||
'protected': False,
|
||||
'requirements': {'require_bins': [], 'require_envs': []},
|
||||
},
|
||||
'requirements': {'require_bins': [], 'require_envs': []},
|
||||
}
|
||||
print(f' + {d} (from dir)')
|
||||
|
||||
manifest['version'] = int(time.time() * 1000)
|
||||
with open(ws_skill, 'w', encoding='utf-8') as f:
|
||||
json.dump(manifest, f, indent=2, ensure_ascii=False)
|
||||
print(' skills done')
|
||||
"@
|
||||
|
||||
python3 -c $pyScript 2>$null
|
||||
if ($LASTEXITCODE -ne 0) { python -c $pyScript }
|
||||
|
||||
# ── 注册到 config.json ─────────────────────────────────────────────────
|
||||
Write-Info "注册 Agent..."
|
||||
$regScript = @"
|
||||
import json, os
|
||||
|
||||
config_path = os.path.join(r'$COPAW_HOME', 'config.json')
|
||||
with open(config_path, 'r', encoding='utf-8') as f:
|
||||
cfg = json.load(f)
|
||||
|
||||
agent_id = '$AGENT_ID'
|
||||
ws_dir = r'$WORKSPACE_DIR'
|
||||
changed = False
|
||||
|
||||
if agent_id not in cfg['agents']['profiles']:
|
||||
cfg['agents']['profiles'][agent_id] = {
|
||||
'id': agent_id,
|
||||
'workspace_dir': ws_dir,
|
||||
'enabled': True
|
||||
}
|
||||
changed = True
|
||||
|
||||
if agent_id not in cfg['agents']['agent_order']:
|
||||
cfg['agents']['agent_order'].append(agent_id)
|
||||
changed = True
|
||||
|
||||
if changed:
|
||||
with open(config_path, 'w', encoding='utf-8') as f:
|
||||
json.dump(cfg, f, indent=2, ensure_ascii=False)
|
||||
print(' registered')
|
||||
else:
|
||||
print(' already registered')
|
||||
"@
|
||||
|
||||
python3 -c $regScript 2>$null
|
||||
if ($LASTEXITCODE -ne 0) { python -c $regScript }
|
||||
|
||||
# ── 记录来源 ───────────────────────────────────────────────────────────
|
||||
$repoDir = Split-Path -Parent $SCRIPT_DIR
|
||||
Set-Content (Join-Path $WORKSPACE_DIR ".repo_path") $repoDir -Encoding UTF8
|
||||
|
||||
# ── 清理临时文件 ───────────────────────────────────────────────────────
|
||||
if ($SCRIPT_DIR -like "$env:TEMP*") {
|
||||
Write-Info "清理临时文件..."
|
||||
Remove-Item $repoDir -Recurse -Force -ErrorAction SilentlyContinue
|
||||
}
|
||||
|
||||
# ── 完成 ───────────────────────────────────────────────────────────────
|
||||
Write-Host ""
|
||||
Write-Info "════════════════════════════════════════════════"
|
||||
Write-Info " ✅ 黑手党提案专家 安装/更新完成！"
|
||||
Write-Info "════════════════════════════════════════════════"
|
||||
Write-Host ""
|
||||
Write-Info "下一步："
|
||||
Write-Info " 1. 打开 CoPaw 客户端"
|
||||
Write-Info " 2. 刷新页面（Ctrl+R / F5）"
|
||||
Write-Info " 3. 左上角切换到「黑手党提案专家」"
|
||||
Write-Info " 4. 发送：我想为 XX 品牌做一个黑手党提案"
|
||||
Write-Host ""
|
||||
980
landing/index.html
Normal file
980
landing/index.html
Normal file
@ -0,0 +1,980 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>黑手党提案专家 — CoPaw Agent</title>
|
||||
<meta name="description" content="基于 TOC 约束理论的 AI 战略顾问，帮你做出对手无法拒绝的提案。一键安装，即刻启用。">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--bg-primary: #0a0a0f;
|
||||
--bg-secondary: #12121a;
|
||||
--bg-card: #1a1a26;
|
||||
--bg-card-hover: #222233;
|
||||
--text-primary: #f0f0f5;
|
||||
--text-secondary: #9999aa;
|
||||
--text-muted: #666677;
|
||||
--accent: #ff4444;
|
||||
--accent-glow: rgba(255, 68, 68, 0.15);
|
||||
--accent-secondary: #ff6b35;
|
||||
--accent-gold: #ffc107;
|
||||
--border: rgba(255,255,255,0.06);
|
||||
--border-accent: rgba(255, 68, 68, 0.3);
|
||||
--radius: 16px;
|
||||
--radius-sm: 10px;
|
||||
--shadow-card: 0 4px 24px rgba(0,0,0,0.3);
|
||||
--font: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
}
|
||||
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
font-family: var(--font);
|
||||
background: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
line-height: 1.6;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
padding: 0 32px;
|
||||
}
|
||||
|
||||
/* ═══════ SVG icon helpers ═══════ */
|
||||
.icon-inline {
|
||||
width: 20px; height: 20px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.icon-sm {
|
||||
width: 16px; height: 16px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.icon-lg {
|
||||
width: 28px; height: 28px;
|
||||
}
|
||||
|
||||
.icon-xl {
|
||||
width: 32px; height: 32px;
|
||||
}
|
||||
|
||||
/* ═══════════ Hero ═══════════ */
|
||||
.hero {
|
||||
position: relative;
|
||||
padding: 80px 0 60px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -200px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 800px;
|
||||
height: 800px;
|
||||
background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.hero-inner {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 16px;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 100px;
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.hero-badge .dot {
|
||||
width: 6px; height: 6px;
|
||||
background: #4ade80;
|
||||
border-radius: 50%;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.4; }
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: clamp(36px, 5vw, 56px);
|
||||
font-weight: 800;
|
||||
line-height: 1.15;
|
||||
margin-bottom: 16px;
|
||||
background: linear-gradient(135deg, var(--text-primary), var(--accent), var(--accent-secondary));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 18px;
|
||||
color: var(--text-secondary);
|
||||
max-width: 520px;
|
||||
margin: 0 auto 40px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.hero-tagline {
|
||||
font-size: 14px;
|
||||
color: var(--text-muted);
|
||||
margin-top: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.hero-tagline em {
|
||||
color: var(--accent);
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.tag-sep {
|
||||
width: 4px; height: 4px;
|
||||
background: var(--text-muted);
|
||||
border-radius: 50%;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* ═══════════ Section ═══════════ */
|
||||
.section {
|
||||
padding: 64px 0;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.section-desc {
|
||||
color: var(--text-secondary);
|
||||
font-size: 15px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
/* ═══════════ Install Steps ═══════════ */
|
||||
.install-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.install-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
.install-card {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 32px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.install-card:hover {
|
||||
background: var(--bg-card-hover);
|
||||
border-color: var(--border-accent);
|
||||
box-shadow: 0 0 40px var(--accent-glow);
|
||||
}
|
||||
|
||||
.step-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.step-number {
|
||||
width: 32px; height: 32px;
|
||||
background: var(--accent);
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.step-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.step-desc {
|
||||
font-size: 14px;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 16px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.code-block {
|
||||
background: #0d0d14;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 16px 48px 16px 16px;
|
||||
font-family: 'SF Mono', 'Fira Code', monospace;
|
||||
font-size: 12.5px;
|
||||
color: #e0e0e8;
|
||||
overflow-x: auto;
|
||||
position: relative;
|
||||
word-break: break-all;
|
||||
white-space: pre-wrap;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.copy-btn {
|
||||
position: absolute;
|
||||
top: 10px; right: 10px;
|
||||
background: rgba(255,255,255,0.08);
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text-secondary);
|
||||
padding: 4px 12px;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.copy-btn:hover {
|
||||
background: var(--accent);
|
||||
color: white;
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.copy-btn:hover svg { stroke: white; }
|
||||
|
||||
.copy-btn.copied {
|
||||
background: #4ade80;
|
||||
color: #0a0a0f;
|
||||
border-color: #4ade80;
|
||||
}
|
||||
|
||||
.copy-btn.copied svg { stroke: #0a0a0f; }
|
||||
|
||||
/* ═══════════ Skills Grid ═══════════ */
|
||||
.skills-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.skills-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
.skill-card {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 28px;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.skill-card:hover {
|
||||
background: var(--bg-card-hover);
|
||||
border-color: var(--border-accent);
|
||||
transform: translateY(-4px);
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
|
||||
.skill-icon {
|
||||
width: 48px; height: 48px;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.skill-icon svg {
|
||||
width: 26px; height: 26px;
|
||||
}
|
||||
|
||||
.skill-card h3 {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.skill-card p {
|
||||
font-size: 13.5px;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
.skill-badge {
|
||||
position: absolute;
|
||||
top: 16px; right: 16px;
|
||||
font-size: 11px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.badge-toc { background: rgba(255,68,68,0.12); color: #ff6666; }
|
||||
.badge-data { background: rgba(74,222,128,0.12); color: #4ade80; }
|
||||
|
||||
/* ═══════════ Flow ═══════════ */
|
||||
.flow-section {
|
||||
background: var(--bg-secondary);
|
||||
border-radius: var(--radius);
|
||||
border: 1px solid var(--border);
|
||||
padding: 48px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.flow-steps {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.flow-step {
|
||||
flex: 1;
|
||||
min-width: 140px;
|
||||
max-width: 180px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.flow-step-icon {
|
||||
width: 56px; height: 56px;
|
||||
margin: 0 auto 12px;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.flow-step-icon svg {
|
||||
width: 26px; height: 26px;
|
||||
}
|
||||
|
||||
.flow-step:hover .flow-step-icon {
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 20px var(--accent-glow);
|
||||
}
|
||||
|
||||
.flow-step h4 {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.flow-step p {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.flow-arrow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-top: 18px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.flow-arrow svg {
|
||||
width: 20px; height: 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.flow-arrow { display: none; }
|
||||
.flow-section { padding: 32px 20px; }
|
||||
}
|
||||
|
||||
/* ═══════════ Key Setup ═══════════ */
|
||||
.key-section {
|
||||
background: linear-gradient(135deg, rgba(255,193,7,0.05), rgba(255,68,68,0.05));
|
||||
border: 1px solid rgba(255,193,7,0.15);
|
||||
border-radius: var(--radius);
|
||||
padding: 40px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.key-section h3 {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.key-section h3 svg {
|
||||
width: 22px; height: 22px;
|
||||
stroke: var(--accent-gold);
|
||||
}
|
||||
|
||||
.key-section .desc {
|
||||
color: var(--text-secondary);
|
||||
font-size: 14px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.key-steps {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.key-steps { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
.key-step {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.key-step-num {
|
||||
width: 24px; height: 24px;
|
||||
background: var(--accent-gold);
|
||||
color: #0a0a0f;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
flex-shrink: 0;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.key-step-text h4 {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.key-step-text p {
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.key-step-text a {
|
||||
color: var(--accent-gold);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.key-step-text a:hover { text-decoration: underline; }
|
||||
|
||||
/* ═══════════ Footer ═══════════ */
|
||||
.footer {
|
||||
padding: 48px 0;
|
||||
border-top: 1px solid var(--border);
|
||||
text-align: center;
|
||||
color: var(--text-muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.footer a {
|
||||
color: var(--text-secondary);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.footer a:hover { color: var(--accent); }
|
||||
|
||||
.footer-links {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
justify-content: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
/* ═══════════ Divider ═══════════ */
|
||||
.divider {
|
||||
height: 1px;
|
||||
background: var(--border);
|
||||
margin: 0 0 64px;
|
||||
}
|
||||
|
||||
/* ═══════════ Prereq ═══════════ */
|
||||
.prereq-note {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 14px 20px;
|
||||
background: rgba(74,222,128,0.06);
|
||||
border: 1px solid rgba(74,222,128,0.15);
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 14px;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.prereq-note svg {
|
||||
width: 18px; height: 18px;
|
||||
stroke: #4ade80;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.prereq-note a {
|
||||
color: #4ade80;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.prereq-note a:hover { text-decoration: underline; }
|
||||
|
||||
.try-prompt {
|
||||
padding: 12px 16px;
|
||||
background: rgba(255,255,255,0.03);
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.try-prompt-label {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.try-prompt-label svg {
|
||||
width: 14px; height: 14px;
|
||||
stroke: var(--text-muted);
|
||||
}
|
||||
|
||||
.try-prompt-text {
|
||||
font-size: 14px;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* ═══════════ OS Tabs ═══════════ */
|
||||
.os-tabs {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.os-tab {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 7px 16px;
|
||||
background: transparent;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
color: var(--text-muted);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
font-family: var(--font);
|
||||
}
|
||||
|
||||
.os-tab svg {
|
||||
width: 16px; height: 16px;
|
||||
}
|
||||
|
||||
.os-tab:hover {
|
||||
border-color: rgba(255,255,255,0.15);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.os-tab.active {
|
||||
background: rgba(255,68,68,0.1);
|
||||
border-color: var(--border-accent);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.os-tab.active svg {
|
||||
stroke: var(--accent);
|
||||
}
|
||||
|
||||
.os-cmd-panel {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.os-cmd-panel.active {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- ═══════ SVG Sprites (hidden) ═══════ -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
|
||||
<!-- Search / Diagnose -->
|
||||
<symbol id="ico-search" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>
|
||||
</symbol>
|
||||
<!-- Zap / Conflict -->
|
||||
<symbol id="ico-zap" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/>
|
||||
</symbol>
|
||||
<!-- Lightbulb / Insight -->
|
||||
<symbol id="ico-bulb" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"/><path d="M9 18h6"/><path d="M10 22h4"/>
|
||||
</symbol>
|
||||
<!-- Git Branch / Negative Branch -->
|
||||
<symbol id="ico-branch" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="6" y1="3" x2="6" y2="15"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M18 9a9 9 0 0 1-9 9"/>
|
||||
</symbol>
|
||||
<!-- FileText / Proposal -->
|
||||
<symbol id="ico-file" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M10 13h4"/><path d="M10 17h4"/><path d="M10 9h1"/>
|
||||
</symbol>
|
||||
<!-- BarChart / VOC Data -->
|
||||
<symbol id="ico-chart" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="12" y1="20" x2="12" y2="10"/><line x1="18" y1="20" x2="18" y2="4"/><line x1="6" y1="20" x2="6" y2="16"/>
|
||||
</symbol>
|
||||
<!-- Key -->
|
||||
<symbol id="ico-key" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="m15.5 7.5 2.3 2.3a1 1 0 0 0 1.4 0l2.1-2.1a1 1 0 0 0 0-1.4L19 4"/><path d="m21 2-9.6 9.6"/><circle cx="7.5" cy="15.5" r="5.5"/>
|
||||
</symbol>
|
||||
<!-- Terminal -->
|
||||
<symbol id="ico-terminal" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/>
|
||||
</symbol>
|
||||
<!-- Package -->
|
||||
<symbol id="ico-package" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="m7.5 4.27 9 5.15"/><path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"/><path d="m3.3 7 8.7 5 8.7-5"/><path d="M12 22V12"/>
|
||||
</symbol>
|
||||
<!-- Copy -->
|
||||
<symbol id="ico-copy" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
|
||||
</symbol>
|
||||
<!-- Check -->
|
||||
<symbol id="ico-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline points="20 6 9 17 4 12"/>
|
||||
</symbol>
|
||||
<!-- ArrowRight -->
|
||||
<symbol id="ico-arrow-r" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M5 12h14"/><path d="m12 5 7 7-7 7"/>
|
||||
</symbol>
|
||||
<!-- MessageCircle -->
|
||||
<symbol id="ico-chat" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"/>
|
||||
</symbol>
|
||||
<!-- RefreshCw -->
|
||||
<symbol id="ico-refresh" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M8 16H3v5"/>
|
||||
</symbol>
|
||||
<!-- Shield -->
|
||||
<symbol id="ico-shield" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
||||
<!-- ═══════════ Hero ═══════════ -->
|
||||
<section class="hero">
|
||||
<div class="container hero-inner">
|
||||
<div class="hero-badge">
|
||||
<span class="dot"></span>
|
||||
CoPaw Agent · 开源免费
|
||||
</div>
|
||||
<h1>黑手党提案专家</h1>
|
||||
<p class="hero-subtitle">
|
||||
基于 TOC 约束理论的 AI 战略顾问。<br>
|
||||
帮你做出<strong>对手无法拒绝</strong>的提案。
|
||||
</p>
|
||||
<p class="hero-tagline">
|
||||
<span>TOC 五步法</span>
|
||||
<span class="tag-sep"></span>
|
||||
<span>VOC 消费者洞察</span>
|
||||
<span class="tag-sep"></span>
|
||||
<em>一键安装</em>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ═══════════ 安装指引 ═══════════ -->
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h2 class="section-title">安装指引</h2>
|
||||
<p class="section-desc">两步完成部署，让 AI 战略顾问即刻上线</p>
|
||||
|
||||
<div class="prereq-note">
|
||||
<svg><use href="#ico-package"/></svg>
|
||||
<span>前置条件：需先安装 <a href="https://copaw.agentscope.io" target="_blank">CoPaw 桌面客户端</a>（阿里巴巴开源 AI 助手框架）</span>
|
||||
</div>
|
||||
|
||||
<div class="install-grid">
|
||||
<!-- Step 1 -->
|
||||
<div class="install-card">
|
||||
<div class="step-header">
|
||||
<div class="step-number">1</div>
|
||||
<div class="step-title">一键安装到 CoPaw</div>
|
||||
</div>
|
||||
<p class="step-desc">
|
||||
打开终端，粘贴以下命令即可自动完成 Agent 注册、Skills 部署和配置。
|
||||
</p>
|
||||
|
||||
<div class="os-tabs">
|
||||
<button class="os-tab active" onclick="switchOS('mac', this)">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20.94c1.5 0 2.75 1.06 4 1.06 3 0 4-5 4-8.5 0-4.5-2.5-6.5-4-6.5-1.25 0-2.5 1-4 1s-2.75-1-4-1c-1.5 0-4 2-4 6.5 0 3.5 1 8.5 4 8.5 1.25 0 2.5-1.06 4-1.06Z"/><path d="M12 7c1.5-2 3-3 5-3"/></svg>
|
||||
macOS / Linux
|
||||
</button>
|
||||
<button class="os-tab" onclick="switchOS('win', this)">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="8" height="8" rx="1"/><rect x="13" y="3" width="8" height="8" rx="1"/><rect x="3" y="13" width="8" height="8" rx="1"/><rect x="13" y="13" width="8" height="8" rx="1"/></svg>
|
||||
Windows
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div id="cmd-mac" class="os-cmd-panel active">
|
||||
<div class="code-block" id="installCmdMac">curl -fsSL https://git.brainwork.club/lidf/chanpinhsd/archive/main.tar.gz | tar xz -C /tmp && bash /tmp/chanpinhsd/agent/install.sh<button class="copy-btn" onclick="copyCode('installCmdMac', this)"><svg class="icon-sm"><use href="#ico-copy"/></svg>复制</button></div>
|
||||
</div>
|
||||
|
||||
<div id="cmd-win" class="os-cmd-panel">
|
||||
<div class="code-block" id="installCmdWin">irm https://git.brainwork.club/lidf/chanpinhsd/archive/main.zip -OutFile $env:TEMP\mafia.zip; Expand-Archive $env:TEMP\mafia.zip $env:TEMP\mafia -Force; & $env:TEMP\mafia\chanpinhsd\agent\install.ps1<button class="copy-btn" onclick="copyCode('installCmdWin', this)"><svg class="icon-sm"><use href="#ico-copy"/></svg>复制</button></div>
|
||||
<p style="font-size:12px; color:var(--text-muted); margin-top:8px;">在 PowerShell 中运行（右键开始菜单 → Windows Terminal）</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 2 -->
|
||||
<div class="install-card">
|
||||
<div class="step-header">
|
||||
<div class="step-number">2</div>
|
||||
<div class="step-title">刷新并切换 Agent</div>
|
||||
</div>
|
||||
<p class="step-desc">
|
||||
安装完成后，刷新 CoPaw 桌面客户端（Cmd+R），在左上角切换到「黑手党提案专家」即可开始使用。
|
||||
</p>
|
||||
<div style="margin-top: 16px;">
|
||||
<div class="try-prompt">
|
||||
<div class="try-prompt-label"><svg><use href="#ico-chat"/></svg>试试说</div>
|
||||
<div class="try-prompt-text">我想为天维美护肝片做一个黑手党提案</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="container"><div class="divider"></div></div>
|
||||
|
||||
<!-- ═══════════ 核心技能 ═══════════ -->
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h2 class="section-title">核心技能</h2>
|
||||
<p class="section-desc">TOC 约束理论五步法 + VOC 消费者洞察，6 大技能协同工作</p>
|
||||
|
||||
<div class="skills-grid">
|
||||
<div class="skill-card">
|
||||
<span class="skill-badge badge-toc">TOC</span>
|
||||
<div class="skill-icon" style="background: rgba(255,68,68,0.1);">
|
||||
<svg style="stroke:#ff6666"><use href="#ico-search"/></svg>
|
||||
</div>
|
||||
<h3>UDE 诊断</h3>
|
||||
<p>识别品牌面临的「不满意效果」（Undesirable Effect），找到约束系统的核心痛点</p>
|
||||
</div>
|
||||
|
||||
<div class="skill-card">
|
||||
<span class="skill-badge badge-toc">TOC</span>
|
||||
<div class="skill-icon" style="background: rgba(255,107,53,0.1);">
|
||||
<svg style="stroke:#ff6b35"><use href="#ico-zap"/></svg>
|
||||
</div>
|
||||
<h3>冲突图构建</h3>
|
||||
<p>将 UDE 转化为「对立假设」冲突图，揭示表面矛盾背后的隐藏假设</p>
|
||||
</div>
|
||||
|
||||
<div class="skill-card">
|
||||
<span class="skill-badge badge-toc">TOC</span>
|
||||
<div class="skill-icon" style="background: rgba(255,193,7,0.1);">
|
||||
<svg style="stroke:#ffc107"><use href="#ico-bulb"/></svg>
|
||||
</div>
|
||||
<h3>惯例打破</h3>
|
||||
<p>挑战行业惯例与隐性假设，找到「打破规则」的突破口——提案的核心创新点</p>
|
||||
</div>
|
||||
|
||||
<div class="skill-card">
|
||||
<span class="skill-badge badge-toc">TOC</span>
|
||||
<div class="skill-icon" style="background: rgba(139,92,246,0.1);">
|
||||
<svg style="stroke:#8b5cf6"><use href="#ico-branch"/></svg>
|
||||
</div>
|
||||
<h3>负面分支预测</h3>
|
||||
<p>预判提案可能引发的负面后果（NBRS），提前设计「修剪策略」降低风险</p>
|
||||
</div>
|
||||
|
||||
<div class="skill-card">
|
||||
<span class="skill-badge badge-toc">TOC</span>
|
||||
<div class="skill-icon" style="background: rgba(59,130,246,0.1);">
|
||||
<svg style="stroke:#3b82f6"><use href="#ico-file"/></svg>
|
||||
</div>
|
||||
<h3>提案组装</h3>
|
||||
<p>将诊断、冲突、惯例、风险整合为完整的黑手党提案交付文档</p>
|
||||
</div>
|
||||
|
||||
<div class="skill-card">
|
||||
<span class="skill-badge badge-data">数据</span>
|
||||
<div class="skill-icon" style="background: rgba(74,222,128,0.1);">
|
||||
<svg style="stroke:#4ade80"><use href="#ico-chart"/></svg>
|
||||
</div>
|
||||
<h3>VOC 研究</h3>
|
||||
<p>调用 VOC 后端 API 采集抖音、小红书消费者声音数据，为诊断提供实证基础</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Flow -->
|
||||
<div class="flow-section">
|
||||
<h3 style="text-align: center; font-size: 18px; margin-bottom: 32px; color: var(--text-secondary);">工作流程</h3>
|
||||
<div class="flow-steps">
|
||||
<div class="flow-step">
|
||||
<div class="flow-step-icon"><svg style="stroke:#4ade80"><use href="#ico-chart"/></svg></div>
|
||||
<h4>VOC 采集</h4>
|
||||
<p>消费者数据</p>
|
||||
</div>
|
||||
<div class="flow-arrow"><svg><use href="#ico-arrow-r"/></svg></div>
|
||||
<div class="flow-step">
|
||||
<div class="flow-step-icon"><svg style="stroke:#ff6666"><use href="#ico-search"/></svg></div>
|
||||
<h4>UDE 诊断</h4>
|
||||
<p>找到痛点</p>
|
||||
</div>
|
||||
<div class="flow-arrow"><svg><use href="#ico-arrow-r"/></svg></div>
|
||||
<div class="flow-step">
|
||||
<div class="flow-step-icon"><svg style="stroke:#ff6b35"><use href="#ico-zap"/></svg></div>
|
||||
<h4>冲突图</h4>
|
||||
<p>揭示矛盾</p>
|
||||
</div>
|
||||
<div class="flow-arrow"><svg><use href="#ico-arrow-r"/></svg></div>
|
||||
<div class="flow-step">
|
||||
<div class="flow-step-icon"><svg style="stroke:#ffc107"><use href="#ico-bulb"/></svg></div>
|
||||
<h4>打破惯例</h4>
|
||||
<p>找到突破</p>
|
||||
</div>
|
||||
<div class="flow-arrow"><svg><use href="#ico-arrow-r"/></svg></div>
|
||||
<div class="flow-step">
|
||||
<div class="flow-step-icon"><svg style="stroke:#8b5cf6"><use href="#ico-branch"/></svg></div>
|
||||
<h4>风险修剪</h4>
|
||||
<p>降低副作用</p>
|
||||
</div>
|
||||
<div class="flow-arrow"><svg><use href="#ico-arrow-r"/></svg></div>
|
||||
<div class="flow-step">
|
||||
<div class="flow-step-icon"><svg style="stroke:#3b82f6"><use href="#ico-file"/></svg></div>
|
||||
<h4>提案交付</h4>
|
||||
<p>完整文档</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="container"><div class="divider"></div></div>
|
||||
|
||||
<!-- ═══════════ TikHub Key ═══════════ -->
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h2 class="section-title">VOC 数据采集</h2>
|
||||
<p class="section-desc">使用 VOC 研究功能需要配置 TikHub API Key（用于采集抖音/小红书数据）</p>
|
||||
|
||||
<div class="key-section">
|
||||
<h3><svg><use href="#ico-key"/></svg>TikHub API Key 配置</h3>
|
||||
<p class="desc">每位用户使用自己的 Key，按用量付费。单次研究成本约 $1-3（12 关键词 × 2 平台）。</p>
|
||||
|
||||
<div class="key-steps">
|
||||
<div class="key-step">
|
||||
<div class="key-step-num">1</div>
|
||||
<div class="key-step-text">
|
||||
<h4>注册 TikHub</h4>
|
||||
<p>前往 <a href="https://tikhub.io" target="_blank">tikhub.io</a> 注册并充值</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="key-step">
|
||||
<div class="key-step-num">2</div>
|
||||
<div class="key-step-text">
|
||||
<h4>告诉 Agent</h4>
|
||||
<p>对 Agent 说「我的 TikHub Key 是 xxx」，它会自动保存到本地</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="key-step">
|
||||
<div class="key-step-num">3</div>
|
||||
<div class="key-step-text">
|
||||
<h4>安全可靠</h4>
|
||||
<p>Key 存储在本地，加密传输，不存储到服务器数据库</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ═══════════ Footer ═══════════ -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="footer-links">
|
||||
<a href="https://copaw.agentscope.io" target="_blank">CoPaw 官网</a>
|
||||
<a href="https://git.brainwork.club/lidf/chanpinhsd" target="_blank">源码仓库</a>
|
||||
<a href="https://tikhub.io" target="_blank">TikHub</a>
|
||||
</div>
|
||||
<p>黑手党提案专家 · 基于 <a href="https://copaw.agentscope.io">CoPaw</a> 构建 · BrainWork Studio</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
function switchOS(os, btn) {
|
||||
// Toggle tabs
|
||||
document.querySelectorAll('.os-tab').forEach(t => t.classList.remove('active'));
|
||||
btn.classList.add('active');
|
||||
// Toggle panels
|
||||
document.querySelectorAll('.os-cmd-panel').forEach(p => p.classList.remove('active'));
|
||||
document.getElementById('cmd-' + os).classList.add('active');
|
||||
}
|
||||
|
||||
function copyCode(id, btn) {
|
||||
const el = document.getElementById(id);
|
||||
const text = el.childNodes[0].textContent.trim();
|
||||
navigator.clipboard.writeText(text).then(() => {
|
||||
btn.innerHTML = '<svg class="icon-sm"><use href="#ico-check"/></svg>已复制';
|
||||
btn.classList.add('copied');
|
||||
setTimeout(() => {
|
||||
btn.innerHTML = '<svg class="icon-sm"><use href="#ico-copy"/></svg>复制';
|
||||
btn.classList.remove('copied');
|
||||
}, 2000);
|
||||
});
|
||||
}
|
||||
|
||||
// Subtle scroll animations
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.style.opacity = '1';
|
||||
entry.target.style.transform = 'translateY(0)';
|
||||
}
|
||||
});
|
||||
}, { threshold: 0.1 });
|
||||
|
||||
document.querySelectorAll('.skill-card, .install-card, .flow-step').forEach(el => {
|
||||
el.style.opacity = '0';
|
||||
el.style.transform = 'translateY(20px)';
|
||||
el.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
|
||||
observer.observe(el);
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user