Fix panel viewport sizing on mobile

This commit is contained in:
jxxghp
2026-06-29 19:54:06 +08:00
parent d3b3b08318
commit 0aa7d37e45
2 changed files with 19 additions and 2 deletions
+7 -1
View File
@@ -2362,7 +2362,7 @@ onScopeDispose(() => {
.agent-assistant-shell { .agent-assistant-shell {
position: relative; position: relative;
display: grid; display: grid;
block-size: 100%; block-size: 100vh;
grid-template-rows: auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);
min-block-size: 0; min-block-size: 0;
@@ -2372,6 +2372,12 @@ onScopeDispose(() => {
--agent-assistant-panel-blur: 10px; --agent-assistant-panel-blur: 10px;
} }
@supports (block-size: 100dvh) {
.agent-assistant-shell {
block-size: 100dvh;
}
}
.agent-assistant-header { .agent-assistant-header {
display: flex; display: flex;
align-items: center; align-items: center;
+12 -1
View File
@@ -56,6 +56,7 @@ function clearThemeCustomizerOpenState() {
syncThemeCustomizerOpenState(false) syncThemeCustomizerOpenState(false)
} }
// 处理固定面板的全局 Esc 关闭快捷键。
function handleGlobalKeydown(event: KeyboardEvent) { function handleGlobalKeydown(event: KeyboardEvent) {
// 固定侧栏不再依赖 Vuetify overlay,手动补上常见的 Esc 关闭行为。 // 固定侧栏不再依赖 Vuetify overlay,手动补上常见的 Esc 关闭行为。
if (event.key === 'Escape') emit('close') if (event.key === 'Escape') emit('close')
@@ -146,16 +147,19 @@ const showSemiDarkMenuOption = computed(() => {
) )
}) })
// 打开原生颜色选择器。
function openColorPicker() { function openColorPicker() {
customColorInput.value?.click() customColorInput.value?.click()
} }
// 处理原生颜色选择器的自定义主色输入。
function handleCustomColorInput(event: Event) { function handleCustomColorInput(event: Event) {
const color = (event.target as HTMLInputElement).value const color = (event.target as HTMLInputElement).value
setPrimaryColor(color) setPrimaryColor(color)
} }
// 切换布局类型,App 模式下保留移动端固定布局。
function handleLayoutChange(layout: ThemeCustomizerLayout) { function handleLayoutChange(layout: ThemeCustomizerLayout) {
// App 模式固定使用移动端导航,避免切换桌面布局后破坏底部导航体验。 // App 模式固定使用移动端导航,避免切换桌面布局后破坏底部导航体验。
if (appMode.value) return if (appMode.value) return
@@ -176,6 +180,7 @@ function handleShadowSliderChange(value: unknown) {
if (themeCustomizerShadowLevels.includes(shadow)) setShadow(shadow) if (themeCustomizerShadowLevels.includes(shadow)) setShadow(shadow)
} }
// 重置主题定制设置,App 模式只恢复可调整的外观项。
async function handleResetSettings() { async function handleResetSettings() {
if (!appMode.value) { if (!appMode.value) {
await resetSettings() await resetSettings()
@@ -438,11 +443,17 @@ async function handleResetSettings() {
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
block-size: 100%; block-size: 100vh;
inline-size: 100%; inline-size: 100%;
min-block-size: 0; min-block-size: 0;
} }
@supports (block-size: 100dvh) {
.theme-customizer-panel {
block-size: 100dvh;
}
}
.theme-customizer-panel--dialog { .theme-customizer-panel--dialog {
overflow: hidden; overflow: hidden;
block-size: 100%; block-size: 100%;