【新增】私有证书

2026-03-08 07:41:10 +08:00 · 2025-09-03 15:15:59 +08:00
parent efd052a297
commit 954cd1638d
442 changed files with 76787 additions and 7483 deletions
--- a/frontend/plugin/vite-plugin-path-random/example/batch-replace-demo.js
+++ b/frontend/plugin/vite-plugin-path-random/example/batch-replace-demo.js
@@ -0,0 +1,122 @@
+#!/usr/bin/env node
+
+/**
+ * 批量替换示例脚本
+ * 演示如何使用 vite-plugin-random-cache 的批量替换功能
+ */
+
+import { batchReplaceWithRandomCache, processBatchFiles } from '../src/index.js?v=175568710602885';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// 示例1: 基本批量替换功能
+console.log('🚀 示例1: 基本批量替换功能');
+console.log('=' .repeat(50));
+
+const exampleDir = path.join(__dirname);
+
+// 预览模式 - 查看哪些文件会被处理
+const previewResult = batchReplaceWithRandomCache(exampleDir, {
+  dryRun: true,
+  patterns: ['*.html', '*.js', '*.css'],
+  ignore: ['batch-replace-demo.js'], // 忽略当前脚本
+  enableLog: true
+});
+
+console.log('\n📊 预览结果:', previewResult);
+
+// 示例2: 实际执行替换（带备份）
+console.log('\n\n🔧 示例2: 实际执行替换（带备份）');
+console.log('=' .repeat(50));
+
+const replaceResult = batchReplaceWithRandomCache(exampleDir, {
+  patterns: ['*.html', '*.js', '*.css'],
+  ignore: ['batch-replace-demo.js'],
+  createBackup: true,
+  enableLog: true,
+  includeExternal: false,
+  customGenerator: (timestamp, randomStr) => {
+    // 自定义随机数生成器
+    return `v${timestamp.toString().slice(-6)}_${randomStr}`;
+  }
+});
+
+console.log('\n📊 替换结果:', replaceResult);
+
+// 示例3: 处理特定文件列表
+console.log('\n\n📝 示例3: 处理特定文件列表');
+console.log('=' .repeat(50));
+
+const specificFiles = [
+  path.join(__dirname, 'index.html'),
+  path.join(__dirname, 'js/app.js'),
+  path.join(__dirname, 'styles/main.css')
+];
+
+const fileListResult = batchReplaceWithRandomCache(specificFiles, {
+  createBackup: true,
+  enableLog: true,
+  includeExternal: true // 包含外部链接
+});
+
+console.log('\n📊 文件列表处理结果:', fileListResult);
+
+// 示例4: 使用增强的 processBatchFiles 函数
+console.log('\n\n⚡ 示例4: 使用增强的批量处理函数');
+console.log('=' .repeat(50));
+
+const enhancedResult = processBatchFiles(exampleDir, {
+  patterns: ['*.html'],
+  createBackup: true,
+  enableIntegrityCheck: true,
+  continueOnError: true,
+  maxRetries: 3,
+  enableLog: true
+});
+
+console.log('\n📊 增强处理结果:', enhancedResult);
+
+// 示例5: 错误处理和恢复演示
+console.log('\n\n🛡️  示例5: 错误处理演示');
+console.log('=' .repeat(50));
+
+// 尝试处理不存在的目录
+const errorResult = batchReplaceWithRandomCache('/path/that/does/not/exist', {
+  enableLog: true
+});
+
+console.log('\n📊 错误处理结果:', errorResult);
+
+// 输出使用说明
+console.log('\n\n📖 使用说明');
+console.log('=' .repeat(50));
+console.log(`
+主要功能:
+1. batchReplaceWithRandomCache() - 新的批量替换功能
+   - 支持目录或文件列表
+   - 自动备份和恢复
+   - 完整性检查
+   - 详细的统计信息
+
+2. processBatchFiles() - 增强的批量处理功能
+   - 向后兼容
+   - 增加了重试机制
+   - 更好的错误处理
+   - 详细的处理统计
+
+配置选项:
+- patterns: 文件匹配模式
+- ignore: 忽略的文件/目录
+- createBackup: 是否创建备份
+- enableLog: 是否启用日志
+- includeExternal: 是否处理外部链接
+- customGenerator: 自定义随机数生成器
+- dryRun: 预览模式
+- maxRetries: 最大重试次数
+- continueOnError: 遇到错误时是否继续
+`);
+
+console.log('\n✨ 演示完成！');
--- a/frontend/plugin/vite-plugin-path-random/example/index.html
+++ b/frontend/plugin/vite-plugin-path-random/example/index.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Random Cache Plugin 示例</title>
+    <link rel="stylesheet" href="./styles/main.css?v=1755687106028&v=1755687106028">
+    <link rel="stylesheet" href="./styles/theme.css?version=1.0&v=1755687106028&v=1755687106028">
+    <link rel="preload" href="./fonts/font.woff2" as="font" type="font/woff2" crossorigin>
+</head>
+<body>
+    <header class="header">
+        <h1>Random Cache Plugin 示例页面</h1>
+        <p>这个页面演示了插件如何为各种资源添加随机数参数</p>
+    </header>
+    
+    <main class="main">
+        <section class="demo-section">
+            <h2>功能演示</h2>
+            <ul>
+                <li>CSS 文件引用（带随机数参数）</li>
+                <li>JavaScript 文件引用（带随机数参数）</li>
+                <li>字体文件预加载（带随机数参数）</li>
+                <li>已有查询参数的文件（追加随机数参数）</li>
+            </ul>
+        </section>
+        
+        <section class="demo-section">
+            <h2>处理前后对比</h2>
+            <div class="comparison">
+                <div class="before">
+                    <h3>处理前</h3>
+                    <code>
+                        &lt;link rel="stylesheet" href="./styles/main.css"&gt;<br>
+                        &lt;script src="./js/app.js"&gt;&lt;/script&gt;
+                    </code>
+                </div>
+                <div class="after">
+                    <h3>处理后</h3>
+                    <code>
+                        &lt;link rel="stylesheet" href="./styles/main.css?v=1703123456789_abc123"&gt;<br>
+                        &lt;script src="./js/app.js?v=1703123456789_def456"&gt;&lt;/script&gt;
+                    </code>
+                </div>
+            </div>
+        </section>
+    </main>
+    
+    <footer class="footer">
+        <p>&copy; 2024 Random Cache Plugin Example</p>
+    </footer>
+    
+    <!-- 这些脚本引用也会被处理 -->
+    <script src="./js/utils.js?v=1755687106028&v=1755687106028"></script>
+    <script src="./js/app.js?v=1755687106028&v=1755687106028"></script>
+    
+    <!-- 外部CDN链接默认不会被处理 -->
+    <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
+</body>
+</html>
--- a/frontend/plugin/vite-plugin-path-random/example/js/app.js
+++ b/frontend/plugin/vite-plugin-path-random/example/js/app.js
@@ -0,0 +1,228 @@
+// 应用主文件 - 演示JS中的各种引用
+
+// ES6 模块导入
+import './utils.js?v=175568710602835';
+import './components/header.js?v=175568710602856';
+import '../styles/theme.css?v=175568710602889';
+
+// CommonJS 风格的引用（在某些环境中）
+// const config = require('./config.js?v=1755687106028');
+// require('./polyfills.js?v=1755687106028');
+
+// 动态导入
+const loadModule = async () => {
+    try {
+        const module = await import('./modules/feature.js');
+        return module.default;
+    } catch (error) {
+        console.error('模块加载失败:', error);
+    }
+};
+
+// 应用初始化
+class App {
+    constructor() {
+        this.init();
+    }
+    
+    init() {
+        console.log('🚀 Random Cache Plugin 示例应用已启动');
+        this.setupEventListeners();
+        this.loadDynamicContent();
+    }
+    
+    setupEventListeners() {
+        document.addEventListener('DOMContentLoaded', () => {
+            console.log('✅ DOM 内容已加载');
+            this.highlightProcessedFiles();
+        });
+        
+        // 添加按钮点击事件
+        const buttons = document.querySelectorAll('.btn');
+        buttons.forEach(btn => {
+            btn.addEventListener('click', this.handleButtonClick.bind(this));
+        });
+    }
+    
+    handleButtonClick(event) {
+        const button = event.target;
+        console.log('按钮被点击:', button.textContent);
+        
+        // 添加点击效果
+        button.style.transform = 'scale(0.95)';
+        setTimeout(() => {
+            button.style.transform = '';
+        }, 150);
+    }
+    
+    async loadDynamicContent() {
+        try {
+            // 模拟动态加载内容
+            const feature = await loadModule();
+            if (feature) {
+                console.log('✅ 动态模块加载成功');
+            }
+        } catch (error) {
+            console.error('❌ 动态内容加载失败:', error);
+        }
+    }
+    
+    highlightProcessedFiles() {
+        // 检查页面中的资源链接，高亮显示已处理的文件
+        const links = document.querySelectorAll('link[href], script[src]');
+        let processedCount = 0;
+        
+        links.forEach(link => {
+            const url = link.href || link.src;
+            if (url && url.includes('?v=')) {
+                processedCount++;
+                // 添加视觉标识
+                link.setAttribute('data-processed', 'true');
+            }
+        });
+        
+        console.log(`📊 检测到 ${processedCount} 个已处理的资源文件`);
+        
+        // 在页面上显示统计信息
+        this.displayStats(processedCount, links.length);
+    }
+    
+    displayStats(processed, total) {
+        const statsElement = document.createElement('div');
+        statsElement.className = 'stats-banner';
+        statsElement.innerHTML = `
+            <div class="stats-content">
+                <span class="stats-icon">📊</span>
+                <span class="stats-text">
+                    已处理 ${processed}/${total} 个资源文件
+                </span>
+                <button class="stats-close" onclick="this.parentElement.parentElement.remove()">
+                    ×
+                </button>
+            </div>
+        `;
+        
+        // 添加样式
+        const style = document.createElement('style');
+        style.textContent = `
+            .stats-banner {
+                position: fixed;
+                top: 20px;
+                right: 20px;
+                background: linear-gradient(45deg, #4CAF50, #45a049);
+                color: white;
+                padding: 0;
+                border-radius: 8px;
+                box-shadow: 0 4px 15px rgba(0,0,0,0.2);
+                z-index: 1000;
+                animation: slideIn 0.3s ease-out;
+            }
+            
+            .stats-content {
+                display: flex;
+                align-items: center;
+                padding: 12px 16px;
+                gap: 8px;
+            }
+            
+            .stats-icon {
+                font-size: 1.2em;
+            }
+            
+            .stats-text {
+                font-weight: 500;
+            }
+            
+            .stats-close {
+                background: none;
+                border: none;
+                color: white;
+                font-size: 1.5em;
+                cursor: pointer;
+                padding: 0;
+                margin-left: 8px;
+                width: 24px;
+                height: 24px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                border-radius: 50%;
+                transition: background-color 0.2s;
+            }
+            
+            .stats-close:hover {
+                background-color: rgba(255,255,255,0.2);
+            }
+            
+            @keyframes slideIn {
+                from {
+                    transform: translateX(100%);
+                    opacity: 0;
+                }
+                to {
+                    transform: translateX(0);
+                    opacity: 1;
+                }
+            }
+        `;
+        
+        document.head.appendChild(style);
+        document.body.appendChild(statsElement);
+        
+        // 5秒后自动隐藏
+        setTimeout(() => {
+            if (statsElement.parentElement) {
+                statsElement.style.animation = 'slideIn 0.3s ease-out reverse';
+                setTimeout(() => {
+                    statsElement.remove();
+                }, 300);
+            }
+        }, 5000);
+    }
+}
+
+// 工具函数
+const utils = {
+    // 格式化时间戳
+    formatTimestamp(timestamp) {
+        return new Date(timestamp).toLocaleString('zh-CN');
+    },
+    
+    // 提取随机数参数
+    extractRandomParam(url) {
+        const match = url.match(/[?&]v=([^&]+)/);
+        return match ? match[1] : null;
+    },
+    
+    // 检查是否为处理过的URL
+    isProcessedUrl(url) {
+        return /[?&]v=\d+_[a-z0-9]{6}/.test(url);
+    }
+};
+
+// 导出工具函数供其他模块使用
+window.AppUtils = utils;
+
+// 启动应用
+const app = new App();
+
+// 在控制台显示欢迎信息
+console.log(`
+%c🎉 Random Cache Plugin 示例应用
+%c这个应用演示了插件如何为各种资源添加随机数参数来解决缓存问题。
+
+%c功能特性：
+• 自动为 CSS/JS 文件添加随机数参数
+• 支持各种引用模式（HTML标签、CSS @import、JS import等）
+• 保持原有文件格式和功能不变
+• 提供详细的处理日志
+
+%c打开开发者工具的网络面板，刷新页面查看带有随机数参数的请求！
+`, 
+'color: #4CAF50; font-size: 16px; font-weight: bold;',
+'color: #666; font-size: 14px;',
+'color: #2196F3; font-size: 14px;',
+'color: #FF9800; font-size: 14px; font-weight: bold;'
+);
+
+export default app;
--- a/frontend/plugin/vite-plugin-path-random/example/simple-usage.js
+++ b/frontend/plugin/vite-plugin-path-random/example/simple-usage.js
@@ -0,0 +1,44 @@
+/**
+ * 简单使用示例
+ * 展示 vite-plugin-random-cache 的基本用法
+ */
+
+import { batchReplaceWithRandomCache } from '../src/index.js?v=175568710602856';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// 基本用法：处理当前目录下的所有HTML、JS、CSS文件
+const result = batchReplaceWithRandomCache(__dirname, {
+  // 文件匹配模式
+  patterns: ['*.html', '*.js', '*.css'],
+  
+  // 忽略的文件
+  ignore: ['simple-usage.js', 'batch-replace-demo.js'],
+  
+  // 创建备份文件
+  createBackup: true,
+  
+  // 启用日志输出
+  enableLog: true,
+  
+  // 不处理外部链接
+  includeExternal: false
+});
+
+console.log('\n处理结果:');
+console.log(`- 总文件数: ${result.totalFiles}`);
+console.log(`- 修改文件数: ${result.modifiedFiles}`);
+console.log(`- 失败文件数: ${result.failedFiles}`);
+console.log(`- 备份文件数: ${result.backupFiles.length}`);
+
+if (result.errors.length > 0) {
+  console.log('\n错误信息:');
+  result.errors.forEach(error => {
+    console.log(`- ${error.file}: ${error.error}`);
+  });
+}
+
+console.log('\n✅ 处理完成！');
--- a/frontend/plugin/vite-plugin-path-random/example/styles/main.css
+++ b/frontend/plugin/vite-plugin-path-random/example/styles/main.css
@@ -0,0 +1,145 @@
+/* 主样式文件 - 演示CSS中的各种引用 */
+
+/* 导入其他CSS文件 */
+@import "./reset.css?v=1755687106028";
+@import url("./components.css?v=1755687106028");
+
+/* 字体引用 */
+@font-face {
+    font-family: 'CustomFont';
+    src: url('../fonts/font.woff2?v=1755687106028') format('woff2'),
+         url('../fonts/font.woff?v=1755687106028') format('woff');
+}
+
+/* 基础样式 */
+body {
+    font-family: 'CustomFont', Arial, sans-serif;
+    line-height: 1.6;
+    margin: 0;
+    padding: 0;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    min-height: 100vh;
+}
+
+.header {
+    background: url('../images/header-bg.jpg?v=1755687106028') center/cover;
+    color: white;
+    text-align: center;
+    padding: 2rem;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+}
+
+.header h1 {
+    margin: 0;
+    font-size: 2.5rem;
+    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
+}
+
+.main {
+    max-width: 1200px;
+    margin: 2rem auto;
+    padding: 0 1rem;
+}
+
+.demo-section {
+    background: white;
+    margin: 2rem 0;
+    padding: 2rem;
+    border-radius: 10px;
+    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
+}
+
+.demo-section h2 {
+    color: #333;
+    border-bottom: 2px solid #667eea;
+    padding-bottom: 0.5rem;
+}
+
+.comparison {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 2rem;
+    margin-top: 1rem;
+}
+
+.before, .after {
+    padding: 1rem;
+    border-radius: 5px;
+}
+
+.before {
+    background: #ffe6e6;
+    border-left: 4px solid #ff4444;
+}
+
+.after {
+    background: #e6ffe6;
+    border-left: 4px solid #44ff44;
+}
+
+.before h3, .after h3 {
+    margin-top: 0;
+    color: #333;
+}
+
+code {
+    display: block;
+    background: #f5f5f5;
+    padding: 1rem;
+    border-radius: 3px;
+    font-family: 'Courier New', monospace;
+    font-size: 0.9rem;
+    line-height: 1.4;
+    overflow-x: auto;
+}
+
+.footer {
+    text-align: center;
+    padding: 2rem;
+    color: white;
+    background: rgba(0,0,0,0.2);
+    margin-top: 2rem;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+    .comparison {
+        grid-template-columns: 1fr;
+    }
+    
+    .header h1 {
+        font-size: 2rem;
+    }
+    
+    .demo-section {
+        padding: 1rem;
+    }
+}
+
+/* 图标样式 */
+.icon {
+    width: 24px;
+    height: 24px;
+    background-image: url('../icons/check.svg?v=1755687106028');
+    background-size: contain;
+    background-repeat: no-repeat;
+    display: inline-block;
+    margin-right: 0.5rem;
+}
+
+/* 按钮样式 */
+.btn {
+    background: linear-gradient(45deg, #667eea, #764ba2);
+    color: white;
+    border: none;
+    padding: 0.75rem 1.5rem;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 1rem;
+    transition: transform 0.2s;
+}
+
+.btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
+}