console 命令行工具 X clear
console
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>微信朋友圈生成器</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#07C160',
            secondary: '#1677FF',
            dark: '#333333',
            light: '#F5F5F5',
            gray: {
              100: '#F7F7F7',
              200: '#E5E5E5',
              300: '#CCCCCC',
              400: '#999999',
              500: '#666666',
              600: '#444444',
            }
          },
          fontFamily: {
            sans: ['-apple-system', 'BlinkMacSystemFont', 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei UI', 'Microsoft YaHei', 'Arial', 'sans-serif'],
          },
        },
      }
    }
  </script>
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .wechat-shadow {
        box-shadow: 0 1px 2px rgba(0,0,0,0.1);
      }
      .wechat-moment-card {
        background-color: white;
        border-radius: 8px;
        overflow: hidden;
      }
      .text-shadow {
        text-shadow: 0 1px 2px rgba(0,0,0,0.2);
      }
      .upload-btn {
        @apply relative overflow-hidden cursor-pointer bg-gray-100 border-2 border-dashed border-gray-300 rounded-lg transition-all duration-300 hover:bg-gray-50 hover:border-primary;
      }
      .upload-btn input {
        @apply absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer;
      }
    }
  </style>
</head>
<body class="bg-gray-100 min-h-screen font-sans text-dark">
  <div class="container mx-auto px-4 py-8 max-w-4xl">
    <!-- 标题区域 -->
    <div class="text-center mb-8">
      <h1 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-dark mb-2">微信朋友圈生成器</h1>
      <p class="text-gray-500 text-lg">上传图片、输入文字，生成朋友圈样式并保存</p>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
      <!-- 左侧：输入区域 -->
      <div class="bg-white rounded-xl shadow-lg p-6 transform transition-all duration-300 hover:shadow-xl">
        <h2 class="text-xl font-bold mb-4 flex items-center">
          <i class="fa fa-pencil-square-o text-primary mr-2"></i>内容编辑
        </h2>

        <!-- 文本输入 -->
        <div class="mb-6">
          <label for="momentText" class="block text-gray-600 font-medium mb-2">朋友圈文字内容</label>
          <textarea id="momentText" rows="4" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all" placeholder="分享你的想法..."></textarea>
        </div>

        <!-- 头像上传 -->
        <div class="mb-6">
          <label class="block text-gray-600 font-medium mb-2">选择头像</label>
          <div class="flex items-center">
            <div id="avatarPreview" class="w-16 h-16 rounded-lg overflow-hidden bg-gray-200 mr-4 flex items-center justify-center">
              <i class="fa fa-user-circle-o text-3xl text-gray-400"></i>
            </div>
            <div class="upload-btn w-24 h-16 flex items-center justify-center">
              <span class="text-gray-500 text-sm text-center">
                <i class="fa fa-upload block mb-1"></i>上传
              </span>
              <input type="file" id="avatarUpload" accept="image/*" />
            </div>
          </div>
        </div>

        <!-- 昵称输入 -->
        <div class="mb-6">
          <label for="nickname" class="block text-gray-600 font-medium mb-2">昵称</label>
          <input type="text" id="nickname" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all" placeholder="你的昵称" value="微信用户">
        </div>

        <!-- 图片上传 -->
        <div class="mb-6">
          <label class="block text-gray-600 font-medium mb-2">上传朋友圈图片 (最多9张)</label>
          <div id="imageContainer" class="grid grid-cols-3 gap-3">
            <div class="upload-btn aspect-square flex items-center justify-center">
              <span class="text-gray-500 text-center">
                <i class="fa fa-plus block text-xl mb-1"></i>添加
              </span>
              <input type="file" id="imageUpload" accept="image/*" multiple />
            </div>
          </div>
        </div>

        <!-- 底部按钮 -->
        <div class="flex justify-between">
          <button id="resetBtn" class="px-6 py-3 bg-gray-200 text-gray-700 rounded-lg font-medium transition-all duration-300 hover:bg-gray-300 flex items-center">
            <i class="fa fa-refresh mr-2"></i>重置
          </button>
          <button id="generateBtn" class="px-6 py-3 bg-primary text-white rounded-lg font-medium transition-all duration-300 hover:bg-primary/90 flex items-center">
            <i class="fa fa-magic mr-2"></i>生成朋友圈
          </button>
        </div>
      </div>

      <!-- 右侧：预览和下载区域 -->
      <div class="bg-white rounded-xl shadow-lg p-6 transform transition-all duration-300 hover:shadow-xl">
        <h2 class="text-xl font-bold mb-4 flex items-center">
          <i class="fa fa-eye text-primary mr-2"></i>预览与保存
        </h2>

        <!-- 预览区域 -->
        <div id="previewContainer" class="mb-6 bg-gray-100 rounded-lg p-4 min-h-[400px] flex items-center justify-center">
          <div id="momentPreview" class="w-full max-w-md mx-auto bg-white rounded-lg overflow-hidden shadow-md wechat-moment-card opacity-0 transition-opacity duration-500">
            <!-- 朋友圈头部 -->
            <div class="relative">
              <div id="previewHeader" class="h-40 bg-gradient-to-r from-blue-400 to-indigo-600 relative">
                <!-- 头部背景 -->
              </div>
              <div class="absolute -bottom-8 left-4">
                <div id="previewAvatar" class="w-16 h-16 rounded-lg overflow-hidden border-2 border-white shadow-md">
                  <img src="https://picsum.photos/200/200?random=avatar" alt="用户头像" class="w-full h-full object-cover">
                </div>
              </div>
            </div>

            <!-- 朋友圈内容 -->
            <div class="pt-10 pl-4 pr-4 pb-4">
              <div id="previewNickname" class="font-medium text-gray-800 mb-2">微信用户</div>
              <div id="previewText" class="text-gray-700 mb-4 leading-relaxed">分享你的想法...</div>
              
              <!-- 图片网格 -->
              <div id="previewImages" class="grid grid-cols-3 gap-1 mb-4">
                <!-- 图片将动态添加到这里 -->
              </div>
              
              <!-- 时间和操作 -->
              <div class="flex justify-between items-center text-xs text-gray-400">
                <div id="previewTime">今天 12:00</div>
                <div class="flex space-x-4">
                  <div class="flex items-center cursor-pointer hover:text-primary transition-colors">
                    <i class="fa fa-thumbs-o-up mr-1"></i>
                    <span>赞</span>
                  </div>
                  <div class="flex items-center cursor-pointer hover:text-primary transition-colors">
                    <i class="fa fa-comment-o mr-1"></i>
                    <span>评论</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 保存按钮 -->
        <div id="saveSection" class="hidden text-center">
          <button id="saveBtn" class="px-8 py-3 bg-secondary text-white rounded-lg font-medium transition-all duration-300 hover:bg-secondary/90 flex items-center mx-auto">
            <i class="fa fa-download mr-2"></i>保存为图片
          </button>
          <p class="text-gray-500 text-sm mt-2">点击按钮保存朋友圈图片</p>
        </div>
      </div>
    </div>

    <!-- 页脚 -->
    <footer class="mt-12 text-center text-gray-500 text-sm">
      <p>© 2025 微信朋友圈生成器 | 仅供娱乐使用</p>
    </footer>
  </div>

  <!-- 成功提示 -->
  <div id="successToast" class="fixed bottom-8 left-1/2 transform -translate-x-1/2 bg-primary text-white px-6 py-3 rounded-lg shadow-lg opacity-0 transition-opacity duration-500 flex items-center">
    <i class="fa fa-check-circle mr-2"></i>
    <span>操作成功!</span>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // DOM元素
      const momentText = document.getElementById('momentText');
      const avatarUpload = document.getElementById('avatarUpload');
      const avatarPreview = document.getElementById('avatarPreview');
      const nickname = document.getElementById('nickname');
      const imageUpload = document.getElementById('imageUpload');
      const imageContainer = document.getElementById('imageContainer');
      const resetBtn = document.getElementById('resetBtn');
      const generateBtn = document.getElementById('generateBtn');
      const momentPreview = document.getElementById('momentPreview');
      const previewAvatar = document.getElementById('previewAvatar').querySelector('img');
      const previewNickname = document.getElementById('previewNickname');
      const previewText = document.getElementById('previewText');
      const previewImages = document.getElementById('previewImages');
      const saveSection = document.getElementById('saveSection');
      const saveBtn = document.getElementById('saveBtn');
      const successToast = document.getElementById('successToast');
      
      // 已选择的图片
      let selectedImages = [];
      
      // 显示成功提示
      function showSuccessToast(message) {
        successToast.querySelector('span').textContent = message || '操作成功!';
        successToast.classList.remove('opacity-0');
        successToast.classList.add('opacity-100');
        
        setTimeout(() => {
          successToast.classList.remove('opacity-100');
          successToast.classList.add('opacity-0');
        }, 3000);
      }
      
      // 预览头像上传
      avatarUpload.addEventListener('change', function(e) {
        if (this.files && this.files[0]) {
          const reader = new FileReader();
          
          reader.onload = function(e) {
            avatarPreview.innerHTML = `<img src="${e.target.result}" alt="用户头像" class="w-full h-full object-cover">`;
          }
          
          reader.readAsDataURL(this.files[0]);
        }
      });
      
      // 预览朋友圈图片上传
      imageUpload.addEventListener('change', function(e) {
        if (this.files && this.files.length > 0) {
          // 限制最多上传9张图片
          const files = Array.from(this.files).slice(0, 9 - selectedImages.length);
          
          files.forEach(file => {
            const reader = new FileReader();
            
            reader.onload = function(e) {
              selectedImages.push(e.target.result);
              updateImagePreview();
            }
            
            reader.readAsDataURL(file);
          });
          
          this.value = ''; // 清空输入，允许重复选择同一文件
        }
      });
      
      // 更新图片预览
      function updateImagePreview() {
        imageContainer.innerHTML = '';
        
        // 添加已选择的图片
        selectedImages.forEach((image, index) => {
          const imageDiv = document.createElement('div');
          imageDiv.className = 'aspect-square relative rounded-lg overflow-hidden';
          imageDiv.innerHTML = `
            <img src="${image}" alt="上传的图片" class="w-full h-full object-cover">
            <button class="absolute top-1 right-1 bg-red-500 text-white rounded-full w-5 h-5 flex items-center justify-center opacity-75 hover:opacity-100 transition-opacity" data-index="${index}">
              <i class="fa fa-times text-xs"></i>
            </button>
          `;
          imageContainer.appendChild(imageDiv);
          
          // 删除图片按钮
          imageDiv.querySelector('button').addEventListener('click', function() {
            const index = parseInt(this.getAttribute('data-index'));
            selectedImages.splice(index, 1);
            updateImagePreview();
          });
        });
        
        // 添加上传按钮（如果还可以上传更多图片）
        if (selectedImages.length < 9) {
          const uploadBtn = document.createElement('div');
          uploadBtn.className = 'upload-btn aspect-square flex items-center justify-center';
          uploadBtn.innerHTML = `
            <span class="text-gray-500 text-center">
              <i class="fa fa-plus block text-xl mb-1"></i>添加
            </span>
            <input type="file" id="imageUpload" accept="image/*" multiple />
          `;
          imageContainer.appendChild(uploadBtn);
          
          // 为新添加的上传按钮绑定事件
          uploadBtn.querySelector('input').addEventListener('change', function(e) {
            if (this.files && this.files.length > 0) {
              const files = Array.from(this.files).slice(0, 9 - selectedImages.length);
              
              files.forEach(file => {
                const reader = new FileReader();
                
                reader.onload = function(e) {
                  selectedImages.push(e.target.result);
                  updateImagePreview();
                }
                
                reader.readAsDataURL(file);
              });
              
              this.value = '';
            }
          });
        }
      }
      
      // 生成朋友圈预览
      generateBtn.addEventListener('click', function() {
        // 获取输入值
        const text = momentText.value.trim() || '分享你的想法...';
        const avatar = avatarPreview.querySelector('img') ? avatarPreview.querySelector('img').src : 'https://picsum.photos/200/200?random=avatar';
        const name = nickname.value.trim() || '微信用户';
        
        // 更新预览
        previewText.textContent = text;
        previewAvatar.src = avatar;
        previewNickname.textContent = name;
        
        // 更新预览图片
        previewImages.innerHTML = '';
        if (selectedImages.length > 0) {
          selectedImages.forEach(image => {
            const img = document.createElement('img');
            img.src = image;
            img.alt = '朋友圈图片';
            img.className = 'w-full h-full object-cover rounded';
            img.style.minHeight = '60px';
            
            const imgContainer = document.createElement('div');
            imgContainer.className = 'aspect-square overflow-hidden rounded';
            imgContainer.appendChild(img);
            
            previewImages.appendChild(imgContainer);
          });
        }
        
        // 显示预览
        momentPreview.classList.remove('opacity-0');
        momentPreview.classList.add('opacity-100');
        
        // 显示保存按钮
        saveSection.classList.remove('hidden');
        
        // 显示成功提示
        showSuccessToast('朋友圈生成成功！');
      });
      
      // 保存为图片
      saveBtn.addEventListener('click', function() {
        // 确保html2canvas已加载
        if (typeof html2canvas === 'undefined') {
          alert('截图功能加载失败，请刷新页面重试。');
          return;
        }
        
        // 添加加载状态
        this.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i>生成中...';
        this.disabled = true;
        
        // 生成截图
        html2canvas(momentPreview, {
          scale: 2,
          useCORS: true,
          logging: false
        }).then(canvas => {
          // 创建下载链接
          const link = document.createElement('a');
          link.download = '朋友圈截图.png';
          link.href = canvas.toDataURL('image/png');
          link.click();
          
          // 恢复按钮状态
          this.innerHTML = '<i class="fa fa-download mr-2"></i>保存为图片';
          this.disabled = false;
          
          // 显示成功提示
          showSuccessToast('图片保存成功！');
        }).catch(error => {
          console.error('截图失败:', error);
          alert('截图失败，请重试。');
          
          // 恢复按钮状态
          this.innerHTML = '<i class="fa fa-download mr-2"></i>保存为图片';
          this.disabled = false;
        });
      });
      
      // 重置按钮
      resetBtn.addEventListener('click', function() {
        // 重置表单
        momentText.value = '';
        avatarPreview.innerHTML = '<i class="fa fa-user-circle-o text-3xl text-gray-400"></i>';
        nickname.value = '微信用户';
        selectedImages = [];
        updateImagePreview();
        
        // 隐藏预览和保存按钮
        momentPreview.classList.remove('opacity-100');
        momentPreview.classList.add('opacity-0');
        saveSection.classList.add('hidden');
        
        // 显示成功提示
        showSuccessToast('已重置所有内容！');
      });
      
      // 设置当前时间
      function setCurrentTime() {
        const now = new Date();
        const hours = now.getHours().toString().padStart(2, '0');
        const minutes = now.getMinutes().toString().padStart(2, '0');
        document.getElementById('previewTime').textContent = `今天 ${hours}:${minutes}`;
      }
      
      // 初始化
      setCurrentTime();
      updateImagePreview();
    });
  </script>
</body>
</html>