Skip to content

Commit 9682edc

Browse files
No-GithubNo-Github
committed
feat(模板仓库): 新增模板 README 查看功能
在模板仓库页面添加查看 README 功能，支持中英文切换。主要变更包括： 1. 后端新增 FetchTemplateReadme 方法从 GitHub 获取 README 文件 2. 前端实现轻量级 Markdown 解析器和模态框展示 3. 新增 i18n 翻译项 4. 更新版本号至 v3.0.7
1 parent 297538b commit 9682edc

File tree

10 files changed

+410
-29
lines changed

10 files changed

+410
-29
lines changed

‎app_templates_registry.go‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -239,6 +239,38 @@ func (a *App) FetchRegistryTemplates(registryURL string) ([]RegistryTemplate, er
239239
return result, nil
240240
}
241241

242+
func (a *App) FetchTemplateReadme(templateName string, lang string) (string, error) {
243+
readmeFiles := []string{}
244+
if lang == "en" {
245+
readmeFiles = []string{"README_EN.md", "README.md"}
246+
} else {
247+
readmeFiles = []string{"README.md", "README_EN.md"}
248+
}
249+
250+
var lastErr error
251+
for _, readmeFile := range readmeFiles {
252+
readmeURL := fmt.Sprintf("https://raw.githubusercontent.com/wgpsec/redc-template/master/%s/%s", templateName, readmeFile)
253+
resp, err := http.Get(readmeURL)
254+
if err != nil {
255+
lastErr = err
256+
continue
257+
}
258+
defer resp.Body.Close()
259+
260+
if resp.StatusCode == http.StatusOK {
261+
content, err := io.ReadAll(resp.Body)
262+
if err != nil {
263+
lastErr = err
264+
continue
265+
}
266+
return string(content), nil
267+
}
268+
lastErr = fmt.Errorf("HTTP %d", resp.StatusCode)
269+
}
270+
271+
return "", fmt.Errorf("failed to fetch README: %v", lastErr)
272+
}
273+
242274
func (a *App) RemoveTemplate(templateName string) error {
243275
a.emitLog(i18n.Tf("app_deleting_template", templateName))
244276

‎doc/design/3.22-template-readme-display.md‎

Lines changed: 192 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,192 @@
1+
# 3.22 模板仓库 README 展示功能
2+
3+
**涉及版本**: v3.0.7
4+
5+
**创建日期**: 2026-03-05
6+
7+
**功能描述**: 在模板仓库页面，用户可以点击模板卡片的"查看"按钮，以模态框形式查看对应模板的 README 说明文档。支持中英文切换。
8+
9+
---
10+
11+
## 1. 需求背景
12+
13+
用户在模板仓库页面浏览模板时，需要了解每个模板的具体用途和使用方法。原有的设计只显示模板的基本信息（名称、描述、作者），缺少详细的使用说明文档。通过在模板仓库页面添加 README 展示功能，用户可以在不离开页面的情况下快速查看模板的详细使用说明。
14+
15+
---
16+
17+
## 2. 技术方案
18+
19+
### 2.1 整体架构
20+
21+
```
22+
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────────────────┐
23+
│ Frontend │ │ Backend (Go) │ │ 远程仓库 │
24+
│ Registry.svelte│────▶│ FetchTemplate │────▶│ GitHub wgpsec/redc- │
25+
│ "查看"按钮 │ │ Readme() │ │ template │
26+
│ 模态框 │ │ │ │ /{template}/README.md │
27+
└─────────────────┘ └─────────────────┘ └─────────────────────────────┘
28+
```
29+
30+
### 2.2 后端实现
31+
32+
**文件**: `app_templates_registry.go`
33+
34+
**新增函数**: `FetchTemplateReadme(templateName string, lang string) (string, error)`
35+
36+
```go
37+
func (a *App) FetchTemplateReadme(templateName string, lang string) (string, error) {
38+
// 语言优先级: 英文环境优先 README_EN.md，中文环境优先 README.md
39+
readmeFiles := []string{}
40+
if lang == "en" {
41+
readmeFiles = []string{"README_EN.md", "README.md"}
42+
} else {
43+
readmeFiles = []string{"README.md", "README_EN.md"}
44+
}
45+
46+
// 从 GitHub 仓库获取 README
47+
for _, readmeFile := range readmeFiles {
48+
readmeURL := fmt.Sprintf("https://raw.githubusercontent.com/wgpsec/redc-template/master/%s/%s", templateName, readmeFile)
49+
// HTTP 请求获取内容
50+
// ...
51+
}
52+
}
53+
```
54+
55+
**关键设计点**:
56+
- README 文件存放在 GitHub 仓库 `wgpsec/redc-template`
57+
- 分支使用 `master`（非 `main`）
58+
- URL 格式: `https://raw.githubusercontent.com/wgpsec/redc-template/master/{template_path}/README.md`
59+
- 语言fallback机制: 英文环境先找 `README_EN.md`，找不到则用 `README.md`
60+
61+
### 2.3 前端实现
62+
63+
**文件**: `frontend/src/components/Registry/Registry.svelte`
64+
65+
**新增状态**:
66+
```javascript
67+
let readmeModal = $state({
68+
show: false,
69+
content: '',
70+
html: '',
71+
loading: false,
72+
templateName: ''
73+
});
74+
```
75+
76+
**新增函数**:
77+
1. `handleShowReadme(templateName)` - 点击"查看"按钮时触发
78+
2. `closeReadmeModal()` - 关闭模态框
79+
3. `parseMarkdown(md)` - 自定义 Markdown 解析器
80+
81+
**Markdown 解析器设计**:
82+
83+
由于未使用第三方库，实现了轻量级的 Markdown 解析器，支持:
84+
85+
| 语法 | 示例 | 渲染结果 |
86+
|------|------|----------|
87+
| 代码块 | ` ```code``` ` | 深色背景 + 圆角 + 浅色文字 |
88+
| 行内代码 | `` `code` `` | 粉色文字 + 灰色背景 |
89+
| 标题 | `# H1` `## H2` | 不同大小 + 间距 |
90+
| 链接 | `[text](url)` | 蓝色 + 悬停下划线 |
91+
| 列表 | `1. item` `- item` | 适当缩进 + 间距 |
92+
| 粗体/斜体 | `**bold**` `*italic*` | 标准 HTML 标签 |
93+
| 引用 | `> quote` | 左侧边框装饰 |
94+
95+
**关键处理逻辑**:
96+
97+
1. **代码块保护**: 先用占位符替换代码块 → 转义 HTML → 恢复代码块 → 转义代码块内特殊字符
98+
2. **列表处理**: 移除列表项之间的 `<br>` 标签，避免间距过大
99+
100+
### 2.4 i18n 翻译
101+
102+
**文件**: `frontend/src/lib/i18n.js`
103+
104+
新增翻译 key:
105+
106+
| Key | 中文 | 英文 |
107+
|-----|------|------|
108+
| viewReadme | 查看 | View |
109+
| readme | 使用说明 | Usage |
110+
| close | 关闭 | Close |
111+
112+
---
113+
114+
## 3. 数据流
115+
116+
### 3.1 用户点击"查看"按钮
117+
118+
```
119+
用户点击"查看"按钮
120+
↓
121+
handleShowReadme(templateName)
122+
↓
123+
调用 GetLanguage() 获取当前语言
124+
↓
125+
调用 FetchTemplateReadme(templateName, lang)
126+
↓
127+
后端从 GitHub 获取 README.md 或 README_EN.md
128+
↓
129+
前端 parseMarkdown() 转换为 HTML
130+
↓
131+
更新 readmeModal 状态
132+
↓
133+
模态框显示渲染后的 README
134+
```
135+
136+
### 3.2 语言判断逻辑
137+
138+
```
139+
当前语言 = "en"
140+
↓
141+
优先请求 README_EN.md
142+
↓
143+
如果 404 → fallback 到 README.md
144+
↓
145+
返回内容
146+
147+
当前语言 = "zh" (或其他)
148+
↓
149+
优先请求 README.md
150+
↓
151+
如果 404 → fallback 到 README_EN.md
152+
↓
153+
返回内容
154+
```
155+
156+
---
157+
158+
## 4. 文件变更清单
159+
160+
| 文件路径 | 变更类型 | 描述 |
161+
|---------|---------|------|
162+
| `mod/flag.go` | 修改 | 版本号 v3.0.6 → v3.0.7 |
163+
| `app_templates_registry.go` | 新增 | FetchTemplateReadme 函数 |
164+
| `frontend/src/components/Registry/Registry.svelte` | 新增 | 模态框 + Markdown 解析器 |
165+
| `frontend/src/lib/i18n.js` | 新增 | viewReadme/readme 翻译 |
166+
| `frontend/public/changelog.json` | 新增 | 3.0.7 更新日志 |
167+
| `frontend/src/components/Sidebar/Sidebar.svelte` | 修改 | 默认版本号显示 |
168+
| `frontend/src/components/About/About.svelte` | 修改 | 默认版本号显示 |
169+
170+
---
171+
172+
## 5. 模板仓库 README 文件要求
173+
174+
为确保功能正常工作，模板创作者需要:
175+
176+
1. **中文 README**: `README.md` - 必须
177+
2. **英文 README**: `README_EN.md` - 可选（推荐）
178+
179+
**文件位置**: `https://github.com/wgpsec/redc-template/tree/master/{provider}/{template_name}/`
180+
181+
**示例**:
182+
- 阿里云 ECS: `aliyun/ecs/README.md` / `aliyun/ecs/README_EN.md`
183+
- AWS EC2: `aws/ec2/README.md` / `aws/ec2/README_EN.md`
184+
185+
---
186+
187+
## 6. 相关链接
188+
189+
- GitHub 仓库: https://github.com/wgpsec/redc-template
190+
- 后端代码: `app_templates_registry.go`
191+
- 前端组件: `Registry.svelte`
192+
- i18n 文件: `frontend/src/lib/i18n.js`

‎frontend/public/changelog.json‎

Lines changed: 11 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
11
{
22
"changelog": [
3+
{
4+
"version": "3.0.7",
5+
"date": "2026-03-05",
6+
"changes": [
7+
"新增：模板仓库页面支持查看 README 说明文档"
8+
]
9+
},
310
{
411
"version": "3.0.6",
512
"date": "2026-03-02",
@@ -8,27 +15,17 @@
815
"新增：首次启动自动检测系统语言",
916
"新增：AI 回复语言跟随界面语言",
1017
"新增：初次使用欢迎弹框功能",
11-
"新增：后端 i18n 国际化支持（CLI + GUI 共用）",
12-
"新增：CLI 命令描述、Flag 说明、运行时消息中英文双语",
13-
"新增：系统通知消息中英文双语",
14-
"新增：CLI 通过环境变量 REDC_LANG 切换语言",
15-
"新增：GUI 切换语言时后端输出同步切换"
18+
"新增：后端 i18n 国际化支持（CLI + GUI 共用）"
1619
]
1720
},
1821
{
1922
"version": "3.0.5",
2023
"date": "2025-02-28",
2124
"changes": [
2225
"优化：修复 GitHub Actions CI/CD 构建问题",
23-
"新增：预定义场景页面无模板时引导提示",
24-
"新增：专项模块页面无模板时引导提示",
25-
"新增：编排管理页面无模板时引导提示",
26-
"优化：UI/UX 交互体验，添加 cursor-pointer 指针提示",
27-
"优化：UI/UX 过渡动画，150-200ms 平滑效果",
28-
"优化：UI/UX 文字对比度，符合 WCAG 无障碍标准",
29-
"优化：Flat Design 设计风格，移除对话框阴影改用边框",
30-
"优化：Flat Design 设计风格，移除渐变改用纯色",
31-
"优化：Flat Design 设计风格，简化圆角半径",
26+
"新增：多页面无模板时引导提示",
27+
"优化：UI/UX 交互体验，过渡动画",
28+
"优化：Flat Design 设计风格",
3229
"新增：页面切换动画，淡入效果"
3330
]
3431
},
@@ -38,7 +35,6 @@
3835
"changes": [
3936
"新增：GUI 版本自动打包发布（macOS/Windows）",
4037
"新增：Azure 云厂商支持",
41-
"新增：Azure VM 预设场景",
4238
"新增：代理配置持久化保存",
4339
"新增：代理配置支持 AI/Vultr/GCP/Cloudflare/模板下载/远程仓库拉取等模块",
4440
"新增：SOCKS5 代理支持",

‎frontend/src/components/About/About.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
</div>
3939

4040
<div class="flex items-center gap-3 text-sm text-gray-600 mb-3">
41-
<span class="px-3 py-1 bg-gray-100 rounded-full font-medium">{version || 'v3.0.5'}</span>
41+
<span class="px-3 py-1 bg-gray-100 rounded-full font-medium">{version || 'v3.0.7'}</span>
4242
{#if updateStatus && updateStatus.checking}
4343
<svg class="w-4 h-4 animate-spin text-blue-500" fill="none" viewBox="0 0 24 24">
4444
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>

0 commit comments

Comments
 (0)