Hugging Face's logo

Spaces:
CatPtain
/
VvvebJs
Paused

App Files Community
CatPtain commited on
Commit
676a3be
·
verified ·
1 Parent(s): 58e1d3c

Upload 10 files

Browse files
Files changed (8) hide show
  1. GITHUB-TOKEN-GUIDE.md +198 -0
  2. README-DEPLOY.md +112 -0
  3. check-github-token.sh +105 -0
  4. editor.html +3 -2
  5. font-fix.html +100 -0
  6. github-token-helper.html +400 -0
  7. index.html +109 -28
  8. test-current-token.php +247 -0
GITHUB-TOKEN-GUIDE.md ADDED
@@ -0,0 +1,198 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ # GitHub Token 权限设置完整指南
2
+
3
+ ## 第一步：访问 GitHub Token 设置页面
4
+
5
+ 1. 登录 GitHub
6
+ 2. 点击右上角头像 -> Settings
7
+ 3. 左侧菜单选择 "Developer settings"
8
+ 4. 选择 "Personal access tokens" -> "Tokens (classic)"
9
+ 5. 点击 "Generate new token" -> "Generate new token (classic)"
10
+
11
+ ## 第二步：配置 Token 基本信息
12
+
13
+ ### Token 名称和过期时间
14
+ ```
15
+ Token Name: VvvebJs-WebEditor (建议使用描述性名称)
16
+ Expiration:
17
+ - 推荐：90 days (3个月)
18
+ - 安全考虑：30 days (1个月)
19
+ - 便利性：No expiration (永不过期，但不推荐)
20
+ ```
21
+
22
+ ### Note 字段示例
23
+ ```
24
+ VvvebJs Website Editor - Full repo access for saving pages
25
+ Created: 2024-01-XX
26
+ Purpose: File management for visual website builder
27
+ ```
28
+
29
+ ## 第三步：权限选择（重要！）
30
+
31
+ ### 必需权限 ✅
32
+ ```bash
33
+ ✅ repo (Full control of private repositories)
34
+ ├── ✅ repo:status (Access commit status)
35
+ ├── ✅ repo_deployment (Access deployment status)
36
+ ├── ✅ public_repo (Access public repositories)
37
+ └── ✅ repo:invite (Access repository invitations)
38
+ ```
39
+
40
+ ### 可选但推荐的权限
41
+ ```bash
42
+ ✅ workflow (Update GitHub Action workflows)
43
+ ✅ write:packages (Upload packages to GitHub Package Registry)
44
+ ✅ read:packages (Download packages from GitHub Package Registry)
45
+ ```
46
+
47
+ ### 不需要的权限 ❌
48
+ ```bash
49
+ ❌ admin:repo_hook (不需要 webhook 管理)
50
+ ❌ admin:org (不需要组织管理)
51
+ ❌ admin:public_key (不需要公钥管理)
52
+ ❌ admin:org_hook (不需要组织 webhook)
53
+ ❌ gist (不需要 Gist 权限)
54
+ ❌ notifications (不需要通知权限)
55
+ ❌ user (不需要用户信息权限)
56
+ ❌ delete_repo (不需要删除仓库权限)
57
+ ```
58
+
59
+ ## 权限详细说明
60
+
61
+ ### repo 权限包含的子权限：
62
+
63
+ | 权限名称 | 说明 | VvvebJs 是否需要 |
64
+ |---------|------|----------------|
65
+ | `repo:status` | 读取仓库提交状态 | ✅ 需要 |
66
+ | `repo_deployment` | 读取部署状态 | ✅ 需要 |
67
+ | `public_repo` | 访问公开仓库 | ✅ 需要 |
68
+ | `repo:invite` | 管理仓库邀请 | ✅ 需要 |
69
+ | `security_events` | 读取安全事件 | ❌ 不需要 |
70
+
71
+ ### 为什么需要完整的 repo 权限？
72
+
73
+ 1. **读取文件** - 检查文件是否存在，获取文件 SHA
74
+ 2. **创建文件** - 保存新的网页文件
75
+ 3. **更新文件** - 修改现有网页内容
76
+ 4. **分支操作** - 检查分支是否存在
77
+ 5. **提交操作** - 创建提交记录
78
+
79
+ ## 第四步：Token 安全最佳实践
80
+
81
+ ### 1. Token 存储安全
82
+ ```bash
83
+ # ✅ 正确方式：环境变量
84
+ GITHUB_TOKEN=ghp_xxxxxxxxxxxxxxxxxxxx
85
+
86
+ # ❌ 错误方式：硬编码在文件中
87
+ $token = "ghp_xxxxxxxxxxxxxxxxxxxx"; // 不要这样做！
88
+ ```
89
+
90
+ ### 2. Token 权限最小化
91
+ ```bash
92
+ # 只为特定仓库创建 Token
93
+ # 而不是给所有仓库权限
94
+ ```
95
+
96
+ ### 3. 定期轮换 Token
97
+ ```bash
98
+ 建议周期：
99
+ - 生产环境：30-90 天
100
+ - 开发环境：90-180 天
101
+ - 测试环境：可以更长
102
+ ```
103
+
104
+ ## 第五步：验证 Token 权限
105
+
106
+ ### 使用 curl 测试
107
+ ```bash
108
+ # 测试 Token 基本权限
109
+ curl -H "Authorization: token YOUR_TOKEN" \
110
+ -H "User-Agent: VvvebJs/1.0" \
111
+ https://api.github.com/user
112
+
113
+ # 测试仓库访问权限
114
+ curl -H "Authorization: token YOUR_TOKEN" \
115
+ -H "User-Agent: VvvebJs/1.0" \
116
+ https://api.github.com/repos/YOUR_USERNAME/YOUR_REPO
117
+
118
+ # 测试文件创建权限
119
+ curl -X PUT \
120
+ -H "Authorization: token YOUR_TOKEN" \
121
+ -H "User-Agent: VvvebJs/1.0" \
122
+ -H "Content-Type: application/json" \
123
+ -d '{"message":"test","content":"VGVzdCBmaWxl"}' \
124
+ https://api.github.com/repos/YOUR_USERNAME/YOUR_REPO/contents/test.txt
125
+ ```
126
+
127
+ ## 第六步：在 VvvebJs 中配置
128
+
129
+ ### Hugging Face Space 环境变量
130
+ ```bash
131
+ # 在 Settings -> Variables and secrets 中添加：
132
+ GITHUB_TOKEN=ghp_your_40_character_token_here
133
+ GITHUB_OWNER=your_github_username
134
+ GITHUB_REPO=your_repository_name
135
+ GITHUB_BRANCH=main
136
+ GITHUB_PATH=pages/
137
+ STORAGE_TYPE=github
138
+ ```
139
+
140
+ ### 本地开发环境
141
+ ```bash
142
+ # .env 文件
143
+ GITHUB_TOKEN=ghp_your_40_character_token_here
144
+ GITHUB_OWNER=your_github_username
145
+ GITHUB_REPO=your_repository_name
146
+ ```
147
+
148
+ ## 常见权限问题排查
149
+
150
+ ### 问题 1: 403 Forbidden
151
+ ```
152
+ 原因：Token 权限不足
153
+ 解决：确保勾选了 repo 权限
154
+ ```
155
+
156
+ ### 问题 2: 401 Unauthorized
157
+ ```
158
+ 原因：Token 无效或过期
159
+ 解决：重新生成 Token
160
+ ```
161
+
162
+ ### 问题 3: 404 Not Found
163
+ ```
164
+ 原因：仓库不存在或 Token 无访问权限
165
+ 解决：检查仓库名称和权限设置
166
+ ```
167
+
168
+ ### 问题 4: 422 Unprocessable Entity
169
+ ```
170
+ 原因：请求格式错误或文件内容问题
171
+ 解决：检查 API 请求格式和文件编码
172
+ ```
173
+
174
+ ## Token 权限检查清单
175
+
176
+ 在配置完成后，请确认：
177
+
178
+ - [ ] Token 有 `repo` 完整权限
179
+ - [ ] Token 未过期
180
+ - [ ] 目标仓库存在且可访��
181
+ - [ ] 环境变量配置正确
182
+ - [ ] 可以通过 API 访问仓库
183
+ - [ ] 可以创建和修改文件
184
+ - [ ] User-Agent 头部已设置
185
+
186
+ ## 安全提醒
187
+
188
+ 1. **永远不要在代码中硬编码 Token**
189
+ 2. **定期检查 Token 使用情况**
190
+ 3. **及时删除不使用的 Token**
191
+ 4. **使用最小权限原则**
192
+ 5. **在 GitHub Settings -> Personal access tokens 中监控 Token 活动**
193
+
194
+ ## 相关链接
195
+
196
+ - [GitHub Token 设置页面](https://github.com/settings/tokens)
197
+ - [GitHub API 文档](https://docs.github.com/en/rest)
198
+ - [Token 权限说明](https://docs.github.com/en/developers/apps/building-oauth-apps/scopes-for-oauth-apps)
README-DEPLOY.md ADDED
@@ -0,0 +1,112 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ # VvvebJs - Hugging Face Deployment Guide
2
+
3
+ ## Environment Variables Configuration
4
+
5
+ Configure these environment variables in your Hugging Face Space settings:
6
+
7
+ ### Authentication (Required)
8
+ ```
9
+ USER_1_NAME=admin
10
+ USER_1_PASSWORD=your_secure_password
11
+ USER_2_NAME=editor
12
+ USER_2_PASSWORD=another_secure_password
13
+ ```
14
+ Add more users by incrementing the number (USER_3_NAME, USER_3_PASSWORD, etc.)
15
+
16
+ ### Storage Configuration
17
+ ```
18
+ STORAGE_TYPE=github
19
+ # Options: 'github', 'kv', 'both'
20
+ ```
21
+
22
+ ### GitHub Storage (Recommended)
23
+ ```
24
+ GITHUB_TOKEN=ghp_your_github_token
25
+ GITHUB_OWNER=your_username
26
+ GITHUB_REPO=your_repo_name
27
+ GITHUB_BRANCH=main
28
+ GITHUB_PATH=pages/
29
+ ```
30
+
31
+ ### EdgeOne KV Storage (Optional)
32
+ ```
33
+ EDGEONE_KV_API_KEY=your_api_key
34
+ EDGEONE_KV_SECRET_KEY=your_secret_key
35
+ EDGEONE_KV_ZONE_ID=your_zone_id
36
+ EDGEONE_KV_NAMESPACE=vvvebjs
37
+ EDGEONE_KV_ENDPOINT=https://edgeone.tencentcloudapi.com
38
+ ```
39
+
40
+ ## Setup Instructions
41
+
42
+ 1. Create a new Hugging Face Space with Docker
43
+ 2. Upload this repository
44
+ 3. Configure environment variables in Space Settings
45
+ 4. Deploy and access via Basic Authentication
46
+
47
+ ## Features
48
+
49
+ - ✅ Docker deployment on Hugging Face
50
+ - ✅ GitHub repository as permanent storage
51
+ - ✅ EdgeOne KV storage support
52
+ - ✅ Multi-user authentication via environment variables
53
+ - ✅ Automatic fallback to local storage
54
+ - ✅ Dual storage support (GitHub + KV)
55
+
56
+ ## Usage
57
+
58
+ 1. Access your Space URL
59
+ 2. Enter username/password (configured in environment variables)
60
+ 3. Create and edit pages using the visual editor
61
+ 4. Pages are automatically saved to external storage
62
+
63
+ ## 🔧 紧急修复：GitHub 用户名配置错误
64
+
65
+ ### 问题诊断
66
+ - ✅ GitHub Token 验证成功
67
+ - ❌ 仓库访问失败 (HTTP 404)
68
+ - **原因**: `GITHUB_OWNER` 配置错误
69
+
70
+ ### 当前配置问题
71
+ ```bash
72
+ GITHUB_OWNER=CaPaCatptain # ❌ 错误 - 中间是 "Cat"
73
+ ```
74
+
75
+ ### 正确配置
76
+ ```bash
77
+ GITHUB_OWNER=CaPaCaptain # ✅ 正确 - 中间是 "Capt"
78
+ ```
79
+
80
+ ### 立即修复步骤
81
+
82
+ 1. **在 Hugging Face Space Settings 中更新环境变量**：
83
+ ```
84
+ GITHUB_OWNER=CaPaCaptain
85
+ ```
86
+
87
+ 2. **重启 Space**：
88
+ - 修改环境变量后
89
+ - Space 会自动重启
90
+ - 等待 1-2 分钟
91
+
92
+ 3. **重新测试**：
93
+ - 访问高级诊断页面
94
+ - 运行完整诊断
95
+ - 应该会看到所有测试通过 ✅
96
+
97
+ ### 验证步骤
98
+
99
+ 修复后，诊断结果应该显示：
100
+ - ✅ GitHub Token 验证：有效
101
+ - ✅ 仓库访问检查：可访问
102
+ - ✅ 分支检查：分支存在
103
+ - ✅ 文件创建权限测试：可以创建文件
104
+
105
+ ### 仓库信息确认
106
+ - **正确的仓库 URL**: `https://github.com/CaPaCaptain/VvvebJs_huggingface_db_01`
107
+ - **用户名**: CaPaCaptain (注意大小写)
108
+ - **仓库名**: VvvebJs_huggingface_db_01
109
+
110
+ ---
111
+
112
+ **注意**: 这个错误很容易被忽略，因为差异很小（Cat vs Capt），但 GitHub API 对大小写和拼写非常敏感。
check-github-token.sh ADDED
@@ -0,0 +1,105 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ #!/bin/bash
2
+
3
+ # GitHub Token 权限快速检查脚本
4
+ # 使用方法: ./check-github-token.sh YOUR_TOKEN YOUR_OWNER YOUR_REPO
5
+
6
+ TOKEN=$1
7
+ OWNER=$2
8
+ REPO=$3
9
+
10
+ if [ -z "$TOKEN" ] || [ -z "$OWNER" ] || [ -z "$REPO" ]; then
11
+ echo "❌ 用法: $0 <github_token> <owner> <repo>"
12
+ echo "例如: $0 ghp_xxxxxxxxxxxx myusername myrepo"
13
+ exit 1
14
+ fi
15
+
16
+ echo "🔍 检查 GitHub Token 权限..."
17
+ echo "Token: ${TOKEN:0:8}..."
18
+ echo "仓库: $OWNER/$REPO"
19
+ echo "=" * 50
20
+
21
+ # 1. 检查 Token 基本权限
22
+ echo "📋 1. 检查 Token 基本权限..."
23
+ USER_RESPONSE=$(curl -s -H "Authorization: token $TOKEN" \
24
+ -H "User-Agent: VvvebJs-Check/1.0" \
25
+ https://api.github.com/user)
26
+
27
+ if echo "$USER_RESPONSE" | grep -q '"login"'; then
28
+ USERNAME=$(echo "$USER_RESPONSE" | grep '"login"' | sed 's/.*"login": *"\([^"]*\)".*/\1/')
29
+ echo "✅ Token 有效 - 用户: $USERNAME"
30
+ else
31
+ echo "❌ Token 无效或无权限"
32
+ echo "详情: $USER_RESPONSE"
33
+ exit 1
34
+ fi
35
+
36
+ # 2. 检查仓库访问权限
37
+ echo "📁 2. 检查仓库访问权限..."
38
+ REPO_RESPONSE=$(curl -s -H "Authorization: token $TOKEN" \
39
+ -H "User-Agent: VvvebJs-Check/1.0" \
40
+ https://api.github.com/repos/$OWNER/$REPO)
41
+
42
+ if echo "$REPO_RESPONSE" | grep -q '"full_name"'; then
43
+ echo "✅ 仓库可访问"
44
+
45
+ # 检查权限详情
46
+ if echo "$REPO_RESPONSE" | grep -q '"permissions"'; then
47
+ ADMIN=$(echo "$REPO_RESPONSE" | grep '"admin"' | sed 's/.*"admin": *\([^,]*\).*/\1/')
48
+ PUSH=$(echo "$REPO_RESPONSE" | grep '"push"' | sed 's/.*"push": *\([^,]*\).*/\1/')
49
+ PULL=$(echo "$REPO_RESPONSE" | grep '"pull"' | sed 's/.*"pull": *\([^,]*\).*/\1/')
50
+
51
+ echo " - Admin: $ADMIN"
52
+ echo " - Push: $PUSH"
53
+ echo " - Pull: $PULL"
54
+
55
+ if [ "$PUSH" = "true" ]; then
56
+ echo "✅ 有写入权限"
57
+ else
58
+ echo "❌ 缺少写入权限"
59
+ fi
60
+ fi
61
+ else
62
+ echo "❌ 仓库不存在或无访问权限"
63
+ echo "详情: $REPO_RESPONSE"
64
+ exit 1
65
+ fi
66
+
67
+ # 3. 测试文件创建
68
+ echo "✏️ 3. 测试文件创建权限..."
69
+ TEST_FILE="vvvebjs-test-$(date +%s).txt"
70
+ TEST_CONTENT=$(echo "VvvebJs Test - $(date)" | base64)
71
+
72
+ CREATE_RESPONSE=$(curl -s -X PUT \
73
+ -H "Authorization: token $TOKEN" \
74
+ -H "User-Agent: VvvebJs-Check/1.0" \
75
+ -H "Content-Type: application/json" \
76
+ -d "{\"message\":\"VvvebJs permission test\",\"content\":\"$TEST_CONTENT\"}" \
77
+ https://api.github.com/repos/$OWNER/$REPO/contents/$TEST_FILE)
78
+
79
+ if echo "$CREATE_RESPONSE" | grep -q '"sha"'; then
80
+ echo "✅ 文件创建成功"
81
+
82
+ # 清理测试文件
83
+ SHA=$(echo "$CREATE_RESPONSE" | grep '"sha"' | head -1 | sed 's/.*"sha": *"\([^"]*\)".*/\1/')
84
+ curl -s -X DELETE \
85
+ -H "Authorization: token $TOKEN" \
86
+ -H "User-Agent: VvvebJs-Check/1.0" \
87
+ -H "Content-Type: application/json" \
88
+ -d "{\"message\":\"Clean up test file\",\"sha\":\"$SHA\"}" \
89
+ https://api.github.com/repos/$OWNER/$REPO/contents/$TEST_FILE > /dev/null
90
+ echo "🧹 测试文件已清理"
91
+ else
92
+ echo "❌ 文件创建失败"
93
+ echo "详情: $CREATE_RESPONSE"
94
+ fi
95
+
96
+ echo ""
97
+ echo "🎉 权限检查完成！"
98
+ echo ""
99
+ echo "📋 配置建议："
100
+ echo "GITHUB_TOKEN=$TOKEN"
101
+ echo "GITHUB_OWNER=$OWNER"
102
+ echo "GITHUB_REPO=$REPO"
103
+ echo "GITHUB_BRANCH=main"
104
+ echo "GITHUB_PATH=pages/"
105
+ echo "STORAGE_TYPE=github"
editor.html CHANGED
@@ -1775,8 +1775,9 @@ Vvveb.themeBaseUrl = 'demo/landing/';
1775
 
1776
  <!-- components-->
1777
  <!-- script src="libs/builder/components-server.js"></script -->
1778
- <script src="libs/builder/plugin-google-fonts.js"></script>
1779
- <script src="libs/builder/components-common.js"></script>
 
1780
  <script src="libs/builder/plugin-aos.js"></script>
1781
  <script src="libs/builder/components-html.js"></script>
1782
  <script src="libs/builder/components-elements.js"></script>
 
1775
 
1776
  <!-- components-->
1777
  <!-- script src="libs/builder/components-server.js"></script -->
1778
+ <!-- Disable Google Fonts plugin to fix loading error -->
1779
+ <!-- script src="libs/builder/plugin-google-fonts.js"></script -->
1780
+ <script src="libs/builder/components-common.js"></script>
1781
  <script src="libs/builder/plugin-aos.js"></script>
1782
  <script src="libs/builder/components-html.js"></script>
1783
  <script src="libs/builder/components-elements.js"></script>
font-fix.html ADDED
@@ -0,0 +1,100 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1">
6
+ <title>VvvebJs - 本地字体替代方案</title>
7
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
8
+ <style>
9
+ /* 本地字体系统 - 替代 Google Fonts */
10
+ .font-system {
11
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
12
+ }
13
+
14
+ .font-serif {
15
+ font-family: Georgia, "Times New Roman", Times, serif;
16
+ }
17
+
18
+ .font-mono {
19
+ font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
20
+ }
21
+
22
+ .font-display {
23
+ font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
24
+ font-weight: 600;
25
+ }
26
+ </style>
27
+ </head>
28
+ <body>
29
+ <div class="container mt-5">
30
+ <div class="row">
31
+ <div class="col-md-8 mx-auto">
32
+ <h1 class="mb-4 font-display">🎨 VvvebJs 本地字体方案</h1>
33
+
34
+ <div class="alert alert-info">
35
+ <h5>✅ 问题已解决</h5>
36
+ <p>Google 字体插件已被禁用，编辑器现在使用系统默认字体，避免了网络加载问题。</p>
37
+ </div>
38
+
39
+ <div class="card mb-4">
40
+ <div class="card-header">
41
+ <h3>📝 可用字体系统</h3>
42
+ </div>
43
+ <div class="card-body">
44
+ <div class="mb-3">
45
+ <h5 class="font-system">系统字体 (System Font)</h5>
46
+ <p class="font-system">这是默认的系统字体，适用于大部分内容。在不同操作系统上会显示为最适合的字体。</p>
47
+ </div>
48
+
49
+ <div class="mb-3">
50
+ <h5 class="font-serif">衬线字体 (Serif Font)</h5>
51
+ <p class="font-serif">适用于正式文档和传统风格的内容，提供更好的可读性。</p>
52
+ </div>
53
+
54
+ <div class="mb-3">
55
+ <h5 class="font-mono">等宽字体 (Monospace Font)</h5>
56
+ <p class="font-mono">适用于代码显示和需要对齐的内容。</p>
57
+ </div>
58
+
59
+ <div class="mb-3">
60
+ <h5 class="font-display">标题字体 (Display Font)</h5>
61
+ <p class="font-display">适用于标题和重要内容的显示。</p>
62
+ </div>
63
+ </div>
64
+ </div>
65
+
66
+ <div class="card mb-4">
67
+ <div class="card-header">
68
+ <h3>🔧 技术说明</h3>
69
+ </div>
70
+ <div class="card-body">
71
+ <ul>
72
+ <li><strong>禁用了 Google 字体插件</strong> - 避免网络加载问题</li>
73
+ <li><strong>使用系统字体栈</strong> - 确保在所有环境下都能正常显示</li>
74
+ <li><strong>保持编辑器功能</strong> - 所有其他功能正常工作</li>
75
+ <li><strong>提高加载速度</strong> - 无需等待外部字体资源</li>
76
+ </ul>
77
+ </div>
78
+ </div>
79
+
80
+ <div class="card">
81
+ <div class="card-header">
82
+ <h3>🚀 继续使用编辑器</h3>
83
+ </div>
84
+ <div class="card-body text-center">
85
+ <p>Google 字体加载问题已解决，您可以正常使用编辑器了。</p>
86
+ <div class="mt-3">
87
+ <a href="editor.html" class="btn btn-primary btn-lg">
88
+ 🎨 返回编辑器
89
+ </a>
90
+ <a href="config.php" class="btn btn-secondary">
91
+ ⚙️ 查看配置
92
+ </a>
93
+ </div>
94
+ </div>
95
+ </div>
96
+ </div>
97
+ </div>
98
+ </div>
99
+ </body>
100
+ </html>
github-token-helper.html ADDED
@@ -0,0 +1,400 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1">
6
+ <title>GitHub Token 权限配置助手</title>
7
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
8
+ <style>
9
+ .permission-card {
10
+ border-left: 4px solid #007bff;
11
+ transition: all 0.3s ease;
12
+ }
13
+ .permission-required {
14
+ border-left-color: #28a745;
15
+ background-color: #f8fff9;
16
+ }
17
+ .permission-optional {
18
+ border-left-color: #ffc107;
19
+ background-color: #fefdf5;
20
+ }
21
+ .permission-not-needed {
22
+ border-left-color: #dc3545;
23
+ background-color: #fff5f5;
24
+ }
25
+ .step-number {
26
+ background: linear-gradient(45deg, #007bff, #0056b3);
27
+ color: white;
28
+ border-radius: 50%;
29
+ width: 40px;
30
+ height: 40px;
31
+ display: flex;
32
+ align-items: center;
33
+ justify-content: center;
34
+ font-weight: bold;
35
+ }
36
+ .checklist-item {
37
+ padding: 8px 0;
38
+ border-bottom: 1px solid #eee;
39
+ }
40
+ .token-example {
41
+ font-family: monospace;
42
+ background: #f8f9fa;
43
+ padding: 4px 8px;
44
+ border-radius: 4px;
45
+ border: 1px solid #dee2e6;
46
+ }
47
+ </style>
48
+ </head>
49
+ <body>
50
+ <div class="container mt-4">
51
+ <div class="row">
52
+ <div class="col-md-10 mx-auto">
53
+ <div class="text-center mb-5">
54
+ <h1 class="display-4">🔑 GitHub Token 权限配置助手</h1>
55
+ <p class="lead">为 VvvebJs 配置正确的 GitHub 访问权限</p>
56
+ </div>
57
+
58
+ <!-- 快速开始 -->
59
+ <div class="card mb-4 border-primary">
60
+ <div class="card-header bg-primary text-white">
61
+ <h3 class="mb-0">⚡ 快速开始</h3>
62
+ </div>
63
+ <div class="card-body">
64
+ <div class="row">
65
+ <div class="col-md-6">
66
+ <h5>👈 我是新手</h5>
67
+ <p class="text-muted">第一次配置 GitHub Token</p>
68
+ <a href="https://github.com/settings/tokens/new" target="_blank" class="btn btn-outline-primary">
69
+ 🚀 创建新 Token
70
+ </a>
71
+ </div>
72
+ <div class="col-md-6">
73
+ <h5>🔧 我需要排查问题</h5>
74
+ <p class="text-muted">Token 已创建但有问题</p>
75
+ <a href="github-test.php" class="btn btn-outline-warning">
76
+ 🧪 测试现有配置
77
+ </a>
78
+ </div>
79
+ </div>
80
+ </div>
81
+ </div>
82
+
83
+ <!-- 步骤指导 -->
84
+ <div class="row">
85
+ <!-- 步骤1 -->
86
+ <div class="col-md-6 mb-4">
87
+ <div class="card h-100">
88
+ <div class="card-body">
89
+ <div class="d-flex align-items-center mb-3">
90
+ <div class="step-number me-3">1</div>
91
+ <h4 class="mb-0">访问 GitHub 设置</h4>
92
+ </div>
93
+ <ol>
94
+ <li>登录 <a href="https://github.com" target="_blank">GitHub</a></li>
95
+ <li>点击右上角头像 → Settings</li>
96
+ <li>左侧菜单 → Developer settings</li>
97
+ <li>Personal access tokens → Tokens (classic)</li>
98
+ <li>Generate new token (classic)</li>
99
+ </ol>
100
+ <a href="https://github.com/settings/tokens" target="_blank" class="btn btn-primary btn-sm">
101
+ 🔗 直接跳转
102
+ </a>
103
+ </div>
104
+ </div>
105
+ </div>
106
+
107
+ <!-- 步骤2 -->
108
+ <div class="col-md-6 mb-4">
109
+ <div class="card h-100">
110
+ <div class="card-body">
111
+ <div class="d-flex align-items-center mb-3">
112
+ <div class="step-number me-3">2</div>
113
+ <h4 class="mb-0">填写基本信息</h4>
114
+ </div>
115
+ <div class="mb-3">
116
+ <label class="form-label"><strong>Note (描述):</strong></label>
117
+ <div class="token-example">VvvebJs Website Editor</div>
118
+ </div>
119
+ <div class="mb-3">
120
+ <label class="form-label"><strong>Expiration (过期时间):</strong></label>
121
+ <div class="text-success">推荐: 90 days</div>
122
+ <small class="text-muted">平衡安全性和便利性</small>
123
+ </div>
124
+ </div>
125
+ </div>
126
+ </div>
127
+ </div>
128
+
129
+ <!-- 权限选择 -->
130
+ <div class="card mb-4">
131
+ <div class="card-header">
132
+ <div class="d-flex align-items-center">
133
+ <div class="step-number me-3">3</div>
134
+ <h3 class="mb-0">选择权限范围 (Scopes)</h3>
135
+ </div>
136
+ </div>
137
+ <div class="card-body">
138
+ <div class="alert alert-warning">
139
+ <strong>⚠️ 重要:</strong> 必须勾选 <code>repo</code> 权限，这是 VvvebJs 保存文件的基础要求。
140
+ </div>
141
+
142
+ <!-- 必需权限 -->
143
+ <div class="permission-card permission-required card mb-3">
144
+ <div class="card-header">
145
+ <h5 class="text-success mb-0">✅ 必需权限</h5>
146
+ </div>
147
+ <div class="card-body">
148
+ <div class="form-check">
149
+ <input class="form-check-input" type="checkbox" checked disabled>
150
+ <label class="form-check-label">
151
+ <strong>repo</strong> - Full control of private repositories
152
+ </label>
153
+ </div>
154
+ <small class="text-muted ms-4">
155
+ 包含: repo:status, repo_deployment, public_repo, repo:invite<br>
156
+ <strong>用途:</strong> 创建、读取、更新网页文件
157
+ </small>
158
+ </div>
159
+ </div>
160
+
161
+ <!-- 可选权限 -->
162
+ <div class="permission-card permission-optional card mb-3">
163
+ <div class="card-header">
164
+ <h5 class="text-warning mb-0">⚠️ 可选权限</h5>
165
+ </div>
166
+ <div class="card-body">
167
+ <div class="form-check mb-2">
168
+ <input class="form-check-input" type="checkbox">
169
+ <label class="form-check-label">
170
+ <strong>workflow</strong> - Update GitHub Action workflows
171
+ </label>
172
+ </div>
173
+ <small class="text-muted ms-4 d-block mb-3">
174
+ <strong>用途:</strong> 如果您计划使用 GitHub Actions 自动部署
175
+ </small>
176
+
177
+ <div class="form-check mb-2">
178
+ <input class="form-check-input" type="checkbox">
179
+ <label class="form-check-label">
180
+ <strong>write:packages / read:packages</strong> - Package registry access
181
+ </label>
182
+ </div>
183
+ <small class="text-muted ms-4 d-block">
184
+ <strong>用途:</strong> 如果您需要管理 GitHub Packages
185
+ </small>
186
+ </div>
187
+ </div>
188
+
189
+ <!-- 不需要的权限 -->
190
+ <div class="permission-card permission-not-needed card">
191
+ <div class="card-header">
192
+ <h5 class="text-danger mb-0">❌ 不需要的权限</h5>
193
+ </div>
194
+ <div class="card-body">
195
+ <div class="row">
196
+ <div class="col-md-6">
197
+ <ul class="list-unstyled">
198
+ <li>❌ admin:repo_hook</li>
199
+ <li>❌ admin:org</li>
200
+ <li>❌ admin:public_key</li>
201
+ <li>❌ gist</li>
202
+ </ul>
203
+ </div>
204
+ <div class="col-md-6">
205
+ <ul class="list-unstyled">
206
+ <li>❌ notifications</li>
207
+ <li>❌ user</li>
208
+ <li>❌ delete_repo</li>
209
+ <li>❌ admin:org_hook</li>
210
+ </ul>
211
+ </div>
212
+ </div>
213
+ <small class="text-muted">
214
+ <strong>原因:</strong> VvvebJs 只需要读写文件，不需要管理权限
215
+ </small>
216
+ </div>
217
+ </div>
218
+ </div>
219
+ </div>
220
+
221
+ <!-- 配置示例 -->
222
+ <div class="card mb-4">
223
+ <div class="card-header">
224
+ <div class="d-flex align-items-center">
225
+ <div class="step-number me-3">4</div>
226
+ <h3 class="mb-0">配置环境变量</h3>
227
+ </div>
228
+ </div>
229
+ <div class="card-body">
230
+ <div class="alert alert-info">
231
+ <strong>📋 获取 Token 后，在 Hugging Face Space Settings 中添加这些环境变量:</strong>
232
+ </div>
233
+
234
+ <div class="row">
235
+ <div class="col-md-6">
236
+ <h5>🔑 GitHub 认证</h5>
237
+ <div class="bg-light p-3 rounded">
238
+ <code>GITHUB_TOKEN=ghp_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</code><br>
239
+ <code>GITHUB_OWNER=your_username</code><br>
240
+ <code>GITHUB_REPO=your_repo_name</code><br>
241
+ </div>
242
+ </div>
243
+ <div class="col-md-6">
244
+ <h5>⚙️ 存储配置</h5>
245
+ <div class="bg-light p-3 rounded">
246
+ <code>GITHUB_BRANCH=main</code><br>
247
+ <code>GITHUB_PATH=pages/</code><br>
248
+ <code>STORAGE_TYPE=github</code><br>
249
+ </div>
250
+ </div>
251
+ </div>
252
+
253
+ <div class="mt-3">
254
+ <h6>📝 配置说明:</h6>
255
+ <ul>
256
+ <li><code>GITHUB_TOKEN</code>: 刚创建的 40 字符 Token (以 ghp_ 开头)</li>
257
+ <li><code>GITHUB_OWNER</code>: 您的 GitHub 用户名</li>
258
+ <li><code>GITHUB_REPO</code>: 存储网页的仓库名</li>
259
+ <li><code>GITHUB_PATH</code>: 网页保存的目录 (可以为空)</li>
260
+ </ul>
261
+ </div>
262
+ </div>
263
+ </div>
264
+
265
+ <!-- 验证清单 -->
266
+ <div class="card mb-4">
267
+ <div class="card-header">
268
+ <div class="d-flex align-items-center">
269
+ <div class="step-number me-3">5</div>
270
+ <h3 class="mb-0">验证配置</h3>
271
+ </div>
272
+ </div>
273
+ <div class="card-body">
274
+ <h5>✅ 配置检查清单</h5>
275
+ <div id="checklist">
276
+ <div class="checklist-item">
277
+ <input type="checkbox" class="form-check-input me-2" id="check1">
278
+ <label for="check1">Token 已创建且有 <code>repo</code> 权限</label>
279
+ </div>
280
+ <div class="checklist-item">
281
+ <input type="checkbox" class="form-check-input me-2" id="check2">
282
+ <label for="check2">环境变量已在 Hugging Face Space 中配置</label>
283
+ </div>
284
+ <div class="checklist-item">
285
+ <input type="checkbox" class="form-check-input me-2" id="check3">
286
+ <label for="check3">GitHub 仓库已创建且可访问</label>
287
+ </div>
288
+ <div class="checklist-item">
289
+ <input type="checkbox" class="form-check-input me-2" id="check4">
290
+ <label for="check4">分支名称正确 (通常是 main 或 master)</label>
291
+ </div>
292
+ <div class="checklist-item">
293
+ <input type="checkbox" class="form-check-input me-2" id="check5">
294
+ <label for="check5">已通过测试页面验证</label>
295
+ </div>
296
+ </div>
297
+
298
+ <div class="mt-4">
299
+ <a href="github-test.php" class="btn btn-success me-2">🧪 测试配置</a>
300
+ <a href="config.php" class="btn btn-secondary me-2">⚙️ 查看状态</a>
301
+ <a href="editor.html" class="btn btn-primary">🎨 开始使用编辑器</a>
302
+ </div>
303
+ </div>
304
+ </div>
305
+
306
+ <!-- 故障排除 -->
307
+ <div class="card">
308
+ <div class="card-header">
309
+ <h3>🔧 常见问题和解决方案</h3>
310
+ </div>
311
+ <div class="card-body">
312
+ <div class="accordion" id="troubleshootingAccordion">
313
+ <!-- 问题1 -->
314
+ <div class="accordion-item">
315
+ <h5 class="accordion-header">
316
+ <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#trouble1">
317
+ 403 Forbidden - 权限不足
318
+ </button>
319
+ </h5>
320
+ <div id="trouble1" class="accordion-collapse collapse" data-bs-parent="#troubleshootingAccordion">
321
+ <div class="accordion-body">
322
+ <strong>原因:</strong> Token 权限不足<br>
323
+ <strong>解决:</strong>
324
+ <ol>
325
+ <li>确保勾选了 <code>repo</code> 权限</li>
326
+ <li>重新生成 Token 并更新环境变量</li>
327
+ <li>检查仓库是否为私有仓库（需要完整 repo 权限）</li>
328
+ </ol>
329
+ </div>
330
+ </div>
331
+ </div>
332
+
333
+ <!-- 问题2 -->
334
+ <div class="accordion-item">
335
+ <h5 class="accordion-header">
336
+ <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#trouble2">
337
+ 401 Unauthorized - 认证失败
338
+ </button>
339
+ </h5>
340
+ <div id="trouble2" class="accordion-collapse collapse" data-bs-parent="#troubleshootingAccordion">
341
+ <div class="accordion-body">
342
+ <strong>原因:</strong> Token 无效或过期<br>
343
+ <strong>解决:</strong>
344
+ <ol>
345
+ <li>检查 Token 是否正确复制（40个字符，以 ghp_ 开头）</li>
346
+ <li>检查 Token 是否过期</li>
347
+ <li>重新生成新的 Token</li>
348
+ </ol>
349
+ </div>
350
+ </div>
351
+ </div>
352
+
353
+ <!-- 问题3 -->
354
+ <div class="accordion-item">
355
+ <h5 class="accordion-header">
356
+ <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#trouble3">
357
+ 404 Not Found - 仓库不存在
358
+ </button>
359
+ </h5>
360
+ <div id="trouble3" class="accordion-collapse collapse" data-bs-parent="#troubleshootingAccordion">
361
+ <div class="accordion-body">
362
+ <strong>原因:</strong> 仓库不存在或 Token 无访问权限<br>
363
+ <strong>解决:</strong>
364
+ <ol>
365
+ <li>检查 <code>GITHUB_OWNER</code> 是否是正确的用户名</li>
366
+ <li>检查 <code>GITHUB_REPO</code> 是否是正确的仓库名</li>
367
+ <li>确保仓库存在且 Token 有访问权限</li>
368
+ <li>如果是组织仓库，确保 Token 有组织权限</li>
369
+ </ol>
370
+ </div>
371
+ </div>
372
+ </div>
373
+ </div>
374
+ </div>
375
+ </div>
376
+ </div>
377
+ </div>
378
+ </div>
379
+
380
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
381
+ <script>
382
+ // 保存检查状态
383
+ document.addEventListener('DOMContentLoaded', function() {
384
+ const checkboxes = document.querySelectorAll('#checklist input[type="checkbox"]');
385
+
386
+ checkboxes.forEach(checkbox => {
387
+ checkbox.addEventListener('change', function() {
388
+ localStorage.setItem(this.id, this.checked);
389
+ });
390
+
391
+ // 恢复状态
392
+ const saved = localStorage.getItem(checkbox.id);
393
+ if (saved === 'true') {
394
+ checkbox.checked = true;
395
+ }
396
+ });
397
+ });
398
+ </script>
399
+ </body>
400
+ </html>
index.html CHANGED
@@ -4,43 +4,124 @@
4
  <meta charset="utf-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1">
6
  <title>VvvebJs - Visual Website Builder</title>
7
- <link href="css/editor.css" rel="stylesheet">
8
  <style>
9
- .welcome-panel {
10
- max-width: 600px;
11
- margin: 100px auto;
12
- padding: 40px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
13
  text-align: center;
14
- background: #f8f9fa;
15
- border-radius: 10px;
16
- box-shadow: 0 4px 6px rgba(0,0,0,0.1);
17
- }
18
- .btn {
19
- margin: 10px;
20
- padding: 12px 24px;
21
- border-radius: 5px;
22
- text-decoration: none;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
23
  display: inline-block;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
24
  }
25
- .btn-primary { background: #007bff; color: white; }
26
- .btn-secondary { background: #6c757d; color: white; }
27
- .btn:hover { opacity: 0.8; }
28
  </style>
29
  </head>
30
  <body>
31
- <div class="welcome-panel">
32
- <h1>🎨 VvvebJs</h1>
33
- <h2>Visual Website Builder</h2>
34
- <p>Drag & drop website builder with external storage support</p>
35
-
36
- <div style="margin: 30px 0;">
37
- <a href="config.php" class="btn btn-secondary">⚙️ Check Configuration</a>
38
- <a href="editor.html" class="btn btn-primary">🚀 Launch Editor</a>
39
- </div>
40
 
41
- <div style="margin-top: 30px; font-size: 14px; color: #6c757d;">
42
- <p>📝 Features: Bootstrap 5 components, GitHub & EdgeOne KV storage, Multi-user auth</p>
 
 
 
 
 
 
 
 
 
 
 
43
  </div>
44
  </div>
 
 
 
 
 
45
  </body>
46
  </html>
 
4
  <meta charset="utf-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1">
6
  <title>VvvebJs - Visual Website Builder</title>
 
7
  <style>
8
+ body {
9
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
10
+ min-height: 100vh;
11
+ display: flex;
12
+ flex-direction: column;
13
+ justify-content: center;
14
+ align-items: center;
15
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
16
+ margin: 0;
17
+ padding: 20px;
18
+ }
19
+
20
+ .cyber-card {
21
+ background: rgba(255, 255, 255, 0.1);
22
+ backdrop-filter: blur(20px);
23
+ border: 1px solid rgba(255, 255, 255, 0.2);
24
+ border-radius: 20px;
25
+ padding: 40px;
26
  text-align: center;
27
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
28
+ margin-bottom: 30px;
29
+ min-width: 400px;
30
+ }
31
+
32
+ .repo-title {
33
+ color: #fff;
34
+ font-size: 2.5em;
35
+ font-weight: 700;
36
+ margin: 0 0 10px 0;
37
+ text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
38
+ }
39
+
40
+ .repo-subtitle {
41
+ color: rgba(255, 255, 255, 0.8);
42
+ font-size: 1.2em;
43
+ margin: 0 0 20px 0;
44
+ }
45
+
46
+ .repo-info {
47
+ display: flex;
48
+ justify-content: space-around;
49
+ margin: 20px 0;
50
+ }
51
+
52
+ .info-item {
53
+ color: rgba(255, 255, 255, 0.9);
54
+ font-size: 0.9em;
55
+ }
56
+
57
+ .info-value {
58
+ display: block;
59
+ color: #fff;
60
+ font-weight: 600;
61
+ margin-top: 5px;
62
+ }
63
+
64
+ .login-btn {
65
+ background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
66
+ color: white;
67
+ border: none;
68
+ padding: 15px 40px;
69
+ font-size: 1.1em;
70
+ font-weight: 600;
71
+ border-radius: 50px;
72
+ cursor: pointer;
73
+ text-decoration: none;
74
  display: inline-block;
75
+ transition: all 0.3s ease;
76
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
77
+ }
78
+
79
+ .login-btn:hover {
80
+ transform: translateY(-2px);
81
+ box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
82
+ }
83
+
84
+ @media (max-width: 480px) {
85
+ .cyber-card {
86
+ min-width: auto;
87
+ margin: 0 10px 30px 10px;
88
+ padding: 30px 20px;
89
+ }
90
+ .repo-title {
91
+ font-size: 2em;
92
+ }
93
+ .repo-info {
94
+ flex-direction: column;
95
+ gap: 15px;
96
+ }
97
  }
 
 
 
98
  </style>
99
  </head>
100
  <body>
101
+ <!-- 赛博信息卡片仓库 -->
102
+ <div class="cyber-card">
103
+ <h1 class="repo-title">🔮 VvvebJs</h1>
104
+ <p class="repo-subtitle">赛博视觉网站构建器</p>
 
 
 
 
 
105
 
106
+ <div class="repo-info">
107
+ <div class="info-item">
108
+ <span>存储类型</span>
109
+ <span class="info-value">GitHub</span>
110
+ </div>
111
+ <div class="info-item">
112
+ <span>认证状态</span>
113
+ <span class="info-value">🔐 安全</span>
114
+ </div>
115
+ <div class="info-item">
116
+ <span>版本</span>
117
+ <span class="info-value">v2.0</span>
118
+ </div>
119
  </div>
120
  </div>
121
+
122
+ <!-- 登录按钮 -->
123
+ <a href="editor.html" class="login-btn">
124
+ 🚀 进入编辑器
125
+ </a>
126
  </body>
127
  </html>
test-current-token.php ADDED
@@ -0,0 +1,247 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <?php
2
+ // 测试当前 GitHub Token 配置
3
+ // 根据截图中的信息进行测试
4
+
5
+ // 从截图推断的配置
6
+ $config = [
7
+ 'owner' => 'CaPaCaptain', // 从截图中的仓库访问看到
8
+ 'repo' => 'VvvebJs_huggingface_db_01', // 从截图中看到
9
+ 'branch' => 'main',
10
+ 'path' => 'pages/',
11
+ 'token' => $_ENV['GITHUB_TOKEN'] ?? getenv('GITHUB_TOKEN') ?: ''
12
+ ];
13
+
14
+ function testGitHubAPI($url, $token, $method = 'GET', $data = null) {
15
+ $ch = curl_init();
16
+ curl_setopt($ch, CURLOPT_URL, $url);
17
+ curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
18
+ curl_setopt($ch, CURLOPT_CUSTOMREQUEST, $method);
19
+ curl_setopt($ch, CURLOPT_TIMEOUT, 15);
20
+ curl_setopt($ch, CURLOPT_HTTPHEADER, [
21
+ 'Authorization: token ' . $token,
22
+ 'User-Agent: VvvebJs-TokenTest/1.0',
23
+ 'Accept: application/vnd.github.v3+json',
24
+ 'Content-Type: application/json'
25
+ ]);
26
+
27
+ if ($data) {
28
+ curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($data));
29
+ }
30
+
31
+ $response = curl_exec($ch);
32
+ $httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
33
+ $error = curl_error($ch);
34
+ curl_close($ch);
35
+
36
+ return [
37
+ 'success' => $httpCode >= 200 && $httpCode < 300,
38
+ 'code' => $httpCode,
39
+ 'response' => $response,
40
+ 'error' => $error
41
+ ];
42
+ }
43
+
44
+ $results = [];
45
+
46
+ if ($_POST['test'] ?? false) {
47
+ // 测试 1: Token 有效性
48
+ $results['token'] = testGitHubAPI('https://api.github.com/user', $config['token']);
49
+
50
+ // 测试 2: 仓库访问
51
+ $repoUrl = "https://api.github.com/repos/{$config['owner']}/{$config['repo']}";
52
+ $results['repo'] = testGitHubAPI($repoUrl, $config['token']);
53
+
54
+ // 测试 3: 分支检查
55
+ $branchUrl = "https://api.github.com/repos/{$config['owner']}/{$config['repo']}/branches/{$config['branch']}";
56
+ $results['branch'] = testGitHubAPI($branchUrl, $config['token']);
57
+
58
+ // 测试 4: 写入权限测试
59
+ $testFile = 'token-test-' . date('Y-m-d-H-i-s') . '.html';
60
+ $testContent = '<!DOCTYPE html><html><head><title>Token Test</title></head><body><h1>GitHub Token 测试</h1><p>创建时间: ' . date('Y-m-d H:i:s') . '</p></body></html>';
61
+ $createUrl = "https://api.github.com/repos/{$config['owner']}/{$config['repo']}/contents/{$config['path']}{$testFile}";
62
+
63
+ $results['write'] = testGitHubAPI($createUrl, $config['token'], 'PUT', [
64
+ 'message' => 'VvvebJs Token 测试文件',
65
+ 'content' => base64_encode($testContent),
66
+ 'branch' => $config['branch']
67
+ ]);
68
+ }
69
+ ?>
70
+
71
+ <!DOCTYPE html>
72
+ <html lang="en">
73
+ <head>
74
+ <meta charset="utf-8">
75
+ <meta name="viewport" content="width=device-width, initial-scale=1">
76
+ <title>当前 GitHub Token 测试</title>
77
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
78
+ </head>
79
+ <body>
80
+ <div class="container mt-5">
81
+ <div class="row">
82
+ <div class="col-md-8 mx-auto">
83
+ <h1 class="mb-4">🔑 当前 GitHub Token 配置测试</h1>
84
+
85
+ <!-- 配置信息 -->
86
+ <div class="card mb-4">
87
+ <div class="card-header bg-info text-white">
88
+ <h3 class="mb-0">📋 从截图推断的配置</h3>
89
+ </div>
90
+ <div class="card-body">
91
+ <div class="row">
92
+ <div class="col-md-6">
93
+ <p><strong>GitHub Owner:</strong> <code><?= htmlspecialchars($config['owner']) ?></code></p>
94
+ <p><strong>Repository:</strong> <code><?= htmlspecialchars($config['repo']) ?></code></p>
95
+ <p><strong>Token 状态:</strong> <?= !empty($config['token']) ? '✅ 已配置' : '❌ 未找到' ?></p>
96
+ </div>
97
+ <div class="col-md-6">
98
+ <p><strong>Branch:</strong> <code><?= htmlspecialchars($config['branch']) ?></code></p>
99
+ <p><strong>Path:</strong> <code><?= htmlspecialchars($config['path']) ?></code></p>
100
+ <p><strong>完整 URL:</strong><br><small><code>https://github.com/<?= htmlspecialchars($config['owner']) ?>/<?= htmlspecialchars($config['repo']) ?></code></small></p>
101
+ </div>
102
+ </div>
103
+ </div>
104
+ </div>
105
+
106
+ <?php if (!empty($config['token'])): ?>
107
+ <!-- 测试按钮 -->
108
+ <div class="card mb-4">
109
+ <div class="card-body text-center">
110
+ <form method="POST">
111
+ <button type="submit" name="test" value="1" class="btn btn-primary btn-lg">
112
+ 🧪 测试 Token 权限
113
+ </button>
114
+ </form>
115
+ </div>
116
+ </div>
117
+
118
+ <?php if (!empty($results)): ?>
119
+ <!-- 测试结果 -->
120
+ <div class="card mb-4">
121
+ <div class="card-header">
122
+ <h3>🔬 测试结果</h3>
123
+ </div>
124
+ <div class="card-body">
125
+
126
+ <!-- Token 测试 -->
127
+ <div class="mb-4">
128
+ <h5>1. Token 验证</h5>
129
+ <?php $test = $results['token']; ?>
130
+ <div class="alert alert-<?= $test['success'] ? 'success' : 'danger' ?>">
131
+ <strong>结果:</strong> <?= $test['success'] ? '✅ Token 有效' : '❌ Token 无效' ?> (HTTP <?= $test['code'] ?>)
132
+
133
+ <?php if ($test['success'] && $test['response']): ?>
134
+ <?php $user = json_decode($test['response'], true); ?>
135
+ <br><strong>当前用户:</strong> <?= htmlspecialchars($user['login'] ?? 'Unknown') ?>
136
+ <br><strong>用户名:</strong> <?= htmlspecialchars($user['name'] ?? 'N/A') ?>
137
+ <br><strong>用户类型:</strong> <?= htmlspecialchars($user['type'] ?? 'N/A') ?>
138
+ <?php endif; ?>
139
+ </div>
140
+ </div>
141
+
142
+ <!-- 仓库测试 -->
143
+ <div class="mb-4">
144
+ <h5>2. 仓库访问测试</h5>
145
+ <?php $test = $results['repo']; ?>
146
+ <div class="alert alert-<?= $test['success'] ? 'success' : 'danger' ?>">
147
+ <strong>结果:</strong> <?= $test['success'] ? '✅ 仓库可访问' : '❌ 仓库无法访问' ?> (HTTP <?= $test['code'] ?>)
148
+
149
+ <?php if ($test['success'] && $test['response']): ?>
150
+ <?php $repo = json_decode($test['response'], true); ?>
151
+ <br><strong>仓库全名:</strong> <?= htmlspecialchars($repo['full_name'] ?? 'Unknown') ?>
152
+ <br><strong>私有仓库:</strong> <?= ($repo['private'] ?? false) ? '是' : '否' ?>
153
+ <br><strong>默认分支:</strong> <?= htmlspecialchars($repo['default_branch'] ?? 'Unknown') ?>
154
+
155
+ <?php if (isset($repo['permissions'])): ?>
156
+ <br><strong>权限:</strong>
157
+ - Admin: <?= $repo['permissions']['admin'] ? '✅' : '❌' ?>
158
+ - Push: <?= $repo['permissions']['push'] ? '✅' : '❌' ?>
159
+ - Pull: <?= $repo['permissions']['pull'] ? '✅' : '❌' ?>
160
+ <?php endif; ?>
161
+ <?php endif; ?>
162
+ </div>
163
+ </div>
164
+
165
+ <!-- 分支测试 -->
166
+ <div class="mb-4">
167
+ <h5>3. 分支检查</h5>
168
+ <?php $test = $results['branch']; ?>
169
+ <div class="alert alert-<?= $test['success'] ? 'success' : 'warning' ?>">
170
+ <strong>结果:</strong> <?= $test['success'] ? '✅ 分支存在' : '⚠️ 分支问题' ?> (HTTP <?= $test['code'] ?>)
171
+
172
+ <?php if ($test['success'] && $test['response']): ?>
173
+ <?php $branch = json_decode($test['response'], true); ?>
174
+ <br><strong>分支名:</strong> <?= htmlspecialchars($branch['name'] ?? 'Unknown') ?>
175
+ <br><strong>最新提交:</strong> <?= htmlspecialchars(substr($branch['commit']['sha'] ?? '', 0, 8)) ?>
176
+ <?php elseif ($test['code'] == 404): ?>
177
+ <br><strong>提示:</strong> 分支 "<?= $config['branch'] ?>" 不存在。可能需要使用 "master" 分支。
178
+ <?php endif; ?>
179
+ </div>
180
+ </div>
181
+
182
+ <!-- 写入测试 -->
183
+ <div class="mb-4">
184
+ <h5>4. 文件写入权限测试</h5>
185
+ <?php $test = $results['write']; ?>
186
+ <div class="alert alert-<?= $test['success'] ? 'success' : 'danger' ?>">
187
+ <strong>结果:</strong> <?= $test['success'] ? '✅ 写入成功' : '❌ 写入失败' ?> (HTTP <?= $test['code'] ?>)
188
+
189
+ <?php if ($test['success']): ?>
190
+ <br><strong>🎉 恭喜！Token 配置完全正确，可以正常保存文件到 GitHub。</strong>
191
+ <br>您可以开始使用 VvvebJs 编辑器了！
192
+ <?php else: ?>
193
+ <br><strong>错误详情:</strong>
194
+ <pre style="font-size: 12px; max-height: 200px; overflow-y: auto;"><?= htmlspecialchars($test['response']) ?></pre>
195
+ <?php endif; ?>
196
+ </div>
197
+ </div>
198
+
199
+ </div>
200
+ </div>
201
+
202
+ <!-- 建议配置 -->
203
+ <div class="card">
204
+ <div class="card-header">
205
+ <h3>⚙️ 推荐的环境变量配置</h3>
206
+ </div>
207
+ <div class="card-body">
208
+ <p>在您的 Hugging Face Space Settings 中设置以下环境变量：</p>
209
+ <div class="bg-light p-3 rounded">
210
+ <code>GITHUB_TOKEN=your_token_here</code><br>
211
+ <code>GITHUB_OWNER=<?= htmlspecialchars($config['owner']) ?></code><br>
212
+ <code>GITHUB_REPO=<?= htmlspecialchars($config['repo']) ?></code><br>
213
+ <code>GITHUB_BRANCH=<?= $results['branch']['success'] ? $config['branch'] : 'master' ?></code><br>
214
+ <code>GITHUB_PATH=<?= htmlspecialchars($config['path']) ?></code><br>
215
+ <code>STORAGE_TYPE=github</code><br>
216
+ </div>
217
+
218
+ <?php if (!$results['branch']['success'] && $results['branch']['code'] == 404): ?>
219
+ <div class="alert alert-warning mt-3">
220
+ <strong>⚠️ 注意:</strong> 检测到分支 "main" 不存在，建议使用 "master" 分支。
221
+ </div>
222
+ <?php endif; ?>
223
+ </div>
224
+ </div>
225
+
226
+ <?php endif; ?>
227
+
228
+ <?php else: ?>
229
+ <!-- Token 未配置 -->
230
+ <div class="alert alert-danger">
231
+ <h5>❌ GitHub Token 未配置</h5>
232
+ <p>请在环境变量中设置 <code>GITHUB_TOKEN</code>。</p>
233
+ <p>Token 应该是您在 GitHub 截图中创建的那个。</p>
234
+ </div>
235
+ <?php endif; ?>
236
+
237
+ <!-- 导航 -->
238
+ <div class="text-center mt-4">
239
+ <a href="config.php" class="btn btn-secondary me-2">🔙 返回配置</a>
240
+ <a href="github-token-helper.html" class="btn btn-info me-2">📖 Token 指南</a>
241
+ <a href="editor.html" class="btn btn-primary">🎨 打开编辑器</a>
242
+ </div>
243
+ </div>
244
+ </div>
245
+ </div>
246
+ </body>
247
+ </html>