wx44wx/dify-batch-tester
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve toasts and font loading

Browse Source 
Made-with: Cursor
This commit is contained in:
Xin Wang
2026-04-18 13:29:39 +08:00
parent 433688ad9f
commit 721b186051
4 changed files with 35 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
components/ui/sonner.tsx
View File

@@ -2,7 +2,7 @@
import * as React from "react" import * as React from "react"
import { Toaster as Sonner, type ToasterProps } from "sonner" import { Toaster as Sonner, type ToasterProps } from "sonner"
import { CircleCheckIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon, Loader2Icon } from "lucide-react" import { CircleCheckIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon, Loader2Icon, XIcon } from "lucide-react"
const Toaster = ({ ...props }: ToasterProps) => { const Toaster = ({ ...props }: ToasterProps) => {
const theme = "light" const theme = "light"
@@ -10,7 +10,9 @@ const Toaster = ({ ...props }: ToasterProps) => {
return ( return (
<Sonner <Sonner
theme={theme as ToasterProps["theme"]} theme={theme as ToasterProps["theme"]}
className="toaster group" className="toaster group toast-close-tr"
closeButton
closeButtonAriaLabel="关闭通知"
icons={{ icons={{
success: ( success: (
<CircleCheckIcon className="size-4" /> <CircleCheckIcon className="size-4" />
@@ -27,6 +29,7 @@ const Toaster = ({ ...props }: ToasterProps) => {
loading: ( loading: (
<Loader2Icon className="size-4 animate-spin" /> <Loader2Icon className="size-4 animate-spin" />
), ),
close: <XIcon className="size-3.5" aria-hidden />,
}} }}
style={ style={
{ {

6
index.html
View File

@@ -3,6 +3,12 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap"
rel="stylesheet"
/>
<title>Dify Batch Tester</title> <title>Dify Batch Tester</title>
</head> </head>
<body> <body>

4
src/App.tsx
View File

@@ -18,7 +18,9 @@ import {
} from 'lucide-react'; } from 'lucide-react';
import yaml from 'js-yaml'; import yaml from 'js-yaml';
import * as XLSX from 'xlsx'; import * as XLSX from 'xlsx';
import { toast, Toaster } from 'sonner'; import { toast } from 'sonner';
import { Toaster } from '@/components/ui/sonner';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'; import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';

22
src/index.css
View File

@@ -1,7 +1,6 @@
@import "tailwindcss"; @import "tailwindcss";
@import "tw-animate-css"; @import "tw-animate-css";
@import "shadcn/tailwind.css"; @import "shadcn/tailwind.css";
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
@custom-variant dark (&:is(.dark *)); @custom-variant dark (&:is(.dark *));
@@ -115,4 +114,25 @@
html { html {
@apply font-sans; @apply font-sans;
} }
}
/* Sonner: pin close control to top-right (LTR); red hover feedback */
[data-sonner-toaster].toast-close-tr[dir='ltr'] {
--toast-close-button-start: unset;
--toast-close-button-end: 0;
--toast-close-button-transform: translate(35%, -35%);
}
[data-sonner-toaster].toast-close-tr [data-sonner-toast][data-styled='true'] [data-close-button] {
transition:
opacity 100ms,
background 200ms,
border-color 200ms,
color 200ms;
}
[data-sonner-toaster].toast-close-tr [data-sonner-toast][data-styled='true'] [data-close-button]:hover:not([data-disabled='true']) {
background: hsl(0 93% 97%);
border-color: hsl(0 72% 51%);
color: hsl(0 72% 38%);
} }