gis-view-webgl2 0.1.0 → 0.1.2

package/docs/api/index.html

@@ -11,21 +11,63 @@
 				--line: #d7e2ee;
 				--bg: #f5f8fc;
 				--card: #ffffff;
+				--card-2: #f0f5fb;
+				--control: #ffffff;
 				--accent: #2f6fd0;
+				--accent-strong: #235a9f;
+				--accent-ink: #0b3d91;
 				--accent-soft: #e8f0fd;
 				--code-bg: #16202c;
 				--code-ink: #d7e3f2;
 				--ok: #2ea36b;
+				--warn: #c98618;
+				--highlight-bg: #fffdf5;
+				--highlight-line: #f0a92e;
+				--header-bg: rgba(255, 255, 255, 0.94);
+				--shadow: 0 16px 34px -28px rgba(23, 45, 78, 0.55);
+			}
+			html.theme-dark {
+				color-scheme: dark;
+				--ink: #c6d4e4;
+				--dim: #8ba0b8;
+				--line: #253040;
+				--bg: #0c131c;
+				--card: #141c26;
+				--card-2: #1b2532;
+				--control: #18212d;
+				--accent: #74a9ea;
+				--accent-strong: #9cc3ea;
+				--accent-ink: #a9cbf0;
+				--accent-soft: #1a2a3e;
+				--code-bg: #0b1420;
+				--code-ink: #d8e6f6;
+				--ok: #58c98c;
+				--warn: #e0a34a;
+				--highlight-bg: #2b2618;
+				--highlight-line: #b9781c;
+				--header-bg: rgba(12, 19, 28, 0.9);
+				--shadow: 0 18px 36px -26px rgba(0, 0, 0, 0.9);
 			}
 			* { box-sizing: border-box; }
+			html { scroll-padding-top: 82px; }
 			body {
 				margin: 0;
 				background: var(--bg);
 				color: var(--ink);
-				font: 13px/1.65 system-ui, 'Microsoft YaHei', sans-serif;
+				font: 13.5px/1.7 system-ui, 'Microsoft YaHei', sans-serif;
+				-webkit-font-smoothing: antialiased;
 			}
 			code { font-family: ui-monospace, Consolas, 'Courier New', monospace; }
 			a { color: var(--accent); }
+			:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+			* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
+			::-webkit-scrollbar { width: 10px; height: 10px; }
+			::-webkit-scrollbar-thumb {
+				border: 3px solid transparent;
+				border-radius: 999px;
+				background: var(--line);
+				background-clip: content-box;
+			}
 			.topbar {
 				position: sticky;
 				top: 0;
@@ -37,10 +79,10 @@
 				justify-content: space-between;
 				padding: 10px 18px;
 				border-bottom: 1px solid var(--line);
-				background: rgba(255, 255, 255, 0.94);
-				backdrop-filter: blur(6px);
+				background: var(--header-bg);
+				backdrop-filter: blur(10px);
 			}
-			.topbar h1 { margin: 0; font-size: 17px; }
+			.topbar h1 { margin: 0; color: var(--ink); font-size: 17px; }
 			.topbar .sub { margin: 2px 0 0; color: var(--dim); font-size: 12px; }
 			.topbar .brand { display: flex; gap: 12px; align-items: center; }
 			.topbar .back { flex: none; font-size: 12px; text-decoration: none; }
@@ -50,32 +92,54 @@
 				padding: 6px 10px;
 				border: 1px solid var(--line);
 				border-radius: 8px;
-				background: #fff;
+				background: var(--control);
 				color: inherit;
 				font: inherit;
+				transition: border-color 0.15s, box-shadow 0.15s;
+			}
+			#search:focus {
+				border-color: var(--accent);
+				outline: none;
+				box-shadow: 0 0 0 3px var(--accent-soft);
 			}
 			.tools a, .tools button {
 				padding: 6px 10px;
 				border: 1px solid var(--line);
 				border-radius: 8px;
-				background: #fff;
+				background: var(--control);
 				color: var(--accent);
 				font: inherit;
 				text-decoration: none;
 				cursor: pointer;
+				transition: border-color 0.15s, background 0.15s, color 0.15s, transform 0.15s;
+			}
+			.tools a:hover, .tools button:hover {
+				border-color: var(--accent);
+				background: var(--accent-soft);
+				color: var(--accent-strong);
+				transform: translateY(-1px);
+			}
+			#theme-btn { min-width: 104px; }
+			main {
+				display: flex;
+				align-items: flex-start;
+				gap: 20px;
+				width: min(100%, 1680px);
+				margin: 0 auto;
+				padding: 18px 20px 64px;
 			}
-			main { display: flex; align-items: flex-start; gap: 18px; padding: 16px 18px 60px; }
 			#side {
 				position: sticky;
 				top: 74px;
 				flex: none;
-				width: 214px;
+				width: 232px;
 				max-height: calc(100vh - 96px);
 				overflow: auto;
-				padding: 10px;
+				padding: 12px;
 				border: 1px solid var(--line);
 				border-radius: 12px;
 				background: var(--card);
+				box-shadow: var(--shadow);
 			}
 			#side h2 { margin: 0 0 6px; font-size: 12px; color: var(--dim); font-weight: 600; }
 			.side-item {
@@ -92,18 +156,22 @@
 				font: inherit;
 				text-align: left;
 				cursor: pointer;
+				transition: background 0.14s, color 0.14s;
 			}
 			.side-item:hover { background: var(--accent-soft); }
