实战教程：在WordPress网站中集成智能客服机器人与常见问题解答库

引言：为什么现代网站需要智能客服与FAQ系统

在当今数字化时代，网站已不仅仅是信息展示平台，更是企业与用户互动的重要渠道。随着人工智能技术的快速发展，智能客服机器人已成为提升用户体验、降低运营成本的关键工具。据统计，集成智能客服的网站用户满意度平均提升40%，客服成本降低30%以上。

WordPress作为全球最流行的内容管理系统，占据了互联网上超过43%的网站份额。其强大的扩展性和开放性使其成为实现各种功能的理想平台。本教程将详细指导您如何通过代码二次开发，在WordPress网站中集成智能客服机器人与常见问题解答库，同时实现一些实用的互联网小工具功能。

第一部分：环境准备与基础配置

1.1 WordPress开发环境搭建

在开始之前，我们需要准备一个适合开发的WordPress环境：

// 检查WordPress环境要求
if (version_compare(PHP_VERSION, '7.4', '<')) {
    die('需要PHP 7.4或更高版本');
}

// 启用WordPress调试模式（仅限开发环境）
define('WP_DEBUG', true);
define('WP_DEBUG_LOG', true);
define('WP_DEBUG_DISPLAY', false);

1.2 创建自定义插件框架

我们将创建一个独立的插件来管理所有功能，避免直接修改主题文件：

/*
Plugin Name: 智能客服与工具套件
Plugin URI: https://yourwebsite.com/
Description: 集成智能客服机器人、FAQ系统及实用小工具
Version: 1.0.0
Author: 您的名称
License: GPL v2 or later
*/

// 防止直接访问
if (!defined('ABSPATH')) {
    exit;
}

// 定义插件常量
define('AI_CHATBOT_VERSION', '1.0.0');
define('AI_CHATBOT_PLUGIN_DIR', plugin_dir_path(__FILE__));
define('AI_CHATBOT_PLUGIN_URL', plugin_dir_url(__FILE__));

第二部分：构建智能客服机器人系统

2.1 设计客服机器人数据库结构

我们需要创建数据库表来存储对话记录和机器人知识库：

// 安装时创建数据库表
function ai_chatbot_install_tables() {
    global $wpdb;
    
    $charset_collate = $wpdb->get_charset_collate();
    $table_prefix = $wpdb->prefix . 'ai_chatbot_';
    
    // 对话记录表
    $conversations_table = $table_prefix . 'conversations';
    $sql1 = "CREATE TABLE IF NOT EXISTS $conversations_table (
        id bigint(20) NOT NULL AUTO_INCREMENT,
        session_id varchar(100) NOT NULL,
        user_message text NOT NULL,
        bot_response text NOT NULL,
        intent varchar(100) DEFAULT NULL,
        confidence decimal(4,3) DEFAULT NULL,
        created_at datetime DEFAULT CURRENT_TIMESTAMP,
        PRIMARY KEY (id),
        KEY session_id (session_id),
        KEY intent (intent)
    ) $charset_collate;";
    
    // 知识库表
    $knowledge_table = $table_prefix . 'knowledge_base';
    $sql2 = "CREATE TABLE IF NOT EXISTS $knowledge_table (
        id bigint(20) NOT NULL AUTO_INCREMENT,
        question text NOT NULL,
        answer text NOT NULL,
        category varchar(100) DEFAULT 'general',
        tags text DEFAULT NULL,
        priority int(11) DEFAULT 1,
        is_active tinyint(1) DEFAULT 1,
        created_at datetime DEFAULT CURRENT_TIMESTAMP,
        updated_at datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
        PRIMARY KEY (id),
        FULLTEXT KEY question_answer (question, answer)
    ) $charset_collate;";
    
    require_once(ABSPATH . 'wp-admin/includes/upgrade.php');
    dbDelta($sql1);
    dbDelta($sql2);
}
register_activation_hook(__FILE__, 'ai_chatbot_install_tables');

2.2 实现自然语言处理基础功能

虽然完整的NLP系统很复杂，但我们可以实现一个基础的意图识别系统：

class SimpleNLPProcessor {
    private $patterns = array();
    
    public function __construct() {
        $this->initialize_patterns();
    }
    
