BGSS 官網(wǎng) GEO 智能檢測系統(tǒng) - 工程師部署手冊

項目背景：
我們需要在現(xiàn)有的 WordPress 官網(wǎng)中嵌入一個“品牌生成式引擎優(yōu)化 (GEO) 檢測”工具。該工具需完美融合現(xiàn)有網(wǎng)站的“流體光暈+毛玻璃”UI 風(fēng)格，支持多終端響應(yīng)式，并自帶基于 WordPress REST API 的同域數(shù)據(jù)接口（目前已內(nèi)置 Mock 數(shù)據(jù)，未來將對接 admin.bgssai.com 的 Spring Boot 網(wǎng)關(guān)）。

第一部分：插件目錄結(jié)構(gòu)

請在服務(wù)器的 WordPress 插件目錄 /wp-content/plugins/ 下，新建一個名為 bgss-geo-tool 的文件夾，并嚴(yán)格按照以下結(jié)構(gòu)創(chuàng)建文件：

bgss-geo-tool/
├── bgss-geo-tool.php            # 插件主入口文件
├── includes/
│   └── api.php                  # 核心接口與響應(yīng)邏輯
├── templates/
│   └── tool-template.php        # 前端 HTML 結(jié)構(gòu)
└── assets/
    ├── css/
    │   └── geo-ui.css           # 流體玻璃樣式與移動端適配
    └── js/
        └── geo-app.js           # 交互邏輯與同域 API 請求

第二部分：核心代碼清單（共 5 個文件）

請將以下代碼分別復(fù)制到對應(yīng)的文件中。

1. bgss-geo-tool.php

<?php
/*
Plugin Name: BGSS GEO 智能優(yōu)化工具 (完整版)
Description: 專為兵貴神速科技定制的 GEO 檢測平臺，內(nèi)置獨(dú)立 REST API 接口與流體玻璃 UI。
Version: 2.0
Author: BGSS Tech
*/

if (!defined('ABSPATH')) exit;

define('BGSS_GEO_PLUGIN_DIR', plugin_dir_path(__FILE__));
define('BGSS_GEO_PLUGIN_URL', plugin_dir_url(__FILE__));

// 引入 API 路由處理
require_once BGSS_GEO_PLUGIN_DIR . 'includes/api.php';

// 注冊后臺菜單項
add_action('admin_menu', 'bgss_geo_register_menu');
function bgss_geo_register_menu() {
    add_menu_page('GEO 工具設(shè)置', 'GEO 工具', 'manage_options', 'bgss-geo-settings', 'bgss_geo_settings_page', 'dashicons-chart-area');
}

function bgss_geo_settings_page() {
    ?>
    <div class="wrap">
        <h1>GEO 優(yōu)化工具高級設(shè)置</h1>
        <form method="post" action="options.php">
            <?php
            settings_fields('bgss-geo-group');
            do_settings_sections('bgss-geo-group');
            ?>
            <table class="form-table">
                <tr valign="top">
                    <th scope="row">遠(yuǎn)程 API 網(wǎng)關(guān)地址<br><small>(未來對接獨(dú)立后端時使用)</small></th>
                    <td>
                        <input type="text" name="bgss_geo_remote_api_url" value="<?php echo esc_attr(get_option('bgss_geo_remote_api_url', 'https://admin.bgssai.com/api/v1/geo/detect')); ?>" class="regular-text" style="width: 400px;" />
                    </td>
                </tr>
            </table>
            <?php submit_button(); ?>
        </form>
    </div>
    <?php
}

add_action('admin_init', 'bgss_geo_register_settings');
function bgss_geo_register_settings() {
    register_setting('bgss-geo-group', 'bgss_geo_remote_api_url');
}

// 注冊前端短代碼 [bgss_geo]
add_shortcode('bgss_geo', 'bgss_geo_render_tool');
function bgss_geo_render_tool() {
    wp_enqueue_style('bgss-geo-style', BGSS_GEO_PLUGIN_URL . 'assets/css/geo-ui.css', array(), '2.0');
    wp_enqueue_script('bgss-geo-script', BGSS_GEO_PLUGIN_URL . 'assets/js/geo-app.js', array(), '2.0', true);

    // 注入本地 REST API 路徑和安全 Nonce
    wp_localize_script('bgss-geo-script', 'bgssGeoData', array(
        'apiUrl' => esc_url_raw(rest_url('bgss-geo/v1/detect')),
        'nonce'  => wp_create_nonce('wp_rest')
    ));

    ob_start();
    include BGSS_GEO_PLUGIN_DIR . 'templates/tool-template.php';
    return ob_get_clean();
}

