Skip to content

feat(settings): ui optimize #999

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
zerob13 merged 5 commits into from
Oct 14, 2025
Merged

feat(settings): ui optimize #999

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
2a21f8a
feat(settings): ui optimize
Oct 14, 2025
650113f
fix: lint error
Oct 14, 2025
715f9c0
fix: merge with dev
Oct 14, 2025
900cdee
fix(settings): missing end div
Oct 14, 2025
b436b30
fix(settings): minor fix, remove depulicate items
Oct 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion resources/model-db/providers.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39874,4 +39874,4 @@
]
}
}
}
}
21 changes: 8 additions & 13 deletions src/renderer/settings/components/BuiltinKnowledgeSettings.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
<template>
<div class="border rounded-lg overflow-hidden">
<div class="flex items-center p-4 bg-muted">
<div
class="flex items-center p-4 hover:bg-accent cursor-default"
@click="toggleBuiltinConfigPanel"
>
Comment on lines +3 to +6
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot Oct 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Fix cursor and add accessibility attributes to clickable header.

The header div has cursor-default but is clickable. Add proper cursor style and accessibility attributes.

Apply this diff:

     <div
-      class="flex items-center p-4 hover:bg-accent cursor-default"
+      class="flex items-center p-4 hover:bg-accent cursor-pointer"
+      role="button"
+      tabindex="0"
       @click="toggleBuiltinConfigPanel"
+      @keydown.enter="toggleBuiltinConfigPanel"
+      @keydown.space.prevent="toggleBuiltinConfigPanel"
     >
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<div
class="flex items-center p-4 hover:bg-accent cursor-default"
@click="toggleBuiltinConfigPanel"
>
<div
class="flex items-center p-4 hover:bg-accent cursor-pointer"
role="button"
tabindex="0"
@click="toggleBuiltinConfigPanel"
@keydown.enter="toggleBuiltinConfigPanel"
@keydown.space.prevent="toggleBuiltinConfigPanel"
>
🤖 Prompt for AI Agents 
In src/renderer/settings/components/BuiltinKnowledgeSettings.vue around lines 3
to 6, the header div is clickable but uses cursor-default and lacks
accessibility attributes; change the cursor to cursor-pointer, add
role="button", tabindex="0", and aria-expanded (bound to the panel open state)
and aria-controls (pointing to the panel ID), and wire a keyboard handler
(keydown for Enter/Space) that invokes the same toggleBuiltinConfigPanel method
so keyboard users can activate the header.

<div class="flex-1">
<div class="flex items-center">
<Icon icon="lucide:book-open" class="h-5 mr-2 text-primary" />
Expand Down Expand Up @@ -28,18 +31,10 @@
</TooltipContent>
</Tooltip>
</TooltipProvider>
<Button
variant="outline"
size="sm"
class="flex items-center gap-1"
@click="toggleBuiltinConfigPanel"
>
<Icon
:icon="isBuiltinConfigPanelOpen ? 'lucide:chevron-up' : 'lucide:chevron-down'"
class="w-4 h-4"
/>
{{ isBuiltinConfigPanelOpen ? t('common.collapse') : t('common.expand') }}
</Button>
<Icon
:icon="isBuiltinConfigPanelOpen ? 'lucide:chevron-up' : 'lucide:chevron-down'"
class="w-4 h-4"
/>
</div>
</div>
<Collapsible v-model:open="isBuiltinConfigPanelOpen">
Expand Down
126 changes: 44 additions & 82 deletions src/renderer/settings/components/CommonSettings.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<template>
<ScrollArea class="w-full h-full p-4">
<div class="w-full h-full flex flex-col gap-3">
<ScrollArea class="w-full h-full">
<div class="w-full h-full flex flex-col gap-3 p-4">
<!-- 搜索引擎选择 -->
<div class="flex items-center gap-3 px-2 h-10">
<div class="flex items-center gap-3 h-10">
<span
class="flex items-center gap-2 text-sm font-medium shrink-0 min-w-[220px]"
:dir="langStore.dir"
Expand Down Expand Up @@ -59,7 +59,7 @@
</div>