    private function initialize_patterns() {
        // 问候语识别
        $this->patterns['greeting'] = array(
            'patterns' => array('/你好/', '/您好/', '/hello/', '/hi/', '/早上好/', '/下午好/'),
            'response' => '您好！我是智能客服，很高兴为您服务。'
        );
        
        // 价格查询
        $this->patterns['price'] = array(
            'patterns' => array('/价格/', '/多少钱/', '/收费/', '/cost/', '/price/', '/多少钱/'),
            'response' => '我们的产品有不同的价格方案，具体取决于您选择的套餐。'
        );
        
        // 联系信息
        $this->patterns['contact'] = array(
            'patterns' => array('/电话/', '/联系方式/', '/联系你们/', '/contact/', '/phone/'),
            'response' => '我们的客服电话是：400-123-4567，工作时间：周一至周五 9:00-18:00'
        );
    }
    
    public function process_message($message) {
        $message = strtolower(trim($message));
        
        foreach ($this->patterns as $intent => $data) {
            foreach ($data['patterns'] as $pattern) {
                if (preg_match($pattern, $message)) {
                    return array(
                        'intent' => $intent,
                        'confidence' => 0.8,
                        'response' => $data['response']
                    );
                }
            }
        }
        
        // 如果没有匹配到模式，尝试从知识库查找
        return $this->search_knowledge_base($message);
    }
    
    private function search_knowledge_base($message) {
        global $wpdb;
        $table_name = $wpdb->prefix . 'ai_chatbot_knowledge_base';
        
        // 简单的关键词匹配
        $keywords = explode(' ', $message);
        $search_conditions = array();
        
        foreach ($keywords as $keyword) {
            if (strlen($keyword) > 2) { // 忽略太短的词
                $search_conditions[] = $wpdb->prepare("(question LIKE %s OR answer LIKE %s)", 
                    '%' . $wpdb->esc_like($keyword) . '%',
                    '%' . $wpdb->esc_like($keyword) . '%'
                );
            }
        }
        
        if (empty($search_conditions)) {
            return array(
                'intent' => 'unknown',
                'confidence' => 0.1,
                'response' => '抱歉，我没有理解您的问题。您可以尝试换一种方式提问，或联系人工客服。'
            );
        }
        
        $sql = "SELECT * FROM $table_name WHERE is_active = 1 AND (" . 
               implode(' OR ', $search_conditions) . ") ORDER BY priority DESC LIMIT 1";
        
        $result = $wpdb->get_row($sql);
        
        if ($result) {
            return array(
                'intent' => 'knowledge_base',
                'confidence' => 0.7,
                'response' => $result->answer,
                'source_id' => $result->id
            );
        }
        
        return array(
            'intent' => 'unknown',
            'confidence' => 0.1,
            'response' => '抱歉，我暂时无法回答这个问题。已记录您的问题，我们的客服人员会尽快回复。'
        );
    }
}

2.3 创建前端聊天界面

设计一个美观的聊天界面组件：

class ChatbotFrontend {
    public function __construct() {
        add_action('wp_footer', array($this, 'render_chat_widget'));
        add_action('wp_enqueue_scripts', array($this, 'enqueue_scripts'));
        add_action('wp_ajax_chatbot_send_message', array($this, 'handle_message'));
        add_action('wp_ajax_nopriv_chatbot_send_message', array($this, 'handle_message'));
    }
    
    public function enqueue_scripts() {
        wp_enqueue_style('ai-chatbot-style', 
            AI_CHATBOT_PLUGIN_URL . 'assets/css/chatbot.css', 
            array(), 
            AI_CHATBOT_VERSION
        );
        
        wp_enqueue_script('ai-chatbot-script', 
            AI_CHATBOT_PLUGIN_URL . 'assets/js/chatbot.js', 
            array('jquery'), 
            AI_CHATBOT_VERSION, 
            true
        );
        
        wp_localize_script('ai-chatbot-script', 'chatbot_ajax', array(
            'ajax_url' => admin_url('admin-ajax.php'),
            'nonce' => wp_create_nonce('chatbot_nonce')
        ));
    }
    
