312 lines
13 KiB
HTML
312 lines
13 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN" robotid="html_root_element">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title id="page-title" name="pageTitle" robotid="page_title_element">多层级 robotid 元素综合示例</title>
|
||
<style>
|
||
/* 基础样式 */
|
||
body {
|
||
font-family: Arial, sans-serif;
|
||
margin: 20px;
|
||
line-height: 1.6;
|
||
}
|
||
.container {
|
||
border: 1px solid #ddd;
|
||
padding: 15px;
|
||
margin-bottom: 20px;
|
||
border-radius: 4px;
|
||
}
|
||
.ant-btn {
|
||
display: inline-block;
|
||
margin: 5px;
|
||
padding: 6px 12px;
|
||
border: 1px solid #1890ff;
|
||
background-color: #1890ff;
|
||
color: white;
|
||
border-radius: 2px;
|
||
cursor: pointer;
|
||
text-align: center;
|
||
}
|
||
.ant-btn:hover {
|
||
background-color: #40a9ff;
|
||
border-color: #40a9ff;
|
||
}
|
||
.btn-secondary {
|
||
background-color: #6c757d;
|
||
border-color: #6c757d;
|
||
}
|
||
table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
margin: 15px 0;
|
||
}
|
||
th, td {
|
||
border: 1px solid #ddd;
|
||
padding: 8px;
|
||
text-align: left;
|
||
}
|
||
th {
|
||
background-color: #f2f2f2;
|
||
}
|
||
.parent-with-robotid {
|
||
padding: 15px;
|
||
background-color: #f8f8f8;
|
||
margin: 10px 0;
|
||
}
|
||
.form-group {
|
||
margin-bottom: 15px;
|
||
}
|
||
label {
|
||
display: block;
|
||
margin-bottom: 5px;
|
||
font-weight: bold;
|
||
}
|
||
input, select {
|
||
padding: 8px;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
.tab-container {
|
||
display: flex;
|
||
margin-bottom: 15px;
|
||
}
|
||
.tab {
|
||
padding: 10px 15px;
|
||
cursor: pointer;
|
||
border: 1px solid #ddd;
|
||
margin-right: 5px;
|
||
}
|
||
.tab.active {
|
||
background-color: #1890ff;
|
||
color: white;
|
||
}
|
||
.tree-view {
|
||
margin-left: 20px;
|
||
}
|
||
.tree-node {
|
||
margin-bottom: 5px;
|
||
}
|
||
.tree-node-toggle {
|
||
cursor: pointer;
|
||
margin-right: 5px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body robotid="body_element">
|
||
<!-- 多层级场景1：嵌套DOM结构 -->
|
||
<div id="nested-dom-section" name="nestedDomSection" class="container" robotid="nested_dom_section">
|
||
<h2 id="nested-dom-title" name="nestedDomTitle" robotid="nested_dom_title">1. 多层级DOM嵌套</h2>
|
||
|
||
<!-- 层级1 -->
|
||
<div id="level1" name="level1" class="tree-view" robotid="dom_level_1">
|
||
<div class="tree-node">
|
||
<span class="tree-node-toggle">+</span>
|
||
<span robotid="level1_node">层级1节点</span>
|
||
|
||
<!-- 层级2 -->
|
||
<div id="level2" name="level2" class="tree-view" robotid="dom_level_2">
|
||
<div class="tree-node">
|
||
<span class="tree-node-toggle">+</span>
|
||
<span>层级2节点（无robotid）</span>
|
||
|
||
<!-- 层级3 -->
|
||
<div id="level3" name="level3" class="tree-view">
|
||
<div class="tree-node" robotid="dom_level_3_node1">
|
||
<span>层级3节点1（有robotid）</span>
|
||
</div>
|
||
<div class="tree-node">
|
||
<span robotid="dom_level_3_node2">层级3节点2（span有robotid）</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 多层级场景2：表格行列嵌套 -->
|
||
<div id="table-nested-section" name="tableNestedSection" class="container" robotid="table_nested_section">
|
||
<h2 id="table-nested-title" name="tableNestedTitle" robotid="table_nested_title">2. 表格行列嵌套</h2>
|
||
|
||
<table id="nested-table" name="nestedTable" robotid="nested_data_table">
|
||
<thead robotid="table_header_section">
|
||
<tr>
|
||
<th robotid="main_category_header">主分类</th>
|
||
<th robotid="sub_category_header">子分类</th>
|
||
<th robotid="item_header">项目</th>
|
||
<th robotid="actions_header">操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<!-- 行1：有robotid的行 -->
|
||
<tr id="row1" name="row1" robotid="table_row_1">
|
||
<td robotid="main_cat_1" rowspan="2">电子产品</td>
|
||
<td robotid="sub_cat_1_1">手机</td>
|
||
<td>
|
||
<div robotid="product_1_1_1">
|
||
<span robotid="product_name_1_1_1">智能手机X</span>
|
||
<span>(库存: <span robotid="product_stock_1_1_1">50</span>)</span>
|
||
</div>
|
||
</td>
|
||
<td robotid="actions_1_1">
|
||
<button robotid="edit_btn_1_1" class="ant-btn">编辑</button>
|
||
</td>
|
||
</tr>
|
||
<!-- 行2：无robotid的行，但单元格有 -->
|
||
<tr id="row2" name="row2">
|
||
<td robotid="sub_cat_1_2">电脑</td>
|
||
<td robotid="product_1_2_1">笔记本电脑Y</td>
|
||
<td>
|
||
<button robotid="edit_btn_1_2" class="ant-btn">编辑</button>
|
||
</td>
|
||
</tr>
|
||
<!-- 行3：深层嵌套 -->
|
||
<tr id="row3" name="row3" robotid="table_row_3">
|
||
<td robotid="main_cat_2">家居用品</td>
|
||
<td colspan="3">
|
||
<div robotid="nested_subcategories">
|
||
<table robotid="nested_sub_table">
|
||
<tr robotid="sub_row_1">
|
||
<td robotid="sub_cell_1_1">厨房用品</td>
|
||
<td robotid="sub_cell_1_2">
|
||
<div robotid="product_group_1">
|
||
多功能锅
|
||
</div>
|
||
</td>
|
||
<td robotid="sub_cell_1_3">
|
||
<button robotid="sub_edit_btn_1" class="ant-btn">编辑</button>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<!-- 多层级场景3：表单嵌套 -->
|
||
<div id="nested-form-section" name="nestedFormSection" class="container" robotid="nested_form_section">
|
||
<h2 id="nested-form-title" name="nestedFormTitle" robotid="nested_form_title">3. 多层级表单嵌套</h2>
|
||
|
||
<form id="main-form" name="mainForm" robotid="main_form_element">
|
||
<div class="form-group" robotid="basic_info_section">
|
||
<h3 robotid="basic_info_title">基本信息</h3>
|
||
<div robotid="name_field_group">
|
||
<label robotid="name_label" for="fullname">姓名</label>
|
||
<input type="text" id="fullname" name="fullname" robotid="name_input_field">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group" robotid="address_section">
|
||
<h3>地址信息</h3>
|
||
<div robotid="address_field_group">
|
||
<div style="display: flex; gap: 10px;">
|
||
<div style="flex: 1;" robotid="province_group">
|
||
<label robotid="province_label">省份</label>
|
||
<select robotid="province_select">
|
||
<option robotid="province_option_1">北京</option>
|
||
<option robotid="province_option_2">上海</option>
|
||
</select>
|
||
</div>
|
||
<div style="flex: 1;">
|
||
<label>城市</label>
|
||
<select robotid="city_select">
|
||
<option>北京市</option>
|
||
<option>上海市</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div robotid="detail_address_group" style="margin-top: 10px;">
|
||
<label robotid="address_label">详细地址</label>
|
||
<textarea robotid="address_textarea" rows="3" style="width: 100%;"></textarea>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group" robotid="preferences_section">
|
||
<h3 robotid="preferences_title">偏好设置</h3>
|
||
<div robotid="notification_group">
|
||
<label>
|
||
<input type="checkbox" robotid="email_notification_checkbox"> 邮件通知
|
||
</label>
|
||
<div robotid="notification_settings" style="margin-left: 20px; margin-top: 5px;">
|
||
<label robotid="frequency_label">频率</label>
|
||
<select robotid="frequency_select">
|
||
<option robotid="daily_option">每天</option>
|
||
<option robotid="weekly_option">每周</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div robotid="form_actions">
|
||
<button type="submit" robotid="submit_button" class="ant-btn">提交</button>
|
||
<button type="reset" robotid="reset_button" class="ant-btn btn-secondary">重置</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
|
||
<!-- 多层级场景4：UI组件嵌套 -->
|
||
<div id="ui-components-section" name="uiComponentsSection" class="container" robotid="ui_components_section">
|
||
<h2 id="ui-components-title" name="uiComponentsTitle" robotid="ui_components_title">4. UI组件嵌套</h2>
|
||
|
||
<div robotid="card_component" style="border: 1px solid #eee; border-radius: 4px; padding: 15px; margin-bottom: 15px;">
|
||
<div robotid="card_header" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
|
||
<h3 robotid="card_title">用户信息卡片</h3>
|
||
<button robotid="card_action_button" class="ant-btn">编辑</button>
|
||
</div>
|
||
|
||
<div robotid="card_body" style="display: flex; gap: 20px;">
|
||
<div robotid="avatar_section" style="flex: 0 0 100px;">
|
||
<div robotid="avatar_placeholder" style="width: 100px; height: 100px; background-color: #ddd; border-radius: 50%;"></div>
|
||
</div>
|
||
|
||
<div robotid="info_section" style="flex: 1;">
|
||
<div robotid="info_row_1" style="margin-bottom: 10px;">
|
||
<label robotid="name_label" style="display: inline-block; width: 80px;">姓名:</label>
|
||
<span robotid="name_value">张三</span>
|
||
</div>
|
||
<div robotid="info_row_2" style="margin-bottom: 10px;">
|
||
<label robotid="email_label" style="display: inline-block; width: 80px;">邮箱:</label>
|
||
<span robotid="email_value">zhangsan@example.com</span>
|
||
</div>
|
||
<div robotid="info_row_3">
|
||
<label robotid="role_label" style="display: inline-block; width: 80px;">角色:</label>
|
||
<span robotid="role_value">
|
||
<span robotid="role_badge" style="background-color: #e6f7ff; padding: 2px 8px; border-radius: 4px;">管理员</span>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div robotid="card_footer" style="margin-top: 15px; border-top: 1px solid #eee; padding-top: 10px;">
|
||
<button robotid="footer_button_1" class="ant-btn">消息</button>
|
||
<button robotid="footer_button_2" class="ant-btn btn-secondary">设置</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// 树形节点切换功能
|
||
document.querySelectorAll('.tree-node-toggle').forEach(toggle => {
|
||
toggle.addEventListener('click', function() {
|
||
const treeView = this.closest('.tree-node').querySelector('.tree-view');
|
||
if (treeView) {
|
||
const isHidden = treeView.style.display === 'none';
|
||
treeView.style.display = isHidden ? 'block' : 'none';
|
||
this.textContent = isHidden ? '-' : '+';
|
||
}
|
||
});
|
||
|
||
// 默认折叠所有层级
|
||
const treeView = toggle.closest('.tree-node').querySelector('.tree-view');
|
||
if (treeView) {
|
||
treeView.style.display = 'none';
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |