拆分前端项目为 portal 和 admin 文件夹

web/src/admin/pages/Agents/AgentList.tsx

@@ -9,7 +9,7 @@ import {batchUpdateTags, deleteAgent, getAgentPaging, getTags, updateAgentInfo,
 import type {Agent} from '@/types';
 import {getErrorMessage} from '@/lib/utils';
 import dayjs from 'dayjs';
-import {PageHeader} from '@/components';
+import {PageHeader} from '@admin/components';
 
 const AgentList = () => {
     const navigate = useNavigate();

web/src/admin/pages/AlertRecords/index.tsx

@@ -7,7 +7,7 @@ import {clearAlertRecords, getAlertRecords} from '@/api/alert.ts';
 import type {AlertRecord} from '@/types';
 import dayjs from 'dayjs';
 import {getErrorMessage} from '@/lib/utils';
-import {PageHeader} from '@/components';
+import {PageHeader} from '@admin/components';
 import {getAgentPaging} from '@/api/agent.ts';
 import {useQuery} from '@tanstack/react-query';
 

web/src/admin/pages/ApiKeys/ApiKeyList.tsx

@@ -14,7 +14,7 @@ import {
 import type {ApiKey, GenerateApiKeyRequest} from '@/types';
 import dayjs from 'dayjs';
 import {getErrorMessage} from '@/lib/utils';
-import {PageHeader} from '@/components';
+import {PageHeader} from '@admin/components';
 import copy from "copy-to-clipboard";
 
 const ApiKeyList = () => {

web/src/admin/pages/DDNS/index.tsx

@@ -2,7 +2,7 @@ import {useRef, useState} from 'react';
 import type {ActionType, ProColumns} from '@ant-design/pro-components';
 import {ProTable} from '@ant-design/pro-components';
 import {App, Button, Divider, Input, Space, Tag, Tooltip} from 'antd';
-import {PageHeader} from '@/components';
+import {PageHeader} from '@admin/components';
 import {Globe, Plus, Settings} from 'lucide-react';
 import dayjs from 'dayjs';
 import type {DDNSConfig} from '@/types';

web/src/admin/pages/Monitors/MonitorList.tsx

@@ -2,7 +2,7 @@ import {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import type {ActionType, ProColumns} from '@ant-design/pro-components';
 import {ProTable} from '@ant-design/pro-components';
 import {App, Button, Divider, Form, Input, InputNumber, Modal, Select, Space, Switch, Tag,} from 'antd';
-import {PageHeader} from '@/components';
+import {PageHeader} from '@admin/components';
 import {Edit, MinusCircle, Plus, PlusCircle, RefreshCw, Trash2} from 'lucide-react';
 import dayjs from 'dayjs';
 import {getAgentPaging} from '@/api/agent.ts';

web/src/admin/pages/Settings/index.tsx

@@ -3,7 +3,7 @@ import {Bell, Database, MessageSquare, Settings2} from 'lucide-react';
 import AlertSettings from './AlertSettings';
 import NotificationChannels from './NotificationChannels';
 import SystemConfig from './SystemConfig';
-import {PageHeader} from "@/components";
+import {PageHeader} from "@admin/components";
 import {useSearchParams} from "react-router-dom";
 
 const Settings = () => {

web/src/portal/components/NetworkStatCard.tsx

@@ -1,6 +1,6 @@
 import type {FC} from 'react';
 import {ArrowDown, ArrowUp, Network} from 'lucide-react';
-import {formatBytes, formatSpeed} from '@/utils/util';
+import {formatBytes, formatSpeed} from '@portal/utils/util';
 import {cn} from "@/lib/utils.ts";
 
 interface NetworkStatCardProps {

web/src/portal/components/PublicHeader.tsx

@@ -1,9 +1,9 @@
 import {useEffect, useState} from 'react';
-import {Activity, LogIn, Menu, ServerIcon, Settings, X, Sun, Moon, Monitor, ChevronDown} from 'lucide-react';
+import {Activity, ChevronDown, LogIn, Menu, Monitor, Moon, ServerIcon, Settings, Sun, X} from 'lucide-react';
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
-import {getCurrentUser} from '../api/auth';
 import {Link, useLocation} from "react-router-dom";
-import {useTheme, type Theme} from '../contexts/ThemeContext';
+import {useTheme} from '../contexts/ThemeContext';
+import {getCurrentUser} from "@/api/auth.ts";
 
 const PublicHeader = () => {
     const [isLoggedIn, setIsLoggedIn] = useState(false);
@@ -72,7 +72,8 @@ const PublicHeader = () => {
 
     return (
         <>
-            <header className="border-b border-slate-200 dark:border-cyan-900/50 bg-white/80 dark:bg-[#05050a]/80 backdrop-blur-xl fixed top-0 left-0 right-0 z-40 transition-colors duration-300">
+            <header
+                className="border-b border-slate-200 dark:border-cyan-900/50 bg-white/80 dark:bg-[#05050a]/80 backdrop-blur-xl fixed top-0 left-0 right-0 z-40 transition-colors duration-300">
                 <div className="max-w-7xl mx-auto px-4 h-20 flex items-center justify-between">
                     <div className="flex items-center gap-8">
                         <Link to={'/'}>
@@ -127,7 +128,8 @@ const PublicHeader = () => {
                     {/* Desktop Right Section */}
                     <div className="hidden md:flex items-center gap-2">
                         <div className="hidden lg:flex flex-col items-end">
-                            <span className="text-xs font-mono text-slate-800 dark:text-cyan-500 font-bold">{currentTime.toLocaleTimeString()}</span>
+                            <span
+                                className="text-xs font-mono text-slate-800 dark:text-cyan-500 font-bold">{currentTime.toLocaleTimeString()}</span>
                             <span
                                 className="text-xs text-slate-500 dark:text-cyan-500 font-mono tracking-widest">{currentTime.toLocaleDateString()}</span>
                         </div>

web/src/portal/components/ServerCard.tsx

@@ -13,9 +13,9 @@ import {
     Thermometer
 } from 'lucide-react';
 import type {Agent, LatestMetrics} from '@/types';
-import CompactResourceBar from '@/components/CompactResourceBar';
-import {formatBytes, formatSpeed, formatUptime} from '@/utils/util';
-import CyberCard from "@/components/CyberCard.tsx";
+import CompactResourceBar from '@portal/components/CompactResourceBar';
+import {formatBytes, formatSpeed, formatUptime} from '@portal/utils/util';
+import CyberCard from "@portal/components/CyberCard.tsx";
 import {Link} from "react-router-dom";
 
 interface AgentWithMetrics extends Agent {

web/src/portal/components/common/Card.tsx

@@ -1,6 +1,6 @@
 import type {ReactNode} from 'react';
 import {cn} from '@/lib/utils';
-import CyberCard from "@/components/CyberCard.tsx";
+import CyberCard from "@portal/components/CyberCard.tsx";
 
 interface CardProps {
     title?: string;

web/src/portal/components/monitor/AgentStatsTable.tsx

@@ -1,10 +1,10 @@
 import {AlertCircle, Clock, MapPin} from 'lucide-react';
 import {StatusBadge} from '../common/StatusBadge.tsx';
 import {CertBadge} from './CertBadge';
-import {AGENT_COLORS} from '@/constants/colors';
-import {formatDateTime, formatTime} from '@/utils/util';
+import {AGENT_COLORS} from '@portal/constants/colors';
+import {formatDateTime, formatTime} from '@portal/utils/util';
 import type {AgentMonitorStat} from '@/types';
-import CyberCard from "@/components/CyberCard.tsx";
+import CyberCard from "@portal/components/CyberCard.tsx";
 
 interface AgentStatsTableProps {
     monitorStats: AgentMonitorStat[];

web/src/portal/components/monitor/MonitorCard.tsx

@@ -3,12 +3,12 @@ import type {PublicMonitor} from "@/types";
 import {useQuery} from "@tanstack/react-query";
 import {type GetMetricsResponse, getMonitorHistory} from "@/api/monitor.ts";
 import {useMemo} from "react";
-import CyberCard from "@/components/CyberCard.tsx";
-import {StatusBadge} from "@/components/common/StatusBadge.tsx";
-import {CertBadge} from "@/components/monitor/CertBadge.tsx";
-import {formatDateTime} from "@/utils/util.ts";
-import {MiniChart} from "@/components/monitor/MiniChart.tsx";
-import type {DisplayMode} from "@/components/monitor/index.ts";
+import CyberCard from "@portal/components/CyberCard.tsx";
+import {StatusBadge} from "@portal/components/common/StatusBadge.tsx";
+import {CertBadge} from "@portal/components/monitor/CertBadge.tsx";
+import {formatDateTime} from "@portal/utils/util.ts";
+import {MiniChart} from "@portal/components/monitor/MiniChart.tsx";
+import type {DisplayMode} from "@portal/components/monitor/index.ts";
 import {Activity, Globe, Server, ShieldCheck, Wifi} from "lucide-react";
 
 // 类型图标组件

web/src/portal/components/monitor/MonitorHero.tsx

@@ -2,10 +2,10 @@ import {ArrowLeft} from 'lucide-react';
 import {TypeIcon} from './TypeIcon';
 import {StatusBadge} from '../common/StatusBadge.tsx';
 import {CertBadge} from './CertBadge';
-import LittleStatCard from '@/components/common/LittleStatCard';
+import LittleStatCard from '@portal/components/common/LittleStatCard';
 import type {PublicMonitor} from '@/types';
-import CyberCard from "@/components/CyberCard.tsx";
-import {formatDateTime} from "@/utils/util.ts";
+import CyberCard from "@portal/components/CyberCard.tsx";
+import {formatDateTime} from "@portal/utils/util.ts";
 
 interface MonitorHeroProps {
     monitor: PublicMonitor;

web/src/portal/components/monitor/ResponseTimeChart.tsx

@@ -2,13 +2,13 @@ import {useEffect, useMemo, useState} from 'react';
 import {useQuery} from '@tanstack/react-query';
 import {Area, AreaChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis} from 'recharts';
 import {type GetMetricsResponse, getMonitorHistory} from '@/api/monitor';
-import {AGENT_COLORS} from '@/constants/colors';
-import {MONITOR_TIME_RANGE_OPTIONS} from '@/constants/time';
-import {useIsMobile} from '@/hooks/use-mobile';
+import {AGENT_COLORS} from '@portal/constants/colors';
+import {MONITOR_TIME_RANGE_OPTIONS} from '@portal/constants/time';
+import {useIsMobile} from '@portal/hooks/use-mobile';
 import type {AgentMonitorStat} from '@/types';
-import CyberCard from "@/components/CyberCard.tsx";
-import {ChartPlaceholder, CustomTooltip, MobileLegend, TimeRangeSelector} from "@/components/common";
-import {formatChartTime} from '@/utils/util';
+import CyberCard from "@portal/components/CyberCard.tsx";
+import {ChartPlaceholder, CustomTooltip, MobileLegend, TimeRangeSelector} from "@portal/components/common";
+import {formatChartTime} from '@portal/utils/util';
 
 interface ResponseTimeChartProps {
     monitorId: string;

web/src/portal/components/server/GpuMonitorSection.tsx

@@ -1,6 +1,6 @@
 import {Zap} from 'lucide-react';
-import {Card} from '@/components/common';
-import {formatBytes} from '@/utils/util';
+import {Card} from '@portal/components/common';
+import {formatBytes} from '@portal/utils/util';
 import type {LatestMetrics} from '@/types';
 
 interface GpuMonitorSectionProps {

web/src/portal/components/server/NetworkConnectionSection.tsx

@@ -1,5 +1,5 @@
 import {Network} from 'lucide-react';
-import {Card} from '@/components/common';
+import {Card} from '@portal/components/common';
 import type {LatestMetrics} from '@/types';
 
 interface NetworkConnectionSectionProps {

web/src/portal/components/server/ServerHero.tsx

@@ -1,9 +1,9 @@
 import {ArrowLeft} from 'lucide-react';
-import {formatBytes, formatDateTime, formatUptime} from '@/utils/util';
+import {formatBytes, formatDateTime, formatUptime} from '@portal/utils/util';
 import type {Agent, LatestMetrics} from '@/types';
-import LittleStatCard from '@/components/common/LittleStatCard';
-import CyberCard from "@/components/CyberCard.tsx";
-import {StatusBadge} from "@/components/common/StatusBadge.tsx";
+import LittleStatCard from '@portal/components/common/LittleStatCard';
+import CyberCard from "@portal/components/CyberCard.tsx";
+import {StatusBadge} from "@portal/components/common/StatusBadge.tsx";
 
 interface ServerHeroProps {
     agent: Agent;

web/src/portal/components/server/SnapshotSection.tsx

@@ -1,5 +1,5 @@
 import {SnapshotGrid, type SnapshotCardData} from './SnapshotGrid';
-import CyberCard from "@/components/CyberCard.tsx";
+import CyberCard from "@portal/components/CyberCard.tsx";
 
 interface SnapshotSectionProps {
     cards: SnapshotCardData[];

web/src/portal/components/server/SystemInfoSection.tsx

@@ -1,8 +1,8 @@
 import {Cpu, HardDrive, MemoryStick, Network} from 'lucide-react';
-import {InfoGrid, type SnapshotCardData, SnapshotSection} from '@/components/server';
-import {formatBytes, formatDateTime, formatPercentValue, formatUptime} from '@/utils/util';
+import {InfoGrid, type SnapshotCardData, SnapshotSection} from '@portal/components/server';
+import {formatBytes, formatDateTime, formatPercentValue, formatUptime} from '@portal/utils/util';
 import type {Agent, LatestMetrics} from '@/types';
-import CyberCard from "@/components/CyberCard.tsx";
+import CyberCard from "@portal/components/CyberCard.tsx";
 
 type AccentVariant = 'blue' | 'emerald' | 'purple' | 'amber';
 

web/src/portal/components/server/TemperatureMonitorSection.tsx

@@ -1,5 +1,5 @@
 import {Thermometer} from 'lucide-react';
-import {Card} from '@/components/common';
+import {Card} from '@portal/components/common';
 import type {LatestMetrics} from '@/types';
 
 interface TemperatureMonitorSectionProps {

web/src/portal/components/server/charts/CpuChart.tsx

@@ -1,10 +1,10 @@
 import {useMemo} from 'react';
 import {Cpu} from 'lucide-react';
 import {Area, AreaChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis} from 'recharts';
-import {ChartPlaceholder, CustomTooltip} from '@/components/common';
-import {useMetricsQuery} from '@/hooks/server/queries';
+import {ChartPlaceholder, CustomTooltip} from '@portal/components/common';
+import {useMetricsQuery} from '@portal/hooks/server/queries';
 import {ChartContainer} from './ChartContainer';
-import {formatChartTime} from '@/utils/util';
+import {formatChartTime} from '@portal/utils/util';
 
 interface CpuChartProps {
     agentId: string;

web/src/portal/components/server/charts/DiskIOChart.tsx

@@ -1,10 +1,10 @@
 import {useMemo} from 'react';
 import {HardDrive} from 'lucide-react';
 import {Area, AreaChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis} from 'recharts';
-import {ChartPlaceholder, CustomTooltip} from '@/components/common';
-import {useMetricsQuery} from '@/hooks/server/queries';
+import {ChartPlaceholder, CustomTooltip} from '@portal/components/common';
+import {useMetricsQuery} from '@portal/hooks/server/queries';
 import {ChartContainer} from './ChartContainer';
-import {formatChartTime} from '@/utils/util';
+import {formatChartTime} from '@portal/utils/util';
 
 interface DiskIOChartProps {
     agentId: string;

web/src/portal/components/server/charts/GpuChart.tsx

@@ -1,10 +1,10 @@
 import {useMemo} from 'react';
 import {Zap} from 'lucide-react';
 import {CartesianGrid, Legend, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis} from 'recharts';
-import {ChartPlaceholder, CustomTooltip} from '@/components/common';
-import {useMetricsQuery} from '@/hooks/server/queries';
+import {ChartPlaceholder, CustomTooltip} from '@portal/components/common';
+import {useMetricsQuery} from '@portal/hooks/server/queries';
 import {ChartContainer} from './ChartContainer';
-import {formatChartTime} from '@/utils/util';
+import {formatChartTime} from '@portal/utils/util';
 
 interface GpuChartProps {
     agentId: string;

web/src/portal/components/server/charts/MemoryChart.tsx

@@ -1,10 +1,10 @@
 import {useMemo} from 'react';
 import {MemoryStick} from 'lucide-react';
 import {Area, AreaChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis} from 'recharts';
-import {ChartPlaceholder, CustomTooltip} from '@/components/common';
-import {useMetricsQuery} from '@/hooks/server/queries';
+import {ChartPlaceholder, CustomTooltip} from '@portal/components/common';
+import {useMetricsQuery} from '@portal/hooks/server/queries';
 import {ChartContainer} from './ChartContainer';
-import {formatChartTime} from '@/utils/util';
+import {formatChartTime} from '@portal/utils/util';
 
 interface MemoryChartProps {
     agentId: string;

web/src/portal/components/server/charts/MonitorChart.tsx

@@ -1,11 +1,11 @@
 import {useMemo} from 'react';
 import {Activity} from 'lucide-react';
 import {Area, AreaChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis} from 'recharts';
-import {ChartPlaceholder, CustomTooltip, MobileLegend} from '@/components/common';
-import {useMetricsQuery} from '@/hooks/server/queries';
-import {useIsMobile} from '@/hooks/use-mobile';
+import {ChartPlaceholder, CustomTooltip, MobileLegend} from '@portal/components/common';
+import {useMetricsQuery} from '@portal/hooks/server/queries';
+import {useIsMobile} from '@portal/hooks/use-mobile';
 import {ChartContainer} from './ChartContainer';
-import {formatChartTime} from '@/utils/util';
+import {formatChartTime} from '@portal/utils/util';
 
 interface MonitorChartProps {
     agentId: string;

web/src/portal/components/server/charts/NetworkChart.tsx

@@ -1,11 +1,11 @@
 import {useEffect, useMemo, useState} from 'react';
 import {Network} from 'lucide-react';
 import {Area, AreaChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis} from 'recharts';
-import {ChartPlaceholder, CustomTooltip} from '@/components/common';
-import {useMetricsQuery, useNetworkInterfacesQuery} from '@/hooks/server/queries';
-import {INTERFACE_COLORS} from '@/constants/server';
+import {ChartPlaceholder, CustomTooltip} from '@portal/components/common';
+import {useMetricsQuery, useNetworkInterfacesQuery} from '@portal/hooks/server/queries';
+import {INTERFACE_COLORS} from '@portal/constants/server';
 import {ChartContainer} from './ChartContainer';
-import {formatChartTime} from '@/utils/util';
+import {formatChartTime} from '@portal/utils/util';
 
 interface NetworkChartProps {
     agentId: string;

web/src/portal/components/server/charts/NetworkConnectionChart.tsx

@@ -1,10 +1,10 @@
 import {useMemo} from 'react';
 import {Network} from 'lucide-react';
 import {CartesianGrid, Legend, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis} from 'recharts';
-import {ChartPlaceholder, CustomTooltip} from '@/components/common';
-import {useMetricsQuery} from '@/hooks/server/queries';
+import {ChartPlaceholder, CustomTooltip} from '@portal/components/common';
+import {useMetricsQuery} from '@portal/hooks/server/queries';
 import {ChartContainer} from './ChartContainer';
-import {formatChartTime} from '@/utils/util';
+import {formatChartTime} from '@portal/utils/util';
 
 interface NetworkConnectionChartProps {
     agentId: string;

web/src/portal/components/server/charts/TemperatureChart.tsx

@@ -1,11 +1,11 @@
 import {useEffect, useMemo, useState} from 'react';
 import {Thermometer} from 'lucide-react';
 import {CartesianGrid, Legend, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis} from 'recharts';
-import {ChartPlaceholder, CustomTooltip} from '@/components/common';
-import {useMetricsQuery} from '@/hooks/server/queries';
-import {TEMPERATURE_COLORS} from '@/constants/server';
+import {ChartPlaceholder, CustomTooltip} from '@portal/components/common';
+import {useMetricsQuery} from '@portal/hooks/server/queries';
+import {TEMPERATURE_COLORS} from '@portal/constants/server';
 import {ChartContainer} from './ChartContainer';
-import {formatChartTime} from '@/utils/util';
+import {formatChartTime} from '@portal/utils/util';
 
 interface TemperatureChartProps {
     agentId: string;

web/src/portal/pages/Public/Monitor.tsx

@@ -1,7 +1,7 @@
 import {Shield} from "lucide-react";
 import {cn} from "@/lib/utils.ts";
 import type {CertStats} from "@/types";
-import {formatDate} from "@/utils/util.ts";
+import {formatDate} from "@portal/utils/util.ts";
 
 export const renderCert = (stats: CertStats) => {
     const hasCert = stats.certExpiryTime > 0;

web/src/portal/pages/Public/MonitorDetail.tsx

@@ -2,8 +2,8 @@ import {useNavigate, useParams} from 'react-router-dom';
 import {useQuery} from '@tanstack/react-query';
 import {getMonitorAgentStats, getMonitorStatsById} from '@/api/monitor.ts';
 import type {AgentMonitorStat, PublicMonitor} from '@/types';
-import {MonitorHero, ResponseTimeChart, AgentStatsTable} from '@/components/monitor';
-import {EmptyState, LoadingSpinner} from '@/components/common';
+import {MonitorHero, ResponseTimeChart, AgentStatsTable} from '@portal/components/monitor';
+import {EmptyState, LoadingSpinner} from '@portal/components/common';
 
 /**
  * 监控详情页面

web/src/portal/pages/Public/MonitorList.tsx

@@ -5,9 +5,9 @@ import {AlertTriangle, BarChart3, CheckCircle2, Globe, Loader2, Maximize2, Searc
 import {getPublicMonitors} from '@/api/monitor.ts';
 import type {PublicMonitor} from '@/types';
 import {cn} from '@/lib/utils';
-import StatBlock from "@/components/StatBlock.tsx";
-import type {DisplayMode, FilterStatus} from "@/components/monitor";
-import MonitorCard from "@/components/monitor/MonitorCard.tsx";
+import StatBlock from "@portal/components/StatBlock.tsx";
+import type {DisplayMode, FilterStatus} from "@portal/components/monitor";
+import MonitorCard from "@portal/components/monitor/MonitorCard.tsx";
 
 const LoadingSpinner = () => (
     <div className="flex min-h-[400px] w-full items-center justify-center">

web/src/portal/pages/Public/ServerDetail.tsx

@@ -1,13 +1,13 @@
 import {useState} from 'react';
 import {useNavigate, useParams} from 'react-router-dom';
-import {Card, EmptyState, LoadingSpinner, TimeRangeSelector} from '@/components/common';
+import {Card, EmptyState, LoadingSpinner, TimeRangeSelector} from '@portal/components/common';
 import {
     GpuMonitorSection,
     NetworkConnectionSection,
     ServerHero,
     SystemInfoSection,
     TemperatureMonitorSection,
-} from '@/components/server';
+} from '@portal/components/server';
 import {
     CpuChart,
     DiskIOChart,
@@ -17,9 +17,9 @@ import {
     NetworkChart,
     NetworkConnectionChart,
     TemperatureChart,
-} from '@/components/server/charts';
-import {useAgentQuery, useLatestMetricsQuery} from '@/hooks/server/queries';
-import {SERVER_TIME_RANGE_OPTIONS} from '@/constants/time';
+} from '@portal/components/server/charts';
+import {useAgentQuery, useLatestMetricsQuery} from '@portal/hooks/server/queries';
+import {SERVER_TIME_RANGE_OPTIONS} from '@portal/constants/time';
 
 /**
  * 服务器详情页面

web/src/portal/pages/Public/ServerList.tsx

@@ -20,11 +20,11 @@ import {
 import {getPublicTags, listAgents} from '@/api/agent.ts';
 import type {Agent, LatestMetrics} from '@/types';
 import {cn} from '@/lib/utils';
-import CompactResourceBar from "@/components/CompactResourceBar.tsx";
-import StatBlock from "@/components/StatBlock.tsx";
-import ServerCard from "@/components/ServerCard.tsx";
-import NetworkStatCard from "@/components/NetworkStatCard.tsx";
-import {formatBytes, formatSpeed, formatUptime} from "@/utils/util.ts";
+import CompactResourceBar from "@portal/components/CompactResourceBar.tsx";
+import StatBlock from "@portal/components/StatBlock.tsx";
+import ServerCard from "@portal/components/ServerCard.tsx";
+import NetworkStatCard from "@portal/components/NetworkStatCard.tsx";
+import {formatBytes, formatSpeed, formatUptime} from "@portal/utils/util.ts";
 
 interface AgentWithMetrics extends Agent {
     metrics?: LatestMetrics;

web/src/portal/pages/PublicLayout.tsx

@@ -1,6 +1,6 @@
 import {Outlet} from 'react-router-dom';
-import PublicHeader from '../components/PublicHeader';
-import PublicFooter from '../components/PublicFooter';
+import PublicHeader from '@portal/components/PublicHeader';
+import PublicFooter from '@portal/components/PublicFooter';
 import {ThemeProvider} from '../contexts/ThemeContext';
 
 const globalStyles = `

web/src/router/index.tsx

@@ -1,24 +1,24 @@
 import {createBrowserRouter, Navigate} from 'react-router-dom';
 import {type ComponentType, lazy, type LazyExoticComponent, Suspense} from 'react';
-import PrivateRoute from '../components/PrivateRoute';
+import PrivateRoute from '@admin/components/PrivateRoute';
 
-const LoginPage = lazy(() => import('../pages/Login'));
-const GitHubCallbackPage = lazy(() => import('../pages/Login/GitHubCallback'));
-const OIDCCallbackPage = lazy(() => import('../pages/Login/OIDCCallback'));
-const PublicLayout = lazy(() => import('../pages/PublicLayout'));
-const AdminLayout = lazy(() => import('../pages/AdminLayout'));
-const AgentListPage = lazy(() => import('../pages/Agents/AgentList'));
-const AgentDetailPage = lazy(() => import('../pages/Agents/AgentDetail'));
-const AgentInstallPage = lazy(() => import('../pages/Agents/AgentInstall'));
-const ApiKeyListPage = lazy(() => import('../pages/ApiKeys/ApiKeyList'));
-const SettingsPage = lazy(() => import('../pages/Settings'));
-const ServerListPage = lazy(() => import('../pages/Public/ServerList'));
-const ServerDetailPage = lazy(() => import('../pages/Public/ServerDetail'));
-const PublicMonitorListPage = lazy(() => import('../pages/Public/MonitorList'));
-const PublicMonitorDetailPage = lazy(() => import('../pages/Public/MonitorDetail'));
-const MonitorListPage = lazy(() => import('../pages/Monitors/MonitorList'));
-const DDNSPage = lazy(() => import('../pages/DDNS'));
-const AlertRecordListPage = lazy(() => import('../pages/AlertRecords'));
+const LoginPage = lazy(() => import('@admin/pages/Login'));
+const GitHubCallbackPage = lazy(() => import('@admin/pages/Login/GitHubCallback'));
+const OIDCCallbackPage = lazy(() => import('@admin/pages/Login/OIDCCallback'));
+const PublicLayout = lazy(() => import('@portal/pages/PublicLayout'));
+const AdminLayout = lazy(() => import('@admin/pages/AdminLayout'));
+const AgentListPage = lazy(() => import('@admin/pages/Agents/AgentList'));
+const AgentDetailPage = lazy(() => import('@admin/pages/Agents/AgentDetail'));
+const AgentInstallPage = lazy(() => import('@admin/pages/Agents/AgentInstall'));
+const ApiKeyListPage = lazy(() => import('@admin/pages/ApiKeys/ApiKeyList'));
+const SettingsPage = lazy(() => import('@admin/pages/Settings'));
+const ServerListPage = lazy(() => import('@portal/pages/Public/ServerList'));
+const ServerDetailPage = lazy(() => import('@portal/pages/Public/ServerDetail'));
+const PublicMonitorListPage = lazy(() => import('@portal/pages/Public/MonitorList'));
+const PublicMonitorDetailPage = lazy(() => import('@portal/pages/Public/MonitorDetail'));
+const MonitorListPage = lazy(() => import('@admin/pages/Monitors/MonitorList'));
+const DDNSPage = lazy(() => import('@admin/pages/DDNS'));
+const AlertRecordListPage = lazy(() => import('@admin/pages/AlertRecords'));
 
 const LoadingFallback = () => (
     <div className="flex min-h-[200px] w-full items-center justify-center text-gray-500">

web/tsconfig.app.json

@@ -20,6 +20,12 @@
     "paths": {
       "@/*": [
         "./src/*"
+      ],
+      "@portal/*": [
+        "./src/portal/*"
+      ],
+      "@admin/*": [
+        "./src/admin/*"
       ]
     },
     "allowSyntheticDefaultImports": true

web/tsconfig.json

@@ -13,6 +13,12 @@
     "paths": {
       "@/*": [
         "./src/*"
+      ],
+      "@portal/*": [
+        "./src/portal/*"
+      ],
+      "@admin/*": [
+        "./src/admin/*"
       ]
     }
   }

web/vite.config.ts

@@ -12,6 +12,8 @@ export default defineConfig({
     resolve: {
         alias: {
             "@": path.resolve(__dirname, "./src"),
+            "@portal": path.resolve(__dirname, "./src/portal"),
+            "@admin": path.resolve(__dirname, "./src/admin"),
         },
     },
     server: {