    public function render_chat_widget() {
        ?>
        <div id="ai-chatbot-widget" class="ai-chatbot-hidden">
            <div class="chatbot-header">
                <h3>智能客服</h3>
                <button class="chatbot-close">×</button>
            </div>
            <div class="chatbot-messages" id="chatbot-messages">
                <div class="message bot-message">
                    <div class="message-content">
                        您好！我是智能客服，有什么可以帮您的吗？
                    </div>
                    <div class="message-time"><?php echo date('H:i'); ?></div>
                </div>
            </div>
            <div class="chatbot-input-area">
                <input type="text" id="chatbot-input" placeholder="请输入您的问题..." maxlength="500">
                <button id="chatbot-send">发送</button>
            </div>
            <div class="chatbot-quick-questions">
                <span>常见问题：</span>
                <button class="quick-question" data-question="你们的产品价格是多少？">产品价格</button>
                <button class="quick-question" data-question="怎么联系客服？">联系客服</button>
                <button class="quick-question" data-question="退货政策是什么？">退货政策</button>
            </div>
        </div>
        <button id="ai-chatbot-toggle" class="chatbot-toggle-button">
            <span class="chat-icon">💬</span>
            <span class="unread-count" id="unread-count" style="display:none">0</span>
        </button>
        <?php
    }
    
    public function handle_message() {
        // 验证nonce
        if (!wp_verify_nonce($_POST['nonce'], 'chatbot_nonce')) {
            wp_die('安全验证失败');
        }
        
        $message = sanitize_text_field($_POST['message']);
        $session_id = sanitize_text_field($_POST['session_id']);
        
        // 处理消息
        $nlp = new SimpleNLPProcessor();
        $response = $nlp->process_message($message);
        
        // 保存对话记录
        $this->save_conversation($session_id, $message, $response);
        
        wp_send_json_success(array(
            'response' => $response['response'],
            'intent' => $response['intent']
        ));
    }
    
    private function save_conversation($session_id, $user_message, $bot_response) {
        global $wpdb;
        $table_name = $wpdb->prefix . 'ai_chatbot_conversations';
        
        $wpdb->insert($table_name, array(
            'session_id' => $session_id,
            'user_message' => $user_message,
            'bot_response' => $bot_response['response'],
            'intent' => $bot_response['intent'],
            'confidence' => $bot_response['confidence'],
            'created_at' => current_time('mysql')
        ));
    }
}

第三部分：构建FAQ常见问题解答系统

3.1 创建FAQ自定义文章类型

class FAQSystem {
    public function __construct() {
        add_action('init', array($this, 'register_faq_post_type'));
        add_action('add_meta_boxes', array($this, 'add_faq_meta_boxes'));
        add_action('save_post_faq', array($this, 'save_faq_meta'));
        add_shortcode('faq_list', array($this, 'faq_list_shortcode'));
        add_action('wp_ajax_search_faq', array($this, 'ajax_search_faq'));
        add_action('wp_ajax_nopriv_search_faq', array($this, 'ajax_search_faq'));
    }
    
    public function register_faq_post_type() {
        $labels = array(
            'name' => '常见问题',
            'singular_name' => '常见问题',
            'menu_name' => 'FAQ管理',
            'add_new' => '添加问题',
            'add_new_item' => '添加新问题',
            'edit_item' => '编辑问题',
            'new_item' => '新问题',
            'view_item' => '查看问题',
            'search_items' => '搜索问题',
            'not_found' => '未找到问题',
            'not_found_in_trash' => '回收站中未找到问题'
        );
        
        $args = array(
            'labels' => $labels,
            'public' => true,
            'publicly_queryable' => true,
            'show_ui' => true,
            'show_in_menu' => true,
            'query_var' => true,
            'rewrite' => array('slug' => 'faq'),
            'capability_type' => 'post',
            'has_archive' => true,
            'hierarchical' => false,
            'menu_position' => 25,
            'menu_icon' => 'dashicons-editor-help',
            'supports' => array('title', 'editor', 'thumbnail', 'excerpt'),
            'show_in_rest' => true
        );
        
        register_post_type('faq', $args);
        
        // 注册分类
        register_taxonomy('faq_category', 'faq', array(
            'label' => '问题分类',
            'rewrite' => array('slug' => 'faq-category'),
            'hierarchical' => true,
            'show_admin_column' => true
        ));
    }
    
    public function add_faq_meta_boxes() {
        add_meta_box(
            'faq_additional_info',
            '附加信息',
            array($this, 'render_faq_meta_box'),
            'faq',
            'side',
            'default'
        );
    }
    
