优化布局

frontend-vue/src/pages/image-video/ImageVideoPage.vue

@@ -387,7 +387,10 @@ async function launchDesktop() {
 }
 
 .delivery-page {
-  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
   background: #0f0f0f;
 }
 
@@ -399,7 +402,9 @@ async function launchDesktop() {
 }
 
 .delivery-page__body {
-  min-height: calc(100vh - 64px);
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: auto;
   padding: 12px 20px 24px;
   background: #0f0f0f;
 }

frontend-vue/src/shared/components/ZiniaoVersionSetting.vue

@@ -1,13 +1,12 @@
 <template>
   <section class="ziniao-version-setting">
     <div class="setting-title">紫鸟版本</div>
-    <div class="version-options" role="radiogroup" aria-label="紫鸟版本">
-      <label v-for="option in options" :key="option.value" class="version-option"
-        :class="{ active: modelValue === option.value }">
-        <input :checked="modelValue === option.value" type="radio" :name="radioName" :value="option.value"
-          @change="emit('update:modelValue', option.value)" />
+    <div class="version-options" role="group" aria-label="紫鸟版本">
+      <button v-for="option in options" :key="option.value" type="button" class="version-option"
+        :class="{ active: modelValue === option.value }" :aria-pressed="modelValue === option.value"
+        @mousedown.prevent @click="emit('update:modelValue', option.value)">
         <span>{{ option.label }}</span>
-      </label>
+      </button>
     </div>
   </section>
 </template>
@@ -17,7 +16,6 @@ import type { ZiniaoVersion } from '@/shared/utils/ziniao-version'
 
 defineProps<{ modelValue: ZiniaoVersion }>()
 const emit = defineEmits<{ 'update:modelValue': [value: ZiniaoVersion] }>()
-const radioName = `ziniao-version-${Math.random().toString(36).slice(2)}`
 const options: Array<{ label: string; value: ZiniaoVersion }> = [
   { label: '新版', value: 'new' },
   { label: '旧版', value: 'old' },
@@ -28,8 +26,7 @@ const options: Array<{ label: string; value: ZiniaoVersion }> = [
 .ziniao-version-setting { margin: 16px 0; }
 .setting-title { margin-bottom: 10px; color: #bbb; font-size: 13px; }
 .version-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; min-height: 40px; padding: 3px; border: 1px solid #3a3a3a; border-radius: 6px; background: #202020; }
-.version-option { display: flex; min-width: 0; align-items: center; justify-content: center; border-radius: 4px; color: #aaa; cursor: pointer; font-size: 13px; transition: background-color .15s ease, color .15s ease; }
+.version-option { display: flex; min-width: 0; align-items: center; justify-content: center; border: 0; border-radius: 4px; background: transparent; color: #aaa; cursor: pointer; font-size: 13px; transition: background-color .15s ease, color .15s ease; }
 .version-option:hover { color: #eee; }
 .version-option.active { background: #409eff; color: #fff; }
-.version-option input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
 </style>

frontend-vue/src/styles/main.css

@@ -2,7 +2,7 @@
 @import './reset.css';
 
 body {
-  background: var(--color-bg-light);
+  background: #1a1a1a;
   font-family: var(--font-family-base);
 }
 
@@ -39,35 +39,29 @@ html {
 
 .page-shell {
   min-height: 100vh;
-  min-height: 100dvh;
 }
 
-/*
- * The desktop client uses a resizable WebView. Brand modules have a dynamic
- * navigation header, so their content must consume the remaining space
- * instead of subtracting the old fixed 56px header height.
- */
+/* Match the desktop client shell in web_source/brand.html. */
 @media (min-width: 1101px) {
-  html:has(.module-page),
-  body:has(.module-page) {
-    height: 100%;
+  body {
+    display: flex;
+    flex-direction: column;
     overflow: hidden;
-    background: #1a1a1a;
   }
 
-  #app:has(> .module-page) {
-    height: 100vh;
-    height: 100dvh;
+  #app {
+    flex: 1 1 auto;
+    min-height: 0;
+  }
+
+  #app > .page-shell {
+    height: 100%;
     min-height: 0;
-    overflow: hidden;
-    background: #1a1a1a;
   }
 
   .module-page {
     display: flex;
     flex-direction: column;
-    height: 100vh;
-    height: 100dvh;
     min-height: 0 !important;
     overflow: hidden;
   }
@@ -78,8 +72,8 @@ html {
 
   .module-page > .main-content {
     flex: 1 1 auto;
-    height: auto !important;
     min-height: 0 !important;
+    height: auto !important;
     overflow: hidden;
   }
 
@@ -96,15 +90,6 @@ html {
   }
 }
 
-@media (max-width: 1100px) {
-  body:has(.module-page),
-  #app:has(> .module-page) {
-    min-height: 100vh;
-    min-height: 100dvh;
-    background: #1a1a1a;
-  }
-}
-
 .theme-light {
   background: var(--color-bg-light);
   color: var(--color-text-primary);

frontend-vue/src/styles/reset.css

@@ -6,7 +6,8 @@ html,
 body,
 #app {
   margin: 0;
-  min-height: 100%;
+  height: 100%;
+  min-height: 0;
 }
 
 body {