give the pages the CYBER shell they were missing

The token swap made every control dark, but the pages themselves kept
their Arco defaults — bare `padding: 20px` with components laid straight
on the background. That is why the running app still read as "not the
prototype" no matter how many variables were replaced: the prototype's
page structure (panel / panel-h / panel-b / kv / tabs) was never built.

Rather than restate that shell in each of the 25 views, it now lives in
global.scss as .cy-view / .cy-panel / .cy-panel-h / .cy-panel-b /
.cy-kv / .cy-tabs / .cy-tab / .cy-stack / .cy-sec-t, and the settings
components share a global .settings-section + .section-title so all nine
panes pick up the mono section headers at once. The per-component
duplicates of those two rules were deleted.

Settings is converted as the reference case: Arco's a-tabs/a-tab-pane
became the underline tab strip, and the pane body sits in a panel. The
URL-query sync moved to a watcher on activeTab so pane order and deep
links still hold. Pane order is a contract, so it is asserted.

Two tests lock the shell in place — one for the global classes and the
cyan underline selected state, one for the settings structure and pane
order. Without them the next edit easily slides back to bare Arco.

This commit is contained in:

toor

2026-10-19 15:23:01 +08:00

parent 3debe903f7

commit 993b6b968c

18 changed files with 346 additions and 95 deletions

									
										packages/client/src/components/hermes/settings/DisplaySettings.vue
									
		-4
	
												View File
												
				@@ -128,10 +128,6 @@ async function testCompletionNotification() {

				<style scoped lang="scss">

				@use '@/styles/variables' as *;

				.settings-section {

				  margin-top: 16px;

				}

				.notify-controls {

				  display: inline-flex;

				  align-items: center;