<!-- 网页内容长度限制 -->
<div class="flex flex-row items-center gap-2 px-2 h-10">
<div class="flex flex-row items-center gap-2 h-10">
<span class="flex flex-row items-center gap-2 grow w-full" :dir="langStore.dir">
<Icon icon="lucide:globe" class="w-4 h-4 text-muted-foreground" />
<span class="text-sm font-medium">{{ t('settings.common.webContentLengthLimit') }}</span>
Expand Down Expand Up @@ -114,7 +114,7 @@
</div>

<!-- 搜索助手模型选择 -->
<div class="flex items-center gap-3 px-2 h-10">
<div class="flex items-center gap-3 h-10">
<span
class="flex items-center gap-2 text-sm font-medium shrink-0 min-w-[220px]"
:dir="langStore.dir"
Expand Down Expand Up @@ -152,7 +152,7 @@
</div>
</div>
<!-- 代理模式选择 -->
<div class="flex items-center gap-3 px-2 h-10">
<div class="flex items-center gap-3 h-10">
<span
class="flex items-center gap-2 text-sm font-medium shrink-0 min-w-[220px]"
:dir="langStore.dir"
Expand All @@ -173,7 +173,7 @@
</Select>
</div>
</div>
<div v-if="selectedProxyMode === 'custom'" class="flex flex-col gap-2 px-2 h-10">
<div v-if="selectedProxyMode === 'custom'" class="flex flex-col gap-2 h-10">
<div class="flex items-center gap-3">
<span
class="flex items-center gap-2 text-sm font-medium shrink-0 min-w-[220px]"
Expand All @@ -197,7 +197,7 @@
</div>
</div>
<!-- 搜索预览开关 -->
<div class="flex items-center gap-3 px-2 h-10">
<div class="flex items-center gap-3 h-10">
<span
class="flex items-center gap-2 text-sm font-medium shrink-0 min-w-[220px]"
:dir="langStore.dir"
Expand All @@ -215,7 +215,7 @@
</div>

<!-- 日志开关 -->
<div class="flex items-center gap-3 px-2 h-10">
<div class="flex items-center gap-3 h-10">
<span
class="flex items-center gap-2 text-sm font-medium shrink-0 min-w-[220px]"
:dir="langStore.dir"
Expand All @@ -233,7 +233,7 @@
</div>

<!-- 音效开关 -->
<div class="flex items-center gap-3 px-2 h-10">
<div class="flex items-center gap-3 h-10">
<span
class="flex items-center gap-2 text-sm font-medium shrink-0 min-w-[220px]"
:dir="langStore.dir"
Expand All @@ -251,7 +251,7 @@
</div>

<!-- 复制全部（含COT）开关 -->
<div class="flex items-center gap-3 px-2 h-10">
<div class="flex items-center gap-3 h-10">
<span
class="flex items-center gap-2 text-sm font-medium shrink-0 min-w-[220px]"
:dir="langStore.dir"
Expand All @@ -267,67 +267,40 @@
/>
</div>
</div>
<!-- 日志开关确认对话框 -->
<Dialog :open="isLoggingDialogOpen" @update:open="cancelLoggingChange">
<DialogContent>
<DialogHeader>
<DialogTitle>{{ t('settings.common.loggingDialogTitle') }}</DialogTitle>
<DialogDescription>
<div class="space-y-2">
<p>
{{
newLoggingValue
? t('settings.common.loggingEnableDesc')
: t('settings.common.loggingDisableDesc')
}}
</p>
<p>{{ t('settings.common.loggingRestartNotice') }}</p>
</div>
</DialogDescription>
</DialogHeader>
<DialogFooter>
<Button variant="outline" @click="cancelLoggingChange">{{ t('common.cancel') }}</Button>
<Button @click="confirmLoggingChange">{{ t('common.confirm') }}</Button>
</DialogFooter>
</DialogContent>
</Dialog>
<div
class="p-2 h-10 flex flex-row items-center gap-2 hover:bg-accent rounded-lg cursor-pointer"
@click="openLogFolder"
:dir="langStore.dir"
>
<Icon icon="lucide:external-link" class="w-4 h-4 text-muted-foreground" />
<span class="text-sm font-medium">{{ t('settings.common.openLogFolder') }}</span>
</div>

