提交测试文件
This commit is contained in:
parent
9719e524b4
commit
86e769d718
|
|
@ -1,75 +1,311 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="zh">
|
<html lang="zh-CN" robotid="html_root_element">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>编辑保护按钮</title>
|
<title id="page-title" name="pageTitle" robotid="page_title_element">多层级 robotid 元素综合示例</title>
|
||||||
<style>
|
<style>
|
||||||
/* Ant Design 按钮基础样式 */
|
/* 基础样式 */
|
||||||
.ant-btn {
|
body {
|
||||||
line-height: 1.499;
|
font-family: Arial, sans-serif;
|
||||||
position: relative;
|
margin: 20px;
|
||||||
display: inline-block;
|
line-height: 1.6;
|
||||||
font-weight: 400;
|
}
|
||||||
white-space: nowrap;
|
.container {
|
||||||
text-align: center;
|
border: 1px solid #ddd;
|
||||||
background-image: none;
|
padding: 15px;
|
||||||
border: 1px solid transparent;
|
margin-bottom: 20px;
|
||||||
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all .3s cubic-bezier(.645, .045, .355, 1);
|
|
||||||
user-select: none;
|
|
||||||
touch-action: manipulation;
|
|
||||||
height: 32px;
|
|
||||||
padding: 0 15px;
|
|
||||||
font-size: 14px;
|
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
color: rgba(0, 0, 0, 0.65);
|
|
||||||
background-color: #fff;
|
|
||||||
border-color: #d9d9d9;
|
|
||||||
}
|
}
|
||||||
|
.ant-btn {
|
||||||
.ant-btn-primary {
|
display: inline-block;
|
||||||
color: #fff;
|
margin: 5px;
|
||||||
|
padding: 6px 12px;
|
||||||
|
border: 1px solid #1890ff;
|
||||||
background-color: #1890ff;
|
background-color: #1890ff;
|
||||||
border-color: #1890ff;
|
color: white;
|
||||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
|
border-radius: 2px;
|
||||||
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
|
cursor: pointer;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
.ant-btn:hover {
|
||||||
.ant-btn-primary:hover {
|
|
||||||
background-color: #40a9ff;
|
background-color: #40a9ff;
|
||||||
border-color: #40a9ff;
|
border-color: #40a9ff;
|
||||||
}
|
}
|
||||||
|
.btn-secondary {
|
||||||
.ant-btn-primary:active {
|
background-color: #6c757d;
|
||||||
background-color: #096dd9;
|
border-color: #6c757d;
|
||||||
border-color: #096dd9;
|
|
||||||
}
|
}
|
||||||
|
table {
|
||||||
.ant-btn[disabled] {
|
width: 100%;
|
||||||
color: rgba(0, 0, 0, 0.25);
|
border-collapse: collapse;
|
||||||
background-color: #f5f5f5;
|
margin: 15px 0;
|
||||||
border-color: #d9d9d9;
|
}
|
||||||
text-shadow: none;
|
th, td {
|
||||||
box-shadow: none;
|
border: 1px solid #ddd;
|
||||||
cursor: not-allowed;
|
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>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body robotid="body_element">
|
||||||
<button style="border-radius: 2px 0px 0px 2px;" type="button" class="ant-btn ant-btn-primary"
|
<!-- 多层级场景1：嵌套DOM结构 -->
|
||||||
id="cdp_diskInfo_editConfigProtect_button" robotid="cdp_diskInfo_editCfgProtect">
|
<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>
|
||||||
</button>
|
|
||||||
|
<!-- 层级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>
|
<script>
|
||||||
document.addEventListener('DOMContentLoaded', function() {
|
// 树形节点切换功能
|
||||||
const button = document.getElementById('cdp_diskInfo_editConfigProtect_button');
|
document.querySelectorAll('.tree-node-toggle').forEach(toggle => {
|
||||||
|
toggle.addEventListener('click', function() {
|
||||||
button.addEventListener('click', function() {
|
const treeView = this.closest('.tree-node').querySelector('.tree-view');
|
||||||
alert('已经点击');
|
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>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
@echo off
|
||||||
|
start "" code .
|
||||||
Loading…
Reference in New Issue