    public function render_faq_meta_box($post) {
        wp_nonce_field('faq_meta_box', 'faq_meta_box_nonce');
        
        $priority = get_post_meta($post->ID, '_faq_priority', true);
        $keywords = get_post_meta($post->ID, '_faq_keywords', true);
        $views = get_post_meta($post->ID, '_faq_views', true) ?: 0;
        
        ?>
        <p>
            <label for="faq_priority">显示优先级：</label>
            <select id="faq_priority" name="faq_priority">
                <option value="1" <?php selected($priority, 1); ?>>低</option>
                <option value="2" <?php selected($priority, 2); ?>>中</option>
                <option value="3" <?php selected($priority, 3); ?>>高</option>
            </select>
        </p>
        <p>
            <label for="faq_keywords">关键词：</label>
            <input type="text" id="faq_keywords" name="faq_keywords" 
                   value="<?php echo esc_attr($keywords); ?>" 
                   placeholder="用逗号分隔" style="width:100%">
        </p>
        <p>浏览次数：<?php echo intval($views); ?></p>
        <?php
    }
    
    public function save_faq_meta($post_id) {
        if (!isset($_POST['faq_meta_box_nonce']) || 
            !wp_verify_nonce($_POST['faq_meta_box_nonce'], 'faq_meta_box')) {
            return;
        }
        
        if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
            return;
        }
        
        if (!current_user_can('edit_post', $post_id)) {
            return;
        }
        
        if (isset($_POST['faq_priority'])) {
            update_post_meta($post_id, '_faq_priority', 
                sanitize_text_field($_POST['faq_priority']));
        }
        
        if (isset($_POST['faq_keywords'])) {
            update_post_meta($post_id, '_faq_keywords', 
                sanitize_text_field($_POST['faq_keywords']));
        }
        