<!-- 重置数据 -->
<Dialog v-model:open="isDialogOpen">
<DialogTrigger as-child>
<div
class="p-2 h-10 flex flex-row items-center gap-2 hover:bg-accent rounded-lg cursor-pointer"
:dir="langStore.dir"
>
<Icon icon="lucide:trash" class="w-4 h-4 text-muted-foreground" />
<span class="text-sm font-medium">{{ t('settings.common.resetData') }}</span>
</div>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>{{ t('common.resetDataConfirmTitle') }}</DialogTitle>
<DialogDescription>
{{ t('common.resetDataConfirmDescription') }}
</DialogDescription>
</DialogHeader>
<DialogFooter>
<Button variant="outline" @click="closeDialog">
{{ t('dialog.cancel') }}
</Button>
<Button variant="destructive" @click="handleResetData">
{{ t('dialog.confirm') }}
<div class="flex flex-row gap-3">
<!-- 日志开关确认对话框 -->
<Dialog v-model:open="isLoggingDialogOpen" @update:open="cancelLoggingChange">
<DialogTrigger as-child>
<Button class="w-36" variant="outline" :dir="langStore.dir" @click="openLogFolder">
<Icon icon="lucide:external-link" class="w-4 h-4 text-muted-foreground" />
<span class="text-sm font-medium">{{ t('settings.common.openLogFolder') }}</span>
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>{{ t('settings.common.loggingDialogTitle') }}</DialogTitle>
<DialogDescription>
<div class="space-y-2">
<p>
{{
newLoggingValue
? t('settings.common.loggingEnableDesc')
: t('settings.common.loggingDisableDesc')
}}
</p>
<p>{{ t('settings.common.loggingRestartNotice') }}</p>
</div>
</DialogDescription>
</DialogHeader>
<DialogFooter>
<Button variant="outline" @click="cancelLoggingChange">{{
t('common.cancel')
}}</Button>
<Button @click="confirmLoggingChange">{{ t('common.confirm') }}</Button>
</DialogFooter>
</DialogContent>
</Dialog>
Comment on lines +272 to +302
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot Oct 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

DialogTrigger wraps the wrong button.

The DialogTrigger (line 273) wraps the "Open Log Folder" button (lines 274-277), but the Dialog content (lines 279-301) contains the logging enable/disable confirmation. This means clicking "Open Log Folder" would show the logging confirmation dialog instead of opening the folder.

The logging confirmation dialog should be triggered by the logging Switch (lines 227-232) via the handleLoggingChange handler, not by the log folder button. The log folder button should directly call openLogFolder without being wrapped in a DialogTrigger.

Apply this diff to fix the structure:

