style(ui): improve window dragging and provider card styles

This commit is contained in:
YoVinchen
2025-11-21 11:44:33 +08:00
parent f1b0fa2985
commit 988ea326d9
3 changed files with 18 additions and 15 deletions

View File

@@ -10,7 +10,8 @@
"opener:default", "opener:default",
"updater:default", "updater:default",
"core:window:allow-set-skip-taskbar", "core:window:allow-set-skip-taskbar",
"core:window:allow-start-dragging",
"process:allow-restart", "process:allow-restart",
"dialog:default" "dialog:default"
] ]
} }

View File

@@ -346,9 +346,13 @@ function App() {
<div className="h-4 w-full" aria-hidden data-tauri-drag-region /> <div className="h-4 w-full" aria-hidden data-tauri-drag-region />
<div <div
className="flex flex-wrap items-center justify-between gap-2" className="flex flex-wrap items-center justify-between gap-2"
style={{ WebkitAppRegion: "no-drag" } as any} data-tauri-drag-region
style={{ WebkitAppRegion: "drag" } as any}
> >
<div className="flex items-center gap-1"> <div
className="flex items-center gap-1"
style={{ WebkitAppRegion: "no-drag" } as any}
>
{currentView !== "providers" ? ( {currentView !== "providers" ? (
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Button <Button
@@ -393,7 +397,10 @@ function App() {
)} )}
</div> </div>
<div className="flex items-center gap-2"> <div
className="flex items-center gap-2"
style={{ WebkitAppRegion: "no-drag" } as any}
>
{currentView === "prompts" && ( {currentView === "prompts" && (
<Button <Button
size="icon" size="icon"
@@ -499,9 +506,8 @@ function App() {
</header> </header>
<main <main
className={`flex-1 overflow-y-auto pb-12 px-6 animate-fade-in scroll-overlay ${ className={`flex-1 overflow-y-auto pb-12 px-6 animate-fade-in scroll-overlay ${currentView === "providers" ? "pt-24" : "pt-20"
currentView === "providers" ? "pt-24" : "pt-20" }`}
}`}
style={{ overflowX: "hidden" }} style={{ overflowX: "hidden" }}
> >
{renderContent()} {renderContent()}
@@ -544,8 +550,8 @@ function App() {
message={ message={
confirmDelete confirmDelete
? t("confirm.deleteProviderMessage", { ? t("confirm.deleteProviderMessage", {
name: confirmDelete.name, name: confirmDelete.name,
}) })
: "" : ""
} }
onConfirm={() => void handleConfirmDelete()} onConfirm={() => void handleConfirmDelete()}

View File

@@ -114,18 +114,14 @@ export function ProviderCard({
<div <div
className={cn( className={cn(
"glass-card relative overflow-hidden rounded-xl p-4 transition-all duration-300", "glass-card relative overflow-hidden rounded-xl p-4 transition-all duration-300",
"group hover:border-primary/50", "group hover:bg-black/[0.02] dark:hover:bg-white/[0.02] hover:border-primary/50",
isCurrent isCurrent
? "border-primary/50 shadow-[0_0_20px_rgba(59,130,246,0.15)]" ? "border-primary/50 bg-primary/5 shadow-[0_0_20px_rgba(59,130,246,0.15)]"
: "hover:scale-[1.01]", : "hover:scale-[1.01]",
dragHandleProps?.isDragging && dragHandleProps?.isDragging &&
"cursor-grabbing border-primary shadow-lg scale-105 z-10", "cursor-grabbing border-primary shadow-lg scale-105 z-10",
)} )}
> >
{/* 选中状态的浅色背景叠加层 */}
{isCurrent && (
<div className="absolute inset-0 bg-primary/[0.02] pointer-events-none" />
)}
<div className="absolute inset-0 bg-gradient-to-r from-primary/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none" /> <div className="absolute inset-0 bg-gradient-to-r from-primary/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none" />
<div className="relative flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between"> <div className="relative flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
<div className="flex flex-1 items-center gap-3"> <div className="flex flex-1 items-center gap-3">