<?php
/**
 * 部首索引页面模板
 */

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

get_header(); ?>


        <div class="radical-index-wrapper">
        	<div id="primary" class="content-area">
              <main id="main" class="site-main">
            <header class="page-header">
                <h1 class="page-title">部首检字法</h1>
                <p class="page-description">按部首笔画数查找汉字</p>
                <p class="page-links">
                    <a href="<?php echo home_url('/pinyin-index'); ?>">拼音检字法</a>
                </p>
            </header>

            <div class="radical-index-container" data-nonce="<?php echo wp_create_nonce('radical_nonce'); ?>">
                <h2>部首列表</h2>
                <div class="radical-stroke-groups">
                    <?php
                    // 按笔画数分组的部首数据（完整214个部首）
                    $radical_groups = array(
                        1 => array('一', '丨', '丶', '丿', '乙', '亅'),
                        2 => array('二', '亠', '人', '儿', '入', '八', '冂', '冖', '冫', '几', '凵', '刀', '力', '勹', '匕', '匚', '匸', '十', '卜', '卩', '厂', '厶', '又'),
                        3 => array('口', '囗', '土', '士', '夂', '夊', '夕', '大', '女', '子', '宀', '寸', '小', '尢', '尸', '屮', '山', '巛', '工', '己', '巾', '干', '幺', '广', '廴', '廾', '弋', '弓', '彐', '彡', '彳'),
                        4 => array('心', '戈', '戶', '手', '支', '攴', '文', '斗', '斤', '方', '无', '日', '曰', '月', '木', '欠', '止', '歹', '殳', '毋', '比', '毛', '氏', '气', '水', '火', '爪', '父', '爻', '爿', '片', '牙', '牛', '犬', '玄'),
                        5 => array('玉', '瓜', '瓦', '甘', '生', '用', '田', '疋', '疒', '癶', '白', '皮', '皿', '目', '矛', '矢', '石', '示', '禸', '禾', '穴', '立', '竹', '米', '糸', '缶', '网', '羊', '羽'),
                        6 => array('老', '而', '耒', '耳', '聿', '肉', '臣', '自', '至', '臼', '舌', '舛', '舟', '艮', '色', '艸', '虍', '虫', '血', '行', '衣', '襾', '見', '角', '言', '谷', '豆', '豕', '豸', '貝', '赤'),
                        7 => array('走', '足', '身', '車', '辛', '辰', '辵', '邑', '酉', '釆', '里', '金', '長', '門', '阜', '隶', '隹', '雨', '青', '非', '面', '革', '韋'),
                        8 => array('韭', '音', '頁', '風', '飛', '食', '首', '香', '馬', '骨', '高'),
                        9 => array('髟', '鬥', '鬯', '鬲', '鬼', '魚', '鳥'),
                        10 => array('鹵', '鹿', '麥', '麻', '黃', '黍'),
                        11 => array('黑', '黹', '黽', '鼎'),
                        12 => array('鼓', '鼠', '鼻'),
                        13 => array('齊', '齒'),
                        14 => array('龍'),
                        15 => array('龜'),
                        17 => array('龠')
                    );
                    
                    foreach ($radical_groups as $stroke_count => $radicals) :
                    ?>
                        <div class="radical-stroke-group">
                            <h3><?php echo $stroke_count; ?>画</h3>
                            <ul class="radical-list">
                                <?php foreach ($radicals as $radical) : ?>
                                    <li class="radical-item" data-radical="<?php echo esc_attr($radical); ?>">
                                        <span class="radical-char"><?php echo esc_html($radical); ?></span>
                                    </li>
                                <?php endforeach; ?>
                            </ul>
                            <!-- 汉字列表将显示在这里 -->
                            <div class="character-results" data-stroke="<?php echo $stroke_count; ?>" style="display: none;">
                                <div class="character-grid">
                                </div>
                            </div>
                        </div>
                    <?php endforeach; ?>
                </div>
            </div>
	</main><!-- .site-main -->
	</div><!-- .content-area -->
	<?php get_sidebar(); ?>

        </div>


<style>
/* 部首索引页面样式 */
.radical-index-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.radical-index-container {
    padding: 20px 0;
}

.radical-stroke-group {
    margin-bottom: 20px;
}

.radical-stroke-group h3 {
    font-size: 16px;
    margin-bottom: 10px;
    color: #333;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
}

.radical-list {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.radical-item {
    text-align: center;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.radical-item:hover {
    background-color: #f5f5f5;
    border-color: #0073aa;
}

.radical-item.active {
    background-color: #0073aa;
    color: white;
    border-color: #005a87;
}

.radical-char {
    font-size: 20px;
    font-weight: bold;
}

.character-results {
    margin-top: 15px;
    padding: 15px;
    border: 1px solid #eee;
    border-radius: 4px;
    background-color: #f9f9f9;
}

.character-stroke-groups {
    margin-top: 20px;
}

.character-stroke-group {
    margin-bottom: 30px;
}

.character-stroke-group h3 {
    font-size: 18px;
    margin-bottom: 15px;
    color: #0073aa;
    border-left: 4px solid #0073aa;
    padding-left: 10px;
}

.character-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.character-card {
    text-align: center;
    padding: 15px 5px;
    border: 1px solid #ddd;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.character-card:hover {
    background-color: #f5f5f5;
    border-color: #0073aa;
    transform: translateY(-2px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.character-link {
    text-decoration: none;
    color: inherit;
}

.character-char {
    font-size: 28px;
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
    color: #333;
}

.character-pinyin {
    font-size: 12px;
    color: #666;
}

.character-stroke-count {
    font-size: 11px;
    color: #999;
    margin-top: 3px;
}

.placeholder-text {
    color: #999;
    font-style: italic;
    text-align: center;
    margin: 20px 0;
}

.page-links {
    margin-top: 10px;
}

.page-links a {
    color: #0073aa;
    text-decoration: none;
}

.page-links a:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .radical-list {
        grid-template-columns: repeat(8, 1fr);
    }
    
    .radical-index-wrapper {
        padding: 10px;
    }
}
</style>

<?php
get_footer();