feat(dashboard): 新增筛号器功能

在history页面工具栏新增筛号器按钮，点击弹窗显示1-49所有号码（含波色、生肖标识），支持通过尾号下拉选择、生肖/波色按钮切换来过滤号码，被排除的号码变为灰色

application/admin/view/history/index.html

@@ -18,6 +18,7 @@
                         <a href="javascript:;" class="btn btn-warning btn-consecutive" title="{:__('Consecutive')}"><i class="fa fa-link"></i> {:__('Consecutive')}</a>
                         <a href="javascript:;" class="btn btn-default btn-tailnums" title="{:__('Tail Numbers')}"><i class="fa fa-list-ol"></i> {:__('Tail Numbers')}</a>
                         <a href="javascript:;" class="btn btn-danger btn-specialhotcold" title="{:__('Special Hot/Cold')}"><i class="fa fa-fire"></i> 特码冷热</a>
+                        <a href="javascript:;" class="btn btn-primary btn-numberfilter" title="筛号器"><i class="fa fa-filter"></i> 筛号器</a>
 <!--                        <a href="javascript:;" class="btn btn-success btn-dashboard" title="{:__('Dashboard')}"><i class="fa fa-tachometer"></i> {:__('Dashboard')}</a>-->
 <!--                        <a href="javascript:;" class="btn btn-success btn-add {:$auth->check('history/add')?'':'hide'}" title="{:__('Add')}" ><i class="fa fa-plus"></i> {:__('Add')}</a>-->
                     </div>

public/assets/js/backend/history.js

@@ -97,6 +97,11 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefin
             $(document).off('click', '.btn-dashboard').on('click', '.btn-dashboard', function () {
                 Controller.api.showDashboard();
             });
+
+            // 筛号器按钮事件
+            $(document).off('click', '.btn-numberfilter').on('click', '.btn-numberfilter', function () {
+                Controller.api.showNumberFilterDialog();
+            });
         },
         add: function () {
             Controller.api.bindevent();
@@ -735,6 +740,154 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefin
                 $('#shc-result', layero).html(html);
             },
 
