upgrade

apps/background/tools.js

@@ -248,14 +248,6 @@ let toolMap = {
             text: '图表制作工具'
         }]
     },
-    'poster-maker': {
-        name: '海报生成工具',
-        tips: '快速创建营销推广海报，支持朋友圈、小红书等多种模板，可自定义文字、图片和配色',
-        menuConfig: [{
-            icon: '🖼️',
-            text: '海报生成工具'
-        }]
-    },
     'svg-converter': {
         name: 'SVG转为图片',
         tips: '支持SVG文件转换为PNG、JPG、WEBP等格式，可自定义输出尺寸，支持文件拖放和URL导入',
@@ -264,6 +256,14 @@ let toolMap = {
             text: 'SVG转图片工具'
         }]
     },
+    'poster-maker': {
+        name: '海报快速生成',
+        tips: '快速创建营销推广海报，支持朋友圈、小红书等多种模板，可自定义文字、图片和配色',
+        menuConfig: [{
+            icon: '🖼️',
+            text: '海报快速生成'
+        }]
+    }
 };
 
 export default toolMap;

apps/options/market.js

@@ -6,7 +6,7 @@ import Settings from './settings.js';
 const TOOL_CATEGORIES = [
     { key: 'dev', name: '开发工具类', tools: ['json-format', 'json-diff', 'code-beautify', 'code-compress', 'postman', 'websocket', 'regexp','page-timing'] },
     { key: 'encode', name: '编解码转换类', tools: ['en-decode', 'trans-radix', 'timestamp', 'trans-color'] },
-    { key: 'image', name: '图像处理类', tools: ['qr-code', 'image-base64', 'svg-converter', 'chart-maker' ,'screenshot', 'color-picker'] },
+    { key: 'image', name: '图像处理类', tools: ['qr-code', 'image-base64', 'svg-converter', 'chart-maker', 'poster-maker' ,'screenshot', 'color-picker'] },
     { key: 'productivity', name: '效率工具类', tools: ['aiagent', 'sticky-notes', 'html2markdown', 'page-monkey'] },
     { key: 'calculator', name: '计算工具类', tools: ['crontab', 'loan-rate', 'password'] },
     { key: 'other', name: '其他工具', tools: [] }

apps/poster-maker/css/main.css

@@ -31,7 +31,7 @@ body {
 .app-container {
   max-width: 1200px;
   margin: 0 auto;
-  padding: 0 20px 20px;
+  padding: 0 20px 0px;
 }
 
 /* 头部样式 */
@@ -57,8 +57,8 @@ body {
 .app-main {
   display: flex;
   gap: 20px;
-  max-height: calc(100vh - 150px);
-  height: calc(100vh - 150px); /* 添加固定高度 */
+  max-height: calc(100vh - 80px);
+  height: calc(100vh - 80px); /* 添加固定高度 */
 }
 
 .tool-panel {
@@ -395,16 +395,27 @@ body {
 
 .poster-preview {
   width: 375px;
-  height: 667px;
+  min-height: 667px;
   background-color: white;
   box-shadow: var(--shadow);
   border-radius: var(--radius);
-  overflow: hidden;
   position: relative;
   transform-origin: center;
   transition: transform 0.3s ease;
 }
 
+.poster-preview > div {
+  min-height: 667px;
+  display: flex;
+  flex-direction: column;
+}
+
+.poster-preview img {
+  max-width: 100%;
+  height: auto;
+  object-fit: contain;
+}
+
 .poster-preview.with-filter {
   filter: brightness(var(--brightness, 100%)) contrast(var(--contrast, 100%)) saturate(var(--saturation, 100%));
 }
@@ -682,8 +693,6 @@ body {
 }
 
 .brand-text {
-  font-size: 18px;
-  font-weight: 600;
   margin-right: 8px;
 }
 
@@ -700,3 +709,81 @@ body {
   padding-bottom: 0;
   border-bottom: none;
 }
+
+/* 特殊布局样式 */
+.special-layout {
+  background-color: var(--background-color);
+  padding: 15px;
+  border-radius: var(--radius);
+  position: relative;
+}
+
+.special-layout .image-upload {
+  height: 100%;
+}
+
+.special-layout .upload-preview {
+  height: 150px;
+}
+
+.special-layout .color-picker {
+  width: 100%;
+  height: 40px;
+}
+
+.special-layout label {
+  margin-bottom: 8px;
+  color: var(--text-color);
+  font-weight: 500;
+}
+.special-layout .left-column{
+  flex: 1;
+  width: 240px;
+}
+.special-layout .right-column{
+  flex: 1;
+  width: 120px;
+  position: absolute;
+  top: 15px;
+  right: 20px;
+}
+
+.special-layout .upload-btn{
+  position: absolute;
+  bottom: 0;
+  background: #0009;
+  color: #fff;
+  width: 240px;
+  text-align: center;
+}
+
+/* 加载提示 */
+.loading-tip {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: rgba(0, 0, 0, 0.8);
+  color: white;
+  padding: 15px 30px;
+  border-radius: 25px;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  z-index: 9999;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.loading-tip i {
+  font-size: 16px;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.loading-tip .fa-spin {
+  animation: spin 1s linear infinite;
+}

apps/poster-maker/index.html

@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>海报生成工具</title>
+  <title>海报快速生成</title>
   
   <!-- 本地CSS文件 -->
   <link rel="stylesheet" href="css/main.css">
@@ -15,7 +15,7 @@
       <a href="#" class="brand-link">
         <img src="../static/img/fe-48.png" alt="fehelper"/> 
         <span class="brand-text">FeHelper</span>
-        <span class="brand-subtitle">海报生成工具</span>
+        <span class="brand-subtitle">海报快速生成</span>
       </a>
     </div>
   </div>
@@ -43,13 +43,12 @@
             <div class="template-selection">
               <div class="template-categories">
                 <button class="category-btn active" data-category="all">全部</button>
-                <button class="category-btn" data-category="promotion">促销</button>
-                <button class="category-btn" data-category="social">社交</button>
-                <button class="category-btn" data-category="work">工作</button>
                 <button class="category-btn" data-category="tech">技术</button>
                 <button class="category-btn" data-category="product">产品</button>
                 <button class="category-btn" data-category="operation">运营</button>
-                <button class="category-btn" data-category="other">其他</button>
+                <button class="category-btn" data-category="promotion">促销</button>
+                <button class="category-btn" data-category="social">社交</button>
+                <button class="category-btn" data-category="work">工作</button>
               </div>
               <div class="templates-container" id="templates-container"></div>
             </div>
@@ -178,52 +177,14 @@
           <button id="download-btn" class="btn primary-btn" disabled>
             <i class="fas fa-download"></i> 下载海报
           </button>
-          <button id="share-btn" class="btn secondary-btn" disabled>
-            <i class="fas fa-share-alt"></i> 分享
-          </button>
         </div>
       </div>
     </main>
-
-    <!-- 分享模态框 -->
-    <div id="share-modal" class="modal">
-      <div class="modal-content">
-        <span class="close-modal">&times;</span>
-        <h2>分享到社交平台</h2>
-        <div class="share-options">
-          <div class="share-option" data-platform="wechat">
-            <i class="fab fa-weixin"></i>
-            <span>微信</span>
-          </div>
-          <div class="share-option" data-platform="weibo">
-            <i class="fab fa-weibo"></i>
-            <span>微博</span>
-          </div>
-          <div class="share-option" data-platform="xiaohongshu">
-            <i class="fas fa-book"></i>
-            <span>小红书</span>
-          </div>
-          <div class="share-option" data-platform="qq">
-            <i class="fab fa-qq"></i>
-            <span>QQ</span>
-          </div>
-        </div>
-        <div class="share-instructions">
-          <p>1. 点击下载海报</p>
-          <p>2. 打开对应社交软件</p>
-          <p>3. 从相册中选择刚刚下载的海报</p>
-        </div>
-      </div>
-    </div>
-    
-    <div id="overlay" class="overlay"></div>
   </div>
 
-  <!-- 依赖库 -->
+  <!-- 引入JavaScript文件 -->
+  <script src="js/FileSaver.min.js"></script>
   <script src="../chart-maker/lib/html2canvas.min.js"></script>
-  <script src="./js/FileSaver.min.js"></script>
-  
-  <!-- 本地JS文件 -->
-  <script type="module" src="./js/index.js"></script>
+  <script type="module" src="js/index.js"></script>
 </body>
 </html>

apps/poster-maker/js/eventHandlers.js

@@ -62,64 +62,10 @@ export function setupEventListeners() {
     });
   }
   
-  // 分享按钮
-  const shareBtn = document.getElementById('share-btn');
-  const shareModal = document.getElementById('share-modal');
-  const overlay = document.getElementById('overlay');
-  const closeModal = document.querySelector('.close-modal');
-  
-  if (shareBtn && shareModal && overlay && closeModal) {
-    // 打开分享模态框
-    shareBtn.addEventListener('click', () => {
-      shareModal.style.display = 'block';
-      overlay.style.display = 'block';
-    });
-    
-    // 关闭分享模态框
-    closeModal.addEventListener('click', () => {
-      shareModal.style.display = 'none';
-      overlay.style.display = 'none';
-    });
-    
-    // 点击遮罩层关闭模态框
-    overlay.addEventListener('click', () => {
-      shareModal.style.display = 'none';
-      overlay.style.display = 'none';
-    });
-    
-    // 设置分享选项点击事件
-    const shareOptions = document.querySelectorAll('.share-option');
-    shareOptions.forEach(option => {
-      option.addEventListener('click', () => {
-        // 先下载海报
-        window.downloadPoster();
-        
-        const platform = option.dataset.platform;
-        alert(`已下载海报，请在${getPlatformName(platform)}中分享`);
-        
-        // 关闭模态框
-        shareModal.style.display = 'none';
-        overlay.style.display = 'none';
-      });
-    });
-  }
-  
   // 设置高级选项事件监听器
   setupAdvancedOptions();
 }
 
-// 获取平台名称
-function getPlatformName(platform) {
-  const platforms = {
-    wechat: '微信',
-    weibo: '微博',
-    xiaohongshu: '小红书',
-    qq: 'QQ'
-  };
-  
-  return platforms[platform] || '社交平台';
-}
-
 // 设置高级选项事件监听器
 function setupAdvancedOptions() {
   // 布局调整

apps/poster-maker/js/index.js

@@ -3,6 +3,10 @@ import { renderTemplates } from './templateRenderer.js';
 import { setupEventListeners } from './eventHandlers.js';
 import { setupImageUpload } from './imageUpload.js';
 
+// 将模板和渲染函数挂载到window对象上
+window.templates = templates;
+window.renderTemplates = renderTemplates;
+
 document.addEventListener('DOMContentLoaded', () => {
   // 渲染所有模板缩略图
   renderTemplates(templates);

apps/poster-maker/js/templateData.js

@@ -6,12 +6,12 @@ export const templates = [
     category: 'promotion',
     thumbnail: 'https://images.unsplash.com/photo-1607082349566-187342175e2f?ixlib=rb-4.0.3&auto=format&fit=crop&w=240&h=240&q=80',
     fields: [
-      { name: 'title', type: 'text', label: '标题', default: '限时优惠' },
-      { name: 'subtitle', type: 'text', label: '副标题', default: '全场商品5折起' },
-      { name: 'date', type: 'text', label: '日期', default: '2023年12月1日-12月31日' },
       { name: 'mainImage', type: 'image', label: '主图', default: 'https://images.unsplash.com/photo-1607082349566-187342175e2f?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80' },
       { name: 'bgColor', type: 'color', label: '背景颜色', default: '#ff5e62' },
       { name: 'textColor', type: 'color', label: '文字颜色', default: '#ffffff' },
+      { name: 'title', type: 'text', label: '标题', default: '限时优惠' },
+      { name: 'subtitle', type: 'text', label: '副标题', default: '全场商品5折起' },
+      { name: 'date', type: 'text', label: '日期', default: '2023年12月1日-12月31日' },
       { name: 'footerText', type: 'text', label: '底部提示文字', default: '扫码或长按识别二维码' },
       { name: 'footerSubText', type: 'text', label: '底部副提示文字', default: '了解更多详情' }
     ],
@@ -36,12 +36,12 @@ export const templates = [
     category: 'event',
     thumbnail: 'https://images.unsplash.com/photo-1492684223066-81342ee5ff30?ixlib=rb-4.0.3&auto=format&fit=crop&w=240&h=240&q=80',
     fields: [
-      { name: 'eventName', type: 'text', label: '活动名称', default: '新品发布会' },
-      { name: 'eventDate', type: 'text', label: '活动日期', default: '2023年12月15日 14:00' },
-      { name: 'eventLocation', type: 'text', label: '活动地点', default: '上海市浦东新区XX大厦' },
       { name: 'mainImage', type: 'image', label: '主图', default: 'https://images.unsplash.com/photo-1492684223066-81342ee5ff30?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80' },
       { name: 'bgColor', type: 'color', label: '背景颜色', default: '#1a2a6c' },
       { name: 'accentColor', type: 'color', label: '强调色', default: '#fdbb2d' },
+      { name: 'eventName', type: 'text', label: '活动名称', default: '新品发布会' },
+      { name: 'eventDate', type: 'text', label: '活动日期', default: '2023年12月15日 14:00' },
+      { name: 'eventLocation', type: 'text', label: '活动地点', default: '上海市浦东新区XX大厦' },
       { name: 'buttonText', type: 'text', label: '按钮文字', default: '诚挚邀请' },
       { name: 'footerText', type: 'text', label: '底部文字', default: '扫描二维码报名参加' }
     ],
@@ -57,7 +57,7 @@ export const templates = [
           <p style="font-size: 18px; margin-bottom: 30px;"><i class="fas fa-map-marker-alt" style="margin-right: 10px; color: ${data.accentColor};"></i> ${data.eventLocation}</p>
           <div style="padding: 15px 30px; background-color: ${data.accentColor}; color: #000; font-size: 18px; font-weight: bold; border-radius: 30px;">${data.buttonText}</div>
         </div>
-        <div style="position: absolute; bottom: 20px; width: 100%; text-align: center; font-size: 14px; opacity: 0.7;">
+        <div style="position: absolute; bottom: 10px; width: 100%; text-align: center; font-size: 14px; opacity: 0.7;">
           <p>${data.footerText}</p>
         </div>
       </div>
@@ -69,12 +69,12 @@ export const templates = [
     category: 'product',
     thumbnail: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixlib=rb-4.0.3&auto=format&fit=crop&w=240&h=240&q=80',
     fields: [
-      { name: 'productName', type: 'text', label: '产品名称', default: '智能手表 Pro' },
-      { name: 'tagline', type: 'text', label: '产品标语', default: '科技引领未来' },
-      { name: 'price', type: 'text', label: '产品价格', default: '¥1999' },
       { name: 'productImage', type: 'image', label: '产品图片', default: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80' },
       { name: 'bgColor', type: 'color', label: '背景颜色', default: '#f6f6f6' },
-      { name: 'accentColor', type: 'color', label: '强调色', default: '#ff6b6b' }
+      { name: 'accentColor', type: 'color', label: '强调色', default: '#ff6b6b' },
+      { name: 'productName', type: 'text', label: '产品名称', default: '智能手表 Pro' },
+      { name: 'tagline', type: 'text', label: '产品标语', default: '科技引领未来' },
+      { name: 'price', type: 'text', label: '产品价格', default: '¥1999' }
     ],
     template: (data) => `
       <div style="width: 100%; height: 100%; background-color: ${data.bgColor}; font-family: 'Arial', sans-serif; position: relative; overflow: hidden;">
@@ -103,11 +103,11 @@ export const templates = [
     category: 'social',
     thumbnail: 'https://images.unsplash.com/photo-1507608616759-54f48f0af0ee?ixlib=rb-4.0.3&auto=format&fit=crop&w=240&h=240&q=80',
     fields: [
-      { name: 'quote', type: 'textarea', label: '名言内容', default: '生活不是等待风暴过去，而是学会在雨中翩翩起舞。' },
-      { name: 'author', type: 'text', label: '作者', default: '佚名' },
       { name: 'bgImage', type: 'image', label: '背景图片', default: 'https://images.unsplash.com/photo-1507608616759-54f48f0af0ee?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80' },
       { name: 'overlayColor', type: 'color', label: '遮罩颜色', default: 'rgba(0, 0, 0, 0.4)' },
-      { name: 'textColor', type: 'color', label: '文字颜色', default: '#ffffff' }
+      { name: 'textColor', type: 'color', label: '文字颜色', default: '#ffffff' },
+      { name: 'quote', type: 'textarea', label: '名言内容', default: '生活不是等待风暴过去，而是学会在雨中翩翩起舞。' },
+      { name: 'author', type: 'text', label: '作者', default: '佚名' },
     ],
     template: (data) => `
       <div style="width: 100%; height: 100%; position: relative; font-family: 'Georgia', serif; overflow: hidden;">
@@ -134,12 +134,12 @@ export const templates = [
     category: 'food',
     thumbnail: 'https://images.unsplash.com/photo-1476224203421-9ac39bcb3327?ixlib=rb-4.0.3&auto=format&fit=crop&w=240&h=240&q=80',
     fields: [
+      { name: 'foodImage', type: 'image', label: '菜品图片', default: 'https://images.unsplash.com/photo-1476224203421-9ac39bcb3327?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80' },
+      { name: 'bgColor', type: 'color', label: '背景颜色', default: '#ffffff' },
+      { name: 'accentColor', type: 'color', label: '强调色', default: '#ff9a3c' },
       { name: 'dishName', type: 'text', label: '菜品名称', default: '香煎三文鱼' },
       { name: 'description', type: 'textarea', label: '简短描述', default: '鲜嫩多汁，营养丰富的美味佳肴' },
       { name: 'cookTime', type: 'text', label: '烹饪时间', default: '25分钟' },
-      { name: 'foodImage', type: 'image', label: '菜品图片', default: 'https://images.unsplash.com/photo-1476224203421-9ac39bcb3327?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80' },
-      { name: 'bgColor', type: 'color', label: '背景颜色', default: '#ffffff' },
-      { name: 'accentColor', type: 'color', label: '强调色', default: '#ff9a3c' }
     ],
     template: (data) => `
       <div style="width: 100%; height: 100%; background-color: ${data.bgColor}; font-family: 'Montserrat', sans-serif; position: relative; overflow: hidden;">
@@ -174,12 +174,12 @@ export const templates = [
     category: 'travel',
     thumbnail: 'https://images.unsplash.com/photo-1519451241324-20b4ea2c4220?ixlib=rb-4.0.3&auto=format&fit=crop&w=240&h=240&q=80',
     fields: [
+      { name: 'travelImage', type: 'image', label: '旅行图片', default: 'https://images.unsplash.com/photo-1519451241324-20b4ea2c4220?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80' },
+      { name: 'overlayColor', type: 'color', label: '遮罩颜色', default: 'rgba(0, 0, 0, 0.3)' },
+      { name: 'accentColor', type: 'color', label: '强调色', default: '#4ecdc4' },
       { name: 'location', type: 'text', label: '地点名称', default: '巴厘岛' },
       { name: 'tagline', type: 'text', label: '标语', default: '遇见天堂般的美景' },
       { name: 'date', type: 'text', label: '日期', default: '2023年夏' },
-      { name: 'travelImage', type: 'image', label: '旅行图片', default: 'https://images.unsplash.com/photo-1519451241324-20b4ea2c4220?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80' },
-      { name: 'overlayColor', type: 'color', label: '遮罩颜色', default: 'rgba(0, 0, 0, 0.3)' },
-      { name: 'accentColor', type: 'color', label: '强调色', default: '#4ecdc4' }
     ],
     template: (data) => `
       <div style="width: 100%; height: 100%; position: relative; font-family: 'Roboto', sans-serif; overflow: hidden;">
@@ -214,12 +214,12 @@ export const xiaohongshuTemplates = [
     category: 'xiaohongshu',
     thumbnail: 'https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-4.0.3&auto=format&fit=crop&w=240&h=240&q=80',
     fields: [
+      { name: 'mainImage', type: 'image', label: '主图', default: 'https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80' },
+      { name: 'bgColor', type: 'color', label: '背景颜色', default: '#ffffff' },
+      { name: 'accentColor', type: 'color', label: '强调色', default: '#ff4757' },
       { name: 'title', type: 'text', label: '标题', default: '这家店也太好吃了吧！绝对五星推荐！' },
       { name: 'content', type: 'textarea', label: '内容', default: '无意中发现的宝藏小店，环境超级好，菜品颜值和口味都很赞，价格也很实惠，强烈推荐大家来打卡！' },
       { name: 'tags', type: 'text', label: '标签', default: '#美食探店 #宝藏餐厅 #推荐' },
-      { name: 'mainImage', type: 'image', label: '主图', default: 'https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80' },
-      { name: 'bgColor', type: 'color', label: '背景颜色', default: '#ffffff' },
-      { name: 'accentColor', type: 'color', label: '强调色', default: '#ff4757' }
     ],
     template: (data) => `
       <div style="width: 100%; height: 100%; background-color: ${data.bgColor}; font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; position: relative; overflow: hidden;">
@@ -258,12 +258,12 @@ export const xiaohongshuTemplates = [
     category: 'xiaohongshu',
     thumbnail: 'https://images.unsplash.com/photo-1469594292607-7bd90f8d3ba4?ixlib=rb-4.0.3&auto=format&fit=crop&w=240&h=240&q=80',
     fields: [
+      { name: 'mainImage', type: 'image', label: '主图', default: 'https://images.unsplash.com/photo-1469594292607-7bd90f8d3ba4?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80' },
+      { name: 'bgColor', type: 'color', label: '背景颜色', default: '#f9f9f9' },
+      { name: 'accentColor', type: 'color', label: '强调色', default: '#ff4757' },
       { name: 'title', type: 'text', label: '标题', default: '超治愈的周末旅行，放空自己的绝佳去处' },
       { name: 'content', type: 'textarea', label: '内容', default: '周末和闺蜜一起去了这个小众景点，环境超级好，人也不多，拍照很出片，完全治愈了工作的疲惫~' },
       { name: 'tags', type: 'text', label: '标签', default: '#周末出行 #小众景点 #旅行 #治愈系' },
-      { name: 'mainImage', type: 'image', label: '主图', default: 'https://images.unsplash.com/photo-1469594292607-7bd90f8d3ba4?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80' },
-      { name: 'bgColor', type: 'color', label: '背景颜色', default: '#f9f9f9' },
-      { name: 'accentColor', type: 'color', label: '强调色', default: '#ff4757' }
     ],
     template: (data) => `
       <div style="width: 100%; height: 100%; background-color: ${data.bgColor}; font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; position: relative; overflow: hidden; padding: 15px;">
@@ -304,11 +304,11 @@ export const wechatMomentsTemplates = [
     category: 'wechat',
     thumbnail: 'https://images.unsplash.com/photo-1504674900247-0877df9cc836?ixlib=rb-4.0.3&auto=format&fit=crop&w=240&h=240&q=80',
     fields: [
-      { name: 'content', type: 'textarea', label: '内容', default: '今天的晚餐，色香味俱全，自己做的就是香！#美食 #晚餐' },
       { name: 'mainImage', type: 'image', label: '主图', default: 'https://images.unsplash.com/photo-1504674900247-0877df9cc836?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80' },
-      { name: 'location', type: 'text', label: '位置', default: '家里的小厨房' },
       { name: 'bgColor', type: 'color', label: '背景颜色', default: '#f7f7f7' },
-      { name: 'textColor', type: 'color', label: '文字颜色', default: '#333333' }
+      { name: 'textColor', type: 'color', label: '文字颜色', default: '#333333' },
+      { name: 'content', type: 'textarea', label: '内容', default: '今天的晚餐，色香味俱全，自己做的就是香！#美食 #晚餐' },
+      { name: 'location', type: 'text', label: '位置', default: '家里的小厨房' },
     ],
     template: (data) => `
       <div style="width: 100%; height: 100%; background-color: ${data.bgColor}; font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; position: relative; overflow: hidden; padding: 20px;">
@@ -353,11 +353,11 @@ export const wechatMomentsTemplates = [
     category: 'wechat',
     thumbnail: 'https://images.unsplash.com/photo-1529156069898-49953e39b3ac?ixlib=rb-4.0.3&auto=format&fit=crop&w=240&h=240&q=80',
     fields: [
-      { name: 'content', type: 'textarea', label: '内容', default: '和好友共度美好时光，感恩遇见 🙏' },
       { name: 'mainImage', type: 'image', label: '主图', default: 'https://images.unsplash.com/photo-1529156069898-49953e39b3ac?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80' },
-      { name: 'time', type: 'text', label: '时间', default: '昨天 20:30' },
       { name: 'bgColor', type: 'color', label: '背景颜色', default: '#f7f7f7' },
-      { name: 'accentColor', type: 'color', label: '强调色', default: '#576b95' }
+      { name: 'accentColor', type: 'color', label: '强调色', default: '#576b95' },
+      { name: 'content', type: 'textarea', label: '内容', default: '和好友共度美好时光，感恩遇见 🙏' },
+      { name: 'time', type: 'text', label: '时间', default: '昨天 20:30' },
     ],
     template: (data) => `
       <div style="width: 100%; height: 100%; background-color: ${data.bgColor}; font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; position: relative; overflow: hidden; padding: 20px;">
@@ -413,12 +413,12 @@ export const workGroupTemplates = [
     category: 'work',
     thumbnail: 'https://images.unsplash.com/photo-1542744173-8e7e53415bb0?ixlib=rb-4.0.3&auto=format&fit=crop&w=240&h=240&q=80',
     fields: [
-      { name: 'title', type: 'text', label: '标题', default: '本周业绩回顾与下周计划' },
-      { name: 'content', type: 'textarea', label: '内容', default: '团队本周超额完成销售目标，达成率120%。下周将重点关注新产品推广和客户回访工作。' },
-      { name: 'date', type: 'text', label: '日期', default: '2023年12月15日' },
       { name: 'chartImage', type: 'image', label: '图表图片', default: 'https://images.unsplash.com/photo-1542744173-8e7e53415bb0?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80' },
       { name: 'bgColor', type: 'color', label: '背景颜色', default: '#ffffff' },
       { name: 'accentColor', type: 'color', label: '强调色', default: '#2c3e50' },
+      { name: 'title', type: 'text', label: '标题', default: '本周业绩回顾与下周计划' },
+      { name: 'content', type: 'textarea', label: '内容', default: '团队本周超额完成销售目标，达成率120%。下周将重点关注新产品推广和客户回访工作。' },
+      { name: 'date', type: 'text', label: '日期', default: '2023年12月15日' },
       { name: 'targetValue', type: 'text', label: '目标达成率', default: '120%' },
       { name: 'growthValue', type: 'text', label: '同比增长率', default: '+15%' },
       { name: 'satisfactionValue', type: 'text', label: '客户满意度', default: '89%' },
@@ -428,7 +428,7 @@ export const workGroupTemplates = [
     ],
     template: (data) => `
       <div style="width: 100%; height: 100%; background-color: ${data.bgColor}; font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; position: relative; overflow: hidden; padding: 20px;">
-        <div style="background-color: white; border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.08); height: calc(100% - 40px);">
+        <div style="background-color: white; border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.08); height: calc(100% - 0px);">
           <div style="background-color: ${data.accentColor}; color: white; padding: 20px; position: relative;">
             <h1 style="font-size: 22px; font-weight: 600; margin-bottom: 10px;">${data.title}</h1>
             <p style="font-size: 14px;">${data.date}</p>
@@ -482,14 +482,14 @@ export const workGroupTemplates = [
     category: 'work',
     thumbnail: 'https://images.unsplash.com/photo-1552664730-d307ca884978?ixlib=rb-4.0.3&auto=format&fit=crop&w=240&h=240&q=80',
     fields: [
+      { name: 'projectImage', type: 'image', label: '项目图片', default: 'https://images.unsplash.com/photo-1552664730-d307ca884978?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80' },
+      { name: 'bgColor', type: 'color', label: '背景颜色', default: '#f8f9fa' },
+      { name: 'accentColor', type: 'color', label: '强调色', default: '#3498db' },
       { name: 'title', type: 'text', label: '标题', default: '项目进度报告' },
       { name: 'projectName', type: 'text', label: '项目名称', default: '新零售系统升级' },
       { name: 'progress', type: 'text', label: '进度百分比', default: '75' },
       { name: 'startDate', type: 'text', label: '开始日期', default: '2023年10月15日' },
       { name: 'deadline', type: 'text', label: '截止日期', default: '2023年12月31日' },
-      { name: 'projectImage', type: 'image', label: '项目图片', default: 'https://images.unsplash.com/photo-1552664730-d307ca884978?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80' },
-      { name: 'bgColor', type: 'color', label: '背景颜色', default: '#f8f9fa' },
-      { name: 'accentColor', type: 'color', label: '强调色', default: '#3498db' },
       { name: 'teamMemberCount', type: 'text', label: '额外团队成员数', default: '+3' },
       { name: 'reportLinkText', type: 'text', label: '报告链接文字', default: '查看详细报告' },
       { name: 'shareLinkText', type: 'text', label: '分享链接文字', default: '分享' },
@@ -573,13 +573,13 @@ export const techTemplates = [
     category: 'tech',
     thumbnail: 'https://images.unsplash.com/photo-1555066931-4365d14bab8c?ixlib=rb-4.0.3&auto=format&fit=crop&w=240&h=240&q=80',
     fields: [
+      { name: 'bgImage', type: 'image', label: '背景图片', default: 'https://images.unsplash.com/photo-1555066931-4365d14bab8c?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80' },
+      { name: 'bgColor', type: 'color', label: '背景颜色', default: '#1e272e' },
+      { name: 'accentColor', type: 'color', label: '强调色', default: '#0984e3' },
       { name: 'title', type: 'text', label: '标题', default: '技术团队周报' },
       { name: 'week', type: 'text', label: '周期', default: '2023年第48周' },
       { name: 'achievements', type: 'textarea', label: '主要成果', default: '1. 完成用户中心重构\n2. 修复了5个关键性Bug\n3. 性能优化提升30%' },
       { name: 'nextWeek', type: 'textarea', label: '下周计划', default: '1. 开始新功能开发\n2. 进行代码审查\n3. 优化CI/CD流程' },
-      { name: 'bgImage', type: 'image', label: '背景图片', default: 'https://images.unsplash.com/photo-1555066931-4365d14bab8c?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80' },
-      { name: 'bgColor', type: 'color', label: '背景颜色', default: '#1e272e' },
-      { name: 'accentColor', type: 'color', label: '强调色', default: '#0984e3' },
       { name: 'bugFixCount', type: 'text', label: 'Bug修复数量', default: '5' },
       { name: 'newFeatureCount', type: 'text', label: '新功能数量', default: '2' },
       { name: 'performanceImprovement', type: 'text', label: '性能提升', default: '30%' },
@@ -641,12 +641,12 @@ export const techTemplates = [
     category: 'tech',
     thumbnail: 'https://images.unsplash.com/photo-1498050108023-c5249f4df085?ixlib=rb-4.0.3&auto=format&fit=crop&w=240&h=240&q=80',
     fields: [
+      { name: 'codeImage', type: 'image', label: '代码截图', default: 'https://images.unsplash.com/photo-1498050108023-c5249f4df085?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80' },
+      { name: 'bgColor', type: 'color', label: '背景颜色', default: '#282c34' },
+      { name: 'accentColor', type: 'color', label: '强调色', default: '#61dafb' },
       { name: 'title', type: 'text', label: '标题', default: '优雅的代码解决方案' },
       { name: 'language', type: 'text', label: '编程语言', default: 'JavaScript' },
       { name: 'description', type: 'textarea', label: '描述', default: '这个优化方案将原本O(n²)的算法复杂度降低到了O(n)，大幅提升了性能。' },
-      { name: 'codeImage', type: 'image', label: '代码截图', default: 'https://images.unsplash.com/photo-1498050108023-c5249f4df085?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80' },
-      { name: 'bgColor', type: 'color', label: '背景颜色', default: '#282c34' },
-      { name: 'accentColor', type: 'color', label: '强调色', default: '#61dafb' }
     ],
     template: (data) => `
       <div style="width: 100%; height: 100%; background-color: ${data.bgColor}; font-family: 'Fira Code', 'Source Code Pro', monospace; position: relative; overflow: hidden; padding: 20px; color: #abb2bf;">
@@ -698,12 +698,12 @@ export const productTemplates = [
     category: 'product',
     thumbnail: 'https://images.unsplash.com/photo-1572177812156-58036aae439c?ixlib=rb-4.0.3&auto=format&fit=crop&w=240&h=240&q=80',
     fields: [
+      { name: 'productImage', type: 'image', label: '产品图片', default: 'https://images.unsplash.com/photo-1572177812156-58036aae439c?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80' },
+      { name: 'bgColor', type: 'color', label: '背景颜色', default: '#ffffff' },
+      { name: 'accentColor', type: 'color', label: '强调色', default: '#6c5ce7' },
       { name: 'title', type: 'text', label: '标题', default: '2024年产品路线图' },
       { name: 'q1Goals', type: 'textarea', label: 'Q1目标', default: '用户体验优化\n核心功能重构\n新用户引导流程' },
       { name: 'q2Goals', type: 'textarea', label: 'Q2目标', default: '数据分析平台\n企业版功能\nAPI升级' },
-      { name: 'productImage', type: 'image', label: '产品图片', default: 'https://images.unsplash.com/photo-1572177812156-58036aae439c?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80' },
-      { name: 'bgColor', type: 'color', label: '背景颜色', default: '#ffffff' },
-      { name: 'accentColor', type: 'color', label: '强调色', default: '#6c5ce7' }
     ],
     template: (data) => `
       <div style="width: 100%; height: 100%; background-color: ${data.bgColor}; font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; position: relative; overflow: hidden;">
@@ -719,7 +719,7 @@ export const productTemplates = [
         <div style="position: absolute; top: 35%; left: 0; width: 100%; padding: 30px;">
           <div style="display: flex; margin-bottom: 30px;">
             <div style="flex: 1; margin-right: 20px;">
-              <div style="display: flex; align-items: center; margin-bottom: 15px;">
+              <div style="display: flex; align-items: center; margin: 15px 0;">
                 <div style="width: 30px; height: 30px; border-radius: 50%; background-color: ${data.accentColor}; color: white; display: flex; justify-content: center; align-items: center; margin-right: 10px; font-weight: 600;">Q1</div>
                 <h2 style="font-size: 18px; font-weight: 600; color: #333;">1-3月</h2>
               </div>
@@ -728,7 +728,7 @@ export const productTemplates = [
               </div>
             </div>
             <div style="flex: 1;">
-              <div style="display: flex; align-items: center; margin-bottom: 15px;">
+              <div style="display: flex; align-items: center; margin: 15px 0; ">
                 <div style="width: 30px; height: 30px; border-radius: 50%; background-color: ${data.accentColor}; color: white; display: flex; justify-content: center; align-items: center; margin-right: 10px; font-weight: 600;">Q2</div>
                 <h2 style="font-size: 18px; font-weight: 600; color: #333;">4-6月</h2>
               </div>
@@ -772,13 +772,13 @@ export const productTemplates = [
     category: 'product',
     thumbnail: 'https://images.unsplash.com/photo-1551836022-d5d88e9218df?ixlib=rb-4.0.3&auto=format&fit=crop&w=240&h=240&q=80',
     fields: [
+      { name: 'researchImage', type: 'image', label: '研究图片', default: 'https://images.unsplash.com/photo-1551836022-d5d88e9218df?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80' },
+      { name: 'bgColor', type: 'color', label: '背景颜色', default: '#f5f7fa' },
+      { name: 'accentColor', type: 'color', label: '强调色', default: '#00b894' },
       { name: 'title', type: 'text', label: '标题', default: '用户研究报告' },
       { name: 'subtitle', type: 'text', label: '副标题', default: '核心用户行为分析' },
       { name: 'findings', type: 'textarea', label: '主要发现', default: '1. 80%的用户在首次使用时遇到了导航困难\n2. 核心功能的使用频率低于预期\n3. 用户对新功能的接受度高' },
       { name: 'recommendations', type: 'textarea', label: '改进建议', default: '1. 优化首页导航结构\n2. 增强核心功能的引导\n3. 加快新功能的迭代速度' },
-      { name: 'researchImage', type: 'image', label: '研究图片', default: 'https://images.unsplash.com/photo-1551836022-d5d88e9218df?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80' },
-      { name: 'bgColor', type: 'color', label: '背景颜色', default: '#f5f7fa' },
-      { name: 'accentColor', type: 'color', label: '强调色', default: '#00b894' }
     ],
     template: (data) => `
       <div style="width: 100%; height: 100%; background-color: ${data.bgColor}; font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; position: relative; overflow: hidden; padding: 25px;">
@@ -863,12 +863,12 @@ export const operationTemplates = [
     category: 'operation',
     thumbnail: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&auto=format&fit=crop&w=240&h=240&q=80',
     fields: [
+      { name: 'chartImage', type: 'image', label: '图表图片', default: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80' },
+      { name: 'bgColor', type: 'color', label: '背景颜色', default: '#ffffff' },
+      { name: 'accentColor', type: 'color', label: '强调色', default: '#fd79a8' },
       { name: 'title', type: 'text', label: '标题', default: '11月营销活动分析报告' },
       { name: 'highlights', type: 'textarea', label: '亮点', default: '1. 新用户增长率达到35%，超过目标25%\n2. 活动转化率提升40%\n3. 社交媒体互动量增长60%' },
       { name: 'nextSteps', type: 'textarea', label: '下一步计划', default: '1. 扩大社交媒体投放\n2. 优化转化漏斗\n3. 增加会员专属活动' },
-      { name: 'chartImage', type: 'image', label: '图表图片', default: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80' },
-      { name: 'bgColor', type: 'color', label: '背景颜色', default: '#ffffff' },
-      { name: 'accentColor', type: 'color', label: '强调色', default: '#fd79a8' }
     ],
     template: (data) => `
       <div style="width: 100%; height: 100%; background-color: ${data.bgColor}; font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; position: relative; overflow: hidden; padding: 20px;">
@@ -936,13 +936,13 @@ export const operationTemplates = [
     category: 'operation',
     thumbnail: 'https://images.unsplash.com/photo-1557804506-669a67965ba0?ixlib=rb-4.0.3&auto=format&fit=crop&w=240&h=240&q=80',
     fields: [
+      { name: 'campaignImage', type: 'image', label: '活动图片', default: 'https://images.unsplash.com/photo-1557804506-669a67965ba0?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80' },
+      { name: 'bgColor', type: 'color', label: '背景颜色', default: '#ffeaa7' },
+      { name: 'accentColor', type: 'color', label: '强调色', default: '#d63031' },
       { name: 'title', type: 'text', label: '活动标题', default: '年末狂欢购物节' },
       { name: 'subtitle', type: 'text', label: '副标题', default: '全场低至5折，多重好礼等你拿' },
       { name: 'period', type: 'text', label: '活动时间', default: '12月18日-12月31日' },
       { name: 'highlights', type: 'textarea', label: '活动亮点', default: '1. 爆品限时秒杀\n2. 满300减100\n3. 新用户专享券\n4. 会员额外95折' },
-      { name: 'campaignImage', type: 'image', label: '活动图片', default: 'https://images.unsplash.com/photo-1557804506-669a67965ba0?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80' },
-      { name: 'bgColor', type: 'color', label: '背景颜色', default: '#ffeaa7' },
-      { name: 'accentColor', type: 'color', label: '强调色', default: '#d63031' }
     ],
     template: (data) => `
       <div style="width: 100%; height: 100%; background-color: ${data.bgColor}; font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; position: relative; overflow: hidden;">
@@ -978,13 +978,6 @@ export const operationTemplates = [
             </div>
           </div>
         </div>
-        
-        <div style="position: absolute; bottom: 20px; left: 30px; display: flex; align-items: center;">
-          <div style="width: 30px; height: 30px; border-radius: 50%; background-color: ${data.accentColor}; display: flex; justify-content: center; align-items: center; margin-right: 10px;">
-            <i class="fas fa-qrcode" style="color: white; font-size: 14px;"></i>
-          </div>
-          <p style="font-size: 14px; color: #666;">扫码了解更多</p>
-        </div>
       </div>
     `
   }

apps/poster-maker/js/templateRenderer.js

@@ -60,7 +60,6 @@ export function initializeEditor(template) {
   const editForm = document.getElementById('edit-form');
   const posterPreview = document.getElementById('poster-preview');
   const downloadBtn = document.getElementById('download-btn');
-  const shareBtn = document.getElementById('share-btn');
   
   if (!editForm || !posterPreview) return;
   
@@ -91,7 +90,6 @@ export function initializeEditor(template) {
   hardcodedTexts.forEach((text, index) => {
     // 检查文本是否已存在于字段中，或者是否是常见文本
     if (!existingDefaults.includes(text) && !isCommonText(text)) {
-      // 为检测到的文本创建一个更有意义的标签
       let label = '检测到的文本';
       
       if (text.length > 15) {
@@ -108,15 +106,113 @@ export function initializeEditor(template) {
       });
     }
   });
-  
-  // 为每个字段创建表单控件
-  allFields.forEach(field => {
-    // 确保字段有默认值，避免undefined
+
+  // 创建特殊的布局容器用于前三个字段
+  const specialFormGroup = document.createElement('div');
+  specialFormGroup.className = 'form-group special-layout';
+  specialFormGroup.style.display = 'flex';
+  specialFormGroup.style.gap = '15px';
+  specialFormGroup.style.marginBottom = '20px';
+
+  // 左侧图片容器
+  const leftColumn = document.createElement('div');
+  leftColumn.style.flex = '1';
+  leftColumn.classList.add('left-column');
+
+  // 右侧颜色容器
+  const rightColumn = document.createElement('div');
+  rightColumn.style.flex = '1';
+  rightColumn.style.display = 'flex';
+  rightColumn.style.flexDirection = 'column';
+  rightColumn.style.gap = '30px';
+  rightColumn.classList.add('right-column');
+
+  // 处理前三个特殊字段
+  const firstThreeFields = allFields.slice(0, 3);
+  const remainingFields = allFields.slice(3);
+
+  firstThreeFields.forEach((field, index) => {
+    const label = document.createElement('label');
+    label.textContent = field.label;
+    label.setAttribute('for', `field-${field.name}`);
+
+    if (index === 0) { // 图片字段
+      const imageUpload = document.createElement('div');
+      imageUpload.className = 'image-upload';
+      
+      const imagePreview = document.createElement('div');
+      imagePreview.className = 'upload-preview';
+      
+      const img = document.createElement('img');
+      img.src = field.default || '';
+      img.id = `preview-${field.name}`;
+      imagePreview.appendChild(img);
+      
+      const uploadButton = document.createElement('label');
+      uploadButton.className = 'upload-btn';
+      uploadButton.textContent = '更换图片';
+      uploadButton.setAttribute('for', `field-${field.name}`);
+      
+      const input = document.createElement('input');
+      input.type = 'file';
+      input.accept = 'image/*';
+      input.id = `field-${field.name}`;
+      input.style.display = 'none';
+      
+      input.addEventListener('change', function(e) {
+        const file = e.target.files[0];
+        if (file) {
+          const reader = new FileReader();
+          reader.onload = function(event) {
+            img.src = event.target.result;
+            window.currentValues[field.name] = event.target.result;
+            updatePosterPreview();
+          };
+          reader.readAsDataURL(file);
+        }
+      });
+      
+      imageUpload.appendChild(imagePreview);
+      imageUpload.appendChild(uploadButton);
+      imageUpload.appendChild(input);
+      
+      leftColumn.appendChild(label);
+      leftColumn.appendChild(imageUpload);
+      
+      window.currentValues[field.name] = field.default || '';
+    } else { // 颜色字段
+      const colorContainer = document.createElement('div');
+      colorContainer.style.flex = '1';
+      
+      const input = document.createElement('input');
+      input.type = 'color';
+      input.className = 'color-picker';
+      input.id = `field-${field.name}`;
+      input.value = field.default || '#000000';
+      
+      input.addEventListener('input', function(e) {
+        window.currentValues[field.name] = e.target.value;
+        updatePosterPreview();
+      });
+      
+      window.currentValues[field.name] = field.default || '';
+      
+      colorContainer.appendChild(label);
+      colorContainer.appendChild(input);
+      rightColumn.appendChild(colorContainer);
+    }
+  });
+
+  specialFormGroup.appendChild(leftColumn);
+  specialFormGroup.appendChild(rightColumn);
+  editForm.appendChild(specialFormGroup);
+
+  // 处理剩余字段
+  remainingFields.forEach(field => {
     if (field.default === undefined || field.default === null) {
       field.default = '';
     }
     
-    // 如果是检测到的文本字段，但内容过短或不需要编辑，则跳过
     if (field.name.startsWith('detected_text_') && isCommonText(field.default)) {
       return;
     }
@@ -130,7 +226,6 @@ export function initializeEditor(template) {
     
     let input;
     
-    // 根据字段类型创建不同的输入控件
     switch (field.type) {
       case 'textarea':
         input = document.createElement('textarea');
@@ -171,7 +266,6 @@ export function initializeEditor(template) {
         input.id = `field-${field.name}`;
         input.style.display = 'none';
         
-        // 添加图片预览功能
         input.addEventListener('change', function(e) {
           const file = e.target.files[0];
           if (file) {
@@ -193,12 +287,11 @@ export function initializeEditor(template) {
         formGroup.appendChild(imageUpload);
         editForm.appendChild(formGroup);
         
-        // 存储默认值
         window.currentValues[field.name] = field.default || '';
         
         return;
         
-      default: // text 和其他类型
+      default:
         input = document.createElement('input');
         input.type = 'text';
         input.className = 'form-control';
@@ -206,13 +299,11 @@ export function initializeEditor(template) {
         input.value = field.default || '';
     }
     
-    // 添加输入事件监听器
     input.addEventListener('input', function(e) {
       window.currentValues[field.name] = e.target.value;
       updatePosterPreview();
     });
     
-    // 存储默认值
     window.currentValues[field.name] = field.default || '';
     
     formGroup.appendChild(label);
@@ -220,9 +311,8 @@ export function initializeEditor(template) {
     editForm.appendChild(formGroup);
   });
   
-  // 启用下载和分享按钮
+  // 启用下载按钮
   if (downloadBtn) downloadBtn.disabled = false;
-  if (shareBtn) shareBtn.disabled = false;
   
   // 更新预览
   updatePosterPreview();
@@ -325,6 +415,46 @@ window.downloadPoster = function(format = 'png', quality = 0.9) {
   
   if (!posterPreview) return;
   
+  // 显示加载提示
+  const loadingTip = document.createElement('div');
+  loadingTip.className = 'loading-tip';
+  loadingTip.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 正在生成海报...';
+  document.body.appendChild(loadingTip);
+
+  // 获取所有图片并保存原始样式
+  const images = posterPreview.getElementsByTagName('img');
+  const originalStyles = Array.from(images).map(img => ({
+    width: img.style.width,
+    height: img.style.height,
+    maxWidth: img.style.maxWidth,
+    maxHeight: img.style.maxHeight,
+    objectFit: img.style.objectFit
+  }));
+
+  // 创建一个函数来清理资源
+  const cleanup = () => {
+    try {
+      // 移除加载提示
+      if (loadingTip && loadingTip.parentNode) {
+        loadingTip.remove();
+      }
+      
+      // 恢复图片原始样式
+      Array.from(images).forEach((img, index) => {
+        if (originalStyles[index]) {
+          Object.assign(img.style, originalStyles[index]);
+        }
+      });
+      
+      // 恢复水印
+      if (watermarkData) {
+        watermarkData.parent.appendChild(watermarkData.element);
+      }
+    } catch (error) {
+      console.error('清理资源时发生错误:', error);
+    }
+  };
+  
   // 临时移除水印（如果有）以便导出时不包含水印
   const watermark = posterPreview.querySelector('.poster-watermark');
   let watermarkData = null;
@@ -337,39 +467,130 @@ window.downloadPoster = function(format = 'png', quality = 0.9) {
     watermark.remove();
   }
   
-  // 使用全局的html2canvas将预览区域转换为图片
-  html2canvas(posterPreview, {
-    scale: 2, // 提高图片质量
-    useCORS: true, // 允许加载跨域图片
+  try {
+    // 获取预览区域的实际尺寸
+    const previewRect = posterPreview.getBoundingClientRect();
+    const previewWidth = previewRect.width;
+    const previewHeight = previewRect.height;
+    
+    // 优化图片尺寸和质量
+    Array.from(images).forEach(img => {
+      // 保持图片原始比例
+      img.style.width = '100%';
+      img.style.height = '100%';
+      img.style.maxWidth = 'none'; // 移除最大宽度限制
+      img.style.objectFit = 'cover';
+      img.style.imageRendering = 'high-quality';
+      img.style.webkitFontSmoothing = 'antialiased';
+      img.style.mozOsxFontSmoothing = 'grayscale';
+      
+      // 强制浏览器使用高质量缩放
+      if (img.naturalWidth && img.naturalHeight) {
+        img.setAttribute('width', img.naturalWidth);
+        img.setAttribute('height', img.naturalHeight);
+      }
+    });
+  } catch (error) {
+    console.error('设置图片样式时发生错误:', error);
+    cleanup();
+    return;
+  }
+  
+  // 优化的html2canvas配置
+  const canvasOptions = {
+    scale: format === 'png' ? 3 : 2, // 提高缩放比例以获得更清晰的输出
+    useCORS: true,
     allowTaint: true,
-    backgroundColor: format === 'png' ? null : 'white'
-  }).then(canvas => {
-    // 根据格式选择导出方式
-    if (format === 'png') {
-      canvas.toBlob(blob => {
-        const templateName = window.currentTemplate ? window.currentTemplate.name : 'poster';
-        // 使用全局的saveAs
-        saveAs(blob, `${templateName}-${Date.now()}.png`);
-      }, 'image/png');
-    } else {
-      canvas.toBlob(blob => {
-        const templateName = window.currentTemplate ? window.currentTemplate.name : 'poster';
-        // 使用全局的saveAs
-        saveAs(blob, `${templateName}-${Date.now()}.jpg`);
-      }, 'image/jpeg', quality);
+    backgroundColor: format === 'png' ? null : 'white',
+    imageTimeout: 30000, // 30秒超时
+    logging: false,
+    onclone: function(clonedDoc) {
+      try {
+        const clonedImages = clonedDoc.getElementsByTagName('img');
+        Array.from(clonedImages).forEach(img => {
+          img.style.width = '100%';
+          img.style.height = '100%';
+          img.style.maxWidth = 'none';
+          img.style.objectFit = 'cover';
+          img.style.imageRendering = 'high-quality';
+          img.style.webkitFontSmoothing = 'antialiased';
+          img.style.mozOsxFontSmoothing = 'grayscale';
+          
+          if (img.naturalWidth && img.naturalHeight) {
+            img.setAttribute('width', img.naturalWidth);
+            img.setAttribute('height', img.naturalHeight);
+          }
+          
+          // 确保图片已加载
+          if (!img.complete) {
+            return new Promise((resolve) => {
+              img.onload = resolve;
+            });
+          }
+        });
+      } catch (error) {
+        console.error('克隆文档时发生错误:', error);
+      }
     }
-    
-    // 导出完成后恢复水印
-    if (watermarkData) {
-      watermarkData.parent.appendChild(watermarkData.element);
+  };
+
+  // 使用Promise.race来添加超时处理
+  const timeoutPromise = new Promise((_, reject) => {
+    setTimeout(() => reject(new Error('生成超时')), 40000); // 40秒总超时
+  });
+
+  Promise.race([
+    html2canvas(posterPreview, canvasOptions),
+    timeoutPromise
+  ]).then(canvas => {
+    try {
+      // 根据格式选择导出方式
+      const exportQuality = format === 'png' ? undefined : 1.0; // 最高质量JPEG
+      const mimeType = format === 'png' ? 'image/png' : 'image/jpeg';
+      
+      // 获取原始canvas的尺寸
+      const originalWidth = canvas.width;
+      const originalHeight = canvas.height;
+      
+      // 创建一个新的canvas，保持原始比例
+      const tempCanvas = document.createElement('canvas');
+      const ctx = tempCanvas.getContext('2d', {
+        alpha: format === 'png',
+        willReadFrequently: false,
+        desynchronized: true
+      });
+      
+      // 设置输出尺寸，保持原始比例
+      const maxWidth = 1600; // 增加最大宽度以提高清晰度
+      const scale = maxWidth / originalWidth;
+      tempCanvas.width = maxWidth;
+      tempCanvas.height = originalHeight * scale;
+      
+      // 使用高质量的图像平滑
+      ctx.imageSmoothingEnabled = true;
+      ctx.imageSmoothingQuality = 'high';
+      
+      // 绘制调整后的图像，保持比例
+      ctx.drawImage(canvas, 0, 0, tempCanvas.width, tempCanvas.height);
+      
+      // 如果是PNG格式，尝试优化透明度处理
+      if (format === 'png') {
+        const imageData = ctx.getImageData(0, 0, tempCanvas.width, tempCanvas.height);
+        ctx.putImageData(imageData, 0, 0);
+      }
+      
+      tempCanvas.toBlob(blob => {
+        const templateName = window.currentTemplate ? window.currentTemplate.name : 'poster';
+        saveAs(blob, `${templateName}-${Date.now()}.${format}`);
+        cleanup();
+      }, mimeType, exportQuality);
+    } catch (error) {
+      console.error('导出图片时发生错误:', error);
+      cleanup();
     }
   }).catch(error => {
     console.error('下载海报失败:', error);
-    alert('下载失败，请重试');
-    
-    // 出错时也恢复水印
-    if (watermarkData) {
-      watermarkData.parent.appendChild(watermarkData.element);
-    }
+    alert('生成海报失败，请重试');
+    cleanup();
   });
 }