LunaTalk HTML 表格与按钮——状态栏、物品栏、交互选项

表格（Table）

基础结构

<table>
<tr><th>表头一</th><th>表头二</th></tr>
<tr><td>数据格</td><td>数据格</td></tr>
<tr><td>另一行</td><td>数据</td></tr>
</table>

• <table> 开始和结束
• <tr> 一行
• <th> 表头单元格（自动加粗居中）
• <td> 普通数据单元格

LunaTalk 推荐表格样式

帮助文档推荐的状态栏表格（背景浅蓝色、文字深蓝色、无边框）：

<table style="background-color: lightblue; color: darkblue; border-collapse: collapse; width: 100%;">
<tr><th>项目</th><th>内容</th><th>项目</th><th>内容</th></tr>
<tr><td>姓名</td><td>林风</td><td>灵根</td><td>五灵根(32%)</td></tr>
<tr><td>修为</td><td>炼气一层</td><td>灵力</td><td>7/100</td></tr>
</table>

表格常见坑

按钮（Button）

按钮是 LunaTalk HTML 最有特色的功能——点击后可以自动把文字填入输入框，实现分支剧情选择。

基础按钮

<button>普通按钮</button>

LunaTalk 交互按钮的完整模板（帮助文档提供）

<button onclick="
const textarea = document.querySelector('#lunatalk-input textarea.uni-textarea-textarea');
if (textarea) {
textarea.value='选项文本';
textarea.dispatchEvent(new Event('input', { bubbles: true }));
} else {
alert('没找到 textarea 哦');
}
">选项文本</button>

把 '选项文本' 替换成你的实际选项内容（比如 '修炼功法'、'下山历练'、'和艾莉娅对话'）。

按钮样式

<button style="background-color: lightblue; color: darkblue; border: none; padding: 8px 16px; cursor: pointer;" onclick="...">选项文本</button>

常用按钮样式属性：

• background-color：背景色（推荐 lightblue 系列）
• color：文字色（推荐 darkblue）
• border：边框（设为 none 简洁）
• padding：内边距（按钮大小）
• cursor: pointer：鼠标悬停变手型

多行按钮布局

<button style="..." onclick="...">选项 A</button>
<button style="..." onclick="...">选项 B</button>
<br>
<button style="..." onclick="...">选项 C</button>
<button style="..." onclick="...">选项 D</button>

直接换行写按钮会自动横向排列。加 <br> 可以换行排列。

表格 + 按钮组合实战

修仙模拟器角色卡的回复结构

<!-- 场景描写（正常文字） -->
你站在修炼室里，四周弥漫着淡蓝色的灵气。窗外阳光透过木纹洒进来，在地上投下斑驳的影子。

<!-- AI 扮演的 NPC 对话 -->
<font color="blue"><b>"林风，今天是你入门第七天了。该选一门功法开始修炼了。"</b></font>

<!-- 状态栏 -->
<table style="background-color: lightblue; color: darkblue; border-collapse: collapse;">
<tr><th>姓名</th><td>林风</td><th>灵根</th><td>五灵根(32%)</td></tr>
<tr><th>修为</th><td>炼气一层</td><th>灵力</th><td>7/100</td></tr>
<tr><th>天数</th><td>7/365</td><th>位置</th><td>外门修炼室</td></tr>
</table>

<!-- 行动选项按钮 -->
<button style="background-color: lightblue; color: darkblue;" onclick="const ta=document.querySelector('#lunatalk-input textarea.uni-textarea-textarea');if(ta){ta.value=='选择基础吐纳术';ta.dispatchEvent(new Event('input',{bubbles:true}))}">选择基础吐纳术</button>
<button style="background-color: lightblue; color: darkblue;" onclick="const ta=document.querySelector('#lunatalk-input textarea.uni-textarea-textarea');if(ta){ta.value=='下山历练看看';ta.dispatchEvent(new Event('input',{bubbles:true}))}">下山历练看看</button>

让 AI 正确生成表格和按钮的技巧

1. 在格式要求里贴精确的表格/按钮模板——让 AI 直接照着写
2. 按钮的 onclick 里那段 JavaScript 长代码别让 AI 自己写——完整贴模板给 AI，让它只改 textarea.value='这里' 那一段
3. 多测几轮——AI 有时会漏闭合标签或写错 onclick，测试时看渲染效果