2. includes/api.php

<?php
if (!defined('ABSPATH')) exit;

add_action('rest_api_init', function () {
    register_rest_route('bgss-geo/v1', '/detect', array(
        'methods'  => 'POST',
        'callback' => 'bgss_geo_handle_detect_request',
        'permission_callback' => '__return_true'
    ));
});

function bgss_geo_handle_detect_request(WP_REST_Request $request) {
    $params = $request->get_json_params();
    $query = isset($params['query']) ? sanitize_text_field($params['query']) : '';
    $brand = isset($params['brand']) ? sanitize_text_field($params['brand']) : '';
    $platforms = isset($params['platforms']) ? $params['platforms'] : array();

    if (empty($query) || empty($brand) || empty($platforms)) {
        return new WP_REST_Response(array('code' => 'error', 'message' => '參數(shù)不完整'), 400);
    }

    // =========================================================================
    // ?? [真實后端開關(guān)] 當(dāng) Spring Boot 后端就緒后，將其改為 false
    // =========================================================================
    $use_mock = true; 

    if (!$use_mock) {
        $remote_url = get_option('bgss_geo_remote_api_url', 'https://admin.bgssai.com/api/v1/geo/detect');
        $response = wp_remote_post($remote_url, array(
            'method'      => 'POST',
            'timeout'     => 45, 
            'headers'     => array('Content-Type' => 'application/json; charset=utf-8'),
            'body'        => wp_json_encode($params),
            'data_format' => 'body',
        ));

        if (is_wp_error($response)) {
            return new WP_REST_Response(array('code' => 'error', 'message' => '網(wǎng)關(guān)請求失?。? . $response->get_error_message()), 500);
        }

        $body = wp_remote_retrieve_body($response);
        return new WP_REST_Response(json_decode($body), wp_remote_retrieve_response_code($response));
    }

    // =========================================================================
    // ?? [Mock 模擬數(shù)據(jù)] 當(dāng)前測試階段使用
    // =========================================================================
    sleep(2); // 模擬耗時

    // 模擬 20% 的概率出現(xiàn)零曝光（Empty State）
    if (rand(1, 100) > 80) {
        $mock_results = array(); 
    } else {
        $mock_results = array(
            array('source' => '搜狐科技', 'percentage' => rand(80, 95)),
            array('source' => '今日頭條', 'percentage' => rand(65, 80)),
            array('source' => '知乎', 'percentage' => rand(55, 65)),
            array('source' => '微信公眾號', 'percentage' => rand(40, 55)),
            array('source' => '百度百科', 'percentage' => rand(5, 15))
        );
    }

    return new WP_REST_Response(array(
        'code' => 'success',
        'message' => 'AI 分析完成',
        'data' => array(
            'question' => $query,
            'brand' => $brand,
            'results' => $mock_results
        )
    ), 200);
}

3. templates/tool-template.php

<div id="bgss-geo-app" class="bgss-geo-wrapper">
    <div class="bgss-geo-content">
        <div class="search-card glass-card">
            <div class="input-group">
                <label>搜索用戶可能提問的問題</label>
                <input type="text" id="geo-query" placeholder="例如：昆山出海營銷服務(wù)商哪家好？" class="glass-input">
            </div>
            <div class="flex-row">
                <div class="input-sub">
                    <label>您的品牌名稱</label>
                    <input type="text" id="geo-brand" placeholder="昆山兵貴神速智能科技有限公司" class="glass-input" value="兵貴神速">
                </div>
                <div class="input-sub">
                    <label>競品名稱（選填）</label>
                    <input type="text" id="geo-competitor" placeholder="競品品牌" class="glass-input">
                </div>
            </div>
            
            <div class="platform-selector">
                <span>檢測目標(biāo) AI 平臺：</span>
                <div class="chips">
                    <button class="chip glass-chip active" data-id="doubao">豆包</button>
                    <button class="chip glass-chip active" data-id="yuanbao">騰訊元寶</button>
                    <button class="chip glass-chip active" data-id="deepseek">DeepSeek</button>
                    <button class="chip glass-chip active" data-id="qianwen">通義千問</button>
                    <button class="chip glass-chip active" data-id="wenxin">文心一言</button>
                    <button class="chip glass-chip active" data-id="kimi">Kimi</button>
                </div>
            </div>

            <button id="start-detect" class="primary-btn glass-btn">開始智能檢測 →</button>
        </div>

        <div id="geo-results" style="display:none;">
            <div class="chart-container glass-card">
                <h3>AI 引擎引用數(shù)據(jù)源 Top 占比</h3>
                <p style="text-align: center; color: #6b7280; font-size: 13px; margin-top: -15px; margin-bottom: 30px;">分析各大 AI 傾向于從哪些媒體提取并推薦您的品牌信息</p>
                <div id="source-chart" style="height: auto; min-height: 200px; width: 100%;"></div>
            </div>
        </div>
    </div>
</div>

4. assets/css/geo-ui.css

.bgss-geo-wrapper {
    position: relative;
    padding: 20px 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    box-sizing: border-box;
    z-index: 1;
}

.bgss-geo-content {
    max-width: 900px;
    margin: 0 auto;
}

.bgss-geo-wrapper .glass-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.1) 100%);
    backdrop-filter: blur(25px) saturate(150%);
    -webkit-backdrop-filter: blur(25px) saturate(150%);
    border: 1px solid rgba(29, 78, 216, 0.15);
    border-top: 1px solid rgba(255, 255, 255, 0.9);
    border-left: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 20px;
    box-shadow: 0 10px 40px 0 rgba(10, 26, 56, 0.12);
    padding: 40px;
    margin-bottom: 30px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.bgss-geo-wrapper .glass-card:hover {
    box-shadow: 0 15px 55px 0 rgba(10, 26, 56, 0.22);
}

