fix(overview): text display

This commit is contained in:
hamster1963 2024-12-03 23:51:24 +08:00
parent 8515674d72
commit 8010b69d79
6 changed files with 49 additions and 44 deletions

View File

@ -221,22 +221,24 @@ export default function ServerDetailOverview({
</section> </section>
</CardContent> </CardContent>
</Card> </Card>
{server?.state.temperatures && server?.state.temperatures.length > 0 && ( {server?.state.temperatures &&
<Card className="rounded-[10px] bg-transparent border-none shadow-none"> server?.state.temperatures.length > 0 && (
<CardContent className="px-1.5 py-1"> <Card className="rounded-[10px] bg-transparent border-none shadow-none">
<section className="flex flex-col items-start gap-0.5"> <CardContent className="px-1.5 py-1">
<p className="text-xs text-muted-foreground">{"温度"}</p> <section className="flex flex-col items-start gap-0.5">
<section className="flex items-start gap-2"> <p className="text-xs text-muted-foreground">{"温度"}</p>
{server?.state.temperatures.map((item,index) => ( <section className="flex items-start gap-2">
<div className="text-xs flex items-center" key={index}> {server?.state.temperatures.map((item, index) => (
<p className=" font-semibold">{item.Name}</p>: {item.Temperature.toFixed(2)} °C <div className="text-xs flex items-center" key={index}>
</div> <p className=" font-semibold">{item.Name}</p>:{" "}
))} {item.Temperature.toFixed(2)} °C
</section> </div>
</section> ))}
</CardContent> </section>
</Card> </section>
)} </CardContent>
</Card>
)}
<Card className="rounded-[10px] bg-transparent border-none shadow-none"> <Card className="rounded-[10px] bg-transparent border-none shadow-none">
<CardContent className="px-1.5 py-1"> <CardContent className="px-1.5 py-1">
<section className="flex flex-col items-start gap-0.5"> <section className="flex flex-col items-start gap-0.5">

View File

@ -2,7 +2,10 @@ import { Card, CardContent } from "@/components/ui/card";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { formatBytes } from "@/lib/format"; import { formatBytes } from "@/lib/format";
import { Separator } from "./ui/separator"; import {
ArrowDownCircleIcon,
ArrowUpCircleIcon,
} from "@heroicons/react/20/solid";
type ServerOverviewProps = { type ServerOverviewProps = {
online: number; online: number;
@ -90,33 +93,30 @@ export default function ServerOverview({
)} )}
> >
<CardContent className="flex h-full items-center relative px-6 py-3"> <CardContent className="flex h-full items-center relative px-6 py-3">
<section className="flex flex-col gap-1"> <section className="flex flex-col gap-1 w-full">
<div className="flex items-center gap-1"> <div className="flex items-center w-full justify-between">
<p className="text-sm font-medium md:text-base"> <p className="text-sm font-medium md:text-base">
{t("serverOverview.totalBandwidth")} {t("serverOverview.network")}
</p>
<Separator
orientation="vertical"
className="h-4 w-[1px]"
/>
<p className="text-sm font-medium md:text-base">
{t("serverOverview.speed")}
</p> </p>
<section className="flex flex-row z-[999] sm:items-center items-start pr-2 sm:pr-0 gap-1 ml-auto">
<p className="sm:text-[12px] text-[10px] text-nowrap font-semibold">
{formatBytes(up)}
</p>
<p className="sm:text-[12px] text-[10px] text-nowrap font-semibold">
{formatBytes(down)}
</p>
</section>
</div> </div>
<section className="flex flex-row sm:items-center items-start gap-1"> <section className="flex flex-row mt-1.5 -mr-1 sm:items-center items-start gap-1">
<p className="sm:text-[12px] text-[10px] text-nowrap font-semibold"> <p className="sm:text-[12px] flex items-center text-[10px] text-nowrap font-bold">
{formatBytes(up)} <ArrowUpCircleIcon className="size-3 mr-0.5 sm:mb-[1.1px]" />
{formatBytes(
upSpeed,
)}/s
</p> </p>
<p className="sm:text-[12px] text-[10px] text-nowrap font-semibold"> <p className="sm:text-[12px] flex items-center text-[10px] text-nowrap font-bold">
{formatBytes(down)} <ArrowDownCircleIcon className="size-3 mr-0.5" />
</p> {formatBytes(downSpeed)}/s
</section>
<section className="flex flex-row sm:items-center items-start gap-1">
<p className="sm:text-[12px] text-[10px] text-nowrap font-semibold">
{formatBytes(upSpeed)}/s
</p>
<p className="sm:text-[12px] text-[10px] text-nowrap font-semibold">
{formatBytes(downSpeed)}/s
</p> </p>
</section> </section>
</section> </section>

View File

@ -15,7 +15,8 @@
"onlineServers": "Online Servers", "onlineServers": "Online Servers",
"offlineServers": "Offline Servers", "offlineServers": "Offline Servers",
"totalBandwidth": "Total Bandwidth", "totalBandwidth": "Total Bandwidth",
"speed": "Speed" "speed": "Speed",
"network": "Network"
}, },
"serverCard": { "serverCard": {
"mem": "MEM", "mem": "MEM",

View File

@ -15,7 +15,8 @@
"onlineServers": "在线服务器", "onlineServers": "在线服务器",
"offlineServers": "离线服务器", "offlineServers": "离线服务器",
"totalBandwidth": "总流量", "totalBandwidth": "总流量",
"speed": "速率" "speed": "速率",
"network": "网络"
}, },
"serverCard": { "serverCard": {
"mem": "内存", "mem": "内存",

View File

@ -15,7 +15,8 @@
"onlineServers": "線上服務器", "onlineServers": "線上服務器",
"offlineServers": "離線服務器", "offlineServers": "離線服務器",
"totalBandwidth": "總帶寬", "totalBandwidth": "總帶寬",
"speed": "速率" "speed": "速率",
"network": "網路"
}, },
"serverCard": { "serverCard": {
"mem": "內存", "mem": "內存",

View File

@ -62,7 +62,7 @@ export default defineConfig({
server: { server: {
proxy: { proxy: {
"/api/v1/ws/server": { "/api/v1/ws/server": {
target: "ws://localhost:8080", target: "ws://localhost:8008",
changeOrigin: true, changeOrigin: true,
ws: true, ws: true,
}, },