-      <div class="flex flex-row gap-3">
-        <!-- 日志开关确认对话框 -->
-        <Dialog v-model:open="isLoggingDialogOpen" @update:open="cancelLoggingChange">
-          <DialogTrigger as-child>
-            <Button class="w-36" variant="outline" :dir="langStore.dir" @click="openLogFolder">
-              <Icon icon="lucide:external-link" class="w-4 h-4 text-muted-foreground" />
-              <span class="text-sm font-medium">{{ t('settings.common.openLogFolder') }}</span>
-            </Button>
-          </DialogTrigger>
-          <DialogContent>
-            <DialogHeader>
-              <DialogTitle>{{ t('settings.common.loggingDialogTitle') }}</DialogTitle>
-              <DialogDescription>
-                <div class="space-y-2">
-                  <p>
-                    {{
-                      newLoggingValue
-                        ? t('settings.common.loggingEnableDesc')
-                        : t('settings.common.loggingDisableDesc')
-                    }}
-                  </p>
-                  <p>{{ t('settings.common.loggingRestartNotice') }}</p>
-                </div>
-              </DialogDescription>
-            </DialogHeader>
-            <DialogFooter>
-              <Button variant="outline" @click="cancelLoggingChange">{{
-                t('common.cancel')
-              }}</Button>
-              <Button @click="confirmLoggingChange">{{ t('common.confirm') }}</Button>
-            </DialogFooter>
-          </DialogContent>
-        </Dialog>
-      </div>
+      <div class="flex flex-row gap-3">
+        <Button class="w-36" variant="outline" :dir="langStore.dir" @click="openLogFolder">
+          <Icon icon="lucide:external-link" class="w-4 h-4 text-muted-foreground" />
+          <span class="text-sm font-medium">{{ t('settings.common.openLogFolder') }}</span>
+        </Button>
+      </div>
+
+      <!-- 日志开关确认对话框 -->
+      <Dialog v-model:open="isLoggingDialogOpen" @update:open="cancelLoggingChange">
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>{{ t('settings.common.loggingDialogTitle') }}</DialogTitle>
+            <DialogDescription>
+              <div class="space-y-2">
+                <p>
+                  {{
+                    newLoggingValue
+                      ? t('settings.common.loggingEnableDesc')
+                      : t('settings.common.loggingDisableDesc')
+                  }}
+                </p>
+                <p>{{ t('settings.common.loggingRestartNotice') }}</p>
+              </div>
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button variant="outline" @click="cancelLoggingChange">{{
+              t('common.cancel')
+            }}</Button>
+            <Button @click="confirmLoggingChange">{{ t('common.confirm') }}</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<Dialog v-model:open="isLoggingDialogOpen" @update:open="cancelLoggingChange">
<DialogTrigger as-child>
<Button class="w-36" variant="outline" :dir="langStore.dir" @click="openLogFolder">
<Icon icon="lucide:external-link" class="w-4 h-4 text-muted-foreground" />
<span class="text-sm font-medium">{{ t('settings.common.openLogFolder') }}</span>
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>{{ t('settings.common.loggingDialogTitle') }}</DialogTitle>
<DialogDescription>
<div class="space-y-2">
<p>
{{
newLoggingValue
? t('settings.common.loggingEnableDesc')
: t('settings.common.loggingDisableDesc')
}}
</p>
<p>{{ t('settings.common.loggingRestartNotice') }}</p>
</div>
</DialogDescription>
</DialogHeader>
<DialogFooter>
<Button variant="outline" @click="cancelLoggingChange">{{
t('common.cancel')
}}</Button>
<Button @click="confirmLoggingChange">{{ t('common.confirm') }}</Button>
</DialogFooter>
</DialogContent>
</Dialog>
<div class="flex flex-row gap-3">
<Button class="w-36" variant="outline" :dir="langStore.dir" @click="openLogFolder">
<Icon icon="lucide:external-link" class="w-4 h-4 text-muted-foreground" />
<span class="text-sm font-medium">{{ t('settings.common.openLogFolder') }}</span>
</Button>
</div>
<!-- 日志开关确认对话框 -->
<Dialog v-model:open="isLoggingDialogOpen" @update:open="cancelLoggingChange">
<DialogContent>
<DialogHeader>
<DialogTitle>{{ t('settings.common.loggingDialogTitle') }}</DialogTitle>
<DialogDescription>
<div class="space-y-2">
<p>
{{
newLoggingValue
? t('settings.common.loggingEnableDesc')
: t('settings.common.loggingDisableDesc')
}}
</p>
<p>{{ t('settings.common.loggingRestartNotice') }}</p>
</div>
</DialogDescription>
</DialogHeader>
<DialogFooter>
<Button variant="outline" @click="cancelLoggingChange">{{
t('common.cancel')
}}</Button>
<Button @click="confirmLoggingChange">{{ t('common.confirm') }}</Button>
</DialogFooter>
</DialogContent>
</Dialog>

</div>
</div>
</ScrollArea>

Expand Down Expand Up @@ -463,7 +436,6 @@ import { useSoundStore } from '@/stores/sound'
import { useLanguageStore } from '@/stores/language'
import { ModelType } from '@shared/model'

const devicePresenter = usePresenter('devicePresenter')
const configPresenter = usePresenter('configPresenter')
const settingsStore = useSettingsStore()
const soundStore = useSoundStore()
Expand Down Expand Up @@ -636,18 +608,8 @@ watch(
}
)

const isDialogOpen = ref(false)
const modelSelectOpen = ref(false)

const closeDialog = () => {
isDialogOpen.value = false
}

const handleResetData = () => {
devicePresenter.resetData()
closeDialog()
}

const handleSearchModelSelect = (model: RENDERER_MODEL_META, providerId: string) => {
console.log('update search model', model, providerId)
settingsStore.setSearchAssistantModel(model, providerId)
Expand Down
Loading