        // 同步到机器人知识库
        $this->sync_to_knowledge_base($post_id);
    }
    
    private function sync_to_knowledge_base($post_id) {
        global $wpdb;
        $table_name = $wpdb->prefix . 'ai_chatbot_knowledge_base';
        
        $post = get_post($post_id);
        
        if ($post->post_type !== 'faq' || $post->post_status !== 'publish') {
            // 如果FAQ被删除或未发布，从知识库移除
            $wpdb->delete($table_name, array('source_post_id' => $post_id));
            return;
        }
        
        $question = $post->post_title;
        $answer = wp_strip_all_tags($post->post_content);
        
        // 检查是否已存在
        $existing = $wpdb->get_var($wpdb->prepare(
            "SELECT id FROM $table_name WHERE source_post_id = %d", $post_id
        ));
        
        if ($existing) {
            // 更新
            $wpdb->update($table_name, 
                array(
                    'question' => $question,
                    'answer' => $answer,
                    'updated_at' => current_time('mysql')
                ),
                array('id' => $existing)
            );
        } else {
            // 插入

            // 插入新记录
            $wpdb->insert($table_name, 
                array(
                    'question' => $question,
                    'answer' => $answer,
                    'category' => 'faq',
                    'source_post_id' => $post_id,
                    'priority' => get_post_meta($post_id, '_faq_priority', true) ?: 1,
                    'created_at' => current_time('mysql'),
                    'updated_at' => current_time('mysql')
                )
            );
        }
    }
    
    public function faq_list_shortcode($atts) {
        $atts = shortcode_atts(array(
            'category' => '',
            'limit' => 10,
            'show_search' => true,
            'collapse' => true
        ), $atts);
        
        ob_start();
        ?>
        <div class="faq-container">
            <?php if ($atts['show_search']): ?>
            <div class="faq-search-box">
                <input type="text" id="faq-search-input" placeholder="搜索常见问题...">
                <button id="faq-search-button">搜索</button>
                <div id="faq-search-results" class="search-results"></div>
            </div>
            <?php endif; ?>
            
            <div class="faq-categories">
                <?php
                $categories = get_terms(array(
                    'taxonomy' => 'faq_category',
                    'hide_empty' => true
                ));
                
                foreach ($categories as $category):
                    if ($atts['category'] && $category->slug !== $atts['category']) continue;
                ?>
                <div class="faq-category-section">
                    <h3 class="faq-category-title"><?php echo esc_html($category->name); ?></h3>
                    <div class="faq-questions">
                        <?php
                        $args = array(
                            'post_type' => 'faq',
                            'posts_per_page' => $atts['limit'],
                            'tax_query' => array(
                                array(
                                    'taxonomy' => 'faq_category',
                                    'field' => 'term_id',
                                    'terms' => $category->term_id
                                )
                            ),
                            'meta_key' => '_faq_priority',
                            'orderby' => array('meta_value_num' => 'DESC', 'date' => 'DESC')
                        );
                        
                        $faq_query = new WP_Query($args);
                        
                        if ($faq_query->have_posts()):
                            while ($faq_query->have_posts()): $faq_query->the_post();
                                $this->render_faq_item(get_the_ID(), $atts['collapse']);
                            endwhile;
                        else:
                            echo '<p>暂无相关问题</p>';
                        endif;
                        wp_reset_postdata();
                        ?>
                    </div>
                </div>
                <?php endforeach; ?>
            </div>
        </div>
        
        <script>
        jQuery(document).ready(function($) {
            // FAQ搜索功能
            $('#faq-search-button').on('click', function() {
                performFaqSearch();
            });
            
            $('#faq-search-input').on('keyup', function(e) {
                if (e.keyCode === 13) {
                    performFaqSearch();
                }
            });
            
            function performFaqSearch() {
                var searchTerm = $('#faq-search-input').val();
                if (searchTerm.length < 2) {
                    $('#faq-search-results').html('<p>请输入至少2个字符</p>');
                    return;
                }
                
                $.ajax({
                    url: '<?php echo admin_url("admin-ajax.php"); ?>',
                    type: 'POST',
                    data: {
                        action: 'search_faq',
                        search: searchTerm,
                        nonce: '<?php echo wp_create_nonce("faq_search_nonce"); ?>'
                    },
                    beforeSend: function() {
                        $('#faq-search-results').html('<p>搜索中...</p>');
                    },
                    success: function(response) {
                        if (response.success) {
                            $('#faq-search-results').html(response.data.html);
                        } else {
                            $('#faq-search-results').html('<p>搜索失败</p>');
                        }
                    }
                });
            }
            
            // 折叠/展开功能
            $('.faq-question-title').on('click', function() {
                if (<?php echo $atts['collapse'] ? 'true' : 'false'; ?>) {
                    $(this).toggleClass('active');
                    $(this).next('.faq-answer').slideToggle();
                }
            });
        });
        </script>
        <?php
        return ob_get_clean();
    }
    
    private function render_faq_item($post_id, $collapsible = true) {
        $post = get_post($post_id);
        $views = get_post_meta($post_id, '_faq_views', true) ?: 0;
        
        // 更新浏览次数
        update_post_meta($post_id, '_faq_views', $views + 1);
        ?>
        <div class="faq-item">
            <div class="faq-question-title <?php echo $collapsible ? 'collapsible' : ''; ?>">
                <span class="faq-q">Q:</span>
                <span class="faq-question-text"><?php echo esc_html($post->post_title); ?></span>
                <?php if ($collapsible): ?>
                <span class="faq-toggle-icon">▼</span>
                <?php endif; ?>
                <span class="faq-views"><?php echo $views + 1; ?>次浏览</span>
            </div>
            <div class="faq-answer" <?php echo $collapsible ? 'style="display:none;"' : ''; ?>>
                <span class="faq-a">A:</span>
                <div class="faq-answer-content">
                    <?php echo apply_filters('the_content', $post->post_content); ?>
                </div>
                <div class="faq-meta">
                    <span class="faq-date">更新日期: <?php echo get_the_modified_date('', $post_id); ?></span>
                    <button class="faq-helpful-btn" data-faq-id="<?php echo $post_id; ?>">
                        有帮助 (<span class="helpful-count">0</span>)
                    </button>
                </div>
            </div>
        </div>
        <?php
    }
    
    public function ajax_search_faq() {
        if (!wp_verify_nonce($_POST['nonce'], 'faq_search_nonce')) {
            wp_die('安全验证失败');
        }
        
        $search_term = sanitize_text_field($_POST['search']);
        
        $args = array(
            'post_type' => 'faq',
            'posts_per_page' => 10,
            's' => $search_term,
            'meta_query' => array(
                'relation' => 'OR',
                array(
                    'key' => '_faq_keywords',
                    'value' => $search_term,
                    'compare' => 'LIKE'
                )
            )
        );
        
        $search_query = new WP_Query($args);
        
        ob_start();
        
        if ($search_query->have_posts()):
            echo '<div class="faq-search-results-list">';
            echo '<h4>找到 ' . $search_query->found_posts . ' 个相关结果</h4>';
            
            while ($search_query->have_posts()): $search_query->the_post();
                $this->render_faq_item(get_the_ID(), false);
            endwhile;
            
            echo '</div>';
        else:
            echo '<p>未找到相关问题。建议您：</p>';
            echo '<ul>';
            echo '<li>检查拼写是否正确</li>';
            echo '<li>尝试使用其他关键词</li>';
            echo '<li>联系人工客服获取帮助</li>';
            echo '</ul>';
        endif;
        
        wp_reset_postdata();
        
        wp_send_json_success(array(
            'html' => ob_get_clean(),
            'count' => $search_query->found_posts
        ));
    }
}

