|
22 | 22 |
|
23 | 23 | <svelte:head><title>{view.ui.brand} {view.ui.title}</title></svelte:head> |
24 | 24 |
|
25 | | -<div class="ce-shell" data-theme={theme.dark ? 'dark' : 'light'}> |
26 | | - <a class="ce-skip" href="#ce-editor" onclick={(event) => { event.preventDefault(); workbench.skipToEditor(); }}>跳转到配置表单</a> |
| 25 | +<div class="shell" data-theme={theme.current}> |
| 26 | + <a class="skip-link" href="#ce-editor" onclick={(event) => { event.preventDefault(); workbench.skipToEditor(); }}>跳转到配置表单</a> |
27 | 27 | <AppHeader {theme} /> |
28 | 28 | <main id="config-editor" data-ready="true"> |
29 | | - <div class="ce-heading"> |
30 | | - <div><p class="ce-eyebrow">{view.ui.eyebrow}</p><h1>{view.ui.title}</h1><p class="ce-intro">{view.ui.description}</p></div> |
31 | | - <p class="ce-privacy"><span class="ce-dot"></span>本地处理<span>不保存输入 · 不上传凭据</span></p> |
| 29 | + <div class="page-heading"> |
| 30 | + <div><p class="page-heading__eyebrow">{view.ui.eyebrow}</p><h1>{view.ui.title}</h1><p class="page-heading__intro">{view.ui.description}</p></div> |
| 31 | + <p class="privacy-note"><span class="privacy-note__dot"></span>本地处理<span>不保存输入 · 不上传凭据</span></p> |
32 | 32 | </div> |
33 | 33 | {#if view.mode} |
34 | 34 | {@const mode = view.mode} |
35 | | - <div class="ce-modes" role="group" aria-label={mode.label}> |
| 35 | + <div class="schema-modes" role="group" aria-label={mode.label}> |
36 | 36 | {#each mode.options as [value, label] (value)} |
37 | 37 | <button type="button" data-mode={value} aria-pressed={mode.value === value} |
38 | 38 | onclick={() => session.dispatch({ type: 'set', field: mode.key, value })}>{label}</button> |
39 | 39 | {/each} |
40 | 40 | </div> |
41 | 41 | {/if} |
42 | | - <div class="ce-pane-switch" role="group" aria-label="工作区视图"> |
| 42 | + <div class="pane-switch" role="group" aria-label="工作区视图"> |
43 | 43 | <button type="button" aria-pressed={workbench.pane === 'editor'} onclick={() => workbench.switchPane('editor')}>编辑配置</button> |
44 | 44 | <button type="button" aria-pressed={workbench.pane === 'preview'} onclick={() => workbench.switchPane('preview')}>预览与导出{view.valid ? '' : ` · ${session.errors.length}`}</button> |
45 | 45 | </div> |
46 | | - <div class="ce-workspace" data-pane={workbench.pane}> |
| 46 | + <div class="workspace" data-pane={workbench.pane}> |
47 | 47 | <SectionNav /> |
48 | | - <form id="ce-editor" class="ce-form" autocomplete="off" onsubmit={(event) => event.preventDefault()}> |
49 | | - <div class="ce-region-heading"><h2>选择配置</h2><span>修改后实时更新预览</span></div> |
| 48 | + <form id="ce-editor" class="editor-form" autocomplete="off" onsubmit={(event) => event.preventDefault()}> |
| 49 | + <div class="region-heading"><h2>选择配置</h2><span>修改后实时更新预览</span></div> |
50 | 50 | {#key session.schema} |
51 | 51 | <FieldSearch /> |
52 | 52 | {#each view.sections as section, index (section.name)} |
|
56 | 56 | </form> |
57 | 57 | <PreviewPanel /> |
58 | 58 | </div> |
59 | | - <div class="ce-status" class:ce-status-visible={!!session.status} role="status" aria-live="polite">{session.status}</div> |
| 59 | + <div class={`status-bar${session.status ? ' status-bar--visible' : ''}`} role="status" aria-live="polite">{session.status}</div> |
60 | 60 | <footer><span>{view.ui.brand} 配置工具</span><span>本地生成，按需导出。</span></footer> |
61 | 61 | </main> |
62 | 62 | </div> |
| 63 | + |
| 64 | +<style> |
| 65 | + .shell { |
| 66 | + min-height: 100vh; |
| 67 | + color: var(--color-text); |
| 68 | + background: |
| 69 | + radial-gradient(1100px 520px at 82% -12%, color-mix(in srgb, var(--color-accent) 12%, transparent), transparent 70%), |
| 70 | + var(--color-bg); |
| 71 | + font-size: 14px; |
| 72 | + line-height: 1.6; |
| 73 | + } |
| 74 | + .skip-link { |
| 75 | + position: fixed; |
| 76 | + top: -100px; |
| 77 | + left: 16px; |
| 78 | + z-index: 50; |
| 79 | + padding: 12px 16px; |
| 80 | + border: 1px solid var(--color-border); |
| 81 | + border-radius: var(--radius-sm); |
| 82 | + background: var(--color-surface); |
| 83 | + color: var(--color-text); |
| 84 | + box-shadow: var(--shadow-pop); |
| 85 | + } |
| 86 | + .skip-link:focus { top: 10px; } |
| 87 | + #config-editor { |
| 88 | + max-width: 1616px; |
| 89 | + padding: 26px 28px 22px; |
| 90 | + margin: auto; |
| 91 | + } |
| 92 | + .page-heading { |
| 93 | + display: flex; |
| 94 | + align-items: center; |
| 95 | + justify-content: space-between; |
| 96 | + gap: 24px; |
| 97 | + margin-bottom: 22px; |
| 98 | + } |
| 99 | + .page-heading > div { max-width: 800px; } |
| 100 | + .page-heading__eyebrow { |
| 101 | + color: var(--color-accent); |
| 102 | + font-size: 11px; |
| 103 | + font-weight: 700; |
| 104 | + letter-spacing: .12em; |
| 105 | + text-transform: uppercase; |
| 106 | + margin: 0 0 8px; |
| 107 | + } |
| 108 | + .page-heading h1 { |
| 109 | + font-size: clamp(22px, 2.2vw, 30px); |
| 110 | + letter-spacing: -.03em; |
| 111 | + line-height: 1.25; |
| 112 | + margin: 0 0 12px; |
| 113 | + } |
| 114 | + .page-heading__intro { color: var(--color-text-muted); margin: 0; font-size: 13px; } |
| 115 | + .privacy-note { |
| 116 | + flex: none; |
| 117 | + display: grid; |
| 118 | + grid-template-columns: 9px auto; |
| 119 | + align-items: center; |
| 120 | + gap: 4px 8px; |
| 121 | + padding: 10px 14px; |
| 122 | + border: 1px solid var(--color-border); |
| 123 | + border-radius: 999px; |
| 124 | + background: var(--color-surface); |
| 125 | + font-size: 12px; |
| 126 | + color: var(--color-success); |
| 127 | + } |
| 128 | + .privacy-note > span:last-child { grid-column: 2; font-size: 11px; color: var(--color-text-muted); } |
| 129 | + .privacy-note__dot { |
| 130 | + width: 8px; |
| 131 | + height: 8px; |
| 132 | + border-radius: 50%; |
| 133 | + background: var(--color-success); |
| 134 | + box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-success) 18%, transparent); |
| 135 | + } |
| 136 | + .schema-modes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; } |
| 137 | + .schema-modes button { font-size: 12px; padding-inline: 16px; } |
| 138 | + .pane-switch { display: none; } |
| 139 | + .workspace { |
| 140 | + display: grid; |
| 141 | + grid-template-columns: 188px minmax(0, 1fr) minmax(0, .78fr); |
| 142 | + gap: 20px; |
| 143 | + align-items: start; |
| 144 | + } |
| 145 | + .editor-form { min-width: 0; scroll-margin-top: 24px; } |
| 146 | + .region-heading { |
| 147 | + display: flex; |
| 148 | + justify-content: space-between; |
| 149 | + align-items: center; |
| 150 | + margin: 0 0 16px; |
| 151 | + gap: 12px; |
| 152 | + } |
| 153 | + .region-heading h2 { margin: 0; font-size: 14px; } |
| 154 | + .region-heading > span { color: var(--color-text-muted); font-size: 11px; } |
| 155 | + .status-bar { |
| 156 | + position: fixed; |
| 157 | + bottom: 24px; |
| 158 | + left: 50%; |
| 159 | + transform: translateX(-50%); |
| 160 | + z-index: 30; |
| 161 | + max-width: calc(100vw - 32px); |
| 162 | + font-size: 12px; |
| 163 | + } |
| 164 | + .status-bar--visible { |
| 165 | + padding: 12px 18px; |
| 166 | + border: 1px solid var(--color-border-strong); |
| 167 | + border-radius: 999px; |
| 168 | + background: var(--color-text); |
| 169 | + color: var(--color-surface); |
| 170 | + box-shadow: var(--shadow-float); |
| 171 | + } |
| 172 | + footer { |
| 173 | + display: flex; |
| 174 | + justify-content: space-between; |
| 175 | + gap: 12px; |
| 176 | + margin-top: 32px; |
| 177 | + padding-top: 18px; |
| 178 | + border-top: 1px solid var(--color-border); |
| 179 | + color: var(--color-text-muted); |
| 180 | + font-size: 11px; |
| 181 | + } |
| 182 | + @media (max-width: 1279px) { |
| 183 | + .workspace { grid-template-columns: minmax(0, 1fr) minmax(0, .78fr); } |
| 184 | + .page-heading { align-items: flex-start; } |
| 185 | + } |
| 186 | + @media (max-width: 959px) { |
| 187 | + .workspace { grid-template-columns: minmax(0, 1fr); gap: 16px; } |
| 188 | + .page-heading { display: block; } |
| 189 | + .privacy-note { display: flex; flex-wrap: wrap; margin: 12px 0 0; width: fit-content; } |
| 190 | + .pane-switch { |
| 191 | + position: sticky; |
| 192 | + top: 0; |
| 193 | + z-index: 15; |
| 194 | + display: flex; |
| 195 | + gap: 8px; |
| 196 | + padding: 10px 0; |
| 197 | + margin-bottom: 16px; |
| 198 | + background: var(--color-bg); |
| 199 | + } |
| 200 | + .pane-switch button { flex: 1; } |
| 201 | + .pane-switch button[aria-pressed="true"] { background: var(--color-accent); color: var(--color-on-accent); border-color: var(--color-accent); } |
| 202 | + [data-pane="editor"] > :global(.preview), |
| 203 | + [data-pane="preview"] > .editor-form, |
| 204 | + [data-pane="preview"] > :global(.section-nav) { display: none; } |
| 205 | + } |
| 206 | + @media (max-width: 480px) { |
| 207 | + #config-editor { padding: 18px 16px; } |
| 208 | + .page-heading { margin-bottom: 12px; } |
| 209 | + .region-heading { flex-wrap: wrap; } |
| 210 | + } |
| 211 | + .pane-switch button { transition: none; } |
| 212 | +</style> |
0 commit comments