|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
<head>
|
|
|
<meta charset="utf-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
<title>GitHub Token 权限配置助手</title>
|
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
|
<style>
|
|
|
.permission-card {
|
|
|
border-left: 4px solid #007bff;
|
|
|
transition: all 0.3s ease;
|
|
|
}
|
|
|
.permission-required {
|
|
|
border-left-color: #28a745;
|
|
|
background-color: #f8fff9;
|
|
|
}
|
|
|
.permission-optional {
|
|
|
border-left-color: #ffc107;
|
|
|
background-color: #fefdf5;
|
|
|
}
|
|
|
.permission-not-needed {
|
|
|
border-left-color: #dc3545;
|
|
|
background-color: #fff5f5;
|
|
|
}
|
|
|
.step-number {
|
|
|
background: linear-gradient(45deg, #007bff, #0056b3);
|
|
|
color: white;
|
|
|
border-radius: 50%;
|
|
|
width: 40px;
|
|
|
height: 40px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
.checklist-item {
|
|
|
padding: 8px 0;
|
|
|
border-bottom: 1px solid #eee;
|
|
|
}
|
|
|
.token-example {
|
|
|
font-family: monospace;
|
|
|
background: #f8f9fa;
|
|
|
padding: 4px 8px;
|
|
|
border-radius: 4px;
|
|
|
border: 1px solid #dee2e6;
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
<div class="container mt-4">
|
|
|
<div class="row">
|
|
|
<div class="col-md-10 mx-auto">
|
|
|
<div class="text-center mb-5">
|
|
|
<h1 class="display-4">🔑 GitHub Token 权限配置助手</h1>
|
|
|
<p class="lead">为 VvvebJs 配置正确的 GitHub 访问权限</p>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="card mb-4 border-primary">
|
|
|
<div class="card-header bg-primary text-white">
|
|
|
<h3 class="mb-0">⚡ 快速开始</h3>
|
|
|
</div>
|
|
|
<div class="card-body">
|
|
|
<div class="row">
|
|
|
<div class="col-md-6">
|
|
|
<h5>👈 我是新手</h5>
|
|
|
<p class="text-muted">第一次配置 GitHub Token</p>
|
|
|
<a href="https://github.com/settings/tokens/new" target="_blank" class="btn btn-outline-primary">
|
|
|
🚀 创建新 Token
|
|
|
</a>
|
|
|
</div>
|
|
|
<div class="col-md-6">
|
|
|
<h5>🔧 我需要排查问题</h5>
|
|
|
<p class="text-muted">Token 已创建但有问题</p>
|
|
|
<a href="github-test.php" class="btn btn-outline-warning">
|
|
|
🧪 测试现有配置
|
|
|
</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="row">
|
|
|
|
|
|
<div class="col-md-6 mb-4">
|
|
|
<div class="card h-100">
|
|
|
<div class="card-body">
|
|
|
<div class="d-flex align-items-center mb-3">
|
|
|
<div class="step-number me-3">1</div>
|
|
|
<h4 class="mb-0">访问 GitHub 设置</h4>
|
|
|
</div>
|
|
|
<ol>
|
|
|
<li>登录 <a href="https://github.com" target="_blank">GitHub</a></li>
|
|
|
<li>点击右上角头像 → Settings</li>
|
|
|
<li>左侧菜单 → Developer settings</li>
|
|
|
<li>Personal access tokens → Tokens (classic)</li>
|
|
|
<li>Generate new token (classic)</li>
|
|
|
</ol>
|
|
|
<a href="https://github.com/settings/tokens" target="_blank" class="btn btn-primary btn-sm">
|
|
|
🔗 直接跳转
|
|
|
</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="col-md-6 mb-4">
|
|
|
<div class="card h-100">
|
|
|
<div class="card-body">
|
|
|
<div class="d-flex align-items-center mb-3">
|
|
|
<div class="step-number me-3">2</div>
|
|
|
<h4 class="mb-0">填写基本信息</h4>
|
|
|
</div>
|
|
|
<div class="mb-3">
|
|
|
<label class="form-label"><strong>Note (描述):</strong></label>
|
|
|
<div class="token-example">VvvebJs Website Editor</div>
|
|
|
</div>
|
|
|
<div class="mb-3">
|
|
|
<label class="form-label"><strong>Expiration (过期时间):</strong></label>
|
|
|
<div class="text-success">推荐: 90 days</div>
|
|
|
<small class="text-muted">平衡安全性和便利性</small>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="card mb-4">
|
|
|
<div class="card-header">
|
|
|
<div class="d-flex align-items-center">
|
|
|
<div class="step-number me-3">3</div>
|
|
|
<h3 class="mb-0">选择权限范围 (Scopes)</h3>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="card-body">
|
|
|
<div class="alert alert-warning">
|
|
|
<strong>⚠️ 重要:</strong> 必须勾选 <code>repo</code> 权限，这是 VvvebJs 保存文件的基础要求。
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="permission-card permission-required card mb-3">
|
|
|
<div class="card-header">
|
|
|
<h5 class="text-success mb-0">✅ 必需权限</h5>
|
|
|
</div>
|
|
|
<div class="card-body">
|
|
|
<div class="form-check">
|
|
|
<input class="form-check-input" type="checkbox" checked disabled>
|
|
|
<label class="form-check-label">
|
|
|
<strong>repo</strong> - Full control of private repositories
|
|
|
</label>
|
|
|
</div>
|
|
|
<small class="text-muted ms-4">
|
|
|
包含: repo:status, repo_deployment, public_repo, repo:invite<br>
|
|
|
<strong>用途:</strong> 创建、读取、更新网页文件
|
|
|
</small>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="permission-card permission-optional card mb-3">
|
|
|
<div class="card-header">
|
|
|
<h5 class="text-warning mb-0">⚠️ 可选权限</h5>
|
|
|
</div>
|
|
|
<div class="card-body">
|
|
|
<div class="form-check mb-2">
|
|
|
<input class="form-check-input" type="checkbox">
|
|
|
<label class="form-check-label">
|
|
|
<strong>workflow</strong> - Update GitHub Action workflows
|
|
|
</label>
|
|
|
</div>
|
|
|
<small class="text-muted ms-4 d-block mb-3">
|
|
|
<strong>用途:</strong> 如果您计划使用 GitHub Actions 自动部署
|
|
|
</small>
|
|
|
|
|
|
<div class="form-check mb-2">
|
|
|
<input class="form-check-input" type="checkbox">
|
|
|
<label class="form-check-label">
|
|
|
<strong>write:packages / read:packages</strong> - Package registry access
|
|
|
</label>
|
|
|
</div>
|
|
|
<small class="text-muted ms-4 d-block">
|
|
|
<strong>用途:</strong> 如果您需要管理 GitHub Packages
|
|
|
</small>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="permission-card permission-not-needed card">
|
|
|
<div class="card-header">
|
|
|
<h5 class="text-danger mb-0">❌ 不需要的权限</h5>
|
|
|
</div>
|
|
|
<div class="card-body">
|
|
|
<div class="row">
|
|
|
<div class="col-md-6">
|
|
|
<ul class="list-unstyled">
|
|
|
<li>❌ admin:repo_hook</li>
|
|
|
<li>❌ admin:org</li>
|
|
|
<li>❌ admin:public_key</li>
|
|
|
<li>❌ gist</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
<div class="col-md-6">
|
|
|
<ul class="list-unstyled">
|
|
|
<li>❌ notifications</li>
|
|
|
<li>❌ user</li>
|
|
|
<li>❌ delete_repo</li>
|
|
|
<li>❌ admin:org_hook</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
<small class="text-muted">
|
|
|
<strong>原因:</strong> VvvebJs 只需要读写文件，不需要管理权限
|
|
|
</small>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="card mb-4">
|
|
|
<div class="card-header">
|
|
|
<div class="d-flex align-items-center">
|
|
|
<div class="step-number me-3">4</div>
|
|
|
<h3 class="mb-0">配置环境变量</h3>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="card-body">
|
|
|
<div class="alert alert-info">
|
|
|
<strong>📋 获取 Token 后，在 Hugging Face Space Settings 中添加这些环境变量:</strong>
|
|
|
</div>
|
|
|
|
|
|
<div class="row">
|
|
|
<div class="col-md-6">
|
|
|
<h5>🔑 GitHub 认证</h5>
|
|
|
<div class="bg-light p-3 rounded">
|
|
|
<code>GITHUB_TOKEN=ghp_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</code><br>
|
|
|
<code>GITHUB_OWNER=your_username</code><br>
|
|
|
<code>GITHUB_REPO=your_repo_name</code><br>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-md-6">
|
|
|
<h5>⚙️ 存储配置</h5>
|
|
|
<div class="bg-light p-3 rounded">
|
|
|
<code>GITHUB_BRANCH=main</code><br>
|
|
|
<code>GITHUB_PATH=pages/</code><br>
|
|
|
<code>STORAGE_TYPE=github</code><br>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="mt-3">
|
|
|
<h6>📝 配置说明:</h6>
|
|
|
<ul>
|
|
|
<li><code>GITHUB_TOKEN</code>: 刚创建的 40 字符 Token (以 ghp_ 开头)</li>
|
|
|
<li><code>GITHUB_OWNER</code>: 您的 GitHub 用户名</li>
|
|
|
<li><code>GITHUB_REPO</code>: 存储网页的仓库名</li>
|
|
|
<li><code>GITHUB_PATH</code>: 网页保存的目录 (可以为空)</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="card mb-4">
|
|
|
<div class="card-header">
|
|
|
<div class="d-flex align-items-center">
|
|
|
<div class="step-number me-3">5</div>
|
|
|
<h3 class="mb-0">验证配置</h3>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="card-body">
|
|
|
<h5>✅ 配置检查清单</h5>
|
|
|
<div id="checklist">
|
|
|
<div class="checklist-item">
|
|
|
<input type="checkbox" class="form-check-input me-2" id="check1">
|
|
|
<label for="check1">Token 已创建且有 <code>repo</code> 权限</label>
|
|
|
</div>
|
|
|
<div class="checklist-item">
|
|
|
<input type="checkbox" class="form-check-input me-2" id="check2">
|
|
|
<label for="check2">环境变量已在 Hugging Face Space 中配置</label>
|
|
|
</div>
|
|
|
<div class="checklist-item">
|
|
|
<input type="checkbox" class="form-check-input me-2" id="check3">
|
|
|
<label for="check3">GitHub 仓库已创建且可访问</label>
|
|
|
</div>
|
|
|
<div class="checklist-item">
|
|
|
<input type="checkbox" class="form-check-input me-2" id="check4">
|
|
|
<label for="check4">分支名称正确 (通常是 main 或 master)</label>
|
|
|
</div>
|
|
|
<div class="checklist-item">
|
|
|
<input type="checkbox" class="form-check-input me-2" id="check5">
|
|
|
<label for="check5">已通过测试页面验证</label>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="mt-4">
|
|
|
<a href="github-test.php" class="btn btn-success me-2">🧪 测试配置</a>
|
|
|
<a href="config.php" class="btn btn-secondary me-2">⚙️ 查看状态</a>
|
|
|
<a href="editor.html" class="btn btn-primary">🎨 开始使用编辑器</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="card">
|
|
|
<div class="card-header">
|
|
|
<h3>🔧 常见问题和解决方案</h3>
|
|
|
</div>
|
|
|
<div class="card-body">
|
|
|
<div class="accordion" id="troubleshootingAccordion">
|
|
|
|
|
|
<div class="accordion-item">
|
|
|
<h5 class="accordion-header">
|
|
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#trouble1">
|
|
|
403 Forbidden - 权限不足
|
|
|
</button>
|
|
|
</h5>
|
|
|
<div id="trouble1" class="accordion-collapse collapse" data-bs-parent="#troubleshootingAccordion">
|
|
|
<div class="accordion-body">
|
|
|
<strong>原因:</strong> Token 权限不足<br>
|
|
|
<strong>解决:</strong>
|
|
|
<ol>
|
|
|
<li>确保勾选了 <code>repo</code> 权限</li>
|
|
|
<li>重新生成 Token 并更新环境变量</li>
|
|
|
<li>检查仓库是否为私有仓库（需要完整 repo 权限）</li>
|
|
|
</ol>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="accordion-item">
|
|
|
<h5 class="accordion-header">
|
|
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#trouble2">
|
|
|
401 Unauthorized - 认证失败
|
|
|
</button>
|
|
|
</h5>
|
|
|
<div id="trouble2" class="accordion-collapse collapse" data-bs-parent="#troubleshootingAccordion">
|
|
|
<div class="accordion-body">
|
|
|
<strong>原因:</strong> Token 无效或过期<br>
|
|
|
<strong>解决:</strong>
|
|
|
<ol>
|
|
|
<li>检查 Token 是否正确复制（40个字符，以 ghp_ 开头）</li>
|
|
|
<li>检查 Token 是否过期</li>
|
|
|
<li>重新生成新的 Token</li>
|
|
|
</ol>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="accordion-item">
|
|
|
<h5 class="accordion-header">
|
|
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#trouble3">
|
|
|
404 Not Found - 仓库不存在
|
|
|
</button>
|
|
|
</h5>
|
|
|
<div id="trouble3" class="accordion-collapse collapse" data-bs-parent="#troubleshootingAccordion">
|
|
|
<div class="accordion-body">
|
|
|
<strong>原因:</strong> 仓库不存在或 Token 无访问权限<br>
|
|
|
<strong>解决:</strong>
|
|
|
<ol>
|
|
|
<li>检查 <code>GITHUB_OWNER</code> 是否是正确的用户名</li>
|
|
|
<li>检查 <code>GITHUB_REPO</code> 是否是正确的仓库名</li>
|
|
|
<li>确保仓库存在且 Token 有访问权限</li>
|
|
|
<li>如果是组织仓库，确保 Token 有组织权限</li>
|
|
|
</ol>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
|
<script>
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
|
const checkboxes = document.querySelectorAll('#checklist input[type="checkbox"]');
|
|
|
|
|
|
checkboxes.forEach(checkbox => {
|
|
|
checkbox.addEventListener('change', function() {
|
|
|
localStorage.setItem(this.id, this.checked);
|
|
|
});
|
|
|
|
|
|
|
|
|
const saved = localStorage.getItem(checkbox.id);
|
|
|
if (saved === 'true') {
|
|
|
checkbox.checked = true;
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
</script>
|
|
|
</body>
|
|
|
</html> |
