tcjlj/flvx
1
0
Fork 0
mirror of https://github.com/Sagit-chu/flvx.git synced 2026-09-29 16:06:36 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(user): improve tunnel selector contrast in dark mode (#336)

Browse Source
This commit is contained in:
sagit
2026-03-18 12:10:32 +08:00
committed by GitHub
parent 9b98194a0a
commit ea21a7deef
2 changed files with 9 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
vite-frontend/src/pages/user.tsx
+5 -5
View File
@@ -1428,7 +1428,7 @@ export default function UserPage() {
{/* 顶部触发框 */} {/* 顶部触发框 */}
<div <div
className={`group flex items-center justify-between px-4 py-3 rounded-xl border-2 transition-all cursor-pointer shadow-sm w-[320px] ${isTunnelListExpanded ? "border-primary bg-white ring-2 ring-primary/10" : "border-default-200 bg-default-50 hover:border-primary-300"}`} className={`group flex items-center justify-between px-4 py-3 rounded-xl border-2 transition-all cursor-pointer shadow-sm w-[320px] ${isTunnelListExpanded ? "border-primary bg-white ring-2 ring-primary/10 dark:bg-default-100 dark:ring-primary/20" : "border-default-200 bg-default-50 hover:border-primary-300 dark:hover:bg-default-100 dark:hover:border-primary-400"}`}
onClick={() => onClick={() =>
setIsTunnelListExpanded(!isTunnelListExpanded) setIsTunnelListExpanded(!isTunnelListExpanded)
} }
@@ -1458,7 +1458,7 @@ export default function UserPage() {
{/* 列表悬浮层 */} {/* 列表悬浮层 */}
{isTunnelListExpanded && ( {isTunnelListExpanded && (
<div <div
className="absolute top-[calc(100%+8px)] left-0 w-[320px] border border-default-200 rounded-2xl bg-white dark:bg-default-900 shadow-2xl overflow-hidden z-[999]" className="absolute top-[calc(100%+8px)] left-0 z-[999] w-[320px] overflow-hidden rounded-2xl border border-default-200 bg-white text-foreground shadow-2xl dark:bg-default-50"
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
> >
<div className="max-h-[350px] overflow-y-auto p-2 custom-scrollbar"> <div className="max-h-[350px] overflow-y-auto p-2 custom-scrollbar">
@@ -1477,7 +1477,7 @@ export default function UserPage() {
return ( return (
<div <div
key={tunnel.id} key={tunnel.id}
className={`flex items-center justify-between px-4 py-2.5 rounded-xl mb-1 border transition-all ${isSelected ? "bg-primary-50/60 border-primary-200" : "bg-transparent border-transparent hover:bg-default-100"} ${isAssigned ? "opacity-40 grayscale cursor-not-allowed" : "cursor-pointer"}`} className={`mb-1 flex items-center justify-between rounded-xl border px-4 py-2.5 transition-all ${isSelected ? "border-primary-200 bg-primary-50/60 dark:border-primary-500/40 dark:bg-primary-900/40" : "border-transparent bg-transparent hover:bg-default-100"} ${isAssigned ? "cursor-not-allowed opacity-40 grayscale" : "cursor-pointer"}`}
// 核心：整行点击直接控制状态 // 核心：整行点击直接控制状态
onClick={(e) => { onClick={(e) => {
if (isAssigned) return; if (isAssigned) return;
@@ -1494,7 +1494,7 @@ export default function UserPage() {
className="pointer-events-none" className="pointer-events-none"
/> />
<span <span
className={`text-sm font-medium truncate ${isSelected ? "text-primary-700" : ""}`} className={`truncate text-sm font-medium text-foreground ${isSelected ? "text-primary-700 dark:text-primary-300" : ""}`}
> >
{tunnel.name} {tunnel.name}
</span> </span>
@@ -1545,7 +1545,7 @@ export default function UserPage() {
); );
})} })}
</div> </div>
<div className="bg-default-50/80 border-t p-2 flex justify-end"> <div className="flex justify-end border-t border-default-200 bg-default-50/80 p-2 dark:bg-default-100/80">
<Button <Button
className="font-bold" className="font-bold"
color="primary" color="primary"
vite-frontend/src/shadcn-bridge/heroui/select.tsx
+2 -1
View File
@@ -399,7 +399,7 @@ export function Select<T>({
) : ( ) : (
<select <select
className={cn( className={cn(
"w-full rounded-md border border-input bg-background px-3 py-2 shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-ring", "w-full rounded-md border border-input bg-background px-3 py-2 text-foreground shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-ring dark:[color-scheme:dark]",
sizeClass(size), sizeClass(size),
classNames?.trigger, classNames?.trigger,
className, className,
@@ -414,6 +414,7 @@ export function Select<T>({
<option value="">{placeholder ?? "请选择"}</option> <option value="">{placeholder ?? "请选择"}</option>
{options.map((option) => ( {options.map((option) => (
<option <option
className="bg-background text-foreground"
key={option.key} key={option.key}
disabled={disabled.has(option.key)} disabled={disabled.has(option.key)}
value={option.key} value={option.key}