+			.side-item.on { background: var(--accent-soft); color: var(--accent-strong); }
+			.side-item.on b { color: var(--accent); }
 			.side-item b { color: var(--dim); font-weight: 500; }
 			#side .kinds { margin: 8px 0 4px; padding-top: 8px; border-top: 1px dashed var(--line); color: var(--dim); font-size: 12px; }
 			#side .kinds label { display: block; margin: 2px 0; cursor: pointer; }
 			#content { flex: 1 1 auto; min-width: 0; }
 			.card {
 				margin: 0 0 14px;
-				padding: 12px 14px;
+				padding: 14px 16px;
 				border: 1px solid var(--line);
 				border-radius: 12px;
 				background: var(--card);
+				box-shadow: var(--shadow);
 			}
 			.card h2 { margin: 0 0 6px; font-size: 15px; }
 			.api-group { margin: 0 0 22px; }
@@ -111,7 +179,7 @@
 				position: sticky;
 				top: 62px;
 				margin: 0 0 8px;
-				padding: 6px 2px;
+				padding: 8px 2px;
 				background: var(--bg);
 				font-size: 16px;
 				border-bottom: 1px solid var(--line);
@@ -124,11 +192,17 @@
 				border-left: 3px solid var(--accent);
 				border-radius: 10px;
 				background: var(--card);
+				scroll-margin-top: 82px;
+				transition: border-color 0.15s, box-shadow 0.15s;
+			}
+			.api-member:hover {
+				border-color: var(--accent);
+				box-shadow: var(--shadow);
 			}