+            /**
+             * 筛号器弹窗
+             */
+            showNumberFilterDialog: function () {
+                var html = '<style>.btn-gray{background-color:#d2d2d2!important;border-color:#adadad!important;color:#999!important;}</style>' +
+                    '<div style="padding:20px;">' +
+                    '<div style="margin-bottom:15px;display:flex;gap:15px;align-items:center;flex-wrap:wrap;">' +
+                    '  <div class="form-group" style="margin:0;">' +
+                    '    <label>尾号筛选：</label>' +
+                    '    <select id="nf-tail" class="form-control" style="width:100px;display:inline-block;">' +
+                    '      <option value="">全部</option>';
+                for (var t = 0; t <= 9; t++) {
+                    html += '<option value="' + t + '">' + t + '</option>';
+                }
+                html += '    </select>' +
+                    '  </div>' +
+                    '  <button class="btn btn-default btn-nf-reset" style="margin-left:auto;"><i class="fa fa-refresh"></i> 重置</button>' +
+                    '</div>' +
+                    '<div style="margin-bottom:15px;">' +
+                    '  <label style="margin-right:10px;">生肖：</label>' +
+                    '  <div id="nf-zodiac" style="display:inline-flex;gap:6px;flex-wrap:wrap;">' +
+                    '    <button class="btn btn-default btn-xs nf-zodiac" data-zodiac="鼠">鼠</button>' +
+                    '    <button class="btn btn-default btn-xs nf-zodiac" data-zodiac="牛">牛</button>' +
+                    '    <button class="btn btn-default btn-xs nf-zodiac" data-zodiac="虎">虎</button>' +
+                    '    <button class="btn btn-default btn-xs nf-zodiac" data-zodiac="兔">兔</button>' +
+                    '    <button class="btn btn-default btn-xs nf-zodiac" data-zodiac="龙">龙</button>' +
+                    '    <button class="btn btn-default btn-xs nf-zodiac" data-zodiac="蛇">蛇</button>' +
+                    '    <button class="btn btn-default btn-xs nf-zodiac" data-zodiac="马">马</button>' +
+                    '    <button class="btn btn-default btn-xs nf-zodiac" data-zodiac="羊">羊</button>' +
+                    '    <button class="btn btn-default btn-xs nf-zodiac" data-zodiac="猴">猴</button>' +
+                    '    <button class="btn btn-default btn-xs nf-zodiac" data-zodiac="鸡">鸡</button>' +
+                    '    <button class="btn btn-default btn-xs nf-zodiac" data-zodiac="狗">狗</button>' +
+                    '    <button class="btn btn-default btn-xs nf-zodiac" data-zodiac="猪">猪</button>' +
+                    '  </div>' +
+                    '</div>' +
+                    '<div style="margin-bottom:15px;">' +
+                    '  <label style="margin-right:10px;">波色：</label>' +
+                    '  <div id="nf-color" style="display:inline-flex;gap:6px;">' +
+                    '    <button class="btn btn-default btn-xs nf-color" data-color="红" style="color:#e74c3c;">红波</button>' +
+                    '    <button class="btn btn-default btn-xs nf-color" data-color="蓝" style="color:#3498db;">蓝波</button>' +
+                    '    <button class="btn btn-default btn-xs nf-color" data-color="绿" style="color:#2ecc71;">绿波</button>' +
+                    '  </div>' +
+                    '</div>' +
+                    '<div id="nf-numbers" style="display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;"></div>' +
+                    '</div>';
+
+                Layer.open({
+                    type: 1,
+                    title: '筛号器',
+                    area: ['700px', '600px'],
+                    content: html,
+                    shadeClose: true,
+                    success: function (layero, index) {
+                        // 渲染号码网格
+                        Controller.api.renderNumberFilterGrid(layero);
+
+                        // 尾号下拉选择
+                        $('#nf-tail', layero).on('change', function () {
+                            Controller.api.applyNumberFilters(layero);
+                        });
+
+                        // 生肖按钮点击
+                        $('.nf-zodiac', layero).on('click', function () {
+                            var $btn = $(this);
+                            $btn.toggleClass('btn-default').toggleClass('btn-gray');
+                            Controller.api.applyNumberFilters(layero);
+                        });
+
+                        // 波色按钮点击
+                        $('.nf-color', layero).on('click', function () {
+                            var $btn = $(this);
+                            $btn.toggleClass('btn-default').toggleClass('btn-gray');
+                            Controller.api.applyNumberFilters(layero);
+                        });
+
+                        // 重置按钮
+                        $('.btn-nf-reset', layero).on('click', function () {
+                            $('#nf-tail', layero).val('');
+                            $('.nf-zodiac', layero).removeClass('btn-gray').addClass('btn-default');
+                            $('.nf-color', layero).removeClass('btn-gray').addClass('btn-default');
+                            Controller.api.applyNumberFilters(layero);
+                        });
+                    }
+                });
+            },
+
+            /**
+             * 渲染筛号器号码网格
+             */
+            renderNumberFilterGrid: function (layero) {
+                var html = '';
+                for (var num = 1; num <= 49; num++) {
+                    var color = Controller.api.getColorByNum(num);
+                    var animal = Controller.api.getAnimalByNum(num);
+                    html += '<div class="nf-number" data-num="' + num + '" data-color="' + (color.indexOf('红') !== -1 ? '红' : color.indexOf('蓝') !== -1 ? '蓝' : '绿') + '" data-animal="' + animal + '" data-tail="' + (num % 10) + '" style="text-align:center;background:#f9f9f9;padding:6px 4px;border-radius:6px;min-width:60px;transition:opacity 0.2s;">' +
+                        '<span style="display:inline-block;width:36px;height:36px;line-height:36px;text-align:center;border-radius:50%;color:#fff;background-color:' + color + ';font-weight:bold;">' + num + '</span>' +
+                        '<div style="font-size:10px;color:#666;line-height:1.2;">' + animal + '</div>' +
+                        '</div>';
+                }
+                $('#nf-numbers', layero).html(html);
+            },
+
+            /**
+             * 应用筛号器过滤条件
+             */
+            applyNumberFilters: function (layero) {
+                var tailVal = $('#nf-tail', layero).val();
+                // 收集被点击（置灰）的生肖
+                var excludedZodiacs = [];
+                $('.nf-zodiac.btn-gray', layero).each(function () {
+                    excludedZodiacs.push($(this).data('zodiac'));
+                });
+                // 收集被点击（置灰）的波色
+                var excludedColors = [];
+                $('.nf-color.btn-gray', layero).each(function () {
+                    excludedColors.push($(this).data('color'));
+                });
+
+                $('.nf-number', layero).each(function () {
+                    var $num = $(this);
+                    var num = parseInt($num.data('num'));
+                    var tail = $num.data('tail');
+                    var animal = $num.data('animal');
+                    var color = $num.data('color');
+
+                    var hidden = false;
+
+                    // 尾号筛选：选择了具体尾号则隐藏不匹配的
+                    if (tailVal !== '' && parseInt(tailVal) !== tail) {
+                        hidden = true;
+                    }
+                    // 排除的生肖
+                    if (excludedZodiacs.indexOf(animal) !== -1) {
+                        hidden = true;
+                    }
+                    // 排除的波色
+                    if (excludedColors.indexOf(color) !== -1) {
+                        hidden = true;
+                    }
+
+                    if (hidden) {
+                        $num.css('opacity', '0.25').css('filter', 'grayscale(100%)');
+                    } else {
+                        $num.css('opacity', '1').css('filter', 'none');
+                    }
+                });
+            },
+
             bindevent: function () {
                 Form.api.bindevent($("form[role=form]"));
             },