.glass-input {
    background: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
    width: 100%;
    padding: 14px 18px;
    border-radius: 12px;
    font-size: 14px;
    color: #1f2937;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.glass-input:focus {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: #1d4ed8 !important;
    outline: none;
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.2), inset 0 2px 4px rgba(0, 0, 0, 0.02);
}

.input-group, .input-sub { margin-bottom: 24px; }
.flex-row { display: flex; gap: 24px; }
.flex-row .input-sub { flex: 1; }

.bgss-geo-wrapper label {
    display: block; font-size: 14px; font-weight: 600;
    color: #32373c; margin-bottom: 10px;
}

.platform-selector {
    display: flex; align-items: center; gap: 16px; margin-bottom: 30px; flex-wrap: wrap;
}
.platform-selector > span { font-size: 14px; font-weight: 600; color: #32373c; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }

.glass-chip {
    padding: 8px 18px; border-radius: 20px;
    background: rgba(255, 255, 255, 0.5); border: 1px solid rgba(255, 255, 255, 0.7);
    color: #4b5563; font-size: 13px; font-weight: 500;
    cursor: pointer; backdrop-filter: blur(4px);
    transition: all 0.3s ease;
}
.glass-chip:hover { background: rgba(255, 255, 255, 0.8); transform: translateY(-2px); }
.glass-chip.active {
    background: #1d4ed8; border-color: transparent; color: white;
    box-shadow: 0 4px 12px rgba(29, 78, 216, 0.3);
}

.glass-btn {
    width: 100%; max-width: 250px; padding: 16px 32px;
    background: linear-gradient(135deg, #ff9b6d, #ff7c3c) !important;
    color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.7) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.9) !important;
    border-radius: 50px !important; font-size: 16px; font-weight: 600;
    cursor: pointer; box-shadow: 0 4px 15px rgba(255, 124, 60, 0.3) !important;
    transition: all 0.3s ease !important; display: block; margin: 0 auto; text-align: center;
}
.glass-btn:hover {
    background: rgba(255, 255, 255, 0.6) !important; color: #ff7c3c !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important; transform: scale(1.02);
}
.glass-btn:disabled {
    background: #9ca3af !important; box-shadow: none !important; color: white !important;
    cursor: not-allowed; border: none !important; transform: none !important;
}