-			.api-member.highlight { border-color: #f0a92e; border-left-color: #f0a92e; background: #fffdf5; }
+			.api-member.highlight { border-color: var(--highlight-line); border-left-color: var(--highlight-line); background: var(--highlight-bg); }
 			.api-member > header { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
 			.api-member h3 { margin: 0; font-size: 14px; }
-			.api-member h3 code { color: #0b3d91; }
+			.api-member h3 code { color: var(--accent-ink); }
 			.api-member .badge {
 				padding: 1px 6px;
 				border-radius: 999px;
@@ -136,17 +210,18 @@
 				color: var(--accent);
 				font-size: 11px;
 			}
-			.api-member .badge.property { background: #eaf7ef; color: var(--ok); }
-			.api-member .copy-name { margin-left: auto; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--dim); font: inherit; font-size: 12px; cursor: pointer; }
+			.api-member .badge.property { background: var(--card-2); color: var(--ok); }
+			.api-member .copy-name { margin-left: auto; border: 1px solid var(--line); border-radius: 7px; background: var(--control); color: var(--dim); font: inherit; font-size: 12px; cursor: pointer; }
 			.api-member dl { display: grid; grid-template-columns: 42px 1fr; gap: 2px 8px; margin: 6px 0 4px; }
 			.api-member dt { color: var(--dim); }
-			.api-member dd { margin: 0; }
-			.api-member .doc { margin: 4px 0 8px; }
+			.api-member dd { margin: 0; max-width: 88ch; }
+			.api-member .doc { max-width: 88ch; margin: 4px 0 8px; line-height: 1.75; }
 			.example { margin: 6px 0 0; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
-			.example-head { display: flex; gap: 8px; align-items: center; padding: 4px 8px; background: #f0f5fb; color: var(--dim); font-size: 12px; }
-			.example-head button { margin-left: auto; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--accent); font: inherit; font-size: 12px; cursor: pointer; }
-			.example pre { margin: 0; padding: 10px 12px; overflow: auto; background: var(--code-bg); color: var(--code-ink); }
-			.example code { font-size: 12px; line-height: 1.6; white-space: pre; }
+			.example-head { display: flex; gap: 8px; align-items: center; padding: 5px 9px; background: var(--card-2); color: var(--dim); font-size: 12px; }
+			.example-head button { margin-left: auto; border: 1px solid var(--line); border-radius: 7px; background: var(--control); color: var(--accent); font: inherit; font-size: 12px; cursor: pointer; }
+			.example-head button + button { margin-left: 0; }
+			.example pre { margin: 0; padding: 11px 13px; overflow: auto; background: var(--code-bg); color: var(--code-ink); tab-size: 2; }
+			.example code { font-size: 12px; line-height: 1.65; white-space: pre; }
 			.tok-comment { color: #7d93ab; }
 			.tok-string { color: #9adc9a; }
 			.tok-key { color: #7fb6f6; }
@@ -159,51 +234,363 @@
 				padding: 7px 4px;
 				border-bottom: 1px dashed var(--line);
 			}
-			.api-option .name { color: #0b3d91; }
+			.api-option .name { color: var(--accent-ink); }
 			.api-option .type, .api-option .def { color: var(--dim); font-size: 12px; }
 			.api-option .doc { grid-column: 1 / -1; margin: 0; }
 			.hidden { display: none !important; }
 			#hits { color: var(--dim); font-size: 12px; }
 			@media (max-width: 900px) {
-				main { flex-direction: column; }
-				#side { position: static; width: 100%; max-height: none; }
+				main { flex-direction: column; padding: 14px 14px 48px; }
+				#side { position: static; width: 100%; max-height: none; box-shadow: none; }
+				#side-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 2px; }
+			}
+			@media (max-width: 680px) {
+				.topbar { align-items: flex-start; padding: 10px 12px; }
+				.topbar .brand { width: 100%; }
+				.topbar .sub { display: none; }
+				.tools { width: 100%; flex-wrap: wrap; }
+				#search { flex: 1 1 100%; width: 100%; }
+				.tools a, .tools button { flex: 1 1 auto; text-align: center; }
+				.api-group > h2 { top: 104px; }
+				.api-member dl { grid-template-columns: 38px 1fr; }
+			}
+			@media (prefers-reduced-motion: reduce) {
+				*, *::before, *::after {
+					scroll-behavior: auto !important;
+					transition-duration: 0.001s !important;
+				}
+			}
+			/* ------------------------------------------------------------------
+			   API 速查视觉层：Ant Design / ECharts 文档那种「先扫结构、再看细节」的密度
+			   ------------------------------------------------------------------ */
+			:root {
+				--ink: #1d2129;
+				--dim: #667085;
+				--line: #e6e9ef;
+				--bg: #f5f6f8;
+				--card: #ffffff;
+				--card-2: #f7f9fc;
+				--control: #ffffff;
+				--accent: #1677ff;
+				--accent-strong: #0958d9;
+				--accent-ink: #0958d9;
+				--accent-soft: #eaf2ff;
+				--code-bg: #111827;
+				--code-ink: #e5edf8;
+				--ok: #00a870;
+				--warn: #d48806;
+				--highlight-bg: #fffbe6;
+				--highlight-line: #faad14;
+				--header-bg: rgba(255, 255, 255, 0.9);
+				--shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 8px 24px -18px rgba(16, 24, 40, 0.35);
+			}
+			html.theme-dark {
+				--ink: #e6edf7;
+				--dim: #8c99ac;
+				--line: #263243;
+				--bg: #0f141c;
+				--card: #151c26;
+				--card-2: #1b2431;
+				--control: #18212d;
+				--accent: #4d9cff;
+				--accent-strong: #7db5ff;
+				--accent-ink: #8abaff;
+				--accent-soft: #172a44;
+				--code-bg: #0a111b;
+				--code-ink: #dbe8f8;
+				--ok: #4fd39b;
+				--warn: #e8b04b;
+				--highlight-bg: #2b2416;
+				--highlight-line: #b77c1d;
+				--header-bg: rgba(15, 20, 28, 0.9);
+				--shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 12px 30px -22px rgba(0, 0, 0, 0.9);
+			}
+			html { scroll-padding-top: 86px; }
+			body {
+				font-size: 14px;
+				line-height: 1.65;
+				background: radial-gradient(circle at 50% -20%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 36rem), var(--bg);
+			}
+			.topbar {
+				min-height: 64px;
+				flex-wrap: nowrap;
+				gap: 20px;
+				padding: 9px clamp(14px, 3vw, 34px);
+				border-bottom-color: var(--line);
+				box-shadow: 0 1px 0 rgba(16, 24, 40, 0.02);
+			}
+			.topbar .brand { min-width: 0; gap: 11px; }
+			.topbar .brand-logo {
+				display: grid;
+				place-items: center;
+				width: 36px;
+				height: 36px;
+				flex: none;
+				border-radius: 9px;
+				background: linear-gradient(145deg, #1677ff, #5b8ff9);
+				color: #fff;
+				font: 700 16px/1 ui-monospace, Consolas, monospace;
+				text-decoration: none;
+				box-shadow: 0 6px 14px -8px #1677ff;
+			}
+			.topbar h1 { font-size: 16px; letter-spacing: 0.01em; }
+			.topbar .sub { margin-top: 1px; font-size: 11.5px; }
+			.topbar .tools { flex: 1 1 auto; justify-content: flex-end; gap: 6px; }
+			.search-box {
+				display: flex;
+				align-items: center;
+				gap: 7px;
+				width: min(420px, 34vw);
+				padding: 0 10px;
+				border: 1px solid var(--line);
+				border-radius: 8px;
+				background: var(--control);
+				transition: border-color 0.15s, box-shadow 0.15s;
+			}
+			.search-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
+			.search-box .search-icon { color: var(--dim); font-size: 16px; line-height: 1; }
+			#search {
+				width: 100%;
+				padding: 7px 0;
+				border: 0;
+				border-radius: 0;
+				background: transparent;
+				box-shadow: none;
+			}
+			#search:focus { box-shadow: none; }
+			.tools a, .tools button {
+				padding: 6px 9px;
+				border-color: transparent;
+				background: transparent;
+				color: var(--dim);
+				font-size: 12.5px;
+			}
+			.tools a:hover, .tools button:hover { border-color: var(--line); background: var(--card); color: var(--accent); transform: none; }
+			#theme-btn { min-width: 0; }
+			main {
+				align-items: flex-start;
+				gap: 24px;
+				width: min(100%, 1560px);
+				padding: 24px clamp(14px, 3vw, 34px) 72px;
+			}
+			#side {
+				top: 80px;
+				width: 252px;
+				max-height: calc(100vh - 104px);
+				padding: 14px 12px;
+				border-radius: 12px;
+				box-shadow: none;
+			}
+			.side-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 6px 10px; border-bottom: 1px solid var(--line); }
+			.side-head h2 { margin: 0; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
+			#hits { max-width: 132px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; font-size: 10.5px; }
+			#side .kinds { display: flex; flex-wrap: wrap; gap: 5px; margin: 10px 0 12px; padding: 0; border: 0; }
+			#side .kinds label {
+				display: inline-flex;
+				align-items: center;
+				gap: 5px;
+				padding: 4px 8px;
+				border: 1px solid var(--line);
+				border-radius: 999px;
+				background: var(--card-2);
+				color: var(--dim);
+				font-size: 11.5px;
+				cursor: pointer;
+			}
+			#side .kinds label:has(input:checked) { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); background: var(--accent-soft); color: var(--accent-ink); }
+			#side .kinds input { width: 12px; height: 12px; margin: 0; accent-color: var(--accent); }
+			#side-list { display: flex; flex-direction: column; gap: 2px; }
+			.side-item { align-items: center; padding: 7px 8px; border-radius: 7px; font-size: 12.5px; }
+			.side-item b { min-width: 24px; padding: 1px 6px; border-radius: 999px; background: var(--card-2); color: var(--dim); font-size: 10.5px; text-align: center; }
+			.side-item.on b { background: var(--accent); color: #fff; }
+			.hero {
+				display: grid;
+				grid-template-columns: minmax(0, 1.02fr) minmax(320px, 0.98fr);
+				gap: clamp(20px, 3vw, 36px);
+				margin: 0 0 24px;
+				padding: clamp(22px, 3.2vw, 36px);
+				border: 1px solid var(--line);
+				border-radius: 16px;
+				background:
+					linear-gradient(135deg, color-mix(in srgb, var(--accent) 6%, var(--card)), var(--card) 58%),
+					var(--card);
+				box-shadow: var(--shadow);
+				overflow: hidden;
+			}
+			.hero-copy { min-width: 0; align-self: center; }
+			.eyebrow { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 10px; color: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; }
+			.eyebrow::before { content: ''; width: 18px; height: 2px; border-radius: 999px; background: currentColor; }
+			.hero h2 { margin: 0; max-width: 18em; font-size: clamp(24px, 3vw, 34px); line-height: 1.25; letter-spacing: -0.025em; }
+			.hero-summary { max-width: 62ch; margin: 12px 0 20px; color: var(--dim); font-size: 13.5px; line-height: 1.75; }
+			.stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
+			.api-stat { padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--card) 78%, transparent); }
+			.api-stat b { display: block; color: var(--ink); font: 650 21px/1.15 ui-monospace, Consolas, monospace; letter-spacing: -0.035em; }
+			.api-stat span { display: block; margin-top: 4px; color: var(--dim); font-size: 11px; }
+			.hero-code { min-width: 0; align-self: center; }
+			.hero-code .example { margin: 0; border-color: color-mix(in srgb, var(--accent) 18%, var(--line)); box-shadow: 0 14px 30px -24px rgba(22, 119, 255, 0.65); }
+			.hero-note { margin: 10px 2px 0; color: var(--dim); font-size: 11.5px; }
+			@media (max-width: 980px) {
+				.hero { grid-template-columns: 1fr; }
+				.topbar .tools { gap: 4px; }
+				.tools a:nth-of-type(2) { display: none; }
+			}
+			#content { padding-bottom: 20px; }
+			.api-group { margin: 0 0 30px; scroll-margin-top: 86px; }
+			.api-group > h2 {
+				top: 64px;
+				display: flex;
+				align-items: center;
+				gap: 9px;
+				margin: 0 0 12px;
+				padding: 11px 2px 10px;
+				border-bottom: 1px solid var(--line);
+				background: color-mix(in srgb, var(--bg) 92%, transparent);
+				backdrop-filter: blur(8px);
+				font-size: 17px;
+				letter-spacing: -0.01em;
+			}
+			.api-group > h2 b { margin-left: auto; padding: 2px 8px; border-radius: 999px; background: var(--card-2); font: 500 11px/1.6 ui-monospace, Consolas, monospace; }
+			.group-index { color: var(--accent); font: 600 11px/1 ui-monospace, Consolas, monospace; letter-spacing: 0.04em; }
+			.api-member {
+				margin: 0 0 12px;
+				padding: 16px 18px 17px;
+				border: 1px solid var(--line);
+				border-left: 1px solid var(--line);
+				border-radius: 11px;
+				background: var(--card);
+				box-shadow: 0 1px 1px rgba(16, 24, 40, 0.02);
+				scroll-margin-top: 86px;
+			}
+			.api-member:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: var(--shadow); }
+			.api-member.highlight { border-color: var(--highlight-line); background: var(--highlight-bg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--highlight-line) 14%, transparent); }
+			.api-member > header { align-items: center; gap: 10px; }
+			.member-id { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
+			.api-member h3 { font-size: 15px; line-height: 1.35; }
+			.api-member h3 code { font-weight: 600; letter-spacing: -0.02em; }
+			.api-member .badge { padding: 2px 7px; border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); font-size: 10.5px; line-height: 1.5; }
+			.api-member .badge.property { border-color: color-mix(in srgb, var(--ok) 24%, transparent); background: color-mix(in srgb, var(--ok) 10%, transparent); }
+			.api-member .copy-name { padding: 4px 8px; border-color: transparent; background: transparent; font-size: 11px; }
+			.api-member .copy-name:hover { border-color: var(--line); background: var(--card-2); color: var(--accent); }
+			.signature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0 10px; }
+			.signature-item { min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card-2); }
+			.signature-item span { display: block; margin-bottom: 2px; color: var(--dim); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; }
+			.signature-item code { display: block; overflow-wrap: anywhere; color: var(--ink); font-size: 11.5px; line-height: 1.55; }
+			.api-member .doc { max-width: 92ch; margin: 9px 0 12px; color: var(--dim); line-height: 1.8; }
+			.example { margin: 9px 0 0; border-color: var(--line); border-radius: 9px; background: var(--card); }
+			.example summary { list-style: none; cursor: pointer; user-select: none; }
+			.example summary::-webkit-details-marker { display: none; }
+			.example-head { min-height: 34px; padding: 5px 9px; background: var(--card-2); font-size: 11.5px; }
+			.example-head::before { content: '›'; width: 15px; color: var(--dim); font-size: 17px; line-height: 1; transform: rotate(0); transition: transform 0.15s; }
+			.example[open] > .example-head::before { transform: rotate(90deg); }
+			.example-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+			.example-actions { display: inline-flex; gap: 5px; margin-left: auto; }
+			.example-head button { margin: 0; padding: 3px 7px; border-color: transparent; background: transparent; font-size: 11px; }
+			.example-head button:hover { border-color: var(--line); background: var(--card); }
+			.example pre { padding: 13px 15px; background: var(--code-bg); }
+			.example code { font-size: 11.5px; line-height: 1.7; }
+			.option-table { overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: var(--card); }
+			.option-head, .api-option {
+				display: grid;
+				grid-template-columns: minmax(180px, 1.05fr) minmax(140px, 1fr) minmax(105px, 0.7fr) minmax(240px, 2.1fr);
+				gap: 12px;
+				align-items: start;
+			}
+			.option-head { padding: 9px 14px; border-bottom: 1px solid var(--line); background: var(--card-2); color: var(--dim); font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
+			.api-option { padding: 12px 14px; border-bottom: 1px solid var(--line); }
+			.api-option:last-child { border-bottom: 0; }
+			.api-option:hover { background: color-mix(in srgb, var(--accent) 3%, var(--card)); }
+			.api-option .name code { color: var(--accent-ink); font-weight: 600; }
+			.api-option .type { color: var(--ink); font: 11.5px/1.6 ui-monospace, Consolas, monospace; overflow-wrap: anywhere; }
+			.api-option .def { color: var(--dim); font: 11.5px/1.6 ui-monospace, Consolas, monospace; }
+			.api-option .doc { grid-column: auto; margin: 0; color: var(--dim); line-height: 1.7; }
+			.side-foot { margin-top: 12px; padding: 10px 7px 2px; border-top: 1px solid var(--line); color: var(--dim); font-size: 10.5px; line-height: 1.65; }
+			.side-foot kbd { padding: 1px 4px; border: 1px solid var(--line); border-radius: 4px; background: var(--card-2); font: inherit; }
+			@media (max-width: 1100px) {
+				.option-head, .api-option { grid-template-columns: minmax(160px, 1fr) minmax(140px, 1fr) minmax(220px, 1.8fr); }
+				.option-head span:nth-child(3), .api-option .def { display: none; }
+			}
+			@media (max-width: 900px) {
+				main { gap: 16px; padding-top: 16px; }
+				#side { position: static; max-height: none; }
+				#side-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 3px; }
+				.side-head { margin-bottom: 8px; }
+				#side .kinds { margin-bottom: 8px; }
+				.api-group > h2 { position: static; backdrop-filter: none; }
+			}
+			@media (max-width: 680px) {
+				.topbar { min-height: 0; flex-wrap: wrap; gap: 8px; padding: 9px 12px; }
+				.topbar .brand { width: 100%; }
+				.topbar .sub { display: none; }
+				.topbar .tools { width: 100%; flex-wrap: wrap; }
+				.search-box { flex: 1 1 100%; width: 100%; }
+				.tools a, .tools button { flex: 1 1 auto; text-align: center; }
+				.hero { padding: 20px 16px; border-radius: 13px; }
+				.hero h2 { font-size: 26px; }
+				.stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+				.api-member { padding: 14px; }
+				.signature-grid { grid-template-columns: 1fr; }
+				.option-head { display: none; }
+				.option-table { border: 0; background: transparent; overflow: visible; }
+				.api-option { grid-template-columns: 1fr; gap: 4px; margin-bottom: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--card); }
+				.api-option .def { display: block; }
+				.api-option .doc { margin-top: 3px; }
 			}
 		</style>
 	</head>
 	<body>
 		<header class="topbar">
 			<div class="brand">
