查看“︁微件:GridTable”︁的源代码

<includeonly>
<style>
.grid-input-area {
    margin: 10px 0;
    padding: 12px;
    background: #f5f5f5;
    border-radius: 8px;
}
.grid-input-area textarea {
    width: 100%;
    height: 150px;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-family: monospace;
    font-size: 13px;
    resize: vertical;
    box-sizing: border-box;
}
.grid-input-area button {
    margin-top: 8px;
    padding: 8px 20px;
    background: #4CAF50;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
}
.grid-input-area button:hover { background: #45a049; }
.grid-input-area label { font-size: 13px; color: #888; margin-right: 6px; }
.grid-input-area input[type=number] {
    width: 50px; padding: 4px; border: 1px solid #ccc; border-radius: 4px; text-align: center;
}
.grid-input-area input[type=color] {
    width: 40px; height: 30px; border: 1px solid #ccc; border-radius: 4px; cursor: pointer; vertical-align: middle;
}
.grid-preview {
    margin-top: 10px;
    overflow-x: auto;
}
</style>

<div class="grid-input-area">
    <p style="font-size:13px;color:#888;">每行格式：<b>植物名,列,行</b>（逗号分隔，一行一个）</p>
    <textarea id="grid-data" placeholder="豌豆向日葵,1,1&#10;豌豆射手,2,1&#10;向日葵,6,3&#10;坚果墙,7,5"></textarea>
    <br>
    <label>列数：<input type="number" id="grid-cols" value="9" min="1" max="20"></label>
    <label>行数：<input type="number" id="grid-rows" value="5" min="1" max="15"></label>
    <label>背景色：<input type="color" id="grid-bg" value="#2d2d2d"></label>
    <label>格子色：<input type="color" id="grid-cell" value="#3a3a3a"></label>
    <label>边框色：<input type="color" id="grid-border" value="#555555"></label>
    <button id="grid-generate">生成表格</button>
    <button id="grid-copy" style="background:#888;">复制代码</button>
</div>

<div class="grid-preview" id="grid-preview"></div>

<script>
(function() {
    function generate() {
        var raw = $('#grid-data').val().trim();
        var cols = parseInt($('#grid-cols').val()) || 9;
        var rows = parseInt($('#grid-rows').val()) || 5;
        var bg = $('#grid-bg').val() || '#2d2d2d';
        var cell = $('#grid-cell').val() || '#3a3a3a';
        var border = $('#grid-border').val() || '#555555';
        var lines = raw.split('\n');
        var data = {};

        lines.forEach(function(line) {
            var parts = line.split(',');
            if (parts.length >= 3) {
                var name = parts[0].trim();
                var col = parseInt(parts[1].trim());
                var row = parseInt(parts[2].trim());
                if (name && col >= 1 && row >= 1) {
                    data[row + '-' + col] = name;
                }
            }
        });

        var table = '{| style="width:100%;max-width:900px;table-layout:fixed;text-align:center;background:' + bg + ';border-collapse:collapse;"\n';
        table += '|-\n! !!';
        for (var c = 1; c <= cols; c++) table += ' 列' + c + ' !!';
        table = table.slice(0, -2) + '\n';

        for (var r = 1; r <= rows; r++) {
            table += '|-\n! 行' + r + '\n';
            for (var c = 1; c <= cols; c++) {
                var plant = data[r + '-' + c];
                if (plant) {
                    table += '| style="height:80px;border:2px solid ' + border + ';background:' + cell + ';" | [[' + plant + '|50px|link=' + plant + ']]\n';
                } else {
                    table += '| style="height:80px;border:2px solid ' + border + ';background:' + cell + ';" | \n';
                }
            }
        }
        table += '|}';

        $('#grid-preview').html('<pre style="background:#f9f9f9;padding:10px;border-radius:6px;font-size:12px;max-height:400px;overflow:auto;">' + table.replace(/</g,'&lt;').replace(/>/g,'&gt;') + '</pre>');
        $('#grid-preview').data('code', table);
    }

    $('#grid-generate').click(generate);
    $('#grid-copy').click(function() {
        var code = $('#grid-preview').data('code');
        if (code) {
            navigator.clipboard.writeText(code).then(function() {
                $('#grid-copy').text('✅ 已复制');
                setTimeout(function() { $('#grid-copy').text('复制代码'); }, 1500);
            });
        }
    });

    generate();
})();
</script>
</includeonly>