sky-ui-kit 0.1.9 → 0.1.11

package/examples/html/migration/before.html

@@ -0,0 +1,34 @@
+<!doctype html>
+<html lang="zh-CN">
+<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
+<title>原生地图悬浮面板 · 迁移前</title>
+<link rel="stylesheet" href="./legacy-controls.css">
+<link rel="stylesheet" href="./layout.css">
+</head>
+<body>
+<div id="map"><p id="mapStatus">地图布局占位，点击此背景可核对穿透（不加载地图引擎）。</p></div>
+<!-- 透明地图覆盖层不添加 sky-html。业务定位和穿透规则不变。 -->
+<div id="workspace">
+<section class="query-position" data-demo-theme data-theme="light">
+<header><h1>水库查询</h1><button id="theme" type="button">切换主题</button></header>
+<form id="searchForm" class="form-layout">
+<label class="field-layout" for="name">名称<input id="name" name="name" required placeholder="请输入名称"></label>
+<label class="field-layout" for="province">省份<select id="province" name="province" multiple size="3"><option selected>湖北</option><option>湖南</option><option>四川</option></select></label>
+<label><input name="enabled" type="checkbox" checked>仅显示可用项</label>
+<label>只读编码<input name="code" value="363" readonly></label>
+<div class="actions-layout"><button type="submit">查询</button><button type="reset">重置</button><button type="button" disabled>禁用操作</button></div>
+<output id="status" aria-live="polite">等待查询</output>
+</form>
+<footer><button id="openDetails" type="button">打开 body 浮层</button></footer>
+</section>
+</div>
+<dialog id="details" class="dialog-position">
+<!-- 浮层与查询面板是兄弟节点，明确使用自己的主题边界并同步 data-theme。 -->
+<section class="legacy-dialog" data-demo-theme data-theme="light">
+<header><h2>独立浮层</h2></header>
+<div><label>备注<input name="notes" placeholder="原生浮层输入"></label></div>
+<footer><button id="closeDetails" type="button">关闭</button></footer>
+</section>
+</dialog>
+<script src="./business.js"></script>
+</body></html>

package/examples/html/migration/business.js

@@ -0,0 +1,18 @@
+/* 两个页面共用原生业务监听器，不创建/替换业务 DOM，不依赖 Vue。 */
+const form = document.getElementById('searchForm');
+const status = document.getElementById('status');
+form.addEventListener('submit', event => {
+ event.preventDefault();
+ const data = new FormData(form);
+ status.textContent = '查询：' + data.get('name') + '；已选省份：' + data.getAll('province').join('、');
+});
+form.addEventListener('reset', () => { status.textContent = '查询条件已重置'; });
+document.getElementById('map').addEventListener('click', () => { document.getElementById('mapStatus').textContent = '地图背景仍可点击'; });
+const dialog = document.getElementById('details');
+document.getElementById('openDetails').addEventListener('click', () => { dialog.showModal(); });
+document.getElementById('closeDetails').addEventListener('click', () => { dialog.close(); });
+document.getElementById('theme').addEventListener('click', () => {
+ const panels = document.querySelectorAll('[data-demo-theme]');
+ const next = panels[0].dataset.theme === 'dark' ? 'light' : 'dark';
+ panels.forEach(panel => { panel.dataset.theme = next; });
+});

package/examples/html/migration/layout.css

@@ -0,0 +1,9 @@
+/* 迁移前后原样保留的业务布局，不负责控件皮肤。 */
+body { margin:0; }
+#map { position:fixed; inset:0; display:grid; place-items:center; background:repeating-linear-gradient(35deg,#b5d6c2 0 60px,#b9dbe8 60px 120px); }
+#workspace { position:fixed; inset:0; background:transparent; pointer-events:none; }
+.query-position { position:absolute; inset:24px auto auto 24px; width:min(360px,calc(100% - 48px)); pointer-events:auto; }
+.form-layout { display:grid; gap:16px; }
+.field-layout { display:grid; gap:6px; }
+.actions-layout { display:flex; flex-wrap:wrap; gap:12px; }
+.dialog-position { width:min(420px,calc(100% - 48px)); padding:0; border:0; }

package/examples/html/migration/legacy-controls.css

@@ -0,0 +1,8 @@
+/* 旧皮肤：迁移后移除该文件，不用更强的选择器继续覆盖。 */
+.query-position { background:#eee; border:2px solid #555; padding:14px; }
+#searchForm input, #searchForm select { background:#ddd; color:#222; border:2px solid #555; border-radius:0; padding:4px; }
+#searchForm input:focus { outline:3px solid orange; }
+#searchForm button, #openDetails, #closeDetails { background:#333; color:white; border:2px solid #777; border-radius:0; height:28px; }
+#searchForm button:hover { background:#555; }
+#searchForm button:disabled { background:#999; color:#ccc; }
+#searchForm input:checked { accent-color:orange; }