-				<a class="back" href="../index.html#GisView.md">← 文档中心</a>
+				<a class="brand-logo" href="../index.html#GisView.md" aria-label="返回文档中心">G</a>
 				<div>
-					<h1>GisView API 速查</h1>
-					<p class="sub" id="summary"></p>
+					<h1>GisView API</h1>
+					<p class="sub">WebGL2 电网可视化组件 · 方法、配置与示例</p>
 				</div>
 			</div>
 			<div class="tools">
-				<input id="search" type="search" placeholder="搜方法 / 参数 / 说明 / options（Ctrl+K）" />
+				<label class="search-box">
+					<span class="search-icon" aria-hidden="true">⌕</span>
+					<input id="search" type="search" placeholder="搜索方法 / 参数 / 配置项（Ctrl+K）" />
+				</label>
+				<button id="theme-btn" type="button" title="跟随系统 / 浅色 / 深色 轮换（与文档中心共用选择）">主题：跟随系统</button>
 				<button id="clear" type="button">清空</button>
-				<a href="../playground/index.html">调试演示页 ↗</a>
-				<a href="../../index.html" target="_blank" rel="noreferrer">打开 Vue 演示页 ↗</a>
+				<a href="../playground/index.html">调试页 ↗</a>
+				<a href="../../index.html" target="_blank" rel="noreferrer">Vue 演示 ↗</a>
 			</div>
 		</header>
 		<main>
