refactor: 移除调试日志并优化代码结构

feat(components): 新增设备管理相关组件和仪表盘组件
feat(hooks): 添加自定义hooks用于API调用和数据管理
style: 优化滚动条样式和模态框布局
chore: 清理无用脚本和调试文件
docs: 更新组件导出文件

frontend/src/hooks/useApi.js

@@ -0,0 +1,123 @@
+import { useSWR, useFetch, useFetchList } from './useSWR';
+
+export const useDevices = (params = {}) => {
+  const queryString = new URLSearchParams(
+    Object.entries(params).filter(([_, v]) => v !== undefined && v !== '')
+  ).toString();
+  const key = queryString ? `/devices?${queryString}` : '/devices';
+
+  return useFetchList(key);
+};
+
+export const useDevice = deviceId => {
+  return useFetch(deviceId ? `/devices/${deviceId}` : null);
+};
+
+export const useRacks = (params = {}) => {
+  const queryString = new URLSearchParams(
+    Object.entries(params).filter(([_, v]) => v !== undefined && v !== '')
+  ).toString();
+  const key = queryString ? `/racks?${queryString}` : '/racks';
+
+  return useFetchList(key);
+};
+
+export const useRack = rackId => {
+  return useFetch(rackId ? `/racks/${rackId}` : null);
+};
+
+export const useRooms = (params = {}) => {
+  const queryString = new URLSearchParams(
+    Object.entries(params).filter(([_, v]) => v !== undefined && v !== '')
+  ).toString();
+  const key = queryString ? `/rooms?${queryString}` : '/rooms';
+
+  return useFetchList(key);
+};
+
+export const useRoom = roomId => {
+  return useFetch(roomId ? `/rooms/${roomId}` : null);
+};
+
+export const useUsers = (params = {}) => {
+  const queryString = new URLSearchParams(
+    Object.entries(params).filter(([_, v]) => v !== undefined && v !== '')
+  ).toString();
+  const key = queryString ? `/users?${queryString}` : '/users';
+
+  return useFetchList(key);
+};
+
+export const useUser = userId => {
+  return useFetch(userId ? `/users/${userId}` : null);
+};
+
+export const useTickets = (params = {}) => {
+  const queryString = new URLSearchParams(
+    Object.entries(params).filter(([_, v]) => v !== undefined && v !== '')
+  ).toString();
+  const key = queryString ? `/tickets?${queryString}` : '/tickets';
+
+  return useFetchList(key);
+};
+
+export const useTicket = ticketId => {
+  return useFetch(ticketId ? `/tickets/${ticketId}` : null);
+};
+
+export const useDeviceFields = () => {
+  return useFetchList('/device-fields');
+};
+
+export const useConsumables = (params = {}) => {
+  const queryString = new URLSearchParams(
+    Object.entries(params).filter(([_, v]) => v !== undefined && v !== '')
+  ).toString();
+  const key = queryString ? `/consumables?${queryString}` : '/consumables';
+
+  return useFetchList(key);
+};
+
+export const useConsumableCategories = () => {
+  return useFetchList('/consumable-categories');
+};
+
+export const useCables = (params = {}) => {
+  const queryString = new URLSearchParams(
+    Object.entries(params).filter(([_, v]) => v !== undefined && v !== '')
+  ).toString();
+  const key = queryString ? `/cables?${queryString}` : '/cables';
+
+  return useFetchList(key);
+};
+
+export const usePorts = (params = {}) => {
+  const queryString = new URLSearchParams(
+    Object.entries(params).filter(([_, v]) => v !== undefined && v !== '')
+  ).toString();
+  const key = queryString ? `/device-ports?${queryString}` : '/device-ports';
+
+  return useFetchList(key);
+};
+
+export const useInventoryPlans = (params = {}) => {
+  const queryString = new URLSearchParams(
+    Object.entries(params).filter(([_, v]) => v !== undefined && v !== '')
+  ).toString();
+  const key = queryString ? `/inventory/plans?${queryString}` : '/inventory/plans';
+
+  return useFetchList(key);
+};
+
+export const useSystemSettings = () => {
+  return useFetch('/system-settings');
+};
+
+export const useDashboardStats = () => {
+  return useFetch('/devices/stats');
+};
+
+export const useMutate = () => {
+  const { mutate } = useSWR();
+  return mutate;
+};

frontend/src/hooks/useSWR.js

@@ -0,0 +1,53 @@
+import useSWR, { SWRConfig } from 'swr';
+import api from '../api';
+
+const fetcher = url => api.get(url).then(res => res);
+
+export const swrConfig = {
+  fetcher,
+  revalidateOnFocus: false,
+  revalidateOnReconnect: true,
+  shouldRetryOnError: false,
+  dedupingInterval: 5000,
+  errorRetryCount: 2,
+};
+
+export const useSWRConfig = () => {
+  return {
+    mutate: useSWR().mutate,
+  };
+};
+
+export const useFetch = (key, options = {}) => {
+  const { data, error, isLoading, isValidating, mutate } = useSWR(key, options);
+
+  return {
+    data,
+    error,
+    isLoading,
+    isValidating,
+    mutate,
+    isError: !!error,
+  };
+};
+
+export const useFetchList = (key, options = {}) => {
+  const { data, error, isLoading, mutate } = useSWR(key, {
+    ...options,
+    onSuccess: data => {
+      if (options.onSuccess) {
+        options.onSuccess(data);
+      }
+    },
+  });
+
+  return {
+    list: data?.list || data?.devices || data?.racks || data?.rooms || data || [],
+    total: data?.total || data?.count || 0,
+    error,
+    isLoading,
+    mutate,
+  };
+};
+
+export { SWRConfig, useSWR };