修改下载页面渲染

2025-11-24 18:59:19 +08:00
parent 51cfd5cf21
commit 65d4d458d0
10 changed files with 2328 additions and 111 deletions
--- a/DOWNLOAD_CONFIG_GUIDE.md
+++ b/DOWNLOAD_CONFIG_GUIDE.md
@@ -0,0 +1,467 @@
+# 下载配置功能实现文档
+
+## 📋 功能概述
+
+实现了灵活的下载配置系统，允许用户选择下载本站资源、所有资源或自定义资源。
+
+---
+
+## 🎯 配置选项
+
+### 1. **下载模式 (Mode)**
+
+```typescript
+type DownloadMode = 'same-domain' | 'all-resources' | 'custom'
+```
+
+#### same-domain（默认）
+- ✅ 只下载同域名资源
+- ✅ 外部CDN保持原链接
+- ✅ 文件小，下载快
+- ⚠️ 需要网络才能完整浏览
+
+#### all-resources
+- ✅ 下载所有资源（包括外部CDN）
+- ✅ 完全离线可用
+- ⚠️ 文件大，下载慢
+- ⚠️ 可能违反CDN使用条款
+
+#### custom
+- ✅ 自定义下载规则
+- ✅ 指定特定域名下载
+- ✅ 平衡体积和可用性
+
+---
+
+## 🔧 API 使用
+
+### Go 后端
+
+```go
+// 获取默认配置
+options := types.DefaultDownloadOptions()
+
+// 自定义配置
+options := types.DownloadOptions{
+    Mode: types.DownloadModeCustom,
+    CustomDomains: []string{
+        "cdn.example.com",
+        "static.example.com",
+    },
+    SkipLargeFiles: true,
+    MaxFileSize: 10, // MB
+    DownloadExternalCSS: true,
+    DownloadExternalJS: true,
+    DownloadExternalImages: false,
+    DownloadExternalVideos: false,
+}
+
+// 使用配置下载
+App.DownloadSiteWithOptions(uri, resources, options)
+```
+
+### TypeScript 前端
+
+```typescript
+interface DownloadOptions {
+  mode: 'same-domain' | 'all-resources' | 'custom'
+  customDomains: string[]
+  skipLargeFiles: boolean
+  maxFileSize: number
+  downloadExternalCSS: boolean
+  downloadExternalJS: boolean
+  downloadExternalImages: boolean
+  downloadExternalVideos: boolean
+}
+
+// 调用后端API
+const options: DownloadOptions = {
+  mode: 'custom',
+  customDomains: ['cdn.jsdelivr.net'],
+  skipLargeFiles: true,
+  maxFileSize: 10,
+  downloadExternalCSS: true,
+  downloadExternalJS: true,
+  downloadExternalImages: false,
+  downloadExternalVideos: false,
+}
+
+await App.DownloadSiteWithOptions(url, resources, options)
+```
+
+---
+
+## 🎨 前端UI示例
+
+### Vue组件代码
+
+```vue
+<template>
+  <div class="download-config">
+    <!-- 下载模式选择 -->
+    <a-card title="下载设置" class="config-card">
+      <a-form-item label="下载模式">
+        <a-radio-group v-model:value="downloadConfig.mode">
+          <a-radio value="same-domain">
+            <div class="radio-content">
+              <div class="radio-title">仅本站资源</div>
+              <div class="radio-desc">只下载同域名资源，体积小速度快</div>
+            </div>
+          </a-radio>
+          <a-radio value="all-resources">
+            <div class="radio-content">
+              <div class="radio-title">全部资源</div>
+              <div class="radio-desc">下载所有资源包括CDN，完全离线可用</div>
+            </div>
+          </a-radio>
+          <a-radio value="custom">
+            <div class="radio-content">
+              <div class="radio-title">自定义</div>
+              <div class="radio-desc">指定特定域名进行下载</div>
+            </div>
+          </a-radio>
+        </a-radio-group>
+      </a-form-item>
+
+      <!-- 自定义域名（当mode=custom时显示） -->
+      <a-form-item 
+        v-if="downloadConfig.mode === 'custom'" 
+        label="自定义域名"
+      >
+        <a-select
+          v-model:value="downloadConfig.customDomains"
+          mode="tags"
+          placeholder="输入域名后按回车，如：cdn.example.com"
+          :options="[]"
+        />
+        <div class="hint-text">
+          <info-circle-outlined />
+          只下载指定域名的资源，一行一个
+        </div>
+      </a-form-item>
+
+      <!-- 资源类型过滤 -->
+      <a-form-item 
+        v-if="downloadConfig.mode !== 'same-domain'" 
+        label="外部资源类型"
+      >
+        <a-checkbox-group v-model:value="selectedResourceTypes">
+          <a-checkbox value="css">
+            <file-text-outlined /> CSS样式表
+          </a-checkbox>
+          <a-checkbox value="js">
+            <code-outlined /> JavaScript脚本
+          </a-checkbox>
+          <a-checkbox value="images">
+            <picture-outlined /> 图片资源
+          </a-checkbox>
+          <a-checkbox value="videos">
+            <video-camera-outlined /> 视频资源
+          </a-checkbox>
+        </a-checkbox-group>
+      </a-form-item>
+
+      <!-- 文件大小限制 -->
+      <a-form-item label="文件大小限制">
+        <a-switch 
+          v-model:checked="downloadConfig.skipLargeFiles" 
+          checked-children="启用" 
+          un-checked-children="禁用"
+        />
+        <a-input-number
+          v-if="downloadConfig.skipLargeFiles"
+          v-model:value="downloadConfig.maxFileSize"
+          :min="1"
+          :max="100"
+          addon-after="MB"
+          class="size-input"
+        />
+        <div class="hint-text">
+          <info-circle-outlined />
+          跳过超过指定大小的文件，节省磁盘空间
+        </div>
+      </a-form-item>
+
+      <!-- 预估信息 -->
+      <a-alert 
+        v-if="estimatedSize" 
+        type="info" 
+        class="estimate-alert"
+      >
+        <template #message>
+          <div class="estimate-info">
+            <database-outlined />
+            预估下载大小: {{ estimatedSize }}
+          </div>
+          <div class="estimate-info">
+            <clock-circle-outlined />
+            预估下载时间: {{ estimatedTime }}
+          </div>
+        </template>
+      </a-alert>
+    </a-card>
+
+    <!-- 操作按钮 -->
+    <div class="action-buttons">
+      <a-button @click="resetConfig">重置配置</a-button>
+      <a-button type="primary" @click="startDownload">
+        <download-outlined />
+        开始下载
+      </a-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import { message } from 'ant-design-vue'
+import { App } from '@/bindings/go-site-clone'
+
+interface DownloadConfig {
+  mode: 'same-domain' | 'all-resources' | 'custom'
+  customDomains: string[]
+  skipLargeFiles: boolean
+  maxFileSize: number
+  downloadExternalCSS: boolean
+  downloadExternalJS: boolean
+  downloadExternalImages: boolean
+  downloadExternalVideos: boolean
+}
+
+const downloadConfig = ref<DownloadConfig>({
+  mode: 'same-domain',
+  customDomains: [],
+  skipLargeFiles: true,
+  maxFileSize: 10,
+  downloadExternalCSS: false,
+  downloadExternalJS: false,
+  downloadExternalImages: false,
+  downloadExternalVideos: false,
+})
+
+const selectedResourceTypes = ref<string[]>([])
+
+// 监听资源类型选择变化
+watch(selectedResourceTypes, (types) => {
+  downloadConfig.value.downloadExternalCSS = types.includes('css')
+  downloadConfig.value.downloadExternalJS = types.includes('js')
+  downloadConfig.value.downloadExternalImages = types.includes('images')
+  downloadConfig.value.downloadExternalVideos = types.includes('videos')
+})
+
+// 预估下载大小
+const estimatedSize = computed(() => {
+  // 根据资源数量和配置估算
+  return '约 50 MB'
+})
+
+// 预估下载时间
+const estimatedTime = computed(() => {
+  // 根据网速和文件数量估算
+  return '约 2-5 分钟'
+})
+
+// 重置配置
+const resetConfig = () => {
+  downloadConfig.value = {
+    mode: 'same-domain',
+    customDomains: [],
+    skipLargeFiles: true,
+    maxFileSize: 10,
+    downloadExternalCSS: false,
+    downloadExternalJS: false,
+    downloadExternalImages: false,
+    downloadExternalVideos: false,
+  }
+  selectedResourceTypes.value = []
+  message.success('配置已重置')
+}
+
+// 开始下载
+const startDownload = async () => {
+  try {
+    message.loading('准备下载...', 0)
+    await App.DownloadSiteWithOptions(
+      currentUrl.value,
+      resources.value,
+      downloadConfig.value
+    )
+    message.success('下载完成！')
+  } catch (error) {
+    message.error('下载失败：' + error)
+  }
+}
+</script>
+
+<style scoped>
+.download-config {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.config-card {
+  margin-bottom: 20px;
+}
+
+.radio-content {
+  padding: 8px 0;
+}
+
+.radio-title {
+  font-weight: 600;
+  font-size: 14px;
+  margin-bottom: 4px;
+}
+
+.radio-desc {
+  font-size: 12px;
+  color: #888;
+}
+
+.hint-text {
+  margin-top: 8px;
+  font-size: 12px;
+  color: #666;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.size-input {
+  margin-left: 12px;
+  width: 120px;
+}
+
+.estimate-alert {
+  margin-top: 16px;
+}
+
+.estimate-info {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 4px 0;
+}
+
+.action-buttons {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+}
+</style>
+```
+
+---
+
+## 📊 配置场景示例
+
+### 场景1：快速备份（默认）
+```json
+{
+  "mode": "same-domain",
+  "skipLargeFiles": true,
+  "maxFileSize": 10
+}
+```
+**适用**：快速备份网站，保持文件结构  
+**优点**：快速、文件小  
+**缺点**：需要网络才能查看外部资源
+
+---
+
+### 场景2：完全离线
+```json
+{
+  "mode": "all-resources",
+  "downloadExternalCSS": true,
+  "downloadExternalJS": true,
+  "downloadExternalImages": true,
+  "downloadExternalVideos": true,
+  "skipLargeFiles": true,
+  "maxFileSize": 50
+}
+```
+**适用**：需要完全离线浏览  
+**优点**：不依赖网络  
+**缺点**：文件大、下载慢
+
+---
+
+### 场景3：只下载常用CDN
+```json
+{
+  "mode": "custom",
+  "customDomains": [
+    "cdn.jsdelivr.net",
+    "unpkg.com",
+    "cdnjs.cloudflare.com"
+  ],
+  "downloadExternalCSS": true,
+  "downloadExternalJS": true,
+  "downloadExternalImages": false,
+  "downloadExternalVideos": false,
+  "skipLargeFiles": true,
+  "maxFileSize": 10
+}
+```
+**适用**：平衡体积和可用性  
+**优点**：关键资源离线可用  
+**缺点**：部分资源仍需网络
+
+---
+
+## ⚠️ 注意事项
+
+### 1. **法律合规**
+- 下载CDN资源可能违反服务条款
+- 仅用于个人学习和备份
+- 不得用于商业用途
+
+### 2. **性能影响**
+- 下载所有资源会显著增加时间
+- 建议设置合理的文件大小限制
+- 大型网站可能需要数小时
+
+### 3. **存储空间**
+- 全资源模式可能需要数GB空间
+- 定期清理不需要的下载
+- 建议保留至少50%可用空间
+
+### 4. **网络礼仪**
+- 避免过于频繁的请求
+- 尊重网站的robots.txt
+- 不要对同一网站重复下载
+
+---
+
+## 🚀 后续优化
+
+1. **智能预估**
+   - 根据资源列表预估下载大小和时间
+   - 提供取消和暂停功能
+
+2. **下载队列**
+   - 支持批量下载多个网站
+   - 队列管理和优先级
+
+3. **增量下载**
+   - 检测已下载的文件
+   - 只下载新增或修改的资源
+
+4. **压缩存储**
+   - 下载后自动压缩
+   - 节省磁盘空间
+
+---
+
+## 📝 总结
+
+下载配置功能提供了灵活的资源管理：
+
+✅ **三种模式** - 本站/全部/自定义  
+✅ **类型过滤** - 选择性下载资源类型  
+✅ **大小限制** - 跳过超大文件  
+✅ **域名白名单** - 精确控制下载范围  
+✅ **用户友好** - 直观的配置界面  
+
+现在用户可以根据不同需求选择最合适的下载策略！