-			<nav id="side">
-				<h2>分组</h2>
-				<div id="side-list"></div>
-				<div class="kinds">
+			<nav id="side" aria-label="API 导航">
+				<div class="side-head">
+					<h2>目录</h2>
 					<span id="hits"></span>
+				</div>
+				<div class="kinds" aria-label="成员类型筛选">
 					<label><input type="checkbox" id="kind-method" checked /> 方法</label>
 					<label><input type="checkbox" id="kind-property" checked /> 属性</label>
 					<label><input type="checkbox" id="kind-option" checked /> options</label>
 				</div>
+				<div id="side-list"></div>
+				<div class="side-foot">按 <kbd>Ctrl</kbd> + <kbd>K</kbd> 聚焦搜索；<kbd>Esc</kbd> 清空查询。</div>
 			</nav>
 			<section id="content">
-				<article class="card" id="quickstart">
-					<h2>三十秒上手</h2>
-					<p class="sub">页面数据来自《GisView 手册》的 <code>docs/manual/16-实例方法总表.md</code> / <code>17-参数速查.md</code> / <code>18-逐方法示例.md</code>（由 <code>docs/steps/gen-api-index.mjs</code> 生成 <code>docs/demos/api-index.js</code>）：每个成员都带一段能直接粘进控制台 / <code>.vue</code> 里的写法 —— 点「复制代码」拿走，或点「在调试页跑 →」带着这段代码打开调试演示页当场运行。</p>
-					<div class="example">
-						<div class="example-head"><span>最小可跑</span><button type="button" data-copy-target="quickstart-code">复制代码</button><button type="button" class="try-code" data-code-target="quickstart-code" title="把这段代码带到调试演示页并打开">在调试页跑 →</button></div>
-						<pre><code id="quickstart-code"></code></pre>
+				<article class="hero" id="quickstart">
+					<div class="hero-copy">
+						<span class="eyebrow">API REFERENCE</span>
+						<h2>先看签名，再看参数，最后直接运行</h2>
+						<p class="hero-summary" id="summary"></p>
+						<div class="stat-grid" id="stats" aria-label="API 清单统计"></div>
+					</div>
+					<div class="hero-code">
+						<details class="example" open>
+							<summary class="example-head">
+								<span class="example-title">最小可跑</span>
+								<span class="example-actions">
+									<button type="button" data-copy-target="quickstart-code">复制代码</button>
+									<button type="button" class="try-code" data-code-target="quickstart-code" title="把这段代码带到调试演示页并打开">运行 →</button>
+								</span>
+							</summary>
+							<pre><code id="quickstart-code"></code></pre>
+						</details>
+						<p class="hero-note">数据与示例由 <code>docs/steps/gen-api-index.mjs</code> 从手册生成；每个成员都至少有这一段可直接粘走的代码。</p>
 					</div>
 				</article>
 				<div id="cards"></div>
