251 lines
11 KiB
HTML
251 lines
11 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>WebPage 测试页</title>
|
||
<style>
|
||
body { font-family: sans-serif; margin: 20px; }
|
||
.ant-form-item { display: flex; align-items: center; margin: 8px 0; }
|
||
.ant-form-item label { width: 90px; }
|
||
.ant-calendar-picker { position: relative; display: inline-block; }
|
||
.ant-calendar-picker-container {
|
||
position: absolute; top: 40px; left: 0; z-index: 1000;
|
||
background: #fff; border: 1px solid #ddd; box-shadow: 0 2px 8px rgba(0,0,0,.15);
|
||
padding: 8px; display: none; width: 260px;
|
||
}
|
||
.ant-calendar-picker-container.open { display: block; }
|
||
.ant-calendar-ym-select a { margin: 0 6px; cursor: pointer; }
|
||
.ant-calendar-date { display: inline-block; width: 26px; height: 24px; line-height: 24px;
|
||
text-align: center; cursor: pointer; }
|
||
.ant-calendar-date:hover { background: #e6f7ff; }
|
||
.ant-calendar-year-panel-cell, .ant-calendar-month-panel-cell {
|
||
display: inline-block; width: 60px; height: 26px; line-height: 26px; text-align: center;
|
||
cursor: pointer; }
|
||
.ant-calendar-year-panel-cell a, .ant-calendar-month-panel-cell a { color: #333; text-decoration: none; }
|
||
.ant-calendar-year-panel-prev-decade-btn, .ant-calendar-year-panel-next-decade-btn,
|
||
.ant-calendar-prev-month-btn, .ant-calendar-next-month-btn { cursor: pointer; margin: 0 4px; }
|
||
.ant-select-dropdown { display: none; border: 1px solid #ccc; background: #fff; max-height: 200px; overflow: auto; }
|
||
.ant-select-dropdown.open { display: block; }
|
||
.ant-select-dropdown-menu-item { padding: 4px 12px; cursor: pointer; }
|
||
.ant-select-dropdown-menu-item:hover { background: #e6f7ff; }
|
||
.dialog { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 500; }
|
||
.dialog.open { display: flex; align-items: center; justify-content: center; }
|
||
.dialog-box { background: #fff; padding: 20px; width: 380px; border-radius: 6px; }
|
||
.popup { display: none; position: fixed; background: #fff; border: 1px solid #999;
|
||
box-shadow: 0 4px 12px rgba(0,0,0,.2); padding: 12px; z-index: 600; }
|
||
.popup.open { display: block; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<h1>WebPage 测试页</h1>
|
||
|
||
<!-- 登录区 -->
|
||
<div class="ant-form-item"><label>账户名</label><input placeholder="账户名"></div>
|
||
<div class="ant-form-item"><label>密码</label><input type="password" placeholder="密码"></div>
|
||
<button id="btn-login">登录</button>
|
||
<span id="login-result"></span>
|
||
|
||
<!-- 打开弹窗按钮 -->
|
||
<button id="btn-dialog">打开弹窗</button>
|
||
|
||
<!-- 弹窗：表单 + 下拉 + 纯文本标题 -->
|
||
<div class="dialog" id="my-dialog" role="dialog" aria-modal="true">
|
||
<div class="dialog-box">
|
||
<button class="close" onclick="closeDialog()">Close</button>
|
||
<div class="ant-form-item"><label>姓名</label><input id="dlg-name" placeholder="姓名"></div>
|
||
<div class="ant-form-item">
|
||
<label>产品</label>
|
||
<div class="ant-select-selection" onclick="toggleSelect(this)">请选择产品</div>
|
||
<div class="ant-select-dropdown">
|
||
<div class="result-title" onclick="">检索结果</div>
|
||
<ul style="list-style:none;margin:0;padding:0">
|
||
<li class="ant-select-dropdown-menu-item">意外险</li>
|
||
<li class="ant-select-dropdown-menu-item">健康险</li>
|
||
<li class="ant-select-dropdown-menu-item">060003旅游意外伤害保险</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<button id="dlg-ok" onclick="confirmDialog()">确认</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 日期控件（antd 1.x 结构模拟：点击输入框弹出面板） -->
|
||
<div class="ant-form-item">
|
||
<label>证件有效起期</label>
|
||
<span class="ant-calendar-picker">
|
||
<input class="ant-calendar-picker-input" placeholder="证件有效起期" readonly onclick="openCalendar(this)">
|
||
<div class="ant-calendar-picker-container">
|
||
<div class="ant-calendar-header">
|
||
<a class="ant-calendar-prev-month-btn" title="上个月" onclick="navMonth(-1)">‹</a>
|
||
<span class="ant-calendar-ym-select">
|
||
<a class="ant-calendar-month-select" title="选择月份" onclick="showMonthPanel()">8月</a>
|
||
<a class="ant-calendar-year-select" title="选择年份" onclick="showYearPanel()">2026年</a>
|
||
</span>
|
||
<a class="ant-calendar-next-month-btn" title="下个月" onclick="navMonth(1)">›</a>
|
||
</div>
|
||
<div class="ant-calendar-date-panel" id="date-panel"></div>
|
||
<div class="ant-calendar-year-panel" id="year-panel" style="display:none"></div>
|
||
<div class="ant-calendar-month-panel" id="month-panel" style="display:none"></div>
|
||
</div>
|
||
</span>
|
||
</div>
|
||
|
||
<!-- shadow DOM 组件 -->
|
||
<x-widget></x-widget>
|
||
|
||
<!-- 机构树（angular-tree-component / ant-tree 结构模拟：switcher + content-wrapper + title） -->
|
||
<div class="ant-form-item"><label>机构</label>
|
||
<div id="org-tree" class="angular-tree-component">
|
||
<div class="tree-children">
|
||
<div class="tree-node">
|
||
<span class="ant-tree-switcher ant-tree-switcher-open" onclick="toggleOrg(this)">▾</span>
|
||
<span class="ant-tree-node-content-wrapper">
|
||
<span class="ant-tree-title">北京分公司</span>
|
||
</span>
|
||
</div>
|
||
<div class="tree-node" style="padding-left: 20px">
|
||
<span class="ant-tree-switcher ant-tree-switcher-noop">·</span>
|
||
<span class="ant-tree-node-content-wrapper">
|
||
<span class="ant-tree-title">北京分公司车险管理部</span>
|
||
</span>
|
||
</div>
|
||
<div class="tree-node">
|
||
<span class="ant-tree-switcher ant-tree-switcher-close" onclick="toggleOrg(this)">▸</span>
|
||
<span class="ant-tree-node-content-wrapper">
|
||
<span class="ant-tree-title">上海分公司</span>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<span id="org-selected"></span>
|
||
|
||
<script>
|
||
// 树节点点击选中（title 可点）
|
||
document.querySelectorAll('#org-tree .ant-tree-title').forEach(function (t) {
|
||
t.addEventListener('click', function () {
|
||
document.getElementById('org-selected').textContent = '已选: ' + t.textContent.trim();
|
||
});
|
||
});
|
||
// 树 switcher 点击仅展开/折叠
|
||
window.toggleOrg = function (sw) {
|
||
var node = sw.closest('.tree-node');
|
||
var kids = node.querySelector('.tree-children');
|
||
var folded = sw.classList.toggle('ant-tree-switcher-close');
|
||
if (kids) kids.style.display = folded ? 'none' : 'block';
|
||
};
|
||
</script>
|
||
<script>
|
||
// ---------- 弹窗 ----------
|
||
window.openDialog = function () { document.getElementById('my-dialog').classList.add('open'); };
|
||
window.closeDialog = function () { document.getElementById('my-dialog').classList.remove('open'); };
|
||
window.confirmDialog = function () {
|
||
var v = document.getElementById('dlg-name').value;
|
||
document.getElementById('login-result').textContent = '确认:' + v;
|
||
closeDialog();
|
||
};
|
||
document.getElementById('btn-dialog').addEventListener('click', openDialog);
|
||
document.getElementById('btn-login').addEventListener('click', function () {
|
||
document.getElementById('login-result').textContent = '登录成功';
|
||
});
|
||
|
||
// ---------- 模拟 antd select ----------
|
||
window.toggleSelect = function (sel) {
|
||
var dd = sel.parentElement.querySelector('.ant-select-dropdown');
|
||
dd.classList.toggle('open');
|
||
};
|
||
document.querySelectorAll('.ant-select-dropdown-menu-item').forEach(function (li) {
|
||
li.addEventListener('click', function () {
|
||
var sel = li.closest('.ant-form-item').querySelector('.ant-select-selection');
|
||
sel.textContent = li.textContent;
|
||
li.closest('.ant-select-dropdown').classList.remove('open');
|
||
});
|
||
});
|
||
|
||
// ---------- 模拟 antd 日历 ----------
|
||
var curYear = 2026, curMonth = 8, selYear = 2026, selMonth = 8, selDay = 20;
|
||
window.renderDate = function () {
|
||
var p = document.getElementById('date-panel');
|
||
var first = new Date(curYear, curMonth - 1, 1).getDay();
|
||
var days = new Date(curYear, curMonth, 0).getDate();
|
||
var html = '';
|
||
for (var i = 0; i < first; i++) html += '<span class="ant-calendar-date" style="visibility:hidden">-</span>';
|
||
for (var d = 1; d <= days; d++) {
|
||
html += '<span class="ant-calendar-date" onclick="pickDate(' + d + ')">' + d + '</span>';
|
||
}
|
||
p.innerHTML = html;
|
||
document.querySelector('.ant-calendar-month-select').textContent = curMonth + '月';
|
||
document.querySelector('.ant-calendar-year-select').textContent = curYear + '年';
|
||
};
|
||
window.openCalendar = function (inp) {
|
||
var c = inp.parentElement.querySelector('.ant-calendar-picker-container');
|
||
var open = c.classList.toggle('open');
|
||
if (open) { renderDate(); showDatePanel(); }
|
||
};
|
||
window.showDatePanel = function () {
|
||
document.getElementById('date-panel').style.display = 'block';
|
||
document.getElementById('year-panel').style.display = 'none';
|
||
document.getElementById('month-panel').style.display = 'none';
|
||
};
|
||
window.showYearPanel = function () {
|
||
var p = document.getElementById('year-panel');
|
||
var start = Math.floor(curYear / 10) * 10;
|
||
var html = '<a class="ant-calendar-year-panel-prev-decade-btn" onclick="navDecade(-1)">«</a> ';
|
||
for (var y = start; y < start + 10; y++) {
|
||
html += '<span class="ant-calendar-year-panel-cell"><a onclick="pickYear(' + y + ')">' + y + '</a></span>';
|
||
}
|
||
html += ' <a class="ant-calendar-year-panel-next-decade-btn" onclick="navDecade(1)">»</a>';
|
||
p.innerHTML = html;
|
||
document.getElementById('date-panel').style.display = 'none';
|
||
document.getElementById('year-panel').style.display = 'block';
|
||
document.getElementById('month-panel').style.display = 'none';
|
||
};
|
||
window.navDecade = function (d) {
|
||
var start = Math.floor(curYear / 10) * 10 + d * 10;
|
||
curYear = start;
|
||
showYearPanel();
|
||
};
|
||
window.showMonthPanel = function () {
|
||
var p = document.getElementById('month-panel');
|
||
var html = '';
|
||
for (var m = 1; m <= 12; m++) {
|
||
html += '<span class="ant-calendar-month-panel-cell"><a onclick="pickMonth(' + m + ')">' + m + '月</a></span>';
|
||
}
|
||
p.innerHTML = html;
|
||
document.getElementById('date-panel').style.display = 'none';
|
||
document.getElementById('year-panel').style.display = 'none';
|
||
document.getElementById('month-panel').style.display = 'block';
|
||
};
|
||
window.pickYear = function (y) {
|
||
curYear = y; showDatePanel(); renderDate();
|
||
};
|
||
window.pickMonth = function (m) {
|
||
curMonth = m; showDatePanel(); renderDate();
|
||
};
|
||
window.navMonth = function (d) {
|
||
curMonth += d;
|
||
if (curMonth > 12) { curMonth = 1; curYear++; }
|
||
if (curMonth < 1) { curMonth = 12; curYear--; }
|
||
renderDate();
|
||
};
|
||
window.pickDate = function (d) {
|
||
selYear = curYear; selMonth = curMonth; selDay = d;
|
||
var pad = function (n) { return n < 10 ? '0' + n : '' + n; };
|
||
var inp = document.querySelector('.ant-calendar-picker-input');
|
||
inp.value = selYear + '-' + pad(selMonth) + '-' + pad(selDay);
|
||
document.querySelector('.ant-calendar-picker-container').classList.remove('open');
|
||
};
|
||
renderDate();
|
||
|
||
// ---------- shadow DOM ----------
|
||
class XWidget extends HTMLElement {
|
||
connectedCallback() {
|
||
const root = this.attachShadow({ mode: 'open' });
|
||
root.innerHTML = '<button id="x-btn">影子按钮</button><input id="x-input" placeholder="影子输入框">';
|
||
}
|
||
}
|
||
customElements.define('x-widget', XWidget);
|
||
</script>
|
||
</body>
|
||
</html>
|