查看“︁微件: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>
</includeonly>