|
|
| （未显示同一用户的3个中间版本） |
| 第46行： |
第46行： |
| <textarea id="grid-data" placeholder="豌豆向日葵,1,1 豌豆射手,2,1 向日葵,6,3 坚果墙,7,5"></textarea> | | <textarea id="grid-data" placeholder="豌豆向日葵,1,1 豌豆射手,2,1 向日葵,6,3 坚果墙,7,5"></textarea> |
| <br> | | <br> |
| | <label>红线列：<input type="number" id="grid-divider" value="4" min="0" max="11"></label> |
| <label>列数：<input type="number" id="grid-cols" value="9" min="1" max="20"></label> | | <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="number" id="grid-rows" value="5" min="1" max="15"></label> |
| 第56行： |
第57行： |
|
| |
|
| <div class="grid-preview" id="grid-preview"></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,'<').replace(/>/g,'>') + '</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> | | </includeonly> |
