upgrade poster-maker css styles

apps/poster-maker/css/main.css

@@ -58,6 +58,7 @@ body {
   display: flex;
   gap: 20px;
   max-height: calc(100vh - 150px);
+  height: calc(100vh - 150px); /* 添加固定高度 */
 }
 
 .tool-panel {
@@ -68,13 +69,13 @@ body {
   border-radius: var(--radius);
   box-shadow: var(--shadow);
   overflow: hidden;
+  min-height: 0; /* 确保 flex 子元素可以正确滚动 */
 }
 
 .preview-panel {
   flex: 1;
   background-color: var(--card-bg);
   border-radius: var(--radius);
-  padding: 15px;
   box-shadow: var(--shadow);
   display: flex;
   flex-direction: column;
@@ -84,6 +85,8 @@ body {
 .panel-tabs {
   display: flex;
   border-bottom: 1px solid var(--border-color);
+  height: 46px;  /* 统一高度 */
+  flex-shrink: 0; /* 防止压缩 */
 }
 
 .panel-tab {
@@ -96,6 +99,18 @@ body {
   color: var(--secondary-color);
   cursor: pointer;
   transition: var(--transition);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.panel-tab i {
+  font-size: 1rem;
+}
+
+.panel-tab span {
+  margin-top: 1px;
 }
 
 .panel-tab:hover {
@@ -107,21 +122,24 @@ body {
   border-bottom: 2px solid var(--primary-color);
 }
 
+.panel-tab.active i {
+  color: var(--primary-color);
+}
+
 .panel-content {
   flex: 1;
-  overflow: hidden;
-  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-height: 0; /* 确保内容可以滚动 */
+  height: 100%;
 }
 
 .tab-content {
-  position: absolute;
-  top: 0;
-  left: 0;
+  display: none;
   width: 100%;
   height: 100%;
   padding: 15px;
   overflow-y: auto;
-  display: none;
 }
 
 .tab-content.active {
@@ -131,6 +149,8 @@ body {
 /* 模板选择区域 */
 .template-selection {
   height: 100%;
+  display: flex;
+  flex-direction: column;
 }
 
 .template-categories {
@@ -138,6 +158,7 @@ body {
   flex-wrap: wrap;
   gap: 8px;
   margin-bottom: 12px;
+  flex-shrink: 0; /* 防止压缩 */
 }
 
 .category-btn {
@@ -164,10 +185,11 @@ body {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
   gap: 12px;
-  height: calc(100% - 40px);
+  flex: 1;
   overflow-y: auto;
   padding: 5px;
-  align-items: start; /* 确保项目从顶部对齐 */
+  align-items: start;
+  min-height: 0; /* 确保可以滚动 */
 }
 
 .template-item {
@@ -215,14 +237,13 @@ body {
 /* 编辑区域 */
 .editor-panel {
   height: 100%;
+  overflow-y: auto;
 }
 
 .edit-form {
   display: flex;
   flex-direction: column;
   gap: 12px;
-  max-height: 100%;
-  overflow-y: auto;
   padding-right: 5px;
 }
 
@@ -260,9 +281,12 @@ body {
 
 /* 高级选项区域 */
 .advanced-options {
+  height: 100%;
+  overflow-y: auto;
   display: flex;
   flex-direction: column;
   gap: 20px;
+  padding-right: 5px;
 }
 
 .option-group {
@@ -320,15 +344,16 @@ body {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 15px;
-  padding-bottom: 10px;
+  height: 46px;  /* 统一高度 */
   border-bottom: 1px solid var(--border-color);
+  padding: 0 15px;
 }
 
 .preview-header h2 {
   margin: 0;
   color: var(--primary-color);
-  font-size: 1.2rem;
+  font-size: 0.95rem;  /* 统一字体大小 */
+  font-weight: 500;    /* 统一字重 */
 }
 
 .zoom-controls {
@@ -345,6 +370,8 @@ body {
   font-size: 13px;
   cursor: pointer;
   transition: var(--transition);
+  height: 28px;       /* 固定按钮高度 */
+  line-height: 20px;  /* 文字垂直居中 */
 }
 
 .zoom-btn:hover {
@@ -361,7 +388,6 @@ body {
   flex: 1;
   margin-bottom: 15px;
   background-color: #f0f2f5;
-  border-radius: var(--radius);
   padding: 15px;
   overflow: hidden;
   position: relative;
@@ -467,7 +493,7 @@ body {
   display: flex;
   justify-content: center;
   gap: 15px;
-  margin-top: 10px;
+  margin-bottom: 10px;
 }
 
 .btn {

apps/poster-maker/index.html

@@ -24,9 +24,18 @@
     <main class="app-main">
       <div class="tool-panel">
         <div class="panel-tabs">
-          <button class="panel-tab active" data-tab="templates-tab">模板</button>
-          <button class="panel-tab" data-tab="editor-tab">编辑</button>
-          <button class="panel-tab" data-tab="advanced-tab">高级</button>
+          <button class="panel-tab active" data-tab="templates">
+            <i class="fas fa-images"></i>
+            <span>模板</span>
+          </button>
+          <button class="panel-tab" data-tab="editor">
+            <i class="fas fa-edit"></i>
+            <span>编辑</span>
+          </button>
+          <button class="panel-tab" data-tab="advanced">
+            <i class="fas fa-sliders-h"></i>
+            <span>高级</span>
+          </button>
         </div>
         
         <div class="panel-content">

apps/poster-maker/index.js

@@ -1,112 +0,0 @@
-import { templates } from './js/templateData.js';
-import { renderTemplates, initializeEditor } from './js/templateRenderer.js';
-import { setupEventListeners } from './js/eventHandlers.js';
-import { setupImageUpload } from './js/imageUpload.js';
-
-document.addEventListener('DOMContentLoaded', () => {
-  // 渲染所有模板缩略图
-  renderTemplates(templates);
-  
-  // 设置事件监听器
-  setupEventListeners();
-  
-  // 初始化图片上传功能
-  setupImageUpload();
-  
-  // 添加预览区域的缩放控制
-  setupPreviewZoom();
-  
-  // 默认选择第一个模板
-  setTimeout(() => {
-    const firstTemplate = document.querySelector('.template-item');
-    if (firstTemplate) {
-      firstTemplate.click();
-    }
-  }, 100);
-});
-
-// 设置预览区域的缩放控制
-function setupPreviewZoom() {
-  const previewContainer = document.querySelector('.preview-container');
-  const posterPreview = document.getElementById('poster-preview');
-  
-  if (!previewContainer || !posterPreview) return;
-  
-  // 创建缩放控制按钮容器
-  const zoomControls = document.createElement('div');
-  zoomControls.className = 'zoom-controls';
-  
-  // 创建放大按钮
-  const zoomInBtn = document.createElement('button');
-  zoomInBtn.className = 'zoom-btn';
-  zoomInBtn.innerHTML = '<i class="fas fa-search-plus"></i>';
-  zoomInBtn.title = '放大';
-  
-  // 创建缩小按钮
-  const zoomOutBtn = document.createElement('button');
-  zoomOutBtn.className = 'zoom-btn';
-  zoomOutBtn.innerHTML = '<i class="fas fa-search-minus"></i>';
-  zoomOutBtn.title = '缩小';
-  
-  // 创建重置按钮
-  const resetZoomBtn = document.createElement('button');
-  resetZoomBtn.className = 'zoom-btn';
-  resetZoomBtn.innerHTML = '<i class="fas fa-sync-alt"></i>';
-  resetZoomBtn.title = '重置大小';
-  
-  // 添加按钮到控制容器
-  zoomControls.appendChild(zoomOutBtn);
-  zoomControls.appendChild(resetZoomBtn);
-  zoomControls.appendChild(zoomInBtn);
-  
-  // 添加控制容器到预览区域
-  previewContainer.appendChild(zoomControls);
-  
-  // 设置当前缩放级别
-  let currentZoom = 1;
-  const zoomStep = 0.1;
-  const maxZoom = 1.5;
-  const minZoom = 0.5;
-  
-  // 添加放大事件
-  zoomInBtn.addEventListener('click', () => {
-    if (currentZoom < maxZoom) {
-      currentZoom += zoomStep;
-      applyZoom();
-    }
-  });
-  
-  // 添加缩小事件
-  zoomOutBtn.addEventListener('click', () => {
-    if (currentZoom > minZoom) {
-      currentZoom -= zoomStep;
-      applyZoom();
-    }
-  });
-  
-  // 添加重置事件
-  resetZoomBtn.addEventListener('click', () => {
-    currentZoom = 1;
-    applyZoom();
-  });
-  
-  // 应用缩放
-  function applyZoom() {
-    posterPreview.style.transform = `scale(${currentZoom})`;
-  }
-  
-  // 添加鼠标滚轮缩放
-  previewContainer.addEventListener('wheel', (e) => {
-    e.preventDefault();
-    
-    if (e.deltaY < 0 && currentZoom < maxZoom) {
-      // 向上滚动，放大
-      currentZoom += zoomStep;
-    } else if (e.deltaY > 0 && currentZoom > minZoom) {
-      // 向下滚动，缩小
-      currentZoom -= zoomStep;
-    }
-    
-    applyZoom();
-  });
-} 

apps/poster-maker/js/eventHandlers.js

@@ -12,7 +12,7 @@ export function setupEventListeners() {
         
         // 隐藏所有内容面板
         document.querySelectorAll('.tab-content').forEach(content => {
-          content.classList.remove('active');
+          content.style.display = 'none';
         });
         
         // 添加当前选项卡的active类
@@ -20,9 +20,12 @@ export function setupEventListeners() {
         
         // 显示对应的内容面板
         const tabId = tab.dataset.tab;
-        const tabContent = document.getElementById(tabId);
-        if (tabContent) {
-          tabContent.classList.add('active');
+        if (tabId === 'templates') {
+          document.getElementById('templates-tab').style.display = 'block';
+        } else if (tabId === 'editor') {
+          document.getElementById('editor-tab').style.display = 'block';
+        } else if (tabId === 'advanced') {
+          document.getElementById('advanced-tab').style.display = 'block';
         }
       });
     });

apps/poster-maker/js/index.js

@@ -59,7 +59,7 @@ function setupPreviewZoom() {
   
   // 添加重置事件
   resetZoomBtn.addEventListener('click', () => {
-    currentZoom = 1;
+    currentZoom = 0.65;
     applyZoom();
   });
   
@@ -82,4 +82,7 @@ function setupPreviewZoom() {
     
     applyZoom();
   });
+
+  // 初始化时自动触发重置缩放
+  resetZoomBtn.click();
 }