.chart-container h3 {
    margin-top: 0; margin-bottom: 24px; font-size: 18px; font-weight: 700; color: #32373c; text-align: center;
}
.chart-row { display: flex; align-items: center; margin-bottom: 18px; }
.chart-label { width: 120px; font-size: 13px; font-weight: 500; color: #374151; text-align: right; padding-right: 16px; }
.chart-track { flex: 1; height: 16px; background: rgba(255, 255, 255, 0.4); border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 8px; overflow: hidden; box-shadow: inset 0 1px 3px rgba(0,0,0,0.05); }
.chart-fill { height: 100%; background: linear-gradient(90deg, #1d4ed8 0%, #ff7c3c 100%); border-radius: 8px; width: 0%; transition: width 1.2s cubic-bezier(0.34, 1.56, 0.64, 1); }
.chart-value { width: 50px; font-size: 13px; font-weight: 600; color: #4b5563; text-align: left; padding-left: 14px; }

/* 移動端適配 */
@media (max-width: 768px) {
    .bgss-geo-wrapper { padding: 20px 10px; }
    .bgss-geo-wrapper .glass-card { padding: 24px 15px; }
    .flex-row { flex-direction: column; gap: 10px; }
    .platform-selector { flex-direction: column; align-items: flex-start; gap: 10px; }
    .chips { gap: 8px; }
    .glass-chip { padding: 6px 12px; font-size: 12px; }
    .chart-label { width: 80px; font-size: 12px; padding-right: 10px; }
    .chart-value { width: 40px; font-size: 12px; padding-left: 8px; }
    .glass-btn { max-width: 100%; }
}

5. assets/js/geo-app.js

document.addEventListener('DOMContentLoaded', function() {
    const startBtn = document.getElementById('start-detect');
    const chips = document.querySelectorAll('.chip');
    const resultsArea = document.getElementById('geo-results');
    const chartArea = document.getElementById('source-chart');

    chips.forEach(chip => {
        chip.addEventListener('click', function() {
            this.classList.toggle('active');
        });
    });

    startBtn.addEventListener('click', function() {
        const query = document.getElementById('geo-query').value.trim();
        const brand = document.getElementById('geo-brand').value.trim();
        const selectedPlatforms = Array.from(document.querySelectorAll('.chip.active')).map(c => c.dataset.id);

        if (!query || !brand) {
            alert('請?zhí)顚懰阉鲉栴}和品牌名稱！');
            return;
        }
        if (selectedPlatforms.length === 0) {
            alert('請至少選擇一個 AI 平臺！');
            return;
        }

        const originalText = startBtn.innerHTML;
        startBtn.innerHTML = 'AI 引擎深度檢測中...';
        startBtn.disabled = true;
        resultsArea.style.display = 'none';

        fetch(bgssGeoData.apiUrl, {
            method: 'POST',
            headers: { 
                'Content-Type': 'application/json',
                'X-WP-Nonce': bgssGeoData.nonce
            },
            body: JSON.stringify({ 
                query: query, 
                brand: brand, 
                platforms: selectedPlatforms 
            })
        })
        .then(response => response.json())
        .then(res => {
            if (res.code === 'success') {
                renderChart(res.data.results);
                finishLoading();
            } else {
                throw new Error(res.message);
            }
        })
        .catch(error => {
            alert('請求出錯: ' + error.message);
            startBtn.innerHTML = originalText;
            startBtn.disabled = false;
        });

        function finishLoading() {
            resultsArea.style.display = 'block';
            startBtn.innerHTML = originalText;
            startBtn.disabled = false;
            resultsArea.scrollIntoView({ behavior: 'smooth', block: 'center' });
        }
    });

    function renderChart(data) {
        chartArea.innerHTML = ''; 
        
        if (!data || data.length === 0) {
            const emptyState = document.createElement('div');
            emptyState.style.textAlign = 'center';
            emptyState.style.padding = '30px 20px';
            emptyState.innerHTML = `
                <div style="font-size: 40px; margin-bottom: 10px;">??</div>
                <h4 style="color: #1f2937; margin-bottom: 10px; font-size: 16px;">未檢測到品牌有效曝光</h4>
                <p style="color: #6b7280; font-size: 14px; line-height: 1.6;">
                    在您選擇的 AI 平臺中，當(dāng)前問題暫未引用您的品牌信息。<br>
                    <strong style="color: #1d4ed8;">這是一個極佳的 GEO 優(yōu)化機(jī)會！</strong>
                </p>
                <a href="/about-us/" style="display: inline-block; margin-top: 15px; padding: 10px 20px; background: rgba(29,78,216,0.1); color: #1d4ed8; text-decoration: none; border-radius: 20px; font-size: 13px; font-weight: 600; transition: all 0.3s;">聯(lián)系我們獲取優(yōu)化方案</a>
            `;
            chartArea.appendChild(emptyState);
            return;
        }

        data.forEach((item, index) => {
            const barRow = document.createElement('div');
            barRow.className = 'chart-row';
            
            const label = document.createElement('div');
            label.className = 'chart-label';
            label.innerText = item.source;
            
            const barTrack = document.createElement('div');
            barTrack.className = 'chart-track';
            
            const barFill = document.createElement('div');
            barFill.className = 'chart-fill';
            
            const value = document.createElement('div');
            value.className = 'chart-value';
            value.innerText = item.percentage + '%';

            barTrack.appendChild(barFill);
            barRow.appendChild(label);
            barRow.appendChild(barTrack);
            barRow.appendChild(value);
            
            chartArea.appendChild(barRow);

            setTimeout(() => {
                barFill.style.width = item.percentage + '%';
            }, 100 + (index * 150));
        });
    }
});

第三部分：本地靜態(tài)測試包 (方便工程師調(diào)試)

如果工程師想在上傳前直接在本地瀏覽器雙擊查看交互動畫，可以將以下代碼保存為 geo-test.html：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>GEO智能檢測系統(tǒng) (本地原型版)</title>
    <style>
        body, html { margin: 0; padding: 0; min-height: 100vh; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: linear-gradient(-45deg, #ffffff 0%, #f0f7fe 30%, #ffead8 55%, #ffffff 100%); background-size: 300% 300%; animation: fluidBgLightBrand 20s ease infinite; background-attachment: fixed; display: flex; flex-direction: column; }
        @keyframes fluidBgLightBrand { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
        body::before, body::after { content: ""; position: fixed; border-radius: 50%; filter: blur(80px); opacity: 0.15; z-index: 0; pointer-events: none; }
        body::before { width: 600px; height: 600px; background: #1d4ed8; top: -100px; left: -150px; }
        body::after { width: 450px; height: 450px; background: #ff7c3c; bottom: 100px; right: 0; }
        
        .bgss-geo-wrapper { position: relative; padding: 60px 20px 100px 20px; z-index: 1; flex: 1; }
        .bgss-geo-content { max-width: 900px; margin: 0 auto; }
        .glass-card { background: linear-gradient(135deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.1) 100%); backdrop-filter: blur(25px) saturate(150%); -webkit-backdrop-filter: blur(25px) saturate(150%); border: 1px solid rgba(29,78,216,0.15); border-top: 1px solid rgba(255,255,255,0.9); border-left: 1px solid rgba(255,255,255,0.9); border-radius: 20px; box-shadow: 0 10px 40px 0 rgba(10,26,56,0.12); padding: 40px; margin-bottom: 30px; }
        .input-group, .input-sub { margin-bottom: 24px; }
        .flex-row { display: flex; gap: 24px; }
        .flex-row .input-sub { flex: 1; }
        label { display: block; font-size: 14px; font-weight: 600; color: #32373c; margin-bottom: 10px; }
        .glass-input { background: rgba(255,255,255,0.6); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.8); width: 100%; padding: 14px 18px; border-radius: 12px; font-size: 14px; color: #1f2937; box-sizing: border-box; }
        .platform-selector { display: flex; align-items: center; gap: 16px; margin-bottom: 30px; flex-wrap: wrap; }
        .platform-selector > span { font-size: 14px; font-weight: 600; color: #32373c; }
        .chips { display: flex; flex-wrap: wrap; gap: 10px; }
        .glass-chip { padding: 8px 18px; border-radius: 20px; background: rgba(255,255,255,0.5); border: 1px solid rgba(255,255,255,0.7); color: #4b5563; font-size: 13px; font-weight: 500; cursor: pointer; }
        .glass-chip.active { background: #1d4ed8; border-color: transparent; color: white; }
        .glass-btn { width: 100%; max-width: 280px; padding: 16px 32px; background: linear-gradient(135deg, #ff9b6d, #ff7c3c); color: #ffffff; border: 1px solid rgba(255,255,255,0.7); border-radius: 50px; font-size: 16px; font-weight: 600; cursor: pointer; display: block; margin: 0 auto; }
        .chart-container h3 { margin-top: 0; margin-bottom: 24px; font-size: 18px; color: #32373c; text-align: center; }
        .chart-row { display: flex; align-items: center; margin-bottom: 18px; }
        .chart-label { width: 120px; font-size: 13px; font-weight: 500; text-align: right; padding-right: 16px; }
        .chart-track { flex: 1; height: 16px; background: rgba(255,255,255,0.4); border-radius: 8px; overflow: hidden; }
        .chart-fill { height: 100%; background: linear-gradient(90deg, #1d4ed8 0%, #ff7c3c 100%); border-radius: 8px; width: 0%; transition: width 1.2s cubic-bezier(0.34, 1.56, 0.64, 1); }
        .chart-value { width: 50px; font-size: 13px; padding-left: 14px; }
    </style>
</head>
<body>
    <div id="bgss-geo-app" class="bgss-geo-wrapper">
        <div class="bgss-geo-content">
            <div style="text-align: center; margin-bottom: 40px; position:relative; z-index: 10;">
                <h1 style="font-size: 2.5rem; color: #1f2937; margin-bottom: 10px;">品牌生成式引擎優(yōu)化 (GEO) 檢測</h1>
                <p style="color: #6b7280; font-size: 1.1rem;">洞察您的品牌在各大 AI 核心推薦位的曝光表現(xiàn)</p>
            </div>
            <div class="search-card glass-card">
                <div class="input-group">
                    <label>搜索問題</label>
                    <input type="text" id="geo-query" placeholder="例如：昆山出海營銷服務(wù)商哪家好？" class="glass-input">
                </div>
                <div class="flex-row">
                    <div class="input-sub">
                        <label>品牌名稱</label>
                        <input type="text" id="geo-brand" placeholder="昆山兵貴神速" class="glass-input" value="兵貴神速">
                    </div>
                    <div class="input-sub">
                        <label>競品名稱（選填）</label>
                        <input type="text" id="geo-competitor" placeholder="競品品牌" class="glass-input">
                    </div>
                </div>
                <div class="platform-selector">
                    <span>AI 平臺：</span>
                    <div class="chips">
                        <button class="chip glass-chip active" data-id="doubao">豆包</button>
                        <button class="chip glass-chip active" data-id="kimi">Kimi</button>
                    </div>
                </div>
                <button id="start-detect" class="glass-btn">開始智能檢測 →</button>
            </div>
            <div id="geo-results" style="display:none;">
                <div class="chart-container glass-card">
                    <h3>AI 引擎引用數(shù)據(jù)源 Top 占比</h3>
                    <div id="source-chart"></div>
                </div>
            </div>
        </div>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const startBtn = document.getElementById('start-detect');
            const chips = document.querySelectorAll('.chip');
            const resultsArea = document.getElementById('geo-results');
            const chartArea = document.getElementById('source-chart');
            chips.forEach(c => c.addEventListener('click', function() { this.classList.toggle('active'); }));

            startBtn.addEventListener('click', function() {
                const originalText = startBtn.innerHTML;
                startBtn.innerHTML = 'AI 引擎深度檢測中...';
                startBtn.disabled = true;
                resultsArea.style.display = 'none';

                setTimeout(() => {
                    chartArea.innerHTML = '';
                    const mockData = [
                        { source: '搜狐科技', percentage: 85 }, { source: '今日頭條', percentage: 70 },
                        { source: '知乎', percentage: 55 }, { source: '微信公眾號', percentage: 40 }
                    ];
                    
                    mockData.forEach((item, index) => {
                        const barRow = document.createElement('div');
                        barRow.className = 'chart-row';
                        barRow.innerHTML = `<div class="chart-label">${item.source}</div>
                                            <div class="chart-track"><div class="chart-fill"></div></div>
                                            <div class="chart-value">${item.percentage}%</div>`;
                        chartArea.appendChild(barRow);
                        setTimeout(() => { barRow.querySelector('.chart-fill').style.width = item.percentage + '%'; }, 100 + index * 150);
                    });

                    resultsArea.style.display = 'block';
                    startBtn.innerHTML = originalText;
                    startBtn.disabled = false;
                }, 2000);
            });
        });
    </script>
</body>
</html>

第四部分：上線部署流程 (WordPress)

1. 打包上傳： 將包含 5 個核心文件的 bgss-geo-tool 文件夾打包成 zip，在 WordPress 后臺“插件” -> “安裝插件” -> “上傳插件”進(jìn)行安裝并啟用。
2. 創(chuàng)建頁面： 在 WordPress 中新建一個頁面，命名為 GEO智能檢測系統(tǒng)。
3. 調(diào)用短代碼： 如果使用 Elementor，拖入一個 “短代碼” 小部件，輸入 [bgss_geo]。
4. 調(diào)整布局間距： 在 Elementor 高級設(shè)置中，為包含短代碼的容器設(shè)置適當(dāng)?shù)纳线吘啵≒adding Top，如 80px），確保內(nèi)容不被頂部固定的半透明導(dǎo)航欄遮擋。
5. 發(fā)布預(yù)覽： 點(diǎn)擊發(fā)布即可。頁面會自動獲取全局的流體光暈特效，無需額外配置任何環(huán)境。