@@ -223,7 +610,7 @@
 				"  zoomScaleAuto: true          // 自适应比例：包围盒变了节点与通道间距一起变（见下方选项）",
 				"})",
 				"",
-				"// 2. 改数据 / 改视角 / 读读数：都在左侧这 243 个成员里",
+				"// 2. 改数据 / 改视角 / 读读数：都在左侧这 " + API_SUMMARY.members + " 个成员里",
 				"view.updateLine('l1', { color: '#f00', width: 3 })",
 				"view.focusOn('b', { padding: 60, select: true })",
 				"const snapshot = view.snapshotScene()"
@@ -254,34 +641,88 @@
 			const state = { query: '', kinds: { method: true, property: true, option: true } }
 			const members = []
 			const optionNodes = []
+			const sideButtons = new Map()
 			const root = document.querySelector('#cards')
 			const sideList = document.querySelector('#side-list')
 			const hitsNode = document.querySelector('#hits')
+			/**
+			 * 主题与文档中心共用 `gisDocs.reading`：在任一页面切过深色，另一页下次打开也跟上。
+			 * 三档仍是「跟随系统 / 浅色 / 深色」，这里只读写 theme 字段，不碰字号与阅读宽度。
+			 */
+			const READING_KEY = 'gisDocs.reading'
+			const darkMedia = typeof matchMedia === 'function' ? matchMedia('(prefers-color-scheme: dark)') : null
+			let themeMode = 'auto'
+			try {
+				const saved = JSON.parse(localStorage.getItem(READING_KEY) ?? 'null')
+				if (saved?.theme === 'light' || saved?.theme === 'dark') {
+					themeMode = saved.theme
+				}
+			}
+			catch (error) { /* 存过的值坏了就当没存过 */ }
+			const themeButton = document.querySelector('#theme-btn')
+			const effectiveTheme = () => (themeMode === 'auto' ? (darkMedia?.matches ? 'dark' : 'light') : themeMode)
+			const applyTheme = () => {
+				document.documentElement.classList.toggle('theme-dark', effectiveTheme() === 'dark')
+				themeButton.textContent = `主题：${themeMode === 'auto' ? '跟随系统' : themeMode === 'dark' ? '深色' : '浅色'}`
+				themeButton.setAttribute('aria-label', `当前${themeMode === 'auto' ? '跟随系统' : themeMode === 'dark' ? '深色' : '浅色'}主题，点击切换`)
+			}
+			const setTheme = (theme) => {
+				themeMode = theme === 'light' || theme === 'dark' ? theme : 'auto'
+				try {
+					const saved = JSON.parse(localStorage.getItem(READING_KEY) ?? 'null') ?? {}
+					localStorage.setItem(READING_KEY, JSON.stringify({ ...saved, theme: themeMode }))
+				}
+				catch (error) { /* 隐私模式 / 禁用存储时忽略 */ }
+				applyTheme()
+				return themeMode
+			}
+			const cycleTheme = () => setTheme(themeMode === 'auto' ? 'light' : themeMode === 'light' ? 'dark' : 'auto')
+			applyTheme()
+			themeButton.addEventListener('click', cycleTheme)
+			darkMedia?.addEventListener?.('change', () => {
+				if (themeMode === 'auto') {
+					applyTheme()
+				}
+			})
 
 			document.querySelector('#summary').textContent =
