feat: adjust layout

This commit is contained in:
Li Xin 2025-04-24 15:57:37 +08:00
parent a2a7867b0e
commit 7d143f085c
2 changed files with 13 additions and 4 deletions

View File

@ -93,7 +93,7 @@ export function SettingsDialog() {
</Button> </Button>
</DialogTrigger> </DialogTrigger>
</Tooltip> </Tooltip>
<DialogContent className="sm:max-w-[800px]"> <DialogContent className="sm:max-w-[850px]">
<DialogHeader> <DialogHeader>
<DialogTitle>DeerFlow Settings</DialogTitle> <DialogTitle>DeerFlow Settings</DialogTitle>
<DialogDescription> <DialogDescription>
@ -101,8 +101,8 @@ export function SettingsDialog() {
</DialogDescription> </DialogDescription>
</DialogHeader> </DialogHeader>
<Tabs value={activeTabId}> <Tabs value={activeTabId}>
<div className="flex h-100 w-full overflow-auto border-y"> <div className="flex h-120 w-full overflow-auto border-y">
<ul className="flex w-60 shrink-0 border-r p-1"> <ul className="flex w-50 shrink-0 border-r p-1">
<div className="size-full"> <div className="size-full">
{SETTINGS_TABS.map((tab) => ( {SETTINGS_TABS.map((tab) => (
<li <li

View File

@ -9,6 +9,7 @@ import { Tooltip } from "~/app/_components/tooltip";
import { Button } from "~/components/ui/button"; import { Button } from "~/components/ui/button";
import { Switch } from "~/components/ui/switch"; import { Switch } from "~/components/ui/switch";
import type { MCPServerMetadata } from "~/core/mcp"; import type { MCPServerMetadata } from "~/core/mcp";
import { cn } from "~/lib/utils";
import { AddMCPServerDialog } from "../dialogs/add-mcp-server-dialog"; import { AddMCPServerDialog } from "../dialogs/add-mcp-server-dialog";
@ -93,7 +94,10 @@ export const MCPTab: Tab = ({ settings, onChange }) => {
server.createdAt > Date.now() - 1000 * 60 * 60 * 1; server.createdAt > Date.now() - 1000 * 60 * 60 * 1;
return ( return (
<motion.li <motion.li
className="!bg-card group relative overflow-hidden rounded-lg border shadow" className={cn(
"!bg-card group relative overflow-hidden rounded-lg border pb-2 shadow transition-opacity duration-300",
!server.enabled && "opacity-60",
)}
key={server.name} key={server.name}
{...(isNew && newlyAdded && animationProps)} {...(isNew && newlyAdded && animationProps)}
> >
@ -124,6 +128,11 @@ export const MCPTab: Tab = ({ settings, onChange }) => {
<div className="flex flex-col items-start px-4 py-2"> <div className="flex flex-col items-start px-4 py-2">
<div className="mb-2 flex items-center gap-2"> <div className="mb-2 flex items-center gap-2">
<div className="text-lg font-medium">{server.name}</div> <div className="text-lg font-medium">{server.name}</div>
{!server.enabled && (
<div className="bg-primary text-primary-foreground h-fit rounded px-1.5 py-0.5 text-xs">
Disabled
</div>
)}
<div className="bg-primary text-primary-foreground h-fit rounded px-1.5 py-0.5 text-xs"> <div className="bg-primary text-primary-foreground h-fit rounded px-1.5 py-0.5 text-xs">
{server.transport} {server.transport}
</div> </div>