feat: 在index.html和script.js中添加图像批量生成功能

styles.css

@@ -460,3 +460,122 @@ body {
     border-color: var(--success-color) !important;
     background-color: rgba(40, 167, 69, 0.1) !important;
 }
+
+/* 占位图像样式 */
+.image-placeholder {
+    position: relative;
+    border-radius: 10px;
+    overflow: hidden;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+    transition: var(--transition);
+    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+    border: 2px dashed #dee2e6;
+}
+
+.image-placeholder:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
+}
+
+.image-placeholder-content {
+    width: 100%;
+    height: 200px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    color: #6c757d;
+}
+
+.image-placeholder-icon {
+    font-size: 3rem;
+    margin-bottom: 10px;
+    opacity: 0.5;
+}
+
+.image-placeholder-text {
+    font-size: 0.9rem;
+    text-align: center;
+    padding: 0 10px;
+}
+
+.image-placeholder-spinner {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    width: 20px;
+    height: 20px;
+    border: 2px solid #f3f3f3;
+    border-top: 2px solid var(--primary-color);
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+/* 批量生成状态指示器 */
+.batch-status {
+    position: fixed;
+    top: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    background: rgba(0, 0, 0, 0.8);
+    color: white;
+    padding: 10px 20px;
+    border-radius: 25px;
+    z-index: 9999;
+    display: none;
+}
+
+.batch-status.show {
+    display: block;
+    animation: slideDown 0.3s ease-out;
+}
+
+@keyframes slideDown {
+    from {
+        opacity: 0;
+        transform: translateX(-50%) translateY(-20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(-50%) translateY(0);
+    }
+}
+
+/* 图像生成模块样式 */
+.image-generation-module {
+    background: var(--light-color);
+    border-radius: 10px;
+    padding: 20px;
+    margin-bottom: 20px;
+    border: 1px solid #e9ecef;
+}
+
+.image-generation-module .input-group {
+    margin-bottom: 15px;
+}
+
+.image-generation-module .btn {
+    margin-bottom: 10px;
+}
+
+.image-generation-module .text-muted {
+    font-size: 0.85rem;
+    margin-top: 5px;
+}
+
+/* 确保按钮在移动设备上也能正确显示 */
+@media (max-width: 768px) {
+    .image-generation-module .btn {
+        padding: 10px 15px;
+        font-size: 14px;
+    }
+    
+    .image-generation-module .input-group-text {
+        font-size: 14px;
+    }
+}