-				`${API_SUMMARY.members} 个实例成员（${API_SUMMARY.methods} 个方法 / ${API_SUMMARY.properties} 个属性）· ${API_SUMMARY.options} 个 options · ${API_SUMMARY.sections} 个分组 · 每个成员都带示例`
+				`${API_SUMMARY.members} 个实例成员、${API_SUMMARY.options} 个配置项，按 ${API_SUMMARY.sections} 个主题分组。搜索、签名、参数与返回值、可直接运行的示例放在同一页。`
+
+			const exampleCount = API_SECTIONS.reduce((total, section) => total + section.items.reduce((sum, item) => sum + item.examples.length, 0), 0)
+			document.querySelector('#stats').innerHTML = [
+				['members', API_SUMMARY.members, '实例成员'],
+				['methods', API_SUMMARY.methods, '方法'],
+				['properties', API_SUMMARY.properties, '属性'],
+				['options', API_SUMMARY.options, '配置项'],
+				['sections', API_SUMMARY.sections, '主题分组'],
+				['examples', exampleCount, '可运行示例']
+			].map(([key, value, label]) => `<div class="api-stat" data-stat="${key}"><b>${Number(value).toLocaleString()}</b><span>${label}</span></div>`).join('')
 
 			const exampleHtml = (example, index) => `
-				<div class="example">
-					<div class="example-head">
-						<span>示例${index ? ` ${index + 1}` : ''} · 来自「${escapeHtml(example.group)}」${example.from === 'code' ? '（同一节里真实的调用）' : ''}</span>
-						<button type="button" class="copy-code">复制代码</button>
-						<button type="button" class="try-code" title="把这段代码带到调试演示页并打开">在调试页跑 →</button>
-					</div>
+				<details class="example"${index === 0 ? ' open' : ''}>
+					<summary class="example-head">
+						<span class="example-title">示例${index ? ` ${index + 1}` : ''} · ${escapeHtml(example.group)}${example.from === 'code' ? ' · 文档中的真实调用' : ''}</span>
+						<span class="example-actions">
+							<button type="button" class="copy-code">复制</button>
+							<button type="button" class="try-code" title="把这段代码带到调试演示页并打开">运行 →</button>
+						</span>
+					</summary>
 					<pre><code>${highlightCode(example.code)}</code></pre>
-				</div>`
+				</details>`
 
 			const memberHtml = (member) => `
 				<article class="api-member" id="${escapeHtml(member.name)}" data-name="${escapeHtml(member.name)}" data-kind="${member.kind}" data-examples="${member.examples.length}">
 					<header>
-						<h3><code>${escapeHtml(member.name)}</code></h3>
-						<span class="badge${member.kind === 'property' ? ' property' : ''}">${member.kind === 'property' ? '属性' : '方法'}</span>
+						<div class="member-id">
+							<span class="badge${member.kind === 'property' ? ' property' : ''}">${member.kind === 'property' ? '属性' : '方法'}</span>
+							<h3><code>${escapeHtml(member.name)}</code></h3>
+						</div>
 						<button type="button" class="copy-name" title="复制成员名">复制名字</button>
 					</header>
