Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 semantic-release-bot
|
47f66030db | ||
|
web
|
70b3484f98 | ||
|
web
|
3c036eb09c | ||
|
web
|
ce9ab89c1c |
@@ -1,6 +1,15 @@
|
||||
<a name="readme-top"></a>
|
||||
# Changelog
|
||||
|
||||
## [1.4.8](https://github.com/perfect-panel/ppanel-web/compare/v1.4.7...v1.4.8) (2025-09-23)
|
||||
|
||||
|
||||
### 🐛 Bug Fixes
|
||||
|
||||
* Rename 'server_id' to 'protocol' in NodesPage and clean up unused imports and code in ServerConfig ([70b3484](https://github.com/perfect-panel/ppanel-web/commit/70b3484))
|
||||
* Update announcement page to display timeline of announcements with Markdown content ([3c036eb](https://github.com/perfect-panel/ppanel-web/commit/3c036eb))
|
||||
* Update Empty component to support border prop and adjust usage in various pages ([ce9ab89](https://github.com/perfect-panel/ppanel-web/commit/ce9ab89))
|
||||
|
||||
## [1.4.7](https://github.com/perfect-panel/ppanel-web/compare/v1.4.6...v1.4.7) (2025-09-23)
|
||||
|
||||
|
||||
|
||||
@@ -98,7 +98,7 @@ export default function NodesPage() {
|
||||
`${getServerName(row.original.server_id)}:${getServerAddress(row.original.server_id)}`,
|
||||
},
|
||||
{
|
||||
id: 'server_id',
|
||||
id: 'protocol',
|
||||
header: ` ${t('protocol')}:${t('port')}`,
|
||||
cell: ({ row }) =>
|
||||
`${row.original.protocol}:${getProtocolPort(row.original.server_id, row.original.protocol)}`,
|
||||
|
||||
@@ -9,7 +9,7 @@ import {
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { Button } from '@workspace/ui/components/button';
|
||||
import { ChartContainer, ChartTooltip } from '@workspace/ui/components/chart';
|
||||
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
@@ -35,65 +35,11 @@ import { Icon } from '@workspace/ui/custom-components/icon';
|
||||
import { DicesIcon } from 'lucide-react';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { uid } from 'radash';
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { Cell, Legend, Pie, PieChart } from 'recharts';
|
||||
import { toast } from 'sonner';
|
||||
import { z } from 'zod';
|
||||
|
||||
const COLORS = [
|
||||
'hsl(var(--chart-1))',
|
||||
'hsl(var(--chart-2))',
|
||||
'hsl(var(--chart-3))',
|
||||
'hsl(var(--chart-4))',
|
||||
'hsl(var(--chart-5))',
|
||||
];
|
||||
|
||||
const MINUTES_IN_DAY = 1440;
|
||||
|
||||
function getTimeRangeData(slots: API.TimePeriod[]) {
|
||||
const timePoints = slots
|
||||
.filter((slot) => slot.start_time && slot.end_time)
|
||||
.flatMap((slot) => {
|
||||
const [startH = 0, startM = 0] = slot.start_time.split(':').map(Number);
|
||||
const [endH = 0, endM = 0] = slot.end_time.split(':').map(Number);
|
||||
const start = startH * 60 + startM;
|
||||
let end = endH * 60 + endM;
|
||||
if (end < start) end += MINUTES_IN_DAY;
|
||||
return { start, end, multiplier: slot.multiplier };
|
||||
})
|
||||
.sort((a, b) => a.start - b.start);
|
||||
|
||||
const result: { name: string; value: number; multiplier: number }[] = [];
|
||||
let currentMinute = 0;
|
||||
|
||||
timePoints.forEach((point) => {
|
||||
if (point.start > currentMinute) {
|
||||
result.push({
|
||||
name: `${Math.floor(currentMinute / 60)}:${String(currentMinute % 60).padStart(2, '0')} - ${Math.floor(point.start / 60)}:${String(point.start % 60).padStart(2, '0')}`,
|
||||
value: point.start - currentMinute,
|
||||
multiplier: 1,
|
||||
});
|
||||
}
|
||||
result.push({
|
||||
name: `${Math.floor(point.start / 60)}:${String(point.start % 60).padStart(2, '0')} - ${Math.floor((point.end / 60) % 24)}:${String(point.end % 60).padStart(2, '0')}`,
|
||||
value: point.end - point.start,
|
||||
multiplier: point.multiplier,
|
||||
});
|
||||
currentMinute = point.end % MINUTES_IN_DAY;
|
||||
});
|
||||
|
||||
if (currentMinute < MINUTES_IN_DAY) {
|
||||
result.push({
|
||||
name: `${Math.floor(currentMinute / 60)}:${String(currentMinute % 60).padStart(2, '0')} - 24:00`,
|
||||
value: MINUTES_IN_DAY - currentMinute,
|
||||
multiplier: 1,
|
||||
});
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
const nodeConfigSchema = z.object({
|
||||
node_secret: z.string().optional(),
|
||||
node_pull_interval: z.number().optional(),
|
||||
@@ -150,20 +96,6 @@ export default function ServerConfig() {
|
||||
}
|
||||
}, [periodsResp]);
|
||||
|
||||
const chartTimeSlots = useMemo(() => getTimeRangeData(timeSlots), [timeSlots]);
|
||||
const chartConfig = useMemo(() => {
|
||||
return chartTimeSlots.reduce(
|
||||
(acc, item, index) => {
|
||||
acc[item.name] = {
|
||||
label: item.name,
|
||||
color: COLORS[index % COLORS.length] || 'hsl(var(--default-chart-color))',
|
||||
};
|
||||
return acc;
|
||||
},
|
||||
{} as Record<string, { label: string; color: string }>,
|
||||
);
|
||||
}, [chartTimeSlots]);
|
||||
|
||||
async function onSubmit(values: NodeConfigFormData) {
|
||||
setSaving(true);
|
||||
try {
|
||||
@@ -293,8 +225,8 @@ export default function ServerConfig() {
|
||||
{t('config.dynamicMultiplierDescription')}
|
||||
</p>
|
||||
|
||||
<div className='flex flex-col-reverse gap-2 md:flex-row md:items-start'>
|
||||
<div className='w-full md:w-1/2'>
|
||||
<div className='flex flex-col gap-2'>
|
||||
<div className='w-full'>
|
||||
<ArrayInput<API.TimePeriod>
|
||||
fields={[
|
||||
{ name: 'start_time', prefix: t('config.startTime'), type: 'time' },
|
||||
@@ -311,71 +243,18 @@ export default function ServerConfig() {
|
||||
/>
|
||||
<div className='mt-3 flex gap-2'>
|
||||
<Button
|
||||
type='button'
|
||||
size='sm'
|
||||
variant='outline'
|
||||
onClick={() => setTimeSlots(periodsResp || [])}
|
||||
>
|
||||
{t('config.reset')}
|
||||
</Button>
|
||||
<Button size='sm' onClick={savePeriods}>
|
||||
<Button size='sm' type='button' onClick={savePeriods}>
|
||||
{t('config.save')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='w-full md:w-1/2'>
|
||||
<ChartContainer config={chartConfig} className='mx-auto aspect-[5/3] w-full'>
|
||||
<PieChart>
|
||||
<Pie
|
||||
data={chartTimeSlots}
|
||||
cx='50%'
|
||||
cy='50%'
|
||||
labelLine={false}
|
||||
outerRadius='80%'
|
||||
fill='#8884d8'
|
||||
dataKey='value'
|
||||
label={({ percent, multiplier }) =>
|
||||
`${(multiplier || 0)?.toFixed(2)}x (${(percent * 100).toFixed(0)}%)`
|
||||
}
|
||||
>
|
||||
{chartTimeSlots.map((entry, index) => (
|
||||
<Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
|
||||
))}
|
||||
</Pie>
|
||||
<ChartTooltip
|
||||
content={({ payload }) => {
|
||||
if (payload && payload.length) {
|
||||
const d = payload[0]?.payload as any;
|
||||
return (
|
||||
<div className='bg-background rounded-lg border p-2 shadow-sm'>
|
||||
<div className='grid grid-cols-2 gap-2'>
|
||||
<div className='flex flex-col'>
|
||||
<span className='text-muted-foreground text-[0.70rem] uppercase'>
|
||||
{t('config.timeSlot')}
|
||||
</span>
|
||||
<span className='text-muted-foreground font-bold'>
|
||||
{d.name || '—'}
|
||||
</span>
|
||||
</div>
|
||||
<div className='flex flex-col'>
|
||||
<span className='text-muted-foreground text-[0.70rem] uppercase'>
|
||||
{t('config.multiplier')}
|
||||
</span>
|
||||
<span className='font-bold'>
|
||||
{Number(d.multiplier).toFixed(2)}x
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
}}
|
||||
/>
|
||||
<Legend />
|
||||
</PieChart>
|
||||
</ChartContainer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@@ -5,7 +5,6 @@ import { queryAnnouncement } from '@/services/user/announcement';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { Timeline } from '@workspace/ui/components/timeline';
|
||||
import { Markdown } from '@workspace/ui/custom-components/markdown';
|
||||
import { formatDate } from '@workspace/ui/utils';
|
||||
|
||||
export default function Page() {
|
||||
const { data } = useQuery({
|
||||
@@ -24,12 +23,12 @@ export default function Page() {
|
||||
<Timeline
|
||||
data={
|
||||
data.map((item) => ({
|
||||
title: String(formatDate(item.created_at, false)),
|
||||
content: <Markdown>{`### ${item.title}\n${item.content}`}</Markdown>,
|
||||
title: item.title,
|
||||
content: <Markdown>{item.content}</Markdown>,
|
||||
})) || []
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<Empty />
|
||||
<Empty border />
|
||||
);
|
||||
}
|
||||
|
||||
@@ -100,7 +100,7 @@ export function DocumentButton({ items }: { items: API.Document[] }) {
|
||||
layoutId={`card-${item.id}-${id}`}
|
||||
key={`card-${item.id}-${id}`}
|
||||
onClick={() => setActive(item)}
|
||||
className='bg-background hover:bg-accent flex cursor-pointer items-center justify-between rounded border p-4'
|
||||
className='bg-background hover:bg-accent flex cursor-pointer items-center justify-between rounded-xl border p-4'
|
||||
>
|
||||
<div className='flex flex-row items-center gap-4'>
|
||||
<motion.div layoutId={`image-${item.id}-${id}`}>
|
||||
|
||||
@@ -35,7 +35,14 @@ export default function Page() {
|
||||
},
|
||||
enabled: NEXT_PUBLIC_HIDDEN_TUTORIAL_DOCUMENT !== 'true',
|
||||
});
|
||||
if (!DocumentList && !TutorialList) return <Empty />;
|
||||
|
||||
if (
|
||||
(!DocumentList || DocumentList.length === 0) &&
|
||||
(!TutorialList || TutorialList.length === 0)
|
||||
) {
|
||||
return <Empty border />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='space-y-4'>
|
||||
{DocumentList?.length > 0 && (
|
||||
|
||||
@@ -121,7 +121,7 @@ export function TutorialButton({ items }: { items: Item[] }) {
|
||||
layoutId={`card-${item.title}-${id}`}
|
||||
key={`card-${item.title}-${id}`}
|
||||
onClick={() => setActive(item)}
|
||||
className='bg-background hover:bg-accent flex cursor-pointer items-center justify-between rounded border p-4'
|
||||
className='bg-background hover:bg-accent flex cursor-pointer items-center justify-between rounded-xl border p-4'
|
||||
>
|
||||
<div className='flex flex-row items-center gap-4'>
|
||||
<motion.div layoutId={`image-${item.title}-${id}`}>
|
||||
|
||||
@@ -4,7 +4,10 @@ import { default as _Empty } from '@workspace/ui/custom-components/empty';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
export function Empty() {
|
||||
interface EmptyProps {
|
||||
border?: boolean;
|
||||
}
|
||||
export function Empty({ border }: EmptyProps) {
|
||||
const t = useTranslations('common');
|
||||
|
||||
const [description, setDescription] = useState('');
|
||||
@@ -14,5 +17,5 @@ export function Empty() {
|
||||
setDescription(t(`empty.${random}`));
|
||||
}, [t]);
|
||||
|
||||
return <_Empty description={description} />;
|
||||
return <_Empty description={description} border={border} />;
|
||||
}
|
||||
|
||||
+1
-1
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "ppanel-web",
|
||||
"version": "1.4.7",
|
||||
"version": "1.4.8",
|
||||
"private": true,
|
||||
"homepage": "https://github.com/perfect-panel/ppanel-web",
|
||||
"bugs": {
|
||||
|
||||
@@ -1,6 +1,14 @@
|
||||
export default function Empty({ description }: { description?: React.ReactNode }) {
|
||||
export default function Empty({
|
||||
description,
|
||||
border,
|
||||
}: {
|
||||
description?: React.ReactNode;
|
||||
border?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<div className='flex flex-col items-center justify-center p-6 py-16'>
|
||||
<div
|
||||
className={`flex flex-col items-center justify-center p-6 py-16 ${border ? 'rounded-xl border' : ''}`}
|
||||
>
|
||||
<svg
|
||||
width='64'
|
||||
height='41'
|
||||
|
||||
Reference in New Issue
Block a user