第四部分：集成实用互联网小工具

4.1 创建多功能工具集

class WebToolsCollection {
    public function __construct() {
        add_shortcode('web_tools', array($this, 'web_tools_shortcode'));
        add_action('wp_ajax_calculate_tool', array($this, 'handle_tool_calculation'));
        add_action('wp_ajax_nopriv_calculate_tool', array($this, 'handle_tool_calculation'));
    }
    
    public function web_tools_shortcode($atts) {
        $atts = shortcode_atts(array(
            'tools' => 'all', // all,calculator,converter,generator
            'layout' => 'tabs' // tabs,accordion,grid
        ), $atts);
        
        ob_start();
        ?>
        <div class="web-tools-container layout-<?php echo esc_attr($atts['layout']); ?>">
            <h2 class="tools-title">实用在线工具</h2>
            
            <?php if ($atts['layout'] === 'tabs'): ?>
            <div class="tools-tabs">
                <div class="tab-headers">
                    <button class="tab-header active" data-tab="calculator">计算器</button>
                    <button class="tab-header" data-tab="converter">单位转换</button>
                    <button class="tab-header" data-tab="generator">生成器</button>
                    <button class="tab-header" data-tab="text-tools">文本工具</button>
                </div>
                
                <div class="tab-contents">
                    <div class="tab-content active" id="calculator-tab">
                        <?php $this->render_calculator_tools(); ?>
                    </div>
                    <div class="tab-content" id="converter-tab">
                        <?php $this->render_converter_tools(); ?>
                    </div>
                    <div class="tab-content" id="generator-tab">
                        <?php $this->render_generator_tools(); ?>
                    </div>
                    <div class="tab-content" id="text-tools-tab">
                        <?php $this->render_text_tools(); ?>
                    </div>
                </div>
            </div>
            <?php endif; ?>
            
            <div class="tools-history" id="tools-history">
                <h4>计算历史</h4>
                <ul id="history-list"></ul>
                <button id="clear-history" class="btn-secondary">清空历史</button>
            </div>
        </div>
        
        <script>
        jQuery(document).ready(function($) {
            // 标签页切换
            $('.tab-header').on('click', function() {
                var tabId = $(this).data('tab');
                
                $('.tab-header').removeClass('active');
                $(this).addClass('active');
                
                $('.tab-content').removeClass('active');
                $('#' + tabId + '-tab').addClass('active');
            });
            
            // 计算器功能
            $('.calculate-btn').on('click', function() {
                var toolType = $(this).data('tool');
                var formData = {};
                
                // 收集表单数据
                $(this).closest('.tool-form').find('input, select').each(function() {
                    if ($(this).attr('name')) {
                        formData[$(this).attr('name')] = $(this).val();
                    }
                });
                
                $.ajax({
                    url: '<?php echo admin_url("admin-ajax.php"); ?>',
                    type: 'POST',
                    data: {
                        action: 'calculate_tool',
                        tool_type: toolType,
                        data: formData,
                        nonce: '<?php echo wp_create_nonce("tools_calculation_nonce"); ?>'
                    },
                    success: function(response) {
                        if (response.success) {
                            // 显示结果
                            $('#result-' + toolType).html(response.data.result);
                            
                            // 添加到历史记录
                            addToHistory(toolType, formData, response.data.result);
                        }
                    }
                });
            });
            
            // 历史记录功能
            function addToHistory(toolType, input, result) {
                var historyItem = {
                    tool: toolType,
                    input: input,
                    result: result,
                    time: new Date().toLocaleTimeString()
                };
                
                // 获取现有历史
                var history = JSON.parse(localStorage.getItem('tools_history') || '[]');
                
                // 添加到历史记录
                history.unshift(historyItem);
                
                // 只保留最近10条记录
                if (history.length > 10) {
                    history = history.slice(0, 10);
                }
                
                // 保存到本地存储
                localStorage.setItem('tools_history', JSON.stringify(history));
                
                // 更新显示
                updateHistoryDisplay();
            }
            
            function updateHistoryDisplay() {
                var history = JSON.parse(localStorage.getItem('tools_history') || '[]');
                var html = '';
                
                history.forEach(function(item) {
                    html += '<li>';
                    html += '<strong>' + getToolName(item.tool) + '</strong><br>';
                    html += '输入: ' + JSON.stringify(item.input) + '<br>';
                    html += '结果: ' + item.result + '<br>';
                    html += '<small>' + item.time + '</small>';
                    html += '</li>';
                });
                
                $('#history-list').html(html || '<li>暂无历史记录</li>');
            }
            
            function getToolName(toolType) {
                var names = {
                    'loan_calculator': '贷款计算器',
                    'currency_converter': '货币转换',
                    'password_generator': '密码生成器',
                    'text_counter': '字数统计'
                };
                return names[toolType] || toolType;
            }
            
            // 清空历史记录
            $('#clear-history').on('click', function() {
                localStorage.removeItem('tools_history');
                updateHistoryDisplay();
            });
            
            // 初始化时显示历史记录
            updateHistoryDisplay();
        });
        </script>
        <?php
        return ob_get_clean();
    }
    