-					<dl>
-						<dt>参数</dt><dd>${escapeHtml(member.params || '无')}</dd>
-						<dt>返回</dt><dd>${escapeHtml(member.returns || '—')}</dd>
-					</dl>
+					<div class="signature-grid">
+						<div class="signature-item"><span>参数</span><code>${escapeHtml(member.params || '无')}</code></div>
+						<div class="signature-item"><span>返回</span><code>${escapeHtml(member.returns || '—')}</code></div>
+					</div>
 					<p class="doc">${escapeHtml(member.doc || '')}</p>
 					${member.examples.map(exampleHtml).join('\n')}
 				</article>`
@@ -292,15 +733,20 @@
 				group.className = 'api-group'
 				group.id = `group-${groupIndex}`
 				group.dataset.group = String(groupIndex)
-				group.innerHTML = `<h2>${escapeHtml(section.title)} <b>${section.items.length} 个</b></h2>` + section.items.map(memberHtml).join('\n')
+				const groupNumber = String(groupIndex + 1).padStart(2, '0')
+				group.innerHTML = `<h2><span class="group-index">${groupNumber}</span><span>${escapeHtml(section.title)}</span><b>${section.items.length} 个</b></h2>` + section.items.map(memberHtml).join('\n')
 				root.appendChild(group)
 				const side = document.createElement('button')
 				side.type = 'button'
 				side.className = 'side-item'
 				side.dataset.group = String(groupIndex)
 				side.innerHTML = `<span>${escapeHtml(section.title)}</span><b>${section.items.length}</b>`
-				side.addEventListener('click', () => group.scrollIntoView({ behavior: 'smooth', block: 'start' }))
+				side.addEventListener('click', () => {
+					setActiveGroup(String(groupIndex))
+					group.scrollIntoView({ behavior: 'smooth', block: 'start' })
+				})
 				sideList.appendChild(side)
+				sideButtons.set(String(groupIndex), side)
 				for (const node of group.querySelectorAll('.api-member')) {
 					members.push({ node, section: section.title })
 				}
@@ -310,7 +756,7 @@
 			const optionsGroup = document.createElement('section')
 			optionsGroup.className = 'api-group'
 			optionsGroup.id = 'options'
-			optionsGroup.innerHTML = `<h2>options <b>${API_OPTIONS.length} 个</b></h2><div id="option-list"></div>`
+			optionsGroup.innerHTML = `<h2><span class="group-index">${String(groupIndex + 1).padStart(2, '0')}</span><span>options</span><b>${API_OPTIONS.length} 个</b></h2><div class="option-table"><div class="option-head" role="row"><span>字段</span><span>类型</span><span>默认值</span><span>说明</span></div><div id="option-list"></div></div>`
 			root.appendChild(optionsGroup)
 			const optionList = optionsGroup.querySelector('#option-list')
 			for (const option of API_OPTIONS) {
@@ -326,8 +772,40 @@
 			sideOption.type = 'button'
 			sideOption.className = 'side-item'
 			sideOption.innerHTML = `<span>options</span><b>${API_OPTIONS.length}</b>`
-			sideOption.addEventListener('click', () => optionsGroup.scrollIntoView({ behavior: 'smooth', block: 'start' }))
+			sideOption.addEventListener('click', () => {
+				setActiveGroup('options')
+				optionsGroup.scrollIntoView({ behavior: 'smooth', block: 'start' })
+			})
 			sideList.appendChild(sideOption)
+			sideButtons.set('options', sideOption)
+
+			/** 左侧分组跟着当前读到的位置亮：点分组时先亮，滚动时由 IntersectionObserver 接上 */
+			const setActiveGroup = (key) => {
+				for (const [id, button] of sideButtons) {
+					const on = id === key
+					button.classList.toggle('on', on)
+					if (on) {
+						button.setAttribute('aria-current', 'location')
+					}
+					else {
+						button.removeAttribute('aria-current')
+					}
+				}
+			}
+			setActiveGroup('0')
+			if (typeof IntersectionObserver === 'function') {
+				const groupObserver = new IntersectionObserver((entries) => {
+					const visible = entries
+						.filter(entry => entry.isIntersecting)
+						.sort((left, right) => Math.abs(left.boundingClientRect.top - 82) - Math.abs(right.boundingClientRect.top - 82))[0]
+					if (visible) {
+						setActiveGroup(visible.target.id === 'options' ? 'options' : visible.target.dataset.group)
+					}
+				}, { rootMargin: '-82px 0px -58% 0px', threshold: [0, 0.05, 0.25] })
+				for (const group of root.querySelectorAll('.api-group')) {
+					groupObserver.observe(group)
+				}
+			}
 
 			const haystack = node => (node.textContent || '').toLowerCase()
 			const applyFilter = () => {
@@ -407,6 +885,10 @@
 				if (!button) {
 					return
 				}
+				// 示例头里的按钮在 <summary> 内：不拦默认动作会顺带把代码块折起来
+				if (button.closest('.example-head')) {
+					event.preventDefault()
+				}
 				const card = button.closest('.api-member')
 				if (button.classList.contains('copy-name') && card) {
 					copy(card.dataset.name, button)
@@ -463,6 +945,10 @@
 				state,
 				setQuery,
 				select: selectMember,
+				theme: () => themeMode,
+				setTheme,
+				cycleTheme,
+				activeGroup: () => [...sideButtons].find(([_key, button]) => button.classList.contains('on'))?.[0] ?? null,
 				memberNames: () => members.map(entry => entry.node.dataset.name),
 				optionNames: () => optionNodes.map(node => node.dataset.name)
 			}