feat: 优化移动端样式

This commit is contained in:
Baobhan Sith
2025-05-10 13:45:36 +08:00
parent 0031c2f717
commit d828de3ef8
@@ -301,7 +301,7 @@ const handleQuickCommandExecute = (command: string) => {
<template> <template>
<div :class="$attrs.class" class="flex items-center py-1.5 bg-background"> <!-- Bind $attrs.class, removed px-2 and gap-1 --> <div :class="$attrs.class" class="flex items-center py-1.5 bg-background"> <!-- Bind $attrs.class, removed px-2 and gap-1 -->
<div class="flex-grow flex items-center bg-transparent relative gap-1 px-2"> <!-- Added px-2 here --> <div class="flex-grow flex items-center bg-transparent relative gap-1 px-2 w-full"> <!-- Added px-2 here, ensure full width -->
<!-- Clear Terminal Button --> <!-- Clear Terminal Button -->
<button <button
@click="emitWorkspaceEvent('terminal:clear')" @click="emitWorkspaceEvent('terminal:clear')"
@@ -337,8 +337,8 @@ const handleQuickCommandExecute = (command: string) => {
class="flex-grow min-w-0 px-4 py-1.5 border border-border/50 rounded-lg bg-input text-foreground text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all duration-300 ease-in-out" class="flex-grow min-w-0 px-4 py-1.5 border border-border/50 rounded-lg bg-input text-foreground text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all duration-300 ease-in-out"
:class="{ :class="{
'basis-3/4': !props.isMobile && isSearching, // Desktop searching: 3/4 width 'basis-3/4': !props.isMobile && isSearching, // Desktop searching: 3/4 width
'basis-full': !props.isMobile && !isSearching // Desktop non-searching: full width 'basis-full': !props.isMobile && !isSearching, // Desktop non-searching: full width
// Mobile non-searching: No basis class, rely on flex-grow 'w-0': props.isMobile // Mobile non-searching: adjust width to fit
}" }"
ref="commandInputRef" ref="commandInputRef"
data-focus-id="commandInput" data-focus-id="commandInput"
@@ -353,7 +353,7 @@ const handleQuickCommandExecute = (command: string) => {
v-model="searchTerm" v-model="searchTerm"
:placeholder="t('commandInputBar.searchPlaceholder')" :placeholder="t('commandInputBar.searchPlaceholder')"
class="flex-grow min-w-0 px-4 py-1.5 border border-border/50 rounded-lg bg-input text-foreground text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all duration-300 ease-in-out" class="flex-grow min-w-0 px-4 py-1.5 border border-border/50 rounded-lg bg-input text-foreground text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all duration-300 ease-in-out"
:class="{ 'basis-1/4': !props.isMobile }" :class="{ 'basis-1/4': !props.isMobile, 'w-0': props.isMobile }"
data-focus-id="terminalSearch" data-focus-id="terminalSearch"
@keydown.enter.prevent="findNext" @keydown.enter.prevent="findNext"
@keydown.shift.enter.prevent="findPrevious" @keydown.shift.enter.prevent="findPrevious"