github/dbx
4
0 Fork 0
mirror of https://github.com/t8y2/dbx.git synced 2026-11-15 14:52:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: 兼容intel Mac旧版系统webview中样式问题

Browse Source 
Co-authored-by: tangheng <tangheng@tanghengdeMacBook-Pro.local>
This commit is contained in:
zipgandtangheng authored and GitHub committed 2026-07-11 21:53:29 +08:00
1 parent 361f7774e9
commit 8ff0f13bd4
14 files changed
+1354 -134
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/desktop/src/components/editor/EditorSettingsDialog.vue
+143 -23
View File
@@ -455,7 +455,7 @@ function observeElementTruncation(el: Ref<HTMLElement | null>, truncated: Ref<bo
if (!el.value) return;
const observer = new ResizeObserver(() => {
truncated.value = el.value!.scrollWidth > el.value!.clientWidth;
truncated.value = checkElementTruncation(el.value);
});
observer.observe(el.value);
@@ -1260,7 +1260,10 @@ function hasSettingsApplyFooter(value: SettingsCategory): boolean {
}
function settingsCategoryButton(value: SettingsCategory): string {
return ["w-auto shrink-0 whitespace-nowrap rounded-md px-3 py-2 text-left text-sm transition-colors lg:w-full", value === activeSettingsTab.value ? "bg-primary text-primary-foreground shadow-sm" : "text-muted-foreground hover:bg-muted hover:text-foreground"].join(" ");
return [
"settings-category-button w-auto shrink-0 whitespace-nowrap rounded-md px-3 py-2 text-left text-sm transition-colors lg:w-full",
value === activeSettingsTab.value ? "settings-category-button--active bg-primary text-primary-foreground shadow-sm" : "text-muted-foreground hover:bg-muted hover:text-foreground",
].join(" ");
}
function openExternalUrl(url: string) {
@@ -2587,8 +2590,8 @@ onUnmounted(cleanupPreviewEditor);
</component>
</DialogHeader>
<div class="flex min-h-0 flex-1 flex-col gap-3 overflow-hidden lg:flex-row">
<nav class="settingsCategoryNav flex min-h-0 shrink-0 gap-1 overflow-x-auto border-b pb-3 lg:w-40 lg:flex-col lg:overflow-x-hidden lg:overflow-y-auto lg:border-b-0 lg:border-r lg:pb-0 lg:pr-3">
<div class="settings-layout flex min-h-0 flex-1 flex-col gap-3 overflow-hidden lg:flex-row">
<nav class="settingsCategoryNav settings-category-nav flex min-h-0 shrink-0 gap-1 overflow-x-auto border-b pb-3 lg:w-40 lg:flex-col lg:overflow-x-hidden lg:overflow-y-auto lg:border-b-0 lg:border-r lg:pb-0 lg:pr-3">
<button v-for="category in settingsCategoryNav" :key="category.value" type="button" :class="settingsCategoryButton(category.value)" @click="activeSettingsTab = category.value">
{{ category.label }}
</button>
@@ -2892,9 +2895,9 @@ onUnmounted(cleanupPreviewEditor);
<SqlFormatterSettingsPanel v-model="editSqlFormatter" @validity-change="(value: boolean) => (sqlFormatterConfigValid = value)" />
</section>
<section v-else-if="activeSettingsTab === 'appearance'" class="flex flex-col gap-5 py-2">
<div class="grid gap-x-1.5 gap-y-4 sm:grid-cols-[minmax(0,127fr)_minmax(0,127fr)_minmax(0,191fr)_minmax(0,130fr)]">
<div class="space-y-2 min-w-0">
<section v-else-if="activeSettingsTab === 'appearance'" class="settings-appearance-section flex flex-col gap-5 py-2">
<div class="settings-appearance-top-grid">
<div class="settings-appearance-field min-w-0">
<div class="flex h-9 items-end">
<Label class="whitespace-normal leading-tight">{{ t("settings.languageTitle") }}</Label>
</div>
@@ -2922,7 +2925,7 @@ onUnmounted(cleanupPreviewEditor);
</Select>
</div>
<div class="space-y-2 min-w-0">
<div class="settings-appearance-field min-w-0">
<div class="flex h-9 items-end">
<Label class="whitespace-normal leading-tight">{{ t("settings.colorTheme") }}</Label>
</div>
@@ -2946,7 +2949,7 @@ onUnmounted(cleanupPreviewEditor);
</Select>
</div>
<div class="space-y-2 min-w-0">
<div class="settings-appearance-field min-w-0">
<div class="flex h-9 items-end gap-1">
<Label class="min-w-0 whitespace-normal leading-tight">{{ t("settings.uiFontFamily") }}</Label>
<HelpTooltip :label="t('settings.uiFontFamily')" trigger-class="[&_svg]:h-3 [&_svg]:w-3" content-class="max-w-64">
@@ -2985,7 +2988,7 @@ onUnmounted(cleanupPreviewEditor);
</SearchableSelect>
</div>
<div class="space-y-2 min-w-0">
<div class="settings-appearance-field min-w-0">
<div class="flex h-9 items-end gap-1">
<Label class="min-w-0 whitespace-normal leading-tight">{{ t("settings.uiScale") }}</Label>
<HelpTooltip :label="t('settings.uiScale')" trigger-class="[&_svg]:h-3 [&_svg]:w-3" content-class="max-w-64">
@@ -3011,17 +3014,17 @@ onUnmounted(cleanupPreviewEditor);
</div>
</div>
<div class="space-y-2">
<div class="settings-appearance-group">
<Label>{{ t("settings.theme") }}</Label>
<div class="flex flex-wrap gap-2">
<div class="settings-appearance-button-row flex flex-wrap gap-2">
<Button
v-for="option in appThemeModeOptions"
:key="option.value"
type="button"
variant="outline"
size="sm"
class="h-8 gap-1.5 rounded-[6px] px-3"
:class="themeMode === option.value ? 'border-primary/40 bg-primary/10 text-primary ring-1 ring-primary/30' : 'text-foreground'"
class="settings-choice-button h-8 gap-1.5 rounded-[6px] px-3"
:class="themeMode === option.value ? 'settings-choice-button--selected border-primary/40 bg-primary/10 text-primary ring-1 ring-primary/30' : 'text-foreground'"
@click="setThemeMode(option.value)"
>
<component :is="option.icon" class="h-3.5 w-3.5" />
@@ -3032,10 +3035,10 @@ onUnmounted(cleanupPreviewEditor);
<Separator />
<div class="space-y-2">
<div class="settings-appearance-group">
<Label>{{ t("settings.appLayout") }}</Label>
<div class="grid grid-cols-2 gap-2">
<Button type="button" variant="outline" class="h-auto justify-start border p-3" :class="editAppLayout === 'separated' ? 'border-blue-300 ring-2 ring-blue-300/50' : ''" @click="setAppLayout('separated')">
<div class="settings-appearance-choice-grid">
<Button type="button" variant="outline" class="settings-choice-card h-auto justify-start border p-3" :class="editAppLayout === 'separated' ? 'settings-choice-card--selected border-blue-300 ring-2 ring-blue-300/50' : ''" @click="setAppLayout('separated')">
<TooltipProvider>
<Tooltip>
<TooltipTrigger as-child>
@@ -3050,7 +3053,7 @@ onUnmounted(cleanupPreviewEditor);
</Tooltip>
</TooltipProvider>
</Button>
<Button type="button" variant="outline" class="h-auto justify-start border p-3" :class="editAppLayout === 'classic' ? 'border-blue-300 ring-2 ring-blue-300/50' : ''" @click="setAppLayout('classic')">
<Button type="button" variant="outline" class="settings-choice-card h-auto justify-start border p-3" :class="editAppLayout === 'classic' ? 'settings-choice-card--selected border-blue-300 ring-2 ring-blue-300/50' : ''" @click="setAppLayout('classic')">
<TooltipProvider>
<Tooltip>
<TooltipTrigger as-child>
@@ -3069,10 +3072,10 @@ onUnmounted(cleanupPreviewEditor);
</div>
<!-- <div v-if="!isWeb" class="space-y-2"> -->
<div class="space-y-2">
<div class="settings-appearance-group">
<Label>{{ t("settings.iconTheme") }}</Label>
<div class="grid grid-cols-2 gap-2">
<Button type="button" variant="outline" class="h-auto justify-start border p-3" :class="editIconTheme === 'default' ? 'border-blue-300 ring-2 ring-blue-300/50' : ''" @click="setIconTheme('default')">
<div class="settings-appearance-choice-grid">
<Button type="button" variant="outline" class="settings-choice-card h-auto justify-start border p-3" :class="editIconTheme === 'default' ? 'settings-choice-card--selected border-blue-300 ring-2 ring-blue-300/50' : ''" @click="setIconTheme('default')">
<div class="flex items-center gap-3 text-left w-full min-w-0">
<img src="/icon-preview-default.png" alt="DBX" class="h-12 w-12 shrink-0" />
<TooltipProvider>
@@ -3090,7 +3093,7 @@ onUnmounted(cleanupPreviewEditor);
</TooltipProvider>
</div>
</Button>
<Button type="button" variant="outline" class="h-auto justify-start border p-3" :class="editIconTheme === 'black' ? 'border-blue-300 ring-2 ring-blue-300/50' : ''" @click="setIconTheme('black')">
<Button type="button" variant="outline" class="settings-choice-card h-auto justify-start border p-3" :class="editIconTheme === 'black' ? 'settings-choice-card--selected border-blue-300 ring-2 ring-blue-300/50' : ''" @click="setIconTheme('black')">
<div class="flex items-center gap-3 text-left w-full min-w-0">
<img src="/icon-preview-black.png" alt="DBX" class="h-12 w-12 shrink-0" />
<TooltipProvider>
@@ -3162,7 +3165,7 @@ onUnmounted(cleanupPreviewEditor);
<Separator />
<div class="space-y-3">
<div class="settings-appearance-group settings-option-stack">
<Label>{{ t("settings.dataGridDisplay") }}</Label>
<div class="flex items-center justify-between gap-4 rounded-md border bg-muted/20 px-3 py-2">
<div class="space-y-1">
@@ -4725,3 +4728,120 @@ onUnmounted(cleanupPreviewEditor);
</Dialog>
</component>
</template>
<style>
@media (min-width: 1024px) {
.settings-layout {
flex-direction: row !important;
}
.settings-category-nav {
width: 10rem !important;
flex-direction: column !important;
overflow-x: hidden !important;
overflow-y: auto !important;
border-bottom-width: 0 !important;
border-right: 1px solid var(--border) !important;
padding-bottom: 0 !important;
padding-right: 0.75rem !important;
}
.settings-category-button {
width: 100% !important;
text-align: left !important;
}
}
.settings-category-button--active {
background-color: rgb(23, 23, 23) !important;
color: rgb(255, 255, 255) !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
.settings-choice-button {
color: rgb(23, 23, 23);
}
.settings-choice-button--selected {
border-color: rgb(96, 165, 250) !important;
background-color: rgba(59, 130, 246, 0.1) !important;
color: rgb(29, 78, 216) !important;
box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.45) !important;
}
.settings-choice-button--selected svg {
color: currentColor !important;
}
.settings-choice-card--selected {
border-color: rgb(96, 165, 250) !important;
background-color: rgba(59, 130, 246, 0.04) !important;
color: rgb(23, 23, 23) !important;
box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.45) !important;
}
.settings-appearance-section > * + * {
margin-top: 1.25rem;
}
.settings-appearance-top-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
column-gap: 0.75rem;
row-gap: 1rem;
}
.settings-appearance-field > * + * {
margin-top: 0.5rem;
}
.settings-appearance-group > * + * {
margin-top: 0.625rem;
}
.settings-appearance-button-row {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.settings-appearance-choice-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.625rem;
}
.settings-option-stack > * + * {
margin-top: 0.625rem;
}
@media (max-width: 760px) {
.settings-appearance-top-grid,
.settings-appearance-choice-grid {
grid-template-columns: 1fr;
}
}
.dark .settings-category-button--active {
background-color: rgb(245, 245, 245) !important;
color: rgb(23, 23, 23) !important;
}
.dark .settings-choice-button {
color: rgb(245, 245, 245);
}
.dark .settings-choice-button--selected {
border-color: rgb(147, 197, 253) !important;
background-color: rgba(96, 165, 250, 0.18) !important;
color: rgb(191, 219, 254) !important;
box-shadow: 0 0 0 1px rgba(147, 197, 253, 0.5) !important;
}
.dark .settings-choice-card--selected {
border-color: rgb(147, 197, 253) !important;
background-color: rgba(96, 165, 250, 0.12) !important;
color: rgb(245, 245, 245) !important;
box-shadow: 0 0 0 2px rgba(147, 197, 253, 0.45) !important;
}
</style>