diff --git a/ui/src/components/certimate/AccessEdit.tsx b/ui/src/components/certimate/AccessEdit.tsx index 736e720b..8f740695 100644 --- a/ui/src/components/certimate/AccessEdit.tsx +++ b/ui/src/components/certimate/AccessEdit.tsx @@ -5,6 +5,7 @@ import { DialogTitle, DialogTrigger, } from "@/components/ui/dialog"; +import { ScrollArea } from "@/components/ui/scroll-area"; import { useState } from "react"; @@ -136,44 +137,46 @@ export function AccessEdit({ <DialogHeader> <DialogTitle>{op == "add" ? "添加" : "编辑"}授权</DialogTitle> </DialogHeader> - <div className="container"> - <Label>服务商</Label> + <ScrollArea className="max-h-[80vh]"> + <div className="container"> + <Label>服务商</Label> - <Select - onValueChange={(val) => { - console.log(val); - setConfigType(val); - }} - defaultValue={configType} - > - <SelectTrigger className="mt-3"> - <SelectValue placeholder="请选择服务商" /> - </SelectTrigger> - <SelectContent> - <SelectGroup> - <SelectLabel>服务商</SelectLabel> - {typeKeys.map((key) => ( - <SelectItem value={key} key={key}> - <div - className={cn( - "flex items-center space-x-2 rounded cursor-pointer", - getOptionCls(key) - )} - > - <img - src={accessTypeMap.get(key)?.[1]} - className="h-6 w-6" - /> - <div>{accessTypeMap.get(key)?.[0]}</div> - </div> - </SelectItem> - ))} - </SelectGroup> - </SelectContent> - </Select> + <Select + onValueChange={(val) => { + console.log(val); + setConfigType(val); + }} + defaultValue={configType} + > + <SelectTrigger className="mt-3"> + <SelectValue placeholder="请选择服务商" /> + </SelectTrigger> + <SelectContent> + <SelectGroup> + <SelectLabel>服务商</SelectLabel> + {typeKeys.map((key) => ( + <SelectItem value={key} key={key}> + <div + className={cn( + "flex items-center space-x-2 rounded cursor-pointer", + getOptionCls(key) + )} + > + <img + src={accessTypeMap.get(key)?.[1]} + className="h-6 w-6" + /> + <div>{accessTypeMap.get(key)?.[0]}</div> + </div> + </SelectItem> + ))} + </SelectGroup> + </SelectContent> + </Select> - {form} - </div> + {form} + </div> + </ScrollArea> </DialogContent> </Dialog> ); diff --git a/ui/src/pages/dashboard/Dashboard.tsx b/ui/src/pages/dashboard/Dashboard.tsx index 558083ea..7d9e10f3 100644 --- a/ui/src/pages/dashboard/Dashboard.tsx +++ b/ui/src/pages/dashboard/Dashboard.tsx @@ -58,8 +58,8 @@ const Dashboard = () => { <div className="flex justify-between items-center"> <div className="text-muted-foreground">控制面板</div> </div> - <div className="flex mt-10 gap-5 flex-col md:flex-row"> - <div className="w-full md:w-[300px] flex items-center rounded-md p-3 shadow-lg border"> + <div className="flex mt-10 gap-5 flex-col flex-wrap md:flex-row"> + <div className="w-full md:w-[250px] 3xl:w-[300px] flex items-center rounded-md p-3 shadow-lg border"> <div className="p-3"> <SquareSigma size={48} strokeWidth={1} className="text-blue-400" /> </div> @@ -80,7 +80,7 @@ const Dashboard = () => { </div> </div> - <div className="w-full md:w-[300px] flex items-center rounded-md p-3 shadow-lg border"> + <div className="w-full md:w-[250px] 3xl:w-[300px] flex items-center rounded-md p-3 shadow-lg border"> <div className="p-3"> <CalendarX2 size={48} strokeWidth={1} className="text-red-400" /> </div> @@ -101,7 +101,7 @@ const Dashboard = () => { </div> </div> - <div className="border w-full md:w-[300px] flex items-center rounded-md p-3 shadow-lg"> + <div className="border w-full md:w-[250px] 3xl:w-[300px] flex items-center rounded-md p-3 shadow-lg"> <div className="p-3"> <LoaderPinwheel size={48} @@ -126,7 +126,7 @@ const Dashboard = () => { </div> </div> - <div className="border w-full md:w-[300px] flex items-center rounded-md p-3 shadow-lg"> + <div className="border w-full md:w-[250px] 3xl:w-[300px] flex items-center rounded-md p-3 shadow-lg"> <div className="p-3"> <Ban size={48} strokeWidth={1} className="text-gray-400" /> </div> diff --git a/ui/tailwind.config.js b/ui/tailwind.config.js index 7cb7e37a..c410195b 100644 --- a/ui/tailwind.config.js +++ b/ui/tailwind.config.js @@ -14,6 +14,7 @@ module.exports = { padding: "2rem", screens: { "2xl": "1400px", + '3xl': '1920px', }, }, extend: {