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 { 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 theme = "light"
@@ -10,7 +10,9 @@ const Toaster = ({ ...props }: ToasterProps) => {
return (
<Sonner
theme={theme as ToasterProps["theme"]}
className="toaster group"
className="toaster group toast-close-tr"
closeButton
closeButtonAriaLabel="关闭通知"
icons={{
success: (
<CircleCheckIcon className="size-4" />
@@ -27,6 +29,7 @@ const Toaster = ({ ...props }: ToasterProps) => {
loading: (
<Loader2Icon className="size-4 animate-spin" />
),
close: <XIcon className="size-3.5" aria-hidden />,
}}
style={
{

6
index.html
View File

@@ -3,6 +3,12 @@
<head>
<meta charset="UTF-8" />
<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>
</head>
<body>

4
src/App.tsx
View File

@@ -18,7 +18,9 @@ import {
} from 'lucide-react';
import yaml from 'js-yaml';
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 { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';

22
src/index.css
View File

@@ -1,7 +1,6 @@
@import "tailwindcss";
@import "tw-animate-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 *));
@@ -115,4 +114,25 @@
html {
@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%);
}