feat: 实现混装产品前端交互逻辑并优化样式

添加前端JS逻辑实现混装产品数量验证和按钮状态控制
优化CSS间距和颜色样式，移除冗余代码
更新模板文件结构以更好兼容主题
将资源注册改为直接加载

assets/css/frontend.css

@@ -12,8 +12,6 @@
 .single-product .product.type-yoone_bundle .images {
   display: none !important;
 }
-/* 兼容通过 body_class 添加的标记 */
-.yoone-bundle-product div.images { display: none !important; }
 
 /* 表格列宽优化 */
 .yoone-bundle-table th:nth-child(3),
@@ -33,7 +31,8 @@
 .yoone-bundle-items-wrapper {
     display: flex;
     flex-wrap: wrap;
-    gap: 20px; /* 卡片之间的间距 */
+    gap: 1em;
+    margin: 1em;
 }
 
 .yoone-bundle-item-card {
@@ -66,7 +65,6 @@
 
 .yoone-bundle-item-card .item-price {
     font-size: 16px;
-    color: #c00;
     margin-bottom: 8px;
 }
 

assets/js/frontend.js

@@ -1,3 +1,45 @@
-(function($){
+(function($) {
-  // 预留：如需在前端动态计算价格或增强交互，可在此添加脚本。
+    'use strict';
+
+    $(function() {
+        var minQty = 0;
+        var wrapper = $('.yoone-bundle-form');
+
+        // 从 DOM 中获取最小数量
+        var minText = wrapper.find('.yoone-bundle-min').text();
+        if (minText) {
+            var match = minText.match(/\d+/);
+            if (match) {
+                minQty = parseInt(match[0], 10);
+            }
+        }
+
+        function updateState() {
+            var total = 0;
+            wrapper.find('.yoone-bundle-qty').each(function() {
+                var v = parseInt($(this).val(), 10);
+                if (!isNaN(v) && v > 0) {
+                    total += v;
+                }
+            });
+
+            // 更新显示的数量
+            wrapper.find('.yoone-bundle-selected-count').text(total);
+
+            // 根据是否满足最小数量来启用/禁用按钮
+            var btn = wrapper.find('.single_add_to_cart_button');
+            if (total >= minQty) {
+                btn.prop('disabled', false);
+            } else {
+                btn.prop('disabled', true);
+            }
+        }
+
+        // 绑定事件
+        wrapper.on('change keyup', '.yoone-bundle-qty', updateState);
+
+        // 页面加载时立即执行一次，以确保初始状态正确
+        updateState();
+    });
+
 })(jQuery);

includes/frontend/class-yoone-product-bundles-frontend.php

@@ -54,9 +54,6 @@ class Yoone_Product_Bundles_Frontend {
                 // 加载插件内的完整页面模板
                 $new_template = YOONE_PB_PATH . 'templates/single-product-yoone-bundle.php';
                 if (file_exists($new_template)) {
-                    // 加载前端资源
-                    if (wp_style_is('yoone-pb-frontend', 'registered')) wp_enqueue_style('yoone-pb-frontend');
-                    if (wp_script_is('yoone-pb-frontend', 'registered')) wp_enqueue_script('yoone-pb-frontend');
                     return $new_template;
                 }
             }

templates/single-product-yoone-bundle.php

@@ -1,10 +1,11 @@
 <?php
 /**
- * Yoone Product Bundles - 混装产品单页模板
+ * Yoone Product Bundles - 混装产品单页模板 (v2)
  *
  * 此模板将完全取代 WooCommerce 的默认 single-product.php，提供一个包含卡片式选项的自定义布局。
+ * 它通过调用 get_header(), get_footer() 和 do_action() 来确保与主题的兼容性。
  *
- * @version 1.0.1
+ * @version 2.0.0
  */
 
 defined('ABSPATH') || exit;
@@ -64,17 +65,14 @@ get_header('shop');
 
 <div id="product-<?php the_ID(); ?>" <?php wc_product_class('yoone-bundle-product-page', $product); ?>>
 
+    <?php do_action('woocommerce_before_single_product_summary'); ?>
+
     <div class="summary entry-summary">
         <?php
-        // 显示标题、价格等
         do_action('woocommerce_single_product_summary');
         ?>
     </div>
 
-    <?php
-    // 在标准摘要信息后，插入我们的混装表单
-    // 我们不再使用 woocommerce_template_single_add_to_cart, 而是直接渲染
-    ?>
     <div class="yoone-bundle-form-container">
         <form class="cart yoone-bundle-form" action="<?php echo esc_url(apply_filters('woocommerce_add_to_cart_form_action', $product->get_permalink())); ?>" method="post" enctype="multipart/form-data">
             <div class="yoone-bundle-meta">
@@ -133,7 +131,6 @@ get_header('shop');
     </div>
 
     <?php
-    // 显示产品描述、评论等 Tab
     do_action('woocommerce_after_single_product_summary');
     ?>
 

yoone-product-bundles.php

@@ -43,8 +43,8 @@ define('YOONE_PB_VERSION', '0.1.1');
 
 // 资源加载（前端样式/脚本）
 add_action('wp_enqueue_scripts', function () {
-    wp_register_style('yoone-pb-frontend', YOONE_PB_URL . 'assets/css/frontend.css', array(), YOONE_PB_VERSION);
+    wp_enqueue_style('yoone-pb-frontend', YOONE_PB_URL . 'assets/css/frontend.css', array(), YOONE_PB_VERSION);
-    wp_register_script('yoone-pb-frontend', YOONE_PB_URL . 'assets/js/frontend.js', array('jquery'), YOONE_PB_VERSION, true);
+    wp_enqueue_script('yoone-pb-frontend', YOONE_PB_URL . 'assets/js/frontend.js', array('jquery'), YOONE_PB_VERSION, true);
 });
 
 // 后台资源