    private function render_calculator_tools() {
        ?>
        <div class="tool-section">
            <h3>贷款计算器</h3>
            <div class="tool-form">
                <div class="form-group">
                    <label>贷款金额（元）:</label>
                    <input type="number" name="loan_amount" value="100000" min="1000" step="1000">
                </div>
                <div class="form-group">
                    <label>贷款期限（月）:</label>
                    <input type="number" name="loan_term" value="12" min="1" max="360">
                </div>
                <div class="form-group">
                    <label>年利率（%）:</label>
                    <input type="number" name="interest_rate" value="5.0" min="0.1" step="0.1" max="50">
                </div>
                <button class="calculate-btn" data-tool="loan_calculator">计算</button>
                <div class="tool-result" id="result-loan_calculator">
                    结果将显示在这里
                </div>
            </div>
        </div>
        
        <div class="tool-section">
            <h3>投资收益计算器</h3>
            <div class="tool-form">
                <div class="form-group">
                    <label>投资本金（元）:</label>
                    <input type="number" name="principal" value="10000" min="100">
                </div>
                <div class="form-group">
                    <label>年化收益率（%）:</label>
                    <input type="number" name="annual_return" value="8" min="0.1" step="0.1">
                </div>
                <div class="form-group">
                    <label>投资年限:</label>
                    <input type="number" name="years" value="5" min="1" max="50">
                </div>
                <button class="calculate-btn" data-tool="investment_calculator">计算</button>
                <div class="tool-result" id="result-investment_calculator">
                    结果将显示在这里
                </div>
            </div>
        </div>
        <?php
    }
    
    private function render_converter_tools() {
        ?>
        <div class="tool-section">
            <h3>货币转换器</h3>
            <div class="tool-form">
                <div class="form-group">
                    <label>金额:</label>
                    <input type="number" name="amount" value="100" min="0.01" step="0.01">
                </div>
                <div class="form-group">
                    <label>从:</label>
                    <select name="from_currency">
                        <option value="USD">美元 (USD)</option>
                        <option value="CNY" selected>人民币 (CNY)</option>
                        <option value="EUR">欧元 (EUR)</option>
                        <option value="GBP">英镑 (GBP)</option>
                        <option value="JPY">日元 (JPY)</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>到:</label>
                    <select name="to_currency">
                        <option value="USD">美元 (USD)</option>
                        <option value="CNY">人民币 (CNY)</option>
                        <option value="EUR" selected>欧元 (EUR)</option>
                        <option value="GBP">英镑 (GBP)</option>
                        <option value="JPY">日元 (JPY)</option>
                    </select>
                </div>
                <button class="calculate-btn" data-tool="currency_converter">转换</button>
                <div class="tool-result" id="result-currency_converter">
                    结果将显示在这里
                </div>
            </div>
        </div>
        
        <div class="tool-section">
            <h3>单位转换器</h3>
            <div class="tool-form">
                <div class="form-group">
                    <label>数值:</label>
                    <input type="number" name="value" value="1" step="any">
                </div>
                <div class="form-group">
                    <label>从:</label>
                    <select name="from_unit">
                        <option value="km">千米</option>