diff --git a/.eslintrc.js b/.eslintrc.js
new file mode 100644
index 0000000..0fabc81
--- /dev/null
+++ b/.eslintrc.js
@@ -0,0 +1,7 @@
+module.exports = {
+  root: true,
+  // 根配置不直接检查文件，而是作为项目入口
+  // 实际检查由 frontend/ 和 backend/ 各自的配置处理
+  ignorePatterns: ['frontend/**', 'backend/**', 'node_modules/**', 'dist/**'],
+  overrides: []
+}
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 0000000..35fb4aa
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,25 @@
+# 依赖
+node_modules/
+frontend/node_modules/
+backend/node_modules/
+
+# 构建输出
+dist/
+frontend/dist/
+backend/dist/
+
+# 日志
+logs/
+*.log
+
+# 数据库
+*.db
+*.sqlite
+
+# 上传文件
+backend/uploads/
+
+# 其他
+.DS_Store
+.vscode/
+.idea/
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..c8ad74e
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,10 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "printWidth": 100,
+  "bracketSpacing": true,
+  "arrowParens": "avoid",
+  "endOfLine": "lf"
+}
diff --git a/backend/.eslintignore b/backend/.eslintignore
new file mode 100644
index 0000000..da565ab
--- /dev/null
+++ b/backend/.eslintignore
@@ -0,0 +1,20 @@
+# 构建输出
+dist/
+build/
+
+# 依赖
+node_modules/
+
+# 日志
+logs/
+*.log
+
+# 数据库
+*.db
+*.sqlite
+
+# 上传文件
+uploads/
+
+# 其他
+.DS_Store
diff --git a/backend/.eslintrc.js b/backend/.eslintrc.js
new file mode 100644
index 0000000..efc834f
--- /dev/null
+++ b/backend/.eslintrc.js
@@ -0,0 +1,27 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+    es2021: true,
+    jest: true
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:prettier/recommended'
+  ],
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module'
+  },
+  rules: {
+    'no-unused-vars': ['error', { argsIgnorePattern: '^_', varsIgnorePattern: '^_' }],
+    'no-console': ['warn', { allow: ['warn', 'error', 'info'] }],
+    'no-undef': 'error',
+    'no-unreachable': 'error',
+    'no-unused-expressions': 'error',
+    'eqeqeq': ['error', 'always'],
+    'curly': ['error', 'all'],
+    'no-var': 'error',
+    'prefer-const': 'error'
+  }
+}
diff --git a/backend/.prettierrc b/backend/.prettierrc
new file mode 100644
index 0000000..c8ad74e
--- /dev/null
+++ b/backend/.prettierrc
@@ -0,0 +1,10 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "printWidth": 100,
+  "bracketSpacing": true,
+  "arrowParens": "avoid",
+  "endOfLine": "lf"
+}
diff --git a/backend/package-lock.json b/backend/package-lock.json
index 923dd88..21746ac 100644
--- a/backend/package-lock.json
+++ b/backend/package-lock.json
@@ -29,8 +29,15 @@
         "xlsx": "^0.18.5"
       },
       "devDependencies": {
+        "eslint": "^9.39.2",
+        "eslint-config-prettier": "^10.1.8",
+        "eslint-plugin-prettier": "^5.5.5",
+        "eslint-plugin-react": "^7.37.5",
+        "eslint-plugin-react-hooks": "^7.0.1",
+        "eslint-plugin-react-refresh": "^0.5.0",
         "jest": "^30.2.0",
         "nodemon": "^3.0.1",
+        "prettier": "^3.8.1",
         "supertest": "^7.1.4"
       }
     },
@@ -672,6 +679,233 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@eslint-community/eslint-utils": {
+      "version": "4.9.1",
+      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.9.1.tgz",
+      "integrity": "sha512-phrYmNiYppR7znFEdqgfWHXR6NCkZEK7hwWDHZUjit/2/U0r6XvkDl0SYnoM51Hq7FhCGdLDT6zxCCOY1hexsQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "eslint-visitor-keys": "^3.4.3"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
+      }
+    },
+    "node_modules/@eslint-community/eslint-utils/node_modules/eslint-visitor-keys": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@eslint-community/regexpp": {
+      "version": "4.12.2",
+      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.2.tgz",
+      "integrity": "sha512-EriSTlt5OC9/7SXkRSCAhfSxxoSUgBm33OH+IkwbdpgoqsSsUg7y3uh+IICI/Qg4BBWr3U2i39RpmycbxMq4ew==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
+      }
+    },
+    "node_modules/@eslint/config-array": {
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.21.1.tgz",
+      "integrity": "sha512-aw1gNayWpdI/jSYVgzN5pL0cfzU02GT3NBpeT/DXbx1/1x7ZKxFPd9bwrzygx/qiwIQiJ1sw/zD8qY/kRvlGHA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/object-schema": "^2.1.7",
+        "debug": "^4.3.1",
+        "minimatch": "^3.1.2"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/config-array/node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@eslint/config-array/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@eslint/config-helpers": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.4.2.tgz",
+      "integrity": "sha512-gBrxN88gOIf3R7ja5K9slwNayVcZgK6SOUORm2uBzTeIEfeVaIhOpCtTox3P6R7o2jLFwLFTLnC7kU/RGcYEgw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/core": "^0.17.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/core": {
+      "version": "0.17.0",
+      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.17.0.tgz",
+      "integrity": "sha512-yL/sLrpmtDaFEiUj1osRP4TI2MDz1AddJL+jZ7KSqvBuliN4xqYY54IfdN8qD8Toa6g1iloph1fxQNkjOxrrpQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@types/json-schema": "^7.0.15"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/eslintrc": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.3.3.tgz",
+      "integrity": "sha512-Kr+LPIUVKz2qkx1HAMH8q1q6azbqBAsXJUxBl/ODDuVPX45Z9DfwB8tPjTi6nNZ8BuM3nbJxC5zCAg5elnBUTQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ajv": "^6.12.4",
+        "debug": "^4.3.2",
+        "espree": "^10.0.1",
+        "globals": "^14.0.0",
+        "ignore": "^5.2.0",
+        "import-fresh": "^3.2.1",
+        "js-yaml": "^4.1.1",
+        "minimatch": "^3.1.2",
+        "strip-json-comments": "^3.1.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@eslint/eslintrc/node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "dev": true,
+      "license": "Python-2.0"
+    },
+    "node_modules/@eslint/eslintrc/node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@eslint/eslintrc/node_modules/js-yaml": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz",
+      "integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/@eslint/eslintrc/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@eslint/eslintrc/node_modules/strip-json-comments": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+      "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@eslint/js": {
+      "version": "9.39.2",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.39.2.tgz",
+      "integrity": "sha512-q1mjIoW1VX4IvSocvM/vbTiveKC4k9eLrajNEuSsmjymSDEbpGddtpfOoN7YGAqBK3NG+uqo8ia4PDTt8buCYA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://eslint.org/donate"
+      }
+    },
+    "node_modules/@eslint/object-schema": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-2.1.7.tgz",
+      "integrity": "sha512-VtAOaymWVfZcmZbp6E2mympDIHvyjXs/12LqWYjVw6qjrfF+VK+fyG33kChz3nnK+SU5/NeHOqrTEHS8sXO3OA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/plugin-kit": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.4.1.tgz",
+      "integrity": "sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/core": "^0.17.0",
+        "levn": "^0.4.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
     "node_modules/@gar/promisify": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz",
@@ -727,6 +961,58 @@
         "@hapi/hoek": "^11.0.2"
       }
     },
+    "node_modules/@humanfs/core": {
+      "version": "0.19.1",
+      "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
+      "integrity": "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18.18.0"
+      }
+    },
+    "node_modules/@humanfs/node": {
+      "version": "0.16.7",
+      "resolved": "https://registry.npmjs.org/@humanfs/node/-/node-0.16.7.tgz",
+      "integrity": "sha512-/zUx+yOsIrG4Y43Eh2peDeKCxlRt/gET6aHfaKpuq267qXdYDFViVHfMaLyygZOnl0kGWxFIgsBy8QFuTLUXEQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@humanfs/core": "^0.19.1",
+        "@humanwhocodes/retry": "^0.4.0"
+      },
+      "engines": {
+        "node": ">=18.18.0"
+      }
+    },
+    "node_modules/@humanwhocodes/module-importer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
+      "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=12.22"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
+    "node_modules/@humanwhocodes/retry": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.4.3.tgz",
+      "integrity": "sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18.18"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
     "node_modules/@isaacs/cliui": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
@@ -1510,6 +1796,13 @@
         "@types/ms": "*"
       }
     },
+    "node_modules/@types/estree": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
+      "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/istanbul-lib-coverage": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.6.tgz",
@@ -1537,6 +1830,13 @@
         "@types/istanbul-lib-report": "*"
       }
     },
+    "node_modules/@types/json-schema": {
+      "version": "7.0.15",
+      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
+      "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/ms": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/@types/ms/-/ms-2.1.0.tgz",
@@ -1884,6 +2184,30 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/acorn": {
+      "version": "8.15.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
+      "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/acorn-jsx": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      }
+    },
     "node_modules/adler-32": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/adler-32/-/adler-32-1.3.1.tgz",
@@ -1958,6 +2282,23 @@
         "node": ">=8"
       }
     },
+    "node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
     "node_modules/ansi-escapes": {
       "version": "4.3.2",
       "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
@@ -2046,12 +2387,150 @@
         "sprintf-js": "~1.0.2"
       }
     },
+    "node_modules/array-buffer-byte-length": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.2.tgz",
+      "integrity": "sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "is-array-buffer": "^3.0.5"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/array-flatten": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
       "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==",
       "license": "MIT"
     },
+    "node_modules/array-includes": {
+      "version": "3.1.9",
+      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.9.tgz",
+      "integrity": "sha512-FmeCCAenzH0KH381SPT5FZmiA/TmpndpcaShhfgEN9eCVjnFBqq3l1xrI42y8+PPLI6hypzou4GXw00WHmPBLQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.24.0",
+        "es-object-atoms": "^1.1.1",
+        "get-intrinsic": "^1.3.0",
+        "is-string": "^1.1.1",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.findlast": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/array.prototype.findlast/-/array.prototype.findlast-1.2.5.tgz",
+      "integrity": "sha512-CVvd6FHg1Z3POpBLxO6E6zr+rSKEQ9L6rZHAaY7lLfhKsWYUBBOuMs0e9o24oopj6H+geRCX0YJ+TJLBK2eHyQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.flat": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.3.tgz",
+      "integrity": "sha512-rwG/ja1neyLqCuGZ5YYrznA62D4mZXg0i1cIskIUKSiqF3Cje9/wXAls9B9s1Wa2fomMsIv8czB8jZcPmxCXFg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.flatmap": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.3.tgz",
+      "integrity": "sha512-Y7Wt51eKJSyi80hFrJCePGGNo5ktJCslFuboqJsbf57CCPcm5zztluPlc4/aD8sWsKvlwatezpV4U1efk8kpjg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.tosorted": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/array.prototype.tosorted/-/array.prototype.tosorted-1.1.4.tgz",
+      "integrity": "sha512-p6Fx8B7b7ZhL/gmUsAy0D15WhvDccw3mnGNbZpi3pmeJdxtWsj2jEaI4Y6oo3XiHfzuSgPwKc04MYt6KgvC/wA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.3",
+        "es-errors": "^1.3.0",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/arraybuffer.prototype.slice": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.4.tgz",
+      "integrity": "sha512-BNoCY6SXXPQ7gF2opIP4GBE+Xw7U+pHMYKuzjgCN3GwiaIR09UUeKfheyIry77QtrCBlC0KK0q5/TER/tYh3PQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-buffer-byte-length": "^1.0.1",
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "is-array-buffer": "^3.0.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/asap": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
@@ -2065,12 +2544,38 @@
       "integrity": "sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==",
       "license": "MIT"
     },
+    "node_modules/async-function": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/async-function/-/async-function-1.0.0.tgz",
+      "integrity": "sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
       "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
       "license": "MIT"
     },
+    "node_modules/available-typed-arrays": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
+      "integrity": "sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "possible-typed-array-names": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/aws-ssl-profiles": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/aws-ssl-profiles/-/aws-ssl-profiles-1.1.2.tgz",
@@ -2461,6 +2966,25 @@
         "node": ">= 10"
       }
     },
+    "node_modules/call-bind": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.8.tgz",
+      "integrity": "sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.0",
+        "es-define-property": "^1.0.0",
+        "get-intrinsic": "^1.2.4",
+        "set-function-length": "^1.2.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/call-bind-apply-helpers": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
@@ -2932,6 +3456,60 @@
       "integrity": "sha512-NOx7YDFWEsM/fTRAJjRpPp8t+MKRVvniAg9wQlUKx20MFrPs73WLJhFf5iteqrxNYnsy924K3Iroh3yNHeYd2g==",
       "license": "MIT"
     },
+    "node_modules/data-view-buffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.2.tgz",
+      "integrity": "sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/data-view-byte-length": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/data-view-byte-length/-/data-view-byte-length-1.0.2.tgz",
+      "integrity": "sha512-tuhGbE6CfTM9+5ANGf+oQb72Ky/0+s3xKUpHvShfiz2RxMFgFPjsXuRLBVMtvMs15awe45SRb83D6wH4ew6wlQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/inspect-js"
+      }
+    },
+    "node_modules/data-view-byte-offset": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/data-view-byte-offset/-/data-view-byte-offset-1.0.1.tgz",
+      "integrity": "sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/dayjs": {
       "version": "1.11.19",
       "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.19.tgz",
@@ -2986,6 +3564,13 @@
         "node": ">=4.0.0"
       }
     },
+    "node_modules/deep-is": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
+      "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/deepmerge": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
@@ -2996,6 +3581,42 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/define-data-property": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
+      "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/define-properties": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz",
+      "integrity": "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.0.1",
+        "has-property-descriptors": "^1.0.0",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -3070,6 +3691,19 @@
         "wrappy": "1"
       }
     },
+    "node_modules/doctrine": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
+      "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "esutils": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/dotenv": {
       "version": "17.2.3",
       "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-17.2.3.tgz",
@@ -3212,6 +3846,75 @@
         "is-arrayish": "^0.2.1"
       }
     },
+    "node_modules/es-abstract": {
+      "version": "1.24.1",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.24.1.tgz",
+      "integrity": "sha512-zHXBLhP+QehSSbsS9Pt23Gg964240DPd6QCf8WpkqEXxQ7fhdZzYsocOr5u7apWonsS5EjZDmTF+/slGMyasvw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-buffer-byte-length": "^1.0.2",
+        "arraybuffer.prototype.slice": "^1.0.4",
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "data-view-buffer": "^1.0.2",
+        "data-view-byte-length": "^1.0.2",
+        "data-view-byte-offset": "^1.0.1",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "es-set-tostringtag": "^2.1.0",
+        "es-to-primitive": "^1.3.0",
+        "function.prototype.name": "^1.1.8",
+        "get-intrinsic": "^1.3.0",
+        "get-proto": "^1.0.1",
+        "get-symbol-description": "^1.1.0",
+        "globalthis": "^1.0.4",
+        "gopd": "^1.2.0",
+        "has-property-descriptors": "^1.0.2",
+        "has-proto": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "internal-slot": "^1.1.0",
+        "is-array-buffer": "^3.0.5",
+        "is-callable": "^1.2.7",
+        "is-data-view": "^1.0.2",
+        "is-negative-zero": "^2.0.3",
+        "is-regex": "^1.2.1",
+        "is-set": "^2.0.3",
+        "is-shared-array-buffer": "^1.0.4",
+        "is-string": "^1.1.1",
+        "is-typed-array": "^1.1.15",
+        "is-weakref": "^1.1.1",
+        "math-intrinsics": "^1.1.0",
+        "object-inspect": "^1.13.4",
+        "object-keys": "^1.1.1",
+        "object.assign": "^4.1.7",
+        "own-keys": "^1.0.1",
+        "regexp.prototype.flags": "^1.5.4",
+        "safe-array-concat": "^1.1.3",
+        "safe-push-apply": "^1.0.0",
+        "safe-regex-test": "^1.1.0",
+        "set-proto": "^1.0.0",
+        "stop-iteration-iterator": "^1.1.0",
+        "string.prototype.trim": "^1.2.10",
+        "string.prototype.trimend": "^1.0.9",
+        "string.prototype.trimstart": "^1.0.8",
+        "typed-array-buffer": "^1.0.3",
+        "typed-array-byte-length": "^1.0.3",
+        "typed-array-byte-offset": "^1.0.4",
+        "typed-array-length": "^1.0.7",
+        "unbox-primitive": "^1.1.0",
+        "which-typed-array": "^1.1.19"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/es-define-property": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
@@ -3230,6 +3933,34 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/es-iterator-helpers": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/es-iterator-helpers/-/es-iterator-helpers-1.2.2.tgz",
+      "integrity": "sha512-BrUQ0cPTB/IwXj23HtwHjS9n7O4h9FX94b4xc5zlTHxeLgTAdzYUDyy6KdExAl9lbN5rtfe44xpjpmj9grxs5w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.24.1",
+        "es-errors": "^1.3.0",
+        "es-set-tostringtag": "^2.1.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.3.0",
+        "globalthis": "^1.0.4",
+        "gopd": "^1.2.0",
+        "has-property-descriptors": "^1.0.2",
+        "has-proto": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "internal-slot": "^1.1.0",
+        "iterator.prototype": "^1.1.5",
+        "safe-array-concat": "^1.1.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/es-object-atoms": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
@@ -3257,6 +3988,37 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/es-shim-unscopables": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.1.0.tgz",
+      "integrity": "sha512-d9T8ucsEhh8Bi1woXCf+TIKDIROLG5WCkxg8geBCbvk22kzwC5G2OnXVMO6FUsvQlgUUXQ2itephWDLqDzbeCw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-to-primitive": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.3.0.tgz",
+      "integrity": "sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-callable": "^1.2.7",
+        "is-date-object": "^1.0.5",
+        "is-symbol": "^1.0.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/escalade": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
@@ -3283,6 +4045,336 @@
         "node": ">=8"
       }
     },
+    "node_modules/eslint": {
+      "version": "9.39.2",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.39.2.tgz",
+      "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.8.0",
+        "@eslint-community/regexpp": "^4.12.1",
+        "@eslint/config-array": "^0.21.1",
+        "@eslint/config-helpers": "^0.4.2",
+        "@eslint/core": "^0.17.0",
+        "@eslint/eslintrc": "^3.3.1",
+        "@eslint/js": "9.39.2",
+        "@eslint/plugin-kit": "^0.4.1",
+        "@humanfs/node": "^0.16.6",
+        "@humanwhocodes/module-importer": "^1.0.1",
+        "@humanwhocodes/retry": "^0.4.2",
+        "@types/estree": "^1.0.6",
+        "ajv": "^6.12.4",
+        "chalk": "^4.0.0",
+        "cross-spawn": "^7.0.6",
+        "debug": "^4.3.2",
+        "escape-string-regexp": "^4.0.0",
+        "eslint-scope": "^8.4.0",
+        "eslint-visitor-keys": "^4.2.1",
+        "espree": "^10.4.0",
+        "esquery": "^1.5.0",
+        "esutils": "^2.0.2",
+        "fast-deep-equal": "^3.1.3",
+        "file-entry-cache": "^8.0.0",
+        "find-up": "^5.0.0",
+        "glob-parent": "^6.0.2",
+        "ignore": "^5.2.0",
+        "imurmurhash": "^0.1.4",
+        "is-glob": "^4.0.0",
+        "json-stable-stringify-without-jsonify": "^1.0.1",
+        "lodash.merge": "^4.6.2",
+        "minimatch": "^3.1.2",
+        "natural-compare": "^1.4.0",
+        "optionator": "^0.9.3"
+      },
+      "bin": {
+        "eslint": "bin/eslint.js"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://eslint.org/donate"
+      },
+      "peerDependencies": {
+        "jiti": "*"
+      },
+      "peerDependenciesMeta": {
+        "jiti": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-config-prettier": {
+      "version": "10.1.8",
+      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-10.1.8.tgz",
+      "integrity": "sha512-82GZUjRS0p/jganf6q1rEO25VSoHH0hKPCTrgillPjdI/3bgBhAE1QzHrHTizjpRvy6pGAvKjDJtk2pF9NDq8w==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "bin": {
+        "eslint-config-prettier": "bin/cli.js"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint-config-prettier"
+      },
+      "peerDependencies": {
+        "eslint": ">=7.0.0"
+      }
+    },
+    "node_modules/eslint-plugin-prettier": {
+      "version": "5.5.5",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-5.5.5.tgz",
+      "integrity": "sha512-hscXkbqUZ2sPithAuLm5MXL+Wph+U7wHngPBv9OMWwlP8iaflyxpjTYZkmdgB4/vPIhemRlBEoLrH7UC1n7aUw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "prettier-linter-helpers": "^1.0.1",
+        "synckit": "^0.11.12"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint-plugin-prettier"
+      },
+      "peerDependencies": {
+        "@types/eslint": ">=8.0.0",
+        "eslint": ">=8.0.0",
+        "eslint-config-prettier": ">= 7.0.0 <10.0.0 || >=10.1.0",
+        "prettier": ">=3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/eslint": {
+          "optional": true
+        },
+        "eslint-config-prettier": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-plugin-react": {
+      "version": "7.37.5",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.37.5.tgz",
+      "integrity": "sha512-Qteup0SqU15kdocexFNAJMvCJEfa2xUKNV4CC1xsVMrIIqEy3SQ/rqyxCWNzfrd3/ldy6HMlD2e0JDVpDg2qIA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-includes": "^3.1.8",
+        "array.prototype.findlast": "^1.2.5",
+        "array.prototype.flatmap": "^1.3.3",
+        "array.prototype.tosorted": "^1.1.4",
+        "doctrine": "^2.1.0",
+        "es-iterator-helpers": "^1.2.1",
+        "estraverse": "^5.3.0",
+        "hasown": "^2.0.2",
+        "jsx-ast-utils": "^2.4.1 || ^3.0.0",
+        "minimatch": "^3.1.2",
+        "object.entries": "^1.1.9",
+        "object.fromentries": "^2.0.8",
+        "object.values": "^1.2.1",
+        "prop-types": "^15.8.1",
+        "resolve": "^2.0.0-next.5",
+        "semver": "^6.3.1",
+        "string.prototype.matchall": "^4.0.12",
+        "string.prototype.repeat": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      },
+      "peerDependencies": {
+        "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7"
+      }
+    },
+    "node_modules/eslint-plugin-react-hooks": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-7.0.1.tgz",
+      "integrity": "sha512-O0d0m04evaNzEPoSW+59Mezf8Qt0InfgGIBJnpC0h3NH/WjUAR7BIKUfysC6todmtiZ/A0oUVS8Gce0WhBrHsA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.24.4",
+        "@babel/parser": "^7.24.4",
+        "hermes-parser": "^0.25.1",
+        "zod": "^3.25.0 || ^4.0.0",
+        "zod-validation-error": "^3.5.0 || ^4.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0"
+      }
+    },
+    "node_modules/eslint-plugin-react-refresh": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-refresh/-/eslint-plugin-react-refresh-0.5.0.tgz",
+      "integrity": "sha512-ZYvmh7VfVgqR/7wR71I3Zl6hK/C5CcxdWYKZSpHawS5JCNgE4efhQWg/+/WPpgGAp9Ngp/rRZYyaIwmPQBq/lA==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "eslint": ">=9"
+      }
+    },
+    "node_modules/eslint-plugin-react/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/eslint-scope": {
+      "version": "8.4.0",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.4.0.tgz",
+      "integrity": "sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint-visitor-keys": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz",
+      "integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint/node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint/node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/eslint/node_modules/find-up": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+      "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "locate-path": "^6.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/eslint/node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/eslint/node_modules/locate-path": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-locate": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/eslint/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/eslint/node_modules/p-locate": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+      "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-limit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/espree": {
+      "version": "10.4.0",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-10.4.0.tgz",
+      "integrity": "sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "acorn": "^8.15.0",
+        "acorn-jsx": "^5.3.2",
+        "eslint-visitor-keys": "^4.2.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
     "node_modules/esprima": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
@@ -3297,6 +4389,52 @@
         "node": ">=4"
       }
     },
+    "node_modules/esquery": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.7.0.tgz",
+      "integrity": "sha512-Ap6G0WQwcU/LHsvLwON1fAQX9Zp0A2Y6Y/cJBl9r/JbW90Zyg4/zbG6zzKa2OTALELarYHmKu0GhpM5EO+7T0g==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "estraverse": "^5.1.0"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/esrecurse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
+      "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/esutils": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
+      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/etag": {
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
@@ -3425,6 +4563,20 @@
         "node": ">=12.0.0"
       }
     },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fast-diff": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.3.0.tgz",
+      "integrity": "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
     "node_modules/fast-json-stable-stringify": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
@@ -3432,6 +4584,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/fast-levenshtein": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
+      "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/fast-safe-stringify": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/fast-safe-stringify/-/fast-safe-stringify-2.1.1.tgz",
@@ -3455,6 +4614,19 @@
       "integrity": "sha512-OP2IUU6HeYKJi3i0z4A19kHMQoLVs4Hc+DPqqxI2h/DPZHTm/vjsfC6P0b4jCMy14XizLBqvndQ+UilD7707Jw==",
       "license": "MIT"
     },
+    "node_modules/file-entry-cache": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
+      "integrity": "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "flat-cache": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      }
+    },
     "node_modules/file-stream-rotator": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/file-stream-rotator/-/file-stream-rotator-0.6.1.tgz",
@@ -3515,6 +4687,27 @@
         "node": ">=8"
       }
     },
+    "node_modules/flat-cache": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-4.0.1.tgz",
+      "integrity": "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "flatted": "^3.2.9",
+        "keyv": "^4.5.4"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/flatted": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.3.tgz",
+      "integrity": "sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/fn.name": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/fn.name/-/fn.name-1.1.0.tgz",
@@ -3541,6 +4734,22 @@
         }
       }
     },
+    "node_modules/for-each": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.5.tgz",
+      "integrity": "sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-callable": "^1.2.7"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/foreground-child": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.1.tgz",
@@ -3681,6 +4890,37 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/function.prototype.name": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.8.tgz",
+      "integrity": "sha512-e5iwyodOHhbMr/yNrc7fDYG4qlbIvI5gajyzPnb5TCwyhjApznQh1BMFou9b30SevY43gCJKXycoCBjMbsuW0Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "functions-have-names": "^1.2.3",
+        "hasown": "^2.0.2",
+        "is-callable": "^1.2.7"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/functions-have-names": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
+      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/gauge": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/gauge/-/gauge-4.0.4.tgz",
@@ -3711,6 +4951,16 @@
         "is-property": "^1.0.2"
       }
     },
+    "node_modules/generator-function": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/generator-function/-/generator-function-2.0.1.tgz",
+      "integrity": "sha512-SFdFmIJi+ybC0vjlHN0ZGVGHc3lgE0DxPAT0djjVg+kjOnSqclqmj0KQ7ykTOLP6YxoqOvuAODGdcHJn+43q3g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
@@ -3791,6 +5041,24 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/get-symbol-description": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.1.0.tgz",
+      "integrity": "sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/github-from-package": {
       "version": "0.0.0",
       "resolved": "https://registry.npmjs.org/github-from-package/-/github-from-package-0.0.0.tgz",
@@ -3832,6 +5100,36 @@
         "node": ">= 6"
       }
     },
+    "node_modules/globals": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-14.0.0.tgz",
+      "integrity": "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/globalthis": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/globalthis/-/globalthis-1.0.4.tgz",
+      "integrity": "sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-properties": "^1.2.1",
+        "gopd": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/gopd": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
@@ -3851,6 +5149,19 @@
       "devOptional": true,
       "license": "ISC"
     },
+    "node_modules/has-bigints": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.1.0.tgz",
+      "integrity": "sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/has-flag": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
@@ -3861,6 +5172,35 @@
         "node": ">=4"
       }
     },
+    "node_modules/has-property-descriptors": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
+      "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-define-property": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-proto": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.2.0.tgz",
+      "integrity": "sha512-KIL7eQPfHQRC8+XluaIw7BHUwwqL19bQn4hzNgdr+1wXoU0KKj6rufu47lhY7KbJR2C6T6+PfyN0Ea7wkSS+qQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/has-symbols": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
@@ -3907,6 +5247,23 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/hermes-estree": {
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/hermes-estree/-/hermes-estree-0.25.1.tgz",
+      "integrity": "sha512-0wUoCcLp+5Ev5pDW2OriHC2MJCbwLwuRx+gAqMTOkGKJJiBCLjtrvy4PWUGn6MIVefecRpzoOZ/UV6iGdOr+Cw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/hermes-parser": {
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/hermes-parser/-/hermes-parser-0.25.1.tgz",
+      "integrity": "sha512-6pEjquH3rqaI6cYAXYPcz9MS4rY6R4ngRgrgfDshRptUZIc3lw0MCIJIGDj9++mfySOuPTHB4nrSW99BCvOPIA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hermes-estree": "0.25.1"
+      }
+    },
     "node_modules/html-escaper": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz",
@@ -4072,6 +5429,16 @@
       ],
       "license": "BSD-3-Clause"
     },
+    "node_modules/ignore": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
+      "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
     "node_modules/ignore-by-default": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/ignore-by-default/-/ignore-by-default-1.0.1.tgz",
@@ -4079,6 +5446,33 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/import-fresh": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
+      "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/import-fresh/node_modules/resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/import-local": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/import-local/-/import-local-3.2.0.tgz",
@@ -4159,6 +5553,21 @@
       "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
       "license": "ISC"
     },
+    "node_modules/internal-slot": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.1.0.tgz",
+      "integrity": "sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "hasown": "^2.0.2",
+        "side-channel": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/ip-address": {
       "version": "10.1.0",
       "resolved": "https://registry.npmjs.org/ip-address/-/ip-address-10.1.0.tgz",
@@ -4178,6 +5587,24 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/is-array-buffer": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz",
+      "integrity": "sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "get-intrinsic": "^1.2.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-arrayish": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
@@ -4185,6 +5612,42 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/is-async-function": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-async-function/-/is-async-function-2.1.1.tgz",
+      "integrity": "sha512-9dgM/cZBnNvjzaMYHVoxxfPj2QXt22Ev7SuuPrs+xav0ukGB0S6d4ydZdEiM48kLx5kDV+QBPrpVnFyefL8kkQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "async-function": "^1.0.0",
+        "call-bound": "^1.0.3",
+        "get-proto": "^1.0.1",
+        "has-tostringtag": "^1.0.2",
+        "safe-regex-test": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-bigint": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.1.0.tgz",
+      "integrity": "sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-bigints": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-binary-path": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -4198,6 +5661,87 @@
         "node": ">=8"
       }
     },
+    "node_modules/is-boolean-object": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.2.2.tgz",
+      "integrity": "sha512-wa56o2/ElJMYqjCjGkXri7it5FbebW5usLw/nPmCMs5DeZ7eziSYZhSmPRn0txqeW4LnAmQQU7FgqLpsEFKM4A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-callable": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
+      "integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-core-module": {
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
+      "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-data-view": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-data-view/-/is-data-view-1.0.2.tgz",
+      "integrity": "sha512-RKtWF8pGmS87i2D6gqQu/l7EYRlVdfzemCJN/P3UOs//x1QE7mfhvzHIApBTRf7axvT6DMGwSwBXYCT0nfB9xw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "get-intrinsic": "^1.2.6",
+        "is-typed-array": "^1.1.13"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-date-object": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.1.0.tgz",
+      "integrity": "sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -4208,6 +5752,22 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-finalizationregistry": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-finalizationregistry/-/is-finalizationregistry-1.1.1.tgz",
+      "integrity": "sha512-1pC6N8qWJbWoPtEjgcL2xyhQOP491EQjeUo3qTKcmV8YSDDJrOepfG8pcC7h/QgnQHYSv0mJ3Z/ZWxmatVrysg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-fullwidth-code-point": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
@@ -4228,6 +5788,26 @@
         "node": ">=6"
       }
     },
+    "node_modules/is-generator-function": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.1.2.tgz",
+      "integrity": "sha512-upqt1SkGkODW9tsGNG5mtXTXtECizwtS2kA161M+gJPc1xdb/Ax629af6YrTwcOeQHbewrPNlE5Dx7kzvXTizA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.4",
+        "generator-function": "^2.0.0",
+        "get-proto": "^1.0.1",
+        "has-tostringtag": "^1.0.2",
+        "safe-regex-test": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-glob": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
@@ -4248,6 +5828,32 @@
       "license": "MIT",
       "optional": true
     },
+    "node_modules/is-map": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.3.tgz",
+      "integrity": "sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-negative-zero": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.3.tgz",
+      "integrity": "sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-number": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
@@ -4258,12 +5864,77 @@
         "node": ">=0.12.0"
       }
     },
+    "node_modules/is-number-object": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.1.1.tgz",
+      "integrity": "sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-property": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/is-property/-/is-property-1.0.2.tgz",
       "integrity": "sha512-Ks/IoX00TtClbGQr4TWXemAnktAQvYB7HzcCxDGqEZU6oCmb2INHuOoKxbtR+HFkmYWBKv/dOZtGRiAjDhj92g==",
       "license": "MIT"
     },
+    "node_modules/is-regex": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.2.1.tgz",
+      "integrity": "sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "gopd": "^1.2.0",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-set": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-set/-/is-set-2.0.3.tgz",
+      "integrity": "sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-shared-array-buffer": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.4.tgz",
+      "integrity": "sha512-ISWac8drv4ZGfwKl5slpHG9OwPNty4jOWPRIhBpxOoD+hqITiwuipOQ2bNthAzwA3B4fIjO4Nln74N0S9byq8A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-stream": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
@@ -4276,6 +5947,110 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/is-string": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.1.1.tgz",
+      "integrity": "sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-symbol": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.1.1.tgz",
+      "integrity": "sha512-9gGx6GTtCQM73BgmHQXfDmLtfjjTUDSyoxTCbp5WtoixAhfgsDirWIcVQ/IHpvI5Vgd5i/J5F7B9cN/WlVbC/w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "has-symbols": "^1.1.0",
+        "safe-regex-test": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-typed-array": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.15.tgz",
+      "integrity": "sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "which-typed-array": "^1.1.16"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-weakmap": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.2.tgz",
+      "integrity": "sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-weakref": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.1.1.tgz",
+      "integrity": "sha512-6i9mGWSlqzNMEqpCp93KwRS1uUOodk2OJ6b+sq7ZPDSy2WuI5NFIxp/254TytR8ftefexkWn5xNiHUNpPOfSew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-weakset": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/is-weakset/-/is-weakset-2.0.4.tgz",
+      "integrity": "sha512-mfcwb6IzQyOKTs84CQMrOwW4gQcaTOAWJ0zzJCl2WSPDrWk/OzDaImWFH3djXhb24g4eudZfLRozAvPGw4d9hQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "get-intrinsic": "^1.2.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/isarray": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
+      "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -4402,6 +6177,24 @@
         "node": ">=8"
       }
     },
+    "node_modules/iterator.prototype": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/iterator.prototype/-/iterator.prototype-1.1.5.tgz",
+      "integrity": "sha512-H0dkQoCa3b2VEeKQBOxFph+JAbcrQdE7KC0UkqwpLmv2EC4P41QXP+rqo9wYodACiG5/WM5s9oDApTU8utwj9g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.6",
+        "get-proto": "^1.0.0",
+        "has-symbols": "^1.1.0",
+        "set-function-name": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/jackspeak": {
       "version": "3.4.3",
       "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
@@ -5200,6 +6993,13 @@
         "node": ">=6"
       }
     },
+    "node_modules/json-buffer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
+      "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/json-parse-even-better-errors": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
@@ -5207,6 +7007,20 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json-stable-stringify-without-jsonify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
+      "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/json5": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
@@ -5248,6 +7062,22 @@
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
       "license": "MIT"
     },
+    "node_modules/jsx-ast-utils": {
+      "version": "3.3.5",
+      "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz",
+      "integrity": "sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-includes": "^3.1.6",
+        "array.prototype.flat": "^1.3.1",
+        "object.assign": "^4.1.4",
+        "object.values": "^1.1.6"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
     "node_modules/jwa": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/jwa/-/jwa-2.0.1.tgz",
@@ -5269,6 +7099,16 @@
         "safe-buffer": "^5.0.1"
       }
     },
+    "node_modules/keyv": {
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
+      "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "json-buffer": "3.0.1"
+      }
+    },
     "node_modules/kuler": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/kuler/-/kuler-2.0.0.tgz",
@@ -5285,6 +7125,20 @@
         "node": ">=6"
       }
     },
+    "node_modules/levn": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
+      "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "prelude-ls": "^1.2.1",
+        "type-check": "~0.4.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
     "node_modules/lines-and-columns": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
@@ -5347,6 +7201,13 @@
       "integrity": "sha512-0wJxfxH1wgO3GrbuP+dTTk7op+6L41QCXbGINEmD+ny/G/eCqGzxyCsh7159S+mgDDcoarnBw6PC1PS5+wUGgw==",
       "license": "MIT"
     },
+    "node_modules/lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/lodash.once": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz",
@@ -5382,6 +7243,19 @@
       "integrity": "sha512-mNAgZ1GmyNhD7AuqnTG3/VQ26o760+ZYBPKjPvugO8+nLbYfX6TVpJPseBvopbdY+qpZ/lKUnmEc1LeZYS3QAA==",
       "license": "Apache-2.0"
     },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
     "node_modules/lru-cache": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
@@ -6021,6 +7895,91 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/object-keys": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
+      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/object.assign": {
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.7.tgz",
+      "integrity": "sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0",
+        "has-symbols": "^1.1.0",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object.entries": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.9.tgz",
+      "integrity": "sha512-8u/hfXFRBD1O0hPUjioLhoWFHRmt6tKA4/vZPyckBr18l1KE9uHrFaFaUi8MDRTpi4uak2goyPTSNJLXX2k2Hw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/object.fromentries": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.8.tgz",
+      "integrity": "sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object.values": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.2.1.tgz",
+      "integrity": "sha512-gXah6aZrcUxjWg2zR2MwouP2eHlCBzdV4pygudehaKXSGW4v2AsRQUK+lwwXhii6KFZcunEnmSUoYp5CXibxtA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/on-finished": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
@@ -6067,6 +8026,42 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/optionator": {
+      "version": "0.9.4",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
+      "integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "deep-is": "^0.1.3",
+        "fast-levenshtein": "^2.0.6",
+        "levn": "^0.4.1",
+        "prelude-ls": "^1.2.1",
+        "type-check": "^0.4.0",
+        "word-wrap": "^1.2.5"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/own-keys": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/own-keys/-/own-keys-1.0.1.tgz",
+      "integrity": "sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "get-intrinsic": "^1.2.6",
+        "object-keys": "^1.1.1",
+        "safe-push-apply": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/p-limit": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
@@ -6145,6 +8140,19 @@
       "dev": true,
       "license": "BlueOak-1.0.0"
     },
+    "node_modules/parent-module": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "callsites": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/parse-json": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
@@ -6203,6 +8211,13 @@
         "node": ">=8"
       }
     },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/path-scurry": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
@@ -6292,6 +8307,16 @@
         "node": ">=8"
       }
     },
+    "node_modules/possible-typed-array-names": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz",
+      "integrity": "sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/prebuild-install": {
       "version": "7.1.3",
       "resolved": "https://registry.npmjs.org/prebuild-install/-/prebuild-install-7.1.3.tgz",
@@ -6318,6 +8343,46 @@
         "node": ">=10"
       }
     },
+    "node_modules/prelude-ls": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
+      "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/prettier": {
+      "version": "3.8.1",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.8.1.tgz",
+      "integrity": "sha512-UOnG6LftzbdaHZcKoPFtOcCKztrQ57WkHDeRD9t/PTQtmT0NHSeWWepj6pS0z/N7+08BHFDQVUrfmfMRcZwbMg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
+    "node_modules/prettier-linter-helpers": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.1.tgz",
+      "integrity": "sha512-SxToR7P8Y2lWmv/kTzVLC1t/GDI2WGjMwNhLLE9qtH8Q13C+aEmuRlzDst4Up4s0Wc8sF2M+J57iB3cMLqftfg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-diff": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/pretty-format": {
       "version": "30.2.0",
       "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-30.2.0.tgz",
@@ -6367,6 +8432,25 @@
         "node": ">=10"
       }
     },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
+    "node_modules/prop-types/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/proxy-addr": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -6403,6 +8487,16 @@
         "once": "^1.3.1"
       }
     },
+    "node_modules/punycode": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
+      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/pure-rand": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/pure-rand/-/pure-rand-7.0.1.tgz",
@@ -6520,6 +8614,50 @@
         "node": ">=8.10.0"
       }
     },
+    "node_modules/reflect.getprototypeof": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
+      "integrity": "sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.9",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.7",
+        "get-proto": "^1.0.1",
+        "which-builtin-type": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/regexp.prototype.flags": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.4.tgz",
+      "integrity": "sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-errors": "^1.3.0",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "set-function-name": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/require-directory": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
@@ -6530,6 +8668,24 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/resolve": {
+      "version": "2.0.0-next.5",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.5.tgz",
+      "integrity": "sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-core-module": "^2.13.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/resolve-cwd": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/resolve-cwd/-/resolve-cwd-3.0.0.tgz",
@@ -6586,6 +8742,26 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/safe-array-concat": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.1.3.tgz",
+      "integrity": "sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.2",
+        "get-intrinsic": "^1.2.6",
+        "has-symbols": "^1.1.0",
+        "isarray": "^2.0.5"
+      },
+      "engines": {
+        "node": ">=0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/safe-buffer": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
@@ -6606,6 +8782,41 @@
       ],
       "license": "MIT"
     },
+    "node_modules/safe-push-apply": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/safe-push-apply/-/safe-push-apply-1.0.0.tgz",
+      "integrity": "sha512-iKE9w/Z7xCzUMIZqdBsp6pEQvwuEebH4vdpjcDWnyzaI6yl6O9FHvVpmGelvEHNsoY6wGblkxR6Zty/h00WiSA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "isarray": "^2.0.5"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/safe-regex-test": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.1.0.tgz",
+      "integrity": "sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "is-regex": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/safe-stable-stringify": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/safe-stable-stringify/-/safe-stable-stringify-2.5.0.tgz",
@@ -6784,6 +8995,55 @@
       "license": "ISC",
       "optional": true
     },
+    "node_modules/set-function-length": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
+      "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.4",
+        "gopd": "^1.0.1",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/set-function-name": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/set-function-name/-/set-function-name-2.0.2.tgz",
+      "integrity": "sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "functions-have-names": "^1.2.3",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/set-proto": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/set-proto/-/set-proto-1.0.0.tgz",
+      "integrity": "sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/setprototypeof": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
@@ -7143,6 +9403,20 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/stop-iteration-iterator": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.1.0.tgz",
+      "integrity": "sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "internal-slot": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/streamsearch": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",
@@ -7205,6 +9479,104 @@
         "node": ">=8"
       }
     },
+    "node_modules/string.prototype.matchall": {
+      "version": "4.0.12",
+      "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.12.tgz",
+      "integrity": "sha512-6CC9uyBL+/48dYizRf7H7VAYCMCNTBeM78x/VTUe9bFEaxBepPJDa1Ow99LqI/1yF7kuy7Q3cQsYMrcjGUcskA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.6",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.6",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "internal-slot": "^1.1.0",
+        "regexp.prototype.flags": "^1.5.3",
+        "set-function-name": "^2.0.2",
+        "side-channel": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.repeat": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/string.prototype.repeat/-/string.prototype.repeat-1.0.0.tgz",
+      "integrity": "sha512-0u/TldDbKD8bFCQ/4f5+mNRrXwZ8hg2w7ZR8wa16e8z9XpePWl3eGEcUD0OXpEH/VJH/2G3gjUtR3ZOiBe2S/w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.17.5"
+      }
+    },
+    "node_modules/string.prototype.trim": {
+      "version": "1.2.10",
+      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.10.tgz",
+      "integrity": "sha512-Rs66F0P/1kedk5lyYyH9uBzuiI/kNRmwJAR9quK6VOtIpZ2G+hMZd+HQbbv25MgCA6gEffoMZYxlTod4WcdrKA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.2",
+        "define-data-property": "^1.1.4",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-object-atoms": "^1.0.0",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.trimend": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.9.tgz",
+      "integrity": "sha512-G7Ok5C6E/j4SGfyLCloXTrngQIQU3PWtXGst3yM7Bea9FRURf1S42ZHlZZtsNque2FN2PoUhfZXYLNWwEr4dLQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.2",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.trimstart": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.8.tgz",
+      "integrity": "sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/strip-ansi": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
@@ -7347,10 +9719,23 @@
         "node": ">=4"
       }
     },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/synckit": {
-      "version": "0.11.11",
-      "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.11.11.tgz",
-      "integrity": "sha512-MeQTA1r0litLUf0Rp/iisCaL8761lKAZHaimlbGK4j0HysC4PLfqygQj9srcs0m2RdtDYnF8UuYyKpbjHYp7Jw==",
+      "version": "0.11.12",
+      "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.11.12.tgz",
+      "integrity": "sha512-Bh7QjT8/SuKUIfObSXNHNSK6WHo6J1tHCqJsuaFDP7gP0fkzSfTxI8y85JrppZ0h8l0maIgc2tfuZQ6/t3GtnQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -7524,6 +9909,19 @@
         "node": "*"
       }
     },
+    "node_modules/type-check": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
+      "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "prelude-ls": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
     "node_modules/type-detect": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/type-detect/-/type-detect-4.0.8.tgz",
@@ -7560,6 +9958,103 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/typed-array-buffer": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.3.tgz",
+      "integrity": "sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "is-typed-array": "^1.1.14"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/typed-array-byte-length": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-length/-/typed-array-byte-length-1.0.3.tgz",
+      "integrity": "sha512-BaXgOuIxz8n8pIq3e7Atg/7s+DpiYrxn4vdot3w9KbnBhcRQq6o3xemQdIfynqSeXeDrF32x+WvfzmOjPiY9lg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "for-each": "^0.3.3",
+        "gopd": "^1.2.0",
+        "has-proto": "^1.2.0",
+        "is-typed-array": "^1.1.14"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/typed-array-byte-offset": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-offset/-/typed-array-byte-offset-1.0.4.tgz",
+      "integrity": "sha512-bTlAFB/FBYMcuX81gbL4OcpH5PmlFHqlCCpAl8AlEzMz5k53oNDvN8p1PNOWLEmI2x4orp3raOFB51tv9X+MFQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "for-each": "^0.3.3",
+        "gopd": "^1.2.0",
+        "has-proto": "^1.2.0",
+        "is-typed-array": "^1.1.15",
+        "reflect.getprototypeof": "^1.0.9"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/typed-array-length": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.7.tgz",
+      "integrity": "sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "for-each": "^0.3.3",
+        "gopd": "^1.0.1",
+        "is-typed-array": "^1.1.13",
+        "possible-typed-array-names": "^1.0.0",
+        "reflect.getprototypeof": "^1.0.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/unbox-primitive": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.1.0.tgz",
+      "integrity": "sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-bigints": "^1.0.2",
+        "has-symbols": "^1.1.0",
+        "which-boxed-primitive": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/undefsafe": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/undefsafe/-/undefsafe-2.0.5.tgz",
@@ -7668,6 +10163,16 @@
         "browserslist": ">= 4.21.0"
       }
     },
+    "node_modules/uri-js": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
+      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "punycode": "^2.1.0"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -7751,6 +10256,95 @@
         "node": ">= 8"
       }
     },
+    "node_modules/which-boxed-primitive": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.1.1.tgz",
+      "integrity": "sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-bigint": "^1.1.0",
+        "is-boolean-object": "^1.2.1",
+        "is-number-object": "^1.1.1",
+        "is-string": "^1.1.1",
+        "is-symbol": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/which-builtin-type": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/which-builtin-type/-/which-builtin-type-1.2.1.tgz",
+      "integrity": "sha512-6iBczoX+kDQ7a3+YJBnh3T+KZRxM/iYNPXicqk66/Qfm1b93iu+yOImkg0zHbj5LNOcNv1TEADiZ0xa34B4q6Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "function.prototype.name": "^1.1.6",
+        "has-tostringtag": "^1.0.2",
+        "is-async-function": "^2.0.0",
+        "is-date-object": "^1.1.0",
+        "is-finalizationregistry": "^1.1.0",
+        "is-generator-function": "^1.0.10",
+        "is-regex": "^1.2.1",
+        "is-weakref": "^1.0.2",
+        "isarray": "^2.0.5",
+        "which-boxed-primitive": "^1.1.0",
+        "which-collection": "^1.0.2",
+        "which-typed-array": "^1.1.16"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/which-collection": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/which-collection/-/which-collection-1.0.2.tgz",
+      "integrity": "sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-map": "^2.0.3",
+        "is-set": "^2.0.3",
+        "is-weakmap": "^2.0.2",
+        "is-weakset": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/which-typed-array": {
+      "version": "1.1.20",
+      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.20.tgz",
+      "integrity": "sha512-LYfpUkmqwl0h9A2HL09Mms427Q1RZWuOHsukfVcKRq9q95iQxdw0ix1JQrqbcDR9PH1QDwf5Qo8OZb5lksZ8Xg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "for-each": "^0.3.5",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/wide-align": {
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.5.tgz",
@@ -7843,6 +10437,16 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/word-wrap": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
+      "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/wrap-ansi": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
@@ -7991,6 +10595,30 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/zod": {
+      "version": "4.3.6",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-4.3.6.tgz",
+      "integrity": "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
+    },
+    "node_modules/zod-validation-error": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/zod-validation-error/-/zod-validation-error-4.0.2.tgz",
+      "integrity": "sha512-Q6/nZLe6jxuU80qb/4uJ4t5v2VEZ44lzQjPDhYJNztRQ4wyWc6VF3D3Kb/fAuPetZQnhS3hnajCf9CsWesghLQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "zod": "^3.25.0 || ^4.0.0"
+      }
     }
   }
 }
diff --git a/backend/package.json b/backend/package.json
index 5e57085..17d83e4 100644
--- a/backend/package.json
+++ b/backend/package.json
@@ -7,7 +7,11 @@
     "dev": "nodemon server.js",
     "create-indexes": "node create_indexes.js",
     "check-indexes": "node create_indexes.js check",
-    "drop-indexes": "node create_indexes.js drop"
+    "drop-indexes": "node create_indexes.js drop",
+    "lint": "eslint . --ext js --report-unused-disable-directives --max-warnings 0",
+    "lint:fix": "eslint . --ext js --fix",
+    "format": "prettier --write \"**/*.js\"",
+    "format:check": "prettier --check \"**/*.js\""
   },
   "dependencies": {
     "axios": "^1.13.4",
@@ -31,8 +35,15 @@
     "xlsx": "^0.18.5"
   },
   "devDependencies": {
+    "eslint": "^9.39.2",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.5",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.5.0",
     "jest": "^30.2.0",
     "nodemon": "^3.0.1",
+    "prettier": "^3.8.1",
     "supertest": "^7.1.4"
   }
 }
diff --git a/frontend/.eslintignore b/frontend/.eslintignore
new file mode 100644
index 0000000..b467b7c
--- /dev/null
+++ b/frontend/.eslintignore
@@ -0,0 +1,15 @@
+# 构建输出
+dist/
+build/
+
+# 依赖
+node_modules/
+
+# Vite 缓存
+.vite/
+
+# 日志
+*.log
+
+# 其他
+.DS_Store
diff --git a/frontend/.eslintrc.cjs b/frontend/.eslintrc.cjs
new file mode 100644
index 0000000..752f912
--- /dev/null
+++ b/frontend/.eslintrc.cjs
@@ -0,0 +1,26 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:react-hooks/recommended',
+    'plugin:prettier/recommended'
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+  settings: { react: { version: '18.2' } },
+  plugins: ['react-refresh'],
+  rules: {
+    'react/jsx-no-target-blank': 'off',
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true }
+    ],
+    'no-unused-vars': ['error', { argsIgnorePattern: '^_', varsIgnorePattern: '^_' }],
+    'no-console': ['warn', { allow: ['warn', 'error'] }],
+    'react/prop-types': 'off',
+    'react/display-name': 'off'
+  }
+}
diff --git a/frontend/.prettierrc b/frontend/.prettierrc
new file mode 100644
index 0000000..c8ad74e
--- /dev/null
+++ b/frontend/.prettierrc
@@ -0,0 +1,10 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "printWidth": 100,
+  "bracketSpacing": true,
+  "arrowParens": "avoid",
+  "endOfLine": "lf"
+}
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 6e4c51a..0e75af1 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -26,7 +26,14 @@
         "@testing-library/react": "^16.3.1",
         "@testing-library/user-event": "^14.6.1",
         "@vitejs/plugin-react": "^4.0.3",
+        "eslint": "^9.39.2",
+        "eslint-config-prettier": "^10.1.8",
+        "eslint-plugin-prettier": "^5.5.5",
+        "eslint-plugin-react": "^7.37.5",
+        "eslint-plugin-react-hooks": "^7.0.1",
+        "eslint-plugin-react-refresh": "^0.5.0",
         "jsdom": "^27.3.0",
+        "prettier": "^3.8.1",
         "terser": "^5.44.1",
         "vite": "^4.4.9",
         "vitest": "^4.0.16"
@@ -246,6 +253,7 @@
       "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.5",
@@ -594,6 +602,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=18"
       },
@@ -637,6 +646,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -1101,6 +1111,202 @@
         "node": ">=12"
       }
     },
+    "node_modules/@eslint-community/eslint-utils": {
+      "version": "4.9.1",
+      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.9.1.tgz",
+      "integrity": "sha512-phrYmNiYppR7znFEdqgfWHXR6NCkZEK7hwWDHZUjit/2/U0r6XvkDl0SYnoM51Hq7FhCGdLDT6zxCCOY1hexsQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "eslint-visitor-keys": "^3.4.3"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
+      }
+    },
+    "node_modules/@eslint-community/eslint-utils/node_modules/eslint-visitor-keys": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@eslint-community/regexpp": {
+      "version": "4.12.2",
+      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.2.tgz",
+      "integrity": "sha512-EriSTlt5OC9/7SXkRSCAhfSxxoSUgBm33OH+IkwbdpgoqsSsUg7y3uh+IICI/Qg4BBWr3U2i39RpmycbxMq4ew==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
+      }
+    },
+    "node_modules/@eslint/config-array": {
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.21.1.tgz",
+      "integrity": "sha512-aw1gNayWpdI/jSYVgzN5pL0cfzU02GT3NBpeT/DXbx1/1x7ZKxFPd9bwrzygx/qiwIQiJ1sw/zD8qY/kRvlGHA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/object-schema": "^2.1.7",
+        "debug": "^4.3.1",
+        "minimatch": "^3.1.2"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/config-helpers": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.4.2.tgz",
+      "integrity": "sha512-gBrxN88gOIf3R7ja5K9slwNayVcZgK6SOUORm2uBzTeIEfeVaIhOpCtTox3P6R7o2jLFwLFTLnC7kU/RGcYEgw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/core": "^0.17.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/core": {
+      "version": "0.17.0",
+      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.17.0.tgz",
+      "integrity": "sha512-yL/sLrpmtDaFEiUj1osRP4TI2MDz1AddJL+jZ7KSqvBuliN4xqYY54IfdN8qD8Toa6g1iloph1fxQNkjOxrrpQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@types/json-schema": "^7.0.15"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/eslintrc": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.3.3.tgz",
+      "integrity": "sha512-Kr+LPIUVKz2qkx1HAMH8q1q6azbqBAsXJUxBl/ODDuVPX45Z9DfwB8tPjTi6nNZ8BuM3nbJxC5zCAg5elnBUTQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ajv": "^6.12.4",
+        "debug": "^4.3.2",
+        "espree": "^10.0.1",
+        "globals": "^14.0.0",
+        "ignore": "^5.2.0",
+        "import-fresh": "^3.2.1",
+        "js-yaml": "^4.1.1",
+        "minimatch": "^3.1.2",
+        "strip-json-comments": "^3.1.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@eslint/js": {
+      "version": "9.39.2",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.39.2.tgz",
+      "integrity": "sha512-q1mjIoW1VX4IvSocvM/vbTiveKC4k9eLrajNEuSsmjymSDEbpGddtpfOoN7YGAqBK3NG+uqo8ia4PDTt8buCYA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://eslint.org/donate"
+      }
+    },
+    "node_modules/@eslint/object-schema": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-2.1.7.tgz",
+      "integrity": "sha512-VtAOaymWVfZcmZbp6E2mympDIHvyjXs/12LqWYjVw6qjrfF+VK+fyG33kChz3nnK+SU5/NeHOqrTEHS8sXO3OA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/plugin-kit": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.4.1.tgz",
+      "integrity": "sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/core": "^0.17.0",
+        "levn": "^0.4.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@humanfs/core": {
+      "version": "0.19.1",
+      "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
+      "integrity": "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18.18.0"
+      }
+    },
+    "node_modules/@humanfs/node": {
+      "version": "0.16.7",
+      "resolved": "https://registry.npmjs.org/@humanfs/node/-/node-0.16.7.tgz",
+      "integrity": "sha512-/zUx+yOsIrG4Y43Eh2peDeKCxlRt/gET6aHfaKpuq267qXdYDFViVHfMaLyygZOnl0kGWxFIgsBy8QFuTLUXEQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@humanfs/core": "^0.19.1",
+        "@humanwhocodes/retry": "^0.4.0"
+      },
+      "engines": {
+        "node": ">=18.18.0"
+      }
+    },
+    "node_modules/@humanwhocodes/module-importer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
+      "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=12.22"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
+    "node_modules/@humanwhocodes/retry": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.4.3.tgz",
+      "integrity": "sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18.18"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.13",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
@@ -1180,6 +1386,19 @@
         "three": ">= 0.159.0"
       }
     },
+    "node_modules/@pkgr/core": {
+      "version": "0.2.9",
+      "resolved": "https://registry.npmjs.org/@pkgr/core/-/core-0.2.9.tgz",
+      "integrity": "sha512-QNqXyfVS2wm9hweSYD2O7F0G06uurj9kZ96TRQE5Y9hU7+tgdZwIkbAKc5Ocy1HxEY2kuDQa6cQ1WRs/O5LFKA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.20.0 || ^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/pkgr"
+      }
+    },
     "node_modules/@rc-component/async-validator": {
       "version": "5.0.4",
       "resolved": "https://registry.npmjs.org/@rc-component/async-validator/-/async-validator-5.0.4.tgz",
@@ -1460,6 +1679,7 @@
       "resolved": "https://registry.npmjs.org/@react-three/fiber/-/fiber-8.18.0.tgz",
       "integrity": "sha512-FYZZqD0UUHUswKz3LQl2Z7H24AhD14XGTsIRw3SJaXUxyfVMi+1yiZGmqTcPt/CkPpdU7rrxqcyQ1zJE5DjvIQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.17.8",
         "@types/react-reconciler": "^0.26.7",
@@ -1861,6 +2081,27 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@testing-library/dom": {
+      "version": "10.4.1",
+      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.1.tgz",
+      "integrity": "sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.10.4",
+        "@babel/runtime": "^7.12.5",
+        "@types/aria-query": "^5.0.1",
+        "aria-query": "5.3.0",
+        "dom-accessibility-api": "^0.5.9",
+        "lz-string": "^1.5.0",
+        "picocolors": "1.1.1",
+        "pretty-format": "^27.0.2"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@testing-library/jest-dom": {
       "version": "6.9.1",
       "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.9.1.tgz",
@@ -1936,6 +2177,13 @@
       "integrity": "sha512-vJmvvwFxYuGnF2axRtPYocag6Clbb5YS7kLL+SO/TeVFzHqDIWrNKYtcsPMibjDx9O+bu+psAy9NKfWklassUA==",
       "license": "MIT"
     },
+    "node_modules/@types/aria-query": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
+      "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -2012,6 +2260,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/json-schema": {
+      "version": "7.0.15",
+      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
+      "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/offscreencanvas": {
       "version": "2019.7.3",
       "resolved": "https://registry.npmjs.org/@types/offscreencanvas/-/offscreencanvas-2019.7.3.tgz",
@@ -2023,6 +2278,7 @@
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.9.tgz",
       "integrity": "sha512-Lpo8kgb/igvMIPeNV2rsYKTgaORYdO1XGVZ4Qz3akwOj0ySGYMPlQWa8BaLn0G63D1aSaAQ5ldR06wCpChQCjA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "csstype": "^3.2.2"
       }
@@ -2047,6 +2303,7 @@
       "resolved": "https://registry.npmjs.org/@types/three/-/three-0.182.0.tgz",
       "integrity": "sha512-WByN9V3Sbwbe2OkWuSGyoqQO8Du6yhYaXtXLoA5FkKTUJorZ+yOHBZ35zUUPQXlAKABZmbYp5oAqpA4RBjtJ/Q==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@dimforge/rapier3d-compat": "~0.12.0",
         "@tweenjs/tween.js": "~23.1.3",
@@ -2198,6 +2455,7 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -2205,6 +2463,16 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/acorn-jsx": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      }
+    },
     "node_modules/adler-32": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/adler-32/-/adler-32-1.3.1.tgz",
@@ -2224,6 +2492,49 @@
         "node": ">= 14"
       }
     },
+    "node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
     "node_modules/antd": {
       "version": "5.29.2",
       "resolved": "https://registry.npmjs.org/antd/-/antd-5.29.2.tgz",
@@ -2309,6 +2620,13 @@
         "react-dom": ">=16.0.0"
       }
     },
+    "node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "dev": true,
+      "license": "Python-2.0"
+    },
     "node_modules/aria-query": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
@@ -2319,6 +2637,144 @@
         "dequal": "^2.0.3"
       }
     },
+    "node_modules/array-buffer-byte-length": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.2.tgz",
+      "integrity": "sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "is-array-buffer": "^3.0.5"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array-includes": {
+      "version": "3.1.9",
+      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.9.tgz",
+      "integrity": "sha512-FmeCCAenzH0KH381SPT5FZmiA/TmpndpcaShhfgEN9eCVjnFBqq3l1xrI42y8+PPLI6hypzou4GXw00WHmPBLQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.24.0",
+        "es-object-atoms": "^1.1.1",
+        "get-intrinsic": "^1.3.0",
+        "is-string": "^1.1.1",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.findlast": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/array.prototype.findlast/-/array.prototype.findlast-1.2.5.tgz",
+      "integrity": "sha512-CVvd6FHg1Z3POpBLxO6E6zr+rSKEQ9L6rZHAaY7lLfhKsWYUBBOuMs0e9o24oopj6H+geRCX0YJ+TJLBK2eHyQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.flat": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.3.tgz",
+      "integrity": "sha512-rwG/ja1neyLqCuGZ5YYrznA62D4mZXg0i1cIskIUKSiqF3Cje9/wXAls9B9s1Wa2fomMsIv8czB8jZcPmxCXFg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.flatmap": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.3.tgz",
+      "integrity": "sha512-Y7Wt51eKJSyi80hFrJCePGGNo5ktJCslFuboqJsbf57CCPcm5zztluPlc4/aD8sWsKvlwatezpV4U1efk8kpjg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.tosorted": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/array.prototype.tosorted/-/array.prototype.tosorted-1.1.4.tgz",
+      "integrity": "sha512-p6Fx8B7b7ZhL/gmUsAy0D15WhvDccw3mnGNbZpi3pmeJdxtWsj2jEaI4Y6oo3XiHfzuSgPwKc04MYt6KgvC/wA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.3",
+        "es-errors": "^1.3.0",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/arraybuffer.prototype.slice": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.4.tgz",
+      "integrity": "sha512-BNoCY6SXXPQ7gF2opIP4GBE+Xw7U+pHMYKuzjgCN3GwiaIR09UUeKfheyIry77QtrCBlC0KK0q5/TER/tYh3PQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-buffer-byte-length": "^1.0.1",
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "is-array-buffer": "^3.0.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/assertion-error": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-2.0.1.tgz",
@@ -2329,12 +2785,38 @@
         "node": ">=12"
       }
     },
+    "node_modules/async-function": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/async-function/-/async-function-1.0.0.tgz",
+      "integrity": "sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
       "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
       "license": "MIT"
     },
+    "node_modules/available-typed-arrays": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
+      "integrity": "sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "possible-typed-array-names": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/axios": {
       "version": "1.13.2",
       "resolved": "https://registry.npmjs.org/axios/-/axios-1.13.2.tgz",
@@ -2346,6 +2828,13 @@
         "proxy-from-env": "^1.1.0"
       }
     },
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/base64-js": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
@@ -2385,6 +2874,17 @@
         "require-from-string": "^2.0.2"
       }
     },
+    "node_modules/brace-expansion": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
     "node_modules/browserslist": {
       "version": "4.28.1",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.1.tgz",
@@ -2405,6 +2905,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -2450,6 +2951,25 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/call-bind": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.8.tgz",
+      "integrity": "sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.0",
+        "es-define-property": "^1.0.0",
+        "get-intrinsic": "^1.2.4",
+        "set-function-length": "^1.2.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/call-bind-apply-helpers": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
@@ -2463,6 +2983,33 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/call-bound": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
+      "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "get-intrinsic": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/callsites": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/camera-controls": {
       "version": "2.10.1",
       "resolved": "https://registry.npmjs.org/camera-controls/-/camera-controls-2.10.1.tgz",
@@ -2516,6 +3063,23 @@
         "node": ">=18"
       }
     },
+    "node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
     "node_modules/classnames": {
       "version": "2.5.1",
       "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
@@ -2540,6 +3104,26 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/combined-stream": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -2565,6 +3149,13 @@
       "integrity": "sha512-VRhuHOLoKYOy4UbilLbUzbYg93XLjv2PncJC50EuTWPA3gaja1UjBsUP/D/9/juV3vQFr6XBEzn9KCAHdUvOHw==",
       "license": "MIT"
     },
+    "node_modules/concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/convert-source-map": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
@@ -2681,11 +3272,66 @@
         "node": ">=20"
       }
     },
+    "node_modules/data-view-buffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.2.tgz",
+      "integrity": "sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/data-view-byte-length": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/data-view-byte-length/-/data-view-byte-length-1.0.2.tgz",
+      "integrity": "sha512-tuhGbE6CfTM9+5ANGf+oQb72Ky/0+s3xKUpHvShfiz2RxMFgFPjsXuRLBVMtvMs15awe45SRb83D6wH4ew6wlQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/inspect-js"
+      }
+    },
+    "node_modules/data-view-byte-offset": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/data-view-byte-offset/-/data-view-byte-offset-1.0.1.tgz",
+      "integrity": "sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/dayjs": {
       "version": "1.11.19",
       "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.19.tgz",
       "integrity": "sha512-t5EcLVS6QPBNqM2z8fakk/NKel+Xzshgt8FFKAn+qwlD1pzZWxh0nVCrvFK7ZDb6XucZeF9z8C7CBWTRIVApAw==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/debug": {
       "version": "4.4.3",
@@ -2712,6 +3358,49 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/deep-is": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
+      "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/define-data-property": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
+      "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/define-properties": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz",
+      "integrity": "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.0.1",
+        "has-property-descriptors": "^1.0.0",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -2740,6 +3429,26 @@
         "webgl-constants": "^1.1.1"
       }
     },
+    "node_modules/doctrine": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
+      "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "esutils": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/dom-accessibility-api": {
+      "version": "0.5.16",
+      "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
+      "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/draco3d": {
       "version": "1.5.7",
       "resolved": "https://registry.npmjs.org/draco3d/-/draco3d-1.5.7.tgz",
@@ -2780,6 +3489,75 @@
         "url": "https://github.com/fb55/entities?sponsor=1"
       }
     },
+    "node_modules/es-abstract": {
+      "version": "1.24.1",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.24.1.tgz",
+      "integrity": "sha512-zHXBLhP+QehSSbsS9Pt23Gg964240DPd6QCf8WpkqEXxQ7fhdZzYsocOr5u7apWonsS5EjZDmTF+/slGMyasvw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-buffer-byte-length": "^1.0.2",
+        "arraybuffer.prototype.slice": "^1.0.4",
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "data-view-buffer": "^1.0.2",
+        "data-view-byte-length": "^1.0.2",
+        "data-view-byte-offset": "^1.0.1",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "es-set-tostringtag": "^2.1.0",
+        "es-to-primitive": "^1.3.0",
+        "function.prototype.name": "^1.1.8",
+        "get-intrinsic": "^1.3.0",
+        "get-proto": "^1.0.1",
+        "get-symbol-description": "^1.1.0",
+        "globalthis": "^1.0.4",
+        "gopd": "^1.2.0",
+        "has-property-descriptors": "^1.0.2",
+        "has-proto": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "internal-slot": "^1.1.0",
+        "is-array-buffer": "^3.0.5",
+        "is-callable": "^1.2.7",
+        "is-data-view": "^1.0.2",
+        "is-negative-zero": "^2.0.3",
+        "is-regex": "^1.2.1",
+        "is-set": "^2.0.3",
+        "is-shared-array-buffer": "^1.0.4",
+        "is-string": "^1.1.1",
+        "is-typed-array": "^1.1.15",
+        "is-weakref": "^1.1.1",
+        "math-intrinsics": "^1.1.0",
+        "object-inspect": "^1.13.4",
+        "object-keys": "^1.1.1",
+        "object.assign": "^4.1.7",
+        "own-keys": "^1.0.1",
+        "regexp.prototype.flags": "^1.5.4",
+        "safe-array-concat": "^1.1.3",
+        "safe-push-apply": "^1.0.0",
+        "safe-regex-test": "^1.1.0",
+        "set-proto": "^1.0.0",
+        "stop-iteration-iterator": "^1.1.0",
+        "string.prototype.trim": "^1.2.10",
+        "string.prototype.trimend": "^1.0.9",
+        "string.prototype.trimstart": "^1.0.8",
+        "typed-array-buffer": "^1.0.3",
+        "typed-array-byte-length": "^1.0.3",
+        "typed-array-byte-offset": "^1.0.4",
+        "typed-array-length": "^1.0.7",
+        "unbox-primitive": "^1.1.0",
+        "which-typed-array": "^1.1.19"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/es-define-property": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
@@ -2798,6 +3576,34 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/es-iterator-helpers": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/es-iterator-helpers/-/es-iterator-helpers-1.2.2.tgz",
+      "integrity": "sha512-BrUQ0cPTB/IwXj23HtwHjS9n7O4h9FX94b4xc5zlTHxeLgTAdzYUDyy6KdExAl9lbN5rtfe44xpjpmj9grxs5w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.24.1",
+        "es-errors": "^1.3.0",
+        "es-set-tostringtag": "^2.1.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.3.0",
+        "globalthis": "^1.0.4",
+        "gopd": "^1.2.0",
+        "has-property-descriptors": "^1.0.2",
+        "has-proto": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "internal-slot": "^1.1.0",
+        "iterator.prototype": "^1.1.5",
+        "safe-array-concat": "^1.1.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/es-module-lexer": {
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.7.0.tgz",
@@ -2832,6 +3638,37 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/es-shim-unscopables": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.1.0.tgz",
+      "integrity": "sha512-d9T8ucsEhh8Bi1woXCf+TIKDIROLG5WCkxg8geBCbvk22kzwC5G2OnXVMO6FUsvQlgUUXQ2itephWDLqDzbeCw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-to-primitive": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.3.0.tgz",
+      "integrity": "sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-callable": "^1.2.7",
+        "is-date-object": "^1.0.5",
+        "is-symbol": "^1.0.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/esbuild": {
       "version": "0.18.20",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.18.20.tgz",
@@ -2880,6 +3717,275 @@
         "node": ">=6"
       }
     },
+    "node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/eslint": {
+      "version": "9.39.2",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.39.2.tgz",
+      "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.8.0",
+        "@eslint-community/regexpp": "^4.12.1",
+        "@eslint/config-array": "^0.21.1",
+        "@eslint/config-helpers": "^0.4.2",
+        "@eslint/core": "^0.17.0",
+        "@eslint/eslintrc": "^3.3.1",
+        "@eslint/js": "9.39.2",
+        "@eslint/plugin-kit": "^0.4.1",
+        "@humanfs/node": "^0.16.6",
+        "@humanwhocodes/module-importer": "^1.0.1",
+        "@humanwhocodes/retry": "^0.4.2",
+        "@types/estree": "^1.0.6",
+        "ajv": "^6.12.4",
+        "chalk": "^4.0.0",
+        "cross-spawn": "^7.0.6",
+        "debug": "^4.3.2",
+        "escape-string-regexp": "^4.0.0",
+        "eslint-scope": "^8.4.0",
+        "eslint-visitor-keys": "^4.2.1",
+        "espree": "^10.4.0",
+        "esquery": "^1.5.0",
+        "esutils": "^2.0.2",
+        "fast-deep-equal": "^3.1.3",
+        "file-entry-cache": "^8.0.0",
+        "find-up": "^5.0.0",
+        "glob-parent": "^6.0.2",
+        "ignore": "^5.2.0",
+        "imurmurhash": "^0.1.4",
+        "is-glob": "^4.0.0",
+        "json-stable-stringify-without-jsonify": "^1.0.1",
+        "lodash.merge": "^4.6.2",
+        "minimatch": "^3.1.2",
+        "natural-compare": "^1.4.0",
+        "optionator": "^0.9.3"
+      },
+      "bin": {
+        "eslint": "bin/eslint.js"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://eslint.org/donate"
+      },
+      "peerDependencies": {
+        "jiti": "*"
+      },
+      "peerDependenciesMeta": {
+        "jiti": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-config-prettier": {
+      "version": "10.1.8",
+      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-10.1.8.tgz",
+      "integrity": "sha512-82GZUjRS0p/jganf6q1rEO25VSoHH0hKPCTrgillPjdI/3bgBhAE1QzHrHTizjpRvy6pGAvKjDJtk2pF9NDq8w==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "bin": {
+        "eslint-config-prettier": "bin/cli.js"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint-config-prettier"
+      },
+      "peerDependencies": {
+        "eslint": ">=7.0.0"
+      }
+    },
+    "node_modules/eslint-plugin-prettier": {
+      "version": "5.5.5",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-5.5.5.tgz",
+      "integrity": "sha512-hscXkbqUZ2sPithAuLm5MXL+Wph+U7wHngPBv9OMWwlP8iaflyxpjTYZkmdgB4/vPIhemRlBEoLrH7UC1n7aUw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "prettier-linter-helpers": "^1.0.1",
+        "synckit": "^0.11.12"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint-plugin-prettier"
+      },
+      "peerDependencies": {
+        "@types/eslint": ">=8.0.0",
+        "eslint": ">=8.0.0",
+        "eslint-config-prettier": ">= 7.0.0 <10.0.0 || >=10.1.0",
+        "prettier": ">=3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/eslint": {
+          "optional": true
+        },
+        "eslint-config-prettier": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-plugin-react": {
+      "version": "7.37.5",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.37.5.tgz",
+      "integrity": "sha512-Qteup0SqU15kdocexFNAJMvCJEfa2xUKNV4CC1xsVMrIIqEy3SQ/rqyxCWNzfrd3/ldy6HMlD2e0JDVpDg2qIA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-includes": "^3.1.8",
+        "array.prototype.findlast": "^1.2.5",
+        "array.prototype.flatmap": "^1.3.3",
+        "array.prototype.tosorted": "^1.1.4",
+        "doctrine": "^2.1.0",
+        "es-iterator-helpers": "^1.2.1",
+        "estraverse": "^5.3.0",
+        "hasown": "^2.0.2",
+        "jsx-ast-utils": "^2.4.1 || ^3.0.0",
+        "minimatch": "^3.1.2",
+        "object.entries": "^1.1.9",
+        "object.fromentries": "^2.0.8",
+        "object.values": "^1.2.1",
+        "prop-types": "^15.8.1",
+        "resolve": "^2.0.0-next.5",
+        "semver": "^6.3.1",
+        "string.prototype.matchall": "^4.0.12",
+        "string.prototype.repeat": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      },
+      "peerDependencies": {
+        "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7"
+      }
+    },
+    "node_modules/eslint-plugin-react-hooks": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-7.0.1.tgz",
+      "integrity": "sha512-O0d0m04evaNzEPoSW+59Mezf8Qt0InfgGIBJnpC0h3NH/WjUAR7BIKUfysC6todmtiZ/A0oUVS8Gce0WhBrHsA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.24.4",
+        "@babel/parser": "^7.24.4",
+        "hermes-parser": "^0.25.1",
+        "zod": "^3.25.0 || ^4.0.0",
+        "zod-validation-error": "^3.5.0 || ^4.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0"
+      }
+    },
+    "node_modules/eslint-plugin-react-refresh": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-refresh/-/eslint-plugin-react-refresh-0.5.0.tgz",
+      "integrity": "sha512-ZYvmh7VfVgqR/7wR71I3Zl6hK/C5CcxdWYKZSpHawS5JCNgE4efhQWg/+/WPpgGAp9Ngp/rRZYyaIwmPQBq/lA==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "eslint": ">=9"
+      }
+    },
+    "node_modules/eslint-scope": {
+      "version": "8.4.0",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.4.0.tgz",
+      "integrity": "sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint-visitor-keys": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz",
+      "integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/espree": {
+      "version": "10.4.0",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-10.4.0.tgz",
+      "integrity": "sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "acorn": "^8.15.0",
+        "acorn-jsx": "^5.3.2",
+        "eslint-visitor-keys": "^4.2.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/esquery": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.7.0.tgz",
+      "integrity": "sha512-Ap6G0WQwcU/LHsvLwON1fAQX9Zp0A2Y6Y/cJBl9r/JbW90Zyg4/zbG6zzKa2OTALELarYHmKu0GhpM5EO+7T0g==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "estraverse": "^5.1.0"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/esrecurse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
+      "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
     "node_modules/estree-walker": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
@@ -2890,6 +3996,16 @@
         "@types/estree": "^1.0.0"
       }
     },
+    "node_modules/esutils": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
+      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/expect-type": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/expect-type/-/expect-type-1.3.0.tgz",
@@ -2900,6 +4016,34 @@
         "node": ">=12.0.0"
       }
     },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fast-diff": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.3.0.tgz",
+      "integrity": "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/fast-json-stable-stringify": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fast-levenshtein": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
+      "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/fdir": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
@@ -2924,6 +4068,57 @@
       "integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==",
       "license": "MIT"
     },
+    "node_modules/file-entry-cache": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
+      "integrity": "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "flat-cache": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      }
+    },
+    "node_modules/find-up": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+      "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "locate-path": "^6.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/flat-cache": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-4.0.1.tgz",
+      "integrity": "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "flatted": "^3.2.9",
+        "keyv": "^4.5.4"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/flatted": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.3.tgz",
+      "integrity": "sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/follow-redirects": {
       "version": "1.15.11",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.11.tgz",
@@ -2944,6 +4139,22 @@
         }
       }
     },
+    "node_modules/for-each": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.5.tgz",
+      "integrity": "sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-callable": "^1.2.7"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/form-data": {
       "version": "4.0.5",
       "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.5.tgz",
@@ -2993,6 +4204,47 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/function.prototype.name": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.8.tgz",
+      "integrity": "sha512-e5iwyodOHhbMr/yNrc7fDYG4qlbIvI5gajyzPnb5TCwyhjApznQh1BMFou9b30SevY43gCJKXycoCBjMbsuW0Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "functions-have-names": "^1.2.3",
+        "hasown": "^2.0.2",
+        "is-callable": "^1.2.7"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/functions-have-names": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
+      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/generator-function": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/generator-function/-/generator-function-2.0.1.tgz",
+      "integrity": "sha512-SFdFmIJi+ybC0vjlHN0ZGVGHc3lgE0DxPAT0djjVg+kjOnSqclqmj0KQ7ykTOLP6YxoqOvuAODGdcHJn+43q3g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
@@ -3040,6 +4292,67 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/get-symbol-description": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.1.0.tgz",
+      "integrity": "sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/globals": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-14.0.0.tgz",
+      "integrity": "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/globalthis": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/globalthis/-/globalthis-1.0.4.tgz",
+      "integrity": "sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-properties": "^1.2.1",
+        "gopd": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/glsl-noise": {
       "version": "0.0.0",
       "resolved": "https://registry.npmjs.org/glsl-noise/-/glsl-noise-0.0.0.tgz",
@@ -3058,6 +4371,58 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/has-bigints": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.1.0.tgz",
+      "integrity": "sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/has-property-descriptors": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
+      "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-define-property": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-proto": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.2.0.tgz",
+      "integrity": "sha512-KIL7eQPfHQRC8+XluaIw7BHUwwqL19bQn4hzNgdr+1wXoU0KKj6rufu47lhY7KbJR2C6T6+PfyN0Ea7wkSS+qQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/has-symbols": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
@@ -3097,6 +4462,23 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/hermes-estree": {
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/hermes-estree/-/hermes-estree-0.25.1.tgz",
+      "integrity": "sha512-0wUoCcLp+5Ev5pDW2OriHC2MJCbwLwuRx+gAqMTOkGKJJiBCLjtrvy4PWUGn6MIVefecRpzoOZ/UV6iGdOr+Cw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/hermes-parser": {
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/hermes-parser/-/hermes-parser-0.25.1.tgz",
+      "integrity": "sha512-6pEjquH3rqaI6cYAXYPcz9MS4rY6R4ngRgrgfDshRptUZIc3lw0MCIJIGDj9++mfySOuPTHB4nrSW99BCvOPIA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hermes-estree": "0.25.1"
+      }
+    },
     "node_modules/hls.js": {
       "version": "1.6.15",
       "resolved": "https://registry.npmjs.org/hls.js/-/hls.js-1.6.15.tgz",
@@ -3177,12 +4559,49 @@
       ],
       "license": "BSD-3-Clause"
     },
+    "node_modules/ignore": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
+      "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
     "node_modules/immediate": {
       "version": "3.0.6",
       "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
       "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==",
       "license": "MIT"
     },
+    "node_modules/import-fresh": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
+      "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/imurmurhash": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
+      "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8.19"
+      }
+    },
     "node_modules/indent-string": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
@@ -3193,12 +4612,264 @@
         "node": ">=8"
       }
     },
+    "node_modules/internal-slot": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.1.0.tgz",
+      "integrity": "sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "hasown": "^2.0.2",
+        "side-channel": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/is-array-buffer": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz",
+      "integrity": "sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "get-intrinsic": "^1.2.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-async-function": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-async-function/-/is-async-function-2.1.1.tgz",
+      "integrity": "sha512-9dgM/cZBnNvjzaMYHVoxxfPj2QXt22Ev7SuuPrs+xav0ukGB0S6d4ydZdEiM48kLx5kDV+QBPrpVnFyefL8kkQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "async-function": "^1.0.0",
+        "call-bound": "^1.0.3",
+        "get-proto": "^1.0.1",
+        "has-tostringtag": "^1.0.2",
+        "safe-regex-test": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-bigint": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.1.0.tgz",
+      "integrity": "sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-bigints": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-boolean-object": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.2.2.tgz",
+      "integrity": "sha512-wa56o2/ElJMYqjCjGkXri7it5FbebW5usLw/nPmCMs5DeZ7eziSYZhSmPRn0txqeW4LnAmQQU7FgqLpsEFKM4A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-callable": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
+      "integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-core-module": {
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
+      "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-data-view": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-data-view/-/is-data-view-1.0.2.tgz",
+      "integrity": "sha512-RKtWF8pGmS87i2D6gqQu/l7EYRlVdfzemCJN/P3UOs//x1QE7mfhvzHIApBTRf7axvT6DMGwSwBXYCT0nfB9xw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "get-intrinsic": "^1.2.6",
+        "is-typed-array": "^1.1.13"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-date-object": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.1.0.tgz",
+      "integrity": "sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-finalizationregistry": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-finalizationregistry/-/is-finalizationregistry-1.1.1.tgz",
+      "integrity": "sha512-1pC6N8qWJbWoPtEjgcL2xyhQOP491EQjeUo3qTKcmV8YSDDJrOepfG8pcC7h/QgnQHYSv0mJ3Z/ZWxmatVrysg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-generator-function": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.1.2.tgz",
+      "integrity": "sha512-upqt1SkGkODW9tsGNG5mtXTXtECizwtS2kA161M+gJPc1xdb/Ax629af6YrTwcOeQHbewrPNlE5Dx7kzvXTizA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.4",
+        "generator-function": "^2.0.0",
+        "get-proto": "^1.0.1",
+        "has-tostringtag": "^1.0.2",
+        "safe-regex-test": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-map": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.3.tgz",
+      "integrity": "sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-mobile": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/is-mobile/-/is-mobile-5.0.0.tgz",
       "integrity": "sha512-Tz/yndySvLAEXh+Uk8liFCxOwVH6YutuR74utvOcu7I9Di+DwM0mtdPVZNaVvvBUM2OXxne/NhOs1zAO7riusQ==",
       "license": "MIT"
     },
+    "node_modules/is-negative-zero": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.3.tgz",
+      "integrity": "sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-number-object": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.1.1.tgz",
+      "integrity": "sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-potential-custom-element-name": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
@@ -3212,12 +4883,182 @@
       "integrity": "sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ==",
       "license": "MIT"
     },
+    "node_modules/is-regex": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.2.1.tgz",
+      "integrity": "sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "gopd": "^1.2.0",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-set": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-set/-/is-set-2.0.3.tgz",
+      "integrity": "sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-shared-array-buffer": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.4.tgz",
+      "integrity": "sha512-ISWac8drv4ZGfwKl5slpHG9OwPNty4jOWPRIhBpxOoD+hqITiwuipOQ2bNthAzwA3B4fIjO4Nln74N0S9byq8A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-string": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.1.1.tgz",
+      "integrity": "sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-symbol": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.1.1.tgz",
+      "integrity": "sha512-9gGx6GTtCQM73BgmHQXfDmLtfjjTUDSyoxTCbp5WtoixAhfgsDirWIcVQ/IHpvI5Vgd5i/J5F7B9cN/WlVbC/w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "has-symbols": "^1.1.0",
+        "safe-regex-test": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-typed-array": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.15.tgz",
+      "integrity": "sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "which-typed-array": "^1.1.16"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-weakmap": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.2.tgz",
+      "integrity": "sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-weakref": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.1.1.tgz",
+      "integrity": "sha512-6i9mGWSlqzNMEqpCp93KwRS1uUOodk2OJ6b+sq7ZPDSy2WuI5NFIxp/254TytR8ftefexkWn5xNiHUNpPOfSew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-weakset": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/is-weakset/-/is-weakset-2.0.4.tgz",
+      "integrity": "sha512-mfcwb6IzQyOKTs84CQMrOwW4gQcaTOAWJ0zzJCl2WSPDrWk/OzDaImWFH3djXhb24g4eudZfLRozAvPGw4d9hQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "get-intrinsic": "^1.2.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/isarray": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
+      "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
       "license": "ISC"
     },
+    "node_modules/iterator.prototype": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/iterator.prototype/-/iterator.prototype-1.1.5.tgz",
+      "integrity": "sha512-H0dkQoCa3b2VEeKQBOxFph+JAbcrQdE7KC0UkqwpLmv2EC4P41QXP+rqo9wYodACiG5/WM5s9oDApTU8utwj9g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.6",
+        "get-proto": "^1.0.0",
+        "has-symbols": "^1.1.0",
+        "set-function-name": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/its-fine": {
       "version": "1.2.5",
       "resolved": "https://registry.npmjs.org/its-fine/-/its-fine-1.2.5.tgz",
@@ -3245,12 +5086,26 @@
       "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
       "license": "MIT"
     },
+    "node_modules/js-yaml": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz",
+      "integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
     "node_modules/jsdom": {
       "version": "27.3.0",
       "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-27.3.0.tgz",
       "integrity": "sha512-GtldT42B8+jefDUC4yUKAvsaOrH7PDHmZxZXNgF2xMmymjUbRYJvpAybZAKEmXDGTM0mCsz8duOa4vTm5AY2Kg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@acemir/cssom": "^0.9.28",
         "@asamuzakjp/dom-selector": "^6.7.6",
@@ -3298,6 +5153,27 @@
         "node": ">=6"
       }
     },
+    "node_modules/json-buffer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
+      "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json-stable-stringify-without-jsonify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
+      "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/json2mq": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/json2mq/-/json2mq-0.2.0.tgz",
@@ -3320,6 +5196,46 @@
         "node": ">=6"
       }
     },
+    "node_modules/jsx-ast-utils": {
+      "version": "3.3.5",
+      "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz",
+      "integrity": "sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-includes": "^3.1.6",
+        "array.prototype.flat": "^1.3.1",
+        "object.assign": "^4.1.4",
+        "object.values": "^1.1.6"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/keyv": {
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
+      "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "json-buffer": "3.0.1"
+      }
+    },
+    "node_modules/levn": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
+      "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "prelude-ls": "^1.2.1",
+        "type-check": "~0.4.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
     "node_modules/lie": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
@@ -3329,6 +5245,29 @@
         "immediate": "~3.0.5"
       }
     },
+    "node_modules/locate-path": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-locate": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -3351,6 +5290,16 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lz-string": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
+      "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "lz-string": "bin/bin.js"
+      }
+    },
     "node_modules/maath": {
       "version": "0.10.8",
       "resolved": "https://registry.npmjs.org/maath/-/maath-0.10.8.tgz",
@@ -3433,6 +5382,19 @@
         "node": ">=4"
       }
     },
+    "node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -3459,6 +5421,13 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/natural-compare": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
+      "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/node-releases": {
       "version": "2.0.27",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.27.tgz",
@@ -3475,6 +5444,104 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/object-inspect": {
+      "version": "1.13.4",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
+      "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object-keys": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
+      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/object.assign": {
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.7.tgz",
+      "integrity": "sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0",
+        "has-symbols": "^1.1.0",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object.entries": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.9.tgz",
+      "integrity": "sha512-8u/hfXFRBD1O0hPUjioLhoWFHRmt6tKA4/vZPyckBr18l1KE9uHrFaFaUi8MDRTpi4uak2goyPTSNJLXX2k2Hw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/object.fromentries": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.8.tgz",
+      "integrity": "sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object.values": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.2.1.tgz",
+      "integrity": "sha512-gXah6aZrcUxjWg2zR2MwouP2eHlCBzdV4pygudehaKXSGW4v2AsRQUK+lwwXhii6KFZcunEnmSUoYp5CXibxtA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/obug": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/obug/-/obug-2.1.1.tgz",
@@ -3486,12 +5553,93 @@
       ],
       "license": "MIT"
     },
+    "node_modules/optionator": {
+      "version": "0.9.4",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
+      "integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "deep-is": "^0.1.3",
+        "fast-levenshtein": "^2.0.6",
+        "levn": "^0.4.1",
+        "prelude-ls": "^1.2.1",
+        "type-check": "^0.4.0",
+        "word-wrap": "^1.2.5"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/own-keys": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/own-keys/-/own-keys-1.0.1.tgz",
+      "integrity": "sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "get-intrinsic": "^1.2.6",
+        "object-keys": "^1.1.1",
+        "safe-push-apply": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/p-limit": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "yocto-queue": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-locate": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+      "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-limit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/papaparse": {
       "version": "5.5.3",
       "resolved": "https://registry.npmjs.org/papaparse/-/papaparse-5.5.3.tgz",
       "integrity": "sha512-5QvjGxYVjxO59MGU2lHVYpRWBBtKHnlIAcSe1uNFCkkptUh63NFRj0FJQm7nR67puEruUci/ZkjmEFrjCAyP4A==",
       "license": "MIT"
     },
+    "node_modules/parent-module": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "callsites": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/parse5": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-8.0.0.tgz",
@@ -3505,6 +5653,16 @@
         "url": "https://github.com/inikulin/parse5?sponsor=1"
       }
     },
+    "node_modules/path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/path-key": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
@@ -3514,6 +5672,13 @@
         "node": ">=8"
       }
     },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/pathe": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
@@ -3534,6 +5699,7 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -3541,6 +5707,16 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/possible-typed-array-names": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz",
+      "integrity": "sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.5.6",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
@@ -3576,6 +5752,81 @@
       "integrity": "sha512-choctRBIV9EMT9WGAZHn3V7t0Z2pMQyl0EZE6pFc/6ml3ssw7Dlf/oAOvFwjm1HVsqfQN8GfeFyJ+d8tRzqueQ==",
       "license": "ISC"
     },
+    "node_modules/prelude-ls": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
+      "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/prettier": {
+      "version": "3.8.1",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.8.1.tgz",
+      "integrity": "sha512-UOnG6LftzbdaHZcKoPFtOcCKztrQ57WkHDeRD9t/PTQtmT0NHSeWWepj6pS0z/N7+08BHFDQVUrfmfMRcZwbMg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
+    "node_modules/prettier-linter-helpers": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.1.tgz",
+      "integrity": "sha512-SxToR7P8Y2lWmv/kTzVLC1t/GDI2WGjMwNhLLE9qtH8Q13C+aEmuRlzDst4Up4s0Wc8sF2M+J57iB3cMLqftfg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-diff": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/pretty-format": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
+      "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1",
+        "ansi-styles": "^5.0.0",
+        "react-is": "^17.0.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/pretty-format/node_modules/ansi-styles": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/pretty-format/node_modules/react-is": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/promise-worker-transferable": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/promise-worker-transferable/-/promise-worker-transferable-1.0.4.tgz",
@@ -4230,6 +6481,7 @@
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
       "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -4254,6 +6506,7 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
       "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0",
         "scheduler": "^0.23.2"
@@ -4364,6 +6617,50 @@
         "node": ">=8"
       }
     },
+    "node_modules/reflect.getprototypeof": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
+      "integrity": "sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.9",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.7",
+        "get-proto": "^1.0.1",
+        "which-builtin-type": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/regexp.prototype.flags": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.4.tgz",
+      "integrity": "sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-errors": "^1.3.0",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "set-function-name": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/require-from-string": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
@@ -4379,6 +6676,34 @@
       "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==",
       "license": "MIT"
     },
+    "node_modules/resolve": {
+      "version": "2.0.0-next.5",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.5.tgz",
+      "integrity": "sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-core-module": "^2.13.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/rollup": {
       "version": "3.29.5",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.5.tgz",
@@ -4396,6 +6721,61 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/safe-array-concat": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.1.3.tgz",
+      "integrity": "sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.2",
+        "get-intrinsic": "^1.2.6",
+        "has-symbols": "^1.1.0",
+        "isarray": "^2.0.5"
+      },
+      "engines": {
+        "node": ">=0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/safe-push-apply": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/safe-push-apply/-/safe-push-apply-1.0.0.tgz",
+      "integrity": "sha512-iKE9w/Z7xCzUMIZqdBsp6pEQvwuEebH4vdpjcDWnyzaI6yl6O9FHvVpmGelvEHNsoY6wGblkxR6Zty/h00WiSA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "isarray": "^2.0.5"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/safe-regex-test": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.1.0.tgz",
+      "integrity": "sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "is-regex": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
@@ -4444,6 +6824,55 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/set-function-length": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
+      "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.4",
+        "gopd": "^1.0.1",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/set-function-name": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/set-function-name/-/set-function-name-2.0.2.tgz",
+      "integrity": "sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "functions-have-names": "^1.2.3",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/set-proto": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/set-proto/-/set-proto-1.0.0.tgz",
+      "integrity": "sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -4465,6 +6894,82 @@
         "node": ">=8"
       }
     },
+    "node_modules/side-channel": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
+      "integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3",
+        "side-channel-list": "^1.0.0",
+        "side-channel-map": "^1.0.1",
+        "side-channel-weakmap": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-list": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz",
+      "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-map": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
+      "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-weakmap": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
+      "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3",
+        "side-channel-map": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/siginfo": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/siginfo/-/siginfo-2.0.0.tgz",
@@ -4555,12 +7060,124 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/stop-iteration-iterator": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.1.0.tgz",
+      "integrity": "sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "internal-slot": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/string-convert": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/string-convert/-/string-convert-0.2.1.tgz",
       "integrity": "sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A==",
       "license": "MIT"
     },
+    "node_modules/string.prototype.matchall": {
+      "version": "4.0.12",
+      "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.12.tgz",
+      "integrity": "sha512-6CC9uyBL+/48dYizRf7H7VAYCMCNTBeM78x/VTUe9bFEaxBepPJDa1Ow99LqI/1yF7kuy7Q3cQsYMrcjGUcskA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.6",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.6",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "internal-slot": "^1.1.0",
+        "regexp.prototype.flags": "^1.5.3",
+        "set-function-name": "^2.0.2",
+        "side-channel": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.repeat": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/string.prototype.repeat/-/string.prototype.repeat-1.0.0.tgz",
+      "integrity": "sha512-0u/TldDbKD8bFCQ/4f5+mNRrXwZ8hg2w7ZR8wa16e8z9XpePWl3eGEcUD0OXpEH/VJH/2G3gjUtR3ZOiBe2S/w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.17.5"
+      }
+    },
+    "node_modules/string.prototype.trim": {
+      "version": "1.2.10",
+      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.10.tgz",
+      "integrity": "sha512-Rs66F0P/1kedk5lyYyH9uBzuiI/kNRmwJAR9quK6VOtIpZ2G+hMZd+HQbbv25MgCA6gEffoMZYxlTod4WcdrKA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.2",
+        "define-data-property": "^1.1.4",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-object-atoms": "^1.0.0",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.trimend": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.9.tgz",
+      "integrity": "sha512-G7Ok5C6E/j4SGfyLCloXTrngQIQU3PWtXGst3yM7Bea9FRURf1S42ZHlZZtsNque2FN2PoUhfZXYLNWwEr4dLQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.2",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.trimstart": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.8.tgz",
+      "integrity": "sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/strip-indent": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
@@ -4574,12 +7191,51 @@
         "node": ">=8"
       }
     },
+    "node_modules/strip-json-comments": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+      "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/stylis": {
       "version": "4.3.6",
       "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.6.tgz",
       "integrity": "sha512-yQ3rwFWRfwNUY7H5vpU0wfdkNSnvnJinhF9830Swlaxl03zsOjCfmX0ugac+3LtK0lYSgwL/KXc8oYL3mG4YFQ==",
       "license": "MIT"
     },
+    "node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/suspend-react": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/suspend-react/-/suspend-react-0.1.3.tgz",
@@ -4596,12 +7252,29 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/synckit": {
+      "version": "0.11.12",
+      "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.11.12.tgz",
+      "integrity": "sha512-Bh7QjT8/SuKUIfObSXNHNSK6WHo6J1tHCqJsuaFDP7gP0fkzSfTxI8y85JrppZ0h8l0maIgc2tfuZQ6/t3GtnQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@pkgr/core": "^0.2.9"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/synckit"
+      }
+    },
     "node_modules/terser": {
       "version": "5.44.1",
       "resolved": "https://registry.npmjs.org/terser/-/terser-5.44.1.tgz",
       "integrity": "sha512-t/R3R/n0MSwnnazuPpPNVO60LX0SKL45pyl9YlvxIdkH0Of7D5qM2EVe+yASRIlY5pZ73nclYJfNANGWPwFDZw==",
       "dev": true,
       "license": "BSD-2-Clause",
+      "peer": true,
       "dependencies": {
         "@jridgewell/source-map": "^0.3.3",
         "acorn": "^8.15.0",
@@ -4619,7 +7292,8 @@
       "version": "0.160.1",
       "resolved": "https://registry.npmjs.org/three/-/three-0.160.1.tgz",
       "integrity": "sha512-Bgl2wPJypDOZ1stAxwfWAcJ0WQf7QzlptsxkjYiURPz+n5k4RBDLsq+6f9Y75TYxn6aHLcWz+JNmwTOXWrQTBQ==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/three-mesh-bvh": {
       "version": "0.7.8",
@@ -4826,6 +7500,116 @@
         }
       }
     },
+    "node_modules/type-check": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
+      "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "prelude-ls": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/typed-array-buffer": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.3.tgz",
+      "integrity": "sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "is-typed-array": "^1.1.14"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/typed-array-byte-length": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-length/-/typed-array-byte-length-1.0.3.tgz",
+      "integrity": "sha512-BaXgOuIxz8n8pIq3e7Atg/7s+DpiYrxn4vdot3w9KbnBhcRQq6o3xemQdIfynqSeXeDrF32x+WvfzmOjPiY9lg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "for-each": "^0.3.3",
+        "gopd": "^1.2.0",
+        "has-proto": "^1.2.0",
+        "is-typed-array": "^1.1.14"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/typed-array-byte-offset": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-offset/-/typed-array-byte-offset-1.0.4.tgz",
+      "integrity": "sha512-bTlAFB/FBYMcuX81gbL4OcpH5PmlFHqlCCpAl8AlEzMz5k53oNDvN8p1PNOWLEmI2x4orp3raOFB51tv9X+MFQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "for-each": "^0.3.3",
+        "gopd": "^1.2.0",
+        "has-proto": "^1.2.0",
+        "is-typed-array": "^1.1.15",
+        "reflect.getprototypeof": "^1.0.9"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/typed-array-length": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.7.tgz",
+      "integrity": "sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "for-each": "^0.3.3",
+        "gopd": "^1.0.1",
+        "is-typed-array": "^1.1.13",
+        "possible-typed-array-names": "^1.0.0",
+        "reflect.getprototypeof": "^1.0.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/unbox-primitive": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.1.0.tgz",
+      "integrity": "sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-bigints": "^1.0.2",
+        "has-symbols": "^1.1.0",
+        "which-boxed-primitive": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",
@@ -4857,6 +7641,16 @@
         "browserslist": ">= 4.21.0"
       }
     },
+    "node_modules/uri-js": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
+      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "punycode": "^2.1.0"
+      }
+    },
     "node_modules/use-sync-external-store": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
@@ -4881,6 +7675,7 @@
       "integrity": "sha512-+v57oAaoYNnO3hIu5Z/tJRZjq5aHM2zDve9YZ8HngVHbhk66RStobhb1sqPMIPEleV6cNKYK4eGrAbE9Ulbl2g==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.18.10",
         "postcss": "^8.4.27",
@@ -5500,6 +8295,7 @@
       "integrity": "sha512-dZwN5L1VlUBewiP6H9s2+B3e3Jg96D0vzN+Ry73sOefebhYr9f94wwkMNN/9ouoU8pV1BqA1d1zGk8928cx0rg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.27.0",
         "fdir": "^6.5.0",
@@ -5655,6 +8451,95 @@
         "node": ">= 8"
       }
     },
+    "node_modules/which-boxed-primitive": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.1.1.tgz",
+      "integrity": "sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-bigint": "^1.1.0",
+        "is-boolean-object": "^1.2.1",
+        "is-number-object": "^1.1.1",
+        "is-string": "^1.1.1",
+        "is-symbol": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/which-builtin-type": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/which-builtin-type/-/which-builtin-type-1.2.1.tgz",
+      "integrity": "sha512-6iBczoX+kDQ7a3+YJBnh3T+KZRxM/iYNPXicqk66/Qfm1b93iu+yOImkg0zHbj5LNOcNv1TEADiZ0xa34B4q6Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "function.prototype.name": "^1.1.6",
+        "has-tostringtag": "^1.0.2",
+        "is-async-function": "^2.0.0",
+        "is-date-object": "^1.1.0",
+        "is-finalizationregistry": "^1.1.0",
+        "is-generator-function": "^1.0.10",
+        "is-regex": "^1.2.1",
+        "is-weakref": "^1.0.2",
+        "isarray": "^2.0.5",
+        "which-boxed-primitive": "^1.1.0",
+        "which-collection": "^1.0.2",
+        "which-typed-array": "^1.1.16"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/which-collection": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/which-collection/-/which-collection-1.0.2.tgz",
+      "integrity": "sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-map": "^2.0.3",
+        "is-set": "^2.0.3",
+        "is-weakmap": "^2.0.2",
+        "is-weakset": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/which-typed-array": {
+      "version": "1.1.20",
+      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.20.tgz",
+      "integrity": "sha512-LYfpUkmqwl0h9A2HL09Mms427Q1RZWuOHsukfVcKRq9q95iQxdw0ix1JQrqbcDR9PH1QDwf5Qo8OZb5lksZ8Xg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "for-each": "^0.3.5",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/why-is-node-running": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/why-is-node-running/-/why-is-node-running-2.3.0.tgz",
@@ -5690,6 +8575,16 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/word-wrap": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
+      "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/ws": {
       "version": "8.18.3",
       "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.3.tgz",
@@ -5757,6 +8652,43 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/yocto-queue": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
+      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/zod": {
+      "version": "4.3.6",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-4.3.6.tgz",
+      "integrity": "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
+    },
+    "node_modules/zod-validation-error": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/zod-validation-error/-/zod-validation-error-4.0.2.tgz",
+      "integrity": "sha512-Q6/nZLe6jxuU80qb/4uJ4t5v2VEZ44lzQjPDhYJNztRQ4wyWc6VF3D3Kb/fAuPetZQnhS3hnajCf9CsWesghLQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "zod": "^3.25.0 || ^4.0.0"
+      }
+    },
     "node_modules/zustand": {
       "version": "5.0.10",
       "resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.10.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index db003fc..4f998df 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -6,7 +6,11 @@
     "start": "vite",
     "dev": "vite",
     "build": "vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+    "lint:fix": "eslint . --ext js,jsx --fix",
+    "format": "prettier --write \"src/**/*.{js,jsx,css,json}\"",
+    "format:check": "prettier --check \"src/**/*.{js,jsx,css,json}\""
   },
   "dependencies": {
     "@ant-design/icons": "^6.1.0",
@@ -27,7 +31,14 @@
     "@testing-library/react": "^16.3.1",
     "@testing-library/user-event": "^14.6.1",
     "@vitejs/plugin-react": "^4.0.3",
+    "eslint": "^9.39.2",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.5",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.5.0",
     "jsdom": "^27.3.0",
+    "prettier": "^3.8.1",
     "terser": "^5.44.1",
     "vite": "^4.4.9",
     "vitest": "^4.0.16"
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 266d4dc..f67a18c 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -1,7 +1,49 @@
 import React, { useState, Suspense, lazy } from 'react';
-import { Layout, Menu, theme, Button, Dropdown, Avatar, message, Space, Divider, ConfigProvider as AntdConfigProvider } from 'antd';
-import { BarChartOutlined, DatabaseOutlined, CloudServerOutlined, MenuUnfoldOutlined, MenuFoldOutlined, EyeOutlined, BuildOutlined, HomeOutlined, ShoppingCartOutlined, InboxOutlined, ImportOutlined, FileTextOutlined, UserOutlined, LogoutOutlined, HistoryOutlined, AuditOutlined, ToolOutlined, ScheduleOutlined, SettingOutlined, ApiOutlined, PartitionOutlined, CodepenOutlined } from '@ant-design/icons';
-import { BrowserRouter as Router, Routes, Route, Link, Navigate, useLocation, useNavigate } from 'react-router-dom';
+import {
+  Layout,
+  Menu,
+  theme,
+  Button,
+  Dropdown,
+  Avatar,
+  message,
+  Space,
+  Divider,
+  ConfigProvider as AntdConfigProvider,
+} from 'antd';
+import {
+  BarChartOutlined,
+  DatabaseOutlined,
+  CloudServerOutlined,
+  MenuUnfoldOutlined,
+  MenuFoldOutlined,
+  EyeOutlined,
+  BuildOutlined,
+  HomeOutlined,
+  ShoppingCartOutlined,
+  InboxOutlined,
+  ImportOutlined,
+  FileTextOutlined,
+  UserOutlined,
+  LogoutOutlined,
+  HistoryOutlined,
+  AuditOutlined,
+  ToolOutlined,
+  ScheduleOutlined,
+  SettingOutlined,
+  ApiOutlined,
+  PartitionOutlined,
+  CodepenOutlined,
+} from '@ant-design/icons';
+import {
+  BrowserRouter as Router,
+  Routes,
+  Route,
+  Link,
+  Navigate,
+  useLocation,
+  useNavigate,
+} from 'react-router-dom';
 import { useAuth } from './context/AuthContext';
 import { ConfigProvider, useConfig } from './context/ConfigContext';
 import { Scene3DProvider } from './context/Scene3DContext';
@@ -31,30 +73,34 @@ const PortManagement = lazy(() => import('./pages/PortManagement'));
 const { Header, Content, Sider } = Layout;
 
 const PageLoading = () => (
-  <div style={{
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'center',
-    alignItems: 'center',
-    height: '100vh',
-    background: '#f5f5f5',
-    gap: '16px'
-  }}>
+  <div
+    style={{
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center',
+      alignItems: 'center',
+      height: '100vh',
+      background: '#f5f5f5',
+      gap: '16px',
+    }}
+  >
     <Spin size="large" />
     <span style={{ color: '#8c8c8c', fontSize: '14px' }}>正在加载页面...</span>
   </div>
 );
 
 const AuthLoading = () => (
-  <div style={{
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'center',
-    alignItems: 'center',
-    height: '100vh',
-    background: '#f5f5f5',
-    gap: '16px'
-  }}>
+  <div
+    style={{
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center',
+      alignItems: 'center',
+      height: '100vh',
+      background: '#f5f5f5',
+      gap: '16px',
+    }}
+  >
     <Spin size="large" />
     <span style={{ color: '#8c8c8c', fontSize: '14px' }}>正在加载认证状态...</span>
   </div>
@@ -89,7 +135,7 @@ const AppLayout = ({ children }) => {
   const navigate = useNavigate();
   const location = useLocation();
   const designTokens = useDesignTokens();
-  
+
   const handleLogout = () => {
     logout();
     message.success('已退出登录');
@@ -101,9 +147,21 @@ const AppLayout = ({ children }) => {
     if (path === '/') return 'dashboard';
     if (path.startsWith('/visualization-3d')) return 'visualization-3d';
     if (path.startsWith('/rooms') || path.startsWith('/racks')) return 'room-management';
-    if (path.startsWith('/devices') || path.startsWith('/fields') || path.startsWith('/cables') || path.startsWith('/ports')) return 'asset-management';
+    if (
+      path.startsWith('/devices') ||
+      path.startsWith('/fields') ||
+      path.startsWith('/cables') ||
+      path.startsWith('/ports')
+    )
+      return 'asset-management';
     if (path.startsWith('/consumables')) return 'consumables-management';
-    if (path.startsWith('/users') || path.startsWith('/login-history') || path.startsWith('/operation-logs') || path.startsWith('/settings')) return 'system-management';
+    if (
+      path.startsWith('/users') ||
+      path.startsWith('/login-history') ||
+      path.startsWith('/operation-logs') ||
+      path.startsWith('/settings')
+    )
+      return 'system-management';
     if (path.startsWith('/tickets')) return 'ticket-management';
     return 'dashboard';
   };
@@ -218,28 +276,28 @@ const AppLayout = ({ children }) => {
       ],
     },
     {
-        key: 'system-management',
-        icon: <UserOutlined style={{ fontSize: '18px' }} />,
-        label: '系统管理',
-        children: [
-          {
-            key: 'users',
-            icon: <UserOutlined style={{ fontSize: '16px' }} />,
-            label: <Link to="/users">用户管理</Link>,
-          },
-          {
-            key: 'system-settings',
-            icon: <SettingOutlined style={{ fontSize: '16px' }} />,
-            label: <Link to="/settings">系统设置</Link>,
-          },
-        ],
-      },
+      key: 'system-management',
+      icon: <UserOutlined style={{ fontSize: '18px' }} />,
+      label: '系统管理',
+      children: [
+        {
+          key: 'users',
+          icon: <UserOutlined style={{ fontSize: '16px' }} />,
+          label: <Link to="/users">用户管理</Link>,
+        },
+        {
+          key: 'system-settings',
+          icon: <SettingOutlined style={{ fontSize: '16px' }} />,
+          label: <Link to="/settings">系统设置</Link>,
+        },
+      ],
+    },
   ];
 
   return (
     <Layout style={{ minHeight: '100vh' }}>
-      <Sider 
-        width={240} 
+      <Sider
+        width={240}
         collapsedWidth={72}
         collapsed={collapsed}
         style={{
@@ -252,56 +310,66 @@ const AppLayout = ({ children }) => {
           left: 0,
           top: 0,
           bottom: 0,
-          zIndex: 100
+          zIndex: 100,
         }}
       >
-        <div style={{
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: collapsed ? 'center' : 'flex-start',
-          padding: collapsed ? '16px 0' : '16px 20px',
-          borderBottom: `1px solid ${designTokens.colors.sidebar.border}`,
-          minHeight: '64px',
-          background: designTokens.colors.sidebar.bg
-        }}>
-          <div style={{
-            width: '36px',
-            height: '36px',
-            borderRadius: designTokens.borderRadius.small,
-            background: designTokens.colors.primary.gradient,
+        <div
+          style={{
             display: 'flex',
             alignItems: 'center',
-            justifyContent: 'center',
-            flexShrink: 0
-          }}>
+            justifyContent: collapsed ? 'center' : 'flex-start',
+            padding: collapsed ? '16px 0' : '16px 20px',
+            borderBottom: `1px solid ${designTokens.colors.sidebar.border}`,
+            minHeight: '64px',
+            background: designTokens.colors.sidebar.bg,
+          }}
+        >
+          <div
+            style={{
+              width: '36px',
+              height: '36px',
+              borderRadius: designTokens.borderRadius.small,
+              background: designTokens.colors.primary.gradient,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              flexShrink: 0,
+            }}
+          >
             <CloudServerOutlined style={{ fontSize: '18px', color: '#ffffff' }} />
           </div>
           {!collapsed && (
             <div>
-              <div style={{
-                fontSize: '15px',
-                fontWeight: '600',
-                color: designTokens.colors.primary.main,
-                lineHeight: 1.2
-              }}>
+              <div
+                style={{
+                  fontSize: '15px',
+                  fontWeight: '600',
+                  color: designTokens.colors.primary.main,
+                  lineHeight: 1.2,
+                }}
+              >
                 {config.site_name || 'IDC管理'}
               </div>
-              <div style={{
-                fontSize: '11px',
-                color: designTokens.colors.sidebar.text,
-                marginTop: '2px'
-              }}>
+              <div
+                style={{
+                  fontSize: '11px',
+                  color: designTokens.colors.sidebar.text,
+                  marginTop: '2px',
+                }}
+              >
                 数据中心管理平台
               </div>
             </div>
           )}
         </div>
-        
-        <div style={{ 
-          padding: collapsed ? '12px 0' : '12px 8px',
-          overflowY: 'auto',
-          flex: 1
-        }}>
+
+        <div
+          style={{
+            padding: collapsed ? '12px 0' : '12px 8px',
+            overflowY: 'auto',
+            flex: 1,
+          }}
+        >
           <Menu
             mode="inline"
             selectedKeys={[getSelectedKey()]}
@@ -309,16 +377,18 @@ const AppLayout = ({ children }) => {
             style={{
               background: 'transparent',
               borderRight: 0,
-              fontSize: '14px'
+              fontSize: '14px',
             }}
             items={menuItems}
           />
         </div>
-        
-        <div style={{
-          padding: '12px',
-          borderTop: `1px solid ${designTokens.colors.sidebar.border}`
-        }}>
+
+        <div
+          style={{
+            padding: '12px',
+            borderTop: `1px solid ${designTokens.colors.sidebar.border}`,
+          }}
+        >
           <Button
             type="text"
             icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
@@ -332,76 +402,92 @@ const AppLayout = ({ children }) => {
               display: 'flex',
               alignItems: 'center',
               justifyContent: collapsed ? 'center' : 'flex-start',
-              gap: '8px'
+              gap: '8px',
             }}
           >
-            {!collapsed && <span style={{ fontSize: '13px', color: designTokens.colors.text.secondary }}>收起菜单</span>}
+            {!collapsed && (
+              <span style={{ fontSize: '13px', color: designTokens.colors.text.secondary }}>
+                收起菜单
+              </span>
+            )}
           </Button>
         </div>
       </Sider>
-      
-      <Layout style={{ 
-        marginLeft: collapsed ? 72 : 240,
-        transition: 'margin-left 0.2s ease'
-      }}>
-        <Header style={{
-          padding: '0 24px',
-          height: 64,
-          background: designTokens.colors.background.primary,
-          display: 'flex',
-          justifyContent: 'flex-end',
-          alignItems: 'center',
-          boxShadow: designTokens.shadows.small,
-          position: 'sticky',
-          top: 0,
-          zIndex: 99,
-          overflow: 'visible'
-        }}>
+
+      <Layout
+        style={{
+          marginLeft: collapsed ? 72 : 240,
+          transition: 'margin-left 0.2s ease',
+        }}
+      >
+        <Header
+          style={{
+            padding: '0 24px',
+            height: 64,
+            background: designTokens.colors.background.primary,
+            display: 'flex',
+            justifyContent: 'flex-end',
+            alignItems: 'center',
+            boxShadow: designTokens.shadows.small,
+            position: 'sticky',
+            top: 0,
+            zIndex: 99,
+            overflow: 'visible',
+          }}
+        >
           {user && (
-            <div style={{
-              display: 'flex',
-              alignItems: 'center',
-              gap: '12px',
-              height: '100%'
-            }}>
-              <div style={{
+            <div
+              style={{
                 display: 'flex',
                 alignItems: 'center',
-                gap: '8px',
-                padding: '4px 12px',
-                background: designTokens.colors.background.secondary,
-                borderRadius: designTokens.borderRadius.medium,
-                height: '40px',
-                boxSizing: 'border-box'
-              }}>
-                <Avatar 
-                  style={{ 
+                gap: '12px',
+                height: '100%',
+              }}
+            >
+              <div
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '8px',
+                  padding: '4px 12px',
+                  background: designTokens.colors.background.secondary,
+                  borderRadius: designTokens.borderRadius.medium,
+                  height: '40px',
+                  boxSizing: 'border-box',
+                }}
+              >
+                <Avatar
+                  style={{
                     backgroundColor: designTokens.colors.primary.main,
                     cursor: 'pointer',
                     width: 32,
                     height: 32,
                     display: 'flex',
                     alignItems: 'center',
-                    justifyContent: 'center'
+                    justifyContent: 'center',
                   }}
                   icon={<UserOutlined style={{ fontSize: '14px' }} />}
                 />
-                <span style={{ 
-                  color: designTokens.colors.text.primary, 
-                  fontSize: 14,
-                  fontWeight: 500
-                }}>{user.username}</span>
+                <span
+                  style={{
+                    color: designTokens.colors.text.primary,
+                    fontSize: 14,
+                    fontWeight: 500,
+                  }}
+                >
+                  {user.username}
+                </span>
               </div>
               <Button
                 type="text"
                 danger
                 icon={<LogoutOutlined />}
                 onClick={handleLogout}
-                style={{ 
+                style={{
                   padding: '8px 12px',
                   height: 'auto',
                   borderRadius: designTokens.borderRadius.small,
-                  fontSize: 13
+                  fontSize: 13,
                 }}
               >
                 退出
@@ -414,7 +500,7 @@ const AppLayout = ({ children }) => {
             padding: 24,
             margin: 0,
             minHeight: 'calc(100vh - 64px)',
-            background: designTokens.colors.background.secondary
+            background: designTokens.colors.background.secondary,
           }}
         >
           {children}
@@ -433,24 +519,152 @@ const ThemeConfig = () => {
         <Suspense fallback={<PageLoading />}>
           <Routes>
             <Route path="/login" element={<Login />} />
-            <Route path="/" element={<PrivateRoute><Dashboard /></PrivateRoute>} />
-            <Route path="/devices" element={<PrivateRoute><DeviceManagement /></PrivateRoute>} />
-            <Route path="/racks" element={<PrivateRoute><RackManagement /></PrivateRoute>} />
-            <Route path="/rooms" element={<PrivateRoute><RoomManagement /></PrivateRoute>} />
-            <Route path="/fields" element={<PrivateRoute><DeviceFieldManagement /></PrivateRoute>} />
-            <Route path="/visualization-3d" element={<PrivateRoute><Scene3DProvider><Rack3DVisualization /></Scene3DProvider></PrivateRoute>} />
-            <Route path="/consumables" element={<PrivateRoute><ConsumableManagement /></PrivateRoute>} />
-            <Route path="/consumables-categories" element={<PrivateRoute><CategoryManagement /></PrivateRoute>} />
-            <Route path="/consumables-stats" element={<PrivateRoute><ConsumableStatistics /></PrivateRoute>} />
-            <Route path="/consumables-logs" element={<PrivateRoute><ConsumableLogs /></PrivateRoute>} />
-            <Route path="/users" element={<PrivateRoute><UserManagement /></PrivateRoute>} />
-            <Route path="/tickets" element={<PrivateRoute><TicketManagement /></PrivateRoute>} />
-            <Route path="/ticket-categories" element={<PrivateRoute><TicketCategoryManagement /></PrivateRoute>} />
-            <Route path="/ticket-statistics" element={<PrivateRoute><TicketStatistics /></PrivateRoute>} />
-            <Route path="/ticket-fields" element={<PrivateRoute><TicketFieldManagement /></PrivateRoute>} />
-            <Route path="/settings" element={<PrivateRoute><SystemSettings /></PrivateRoute>} />
-            <Route path="/cables" element={<PrivateRoute><CableManagement /></PrivateRoute>} />
-            <Route path="/ports" element={<PrivateRoute><PortManagement /></PrivateRoute>} />
+            <Route
+              path="/"
+              element={
+                <PrivateRoute>
+                  <Dashboard />
+                </PrivateRoute>
+              }
+            />
+            <Route
+              path="/devices"
+              element={
+                <PrivateRoute>
+                  <DeviceManagement />
+                </PrivateRoute>
+              }
+            />
+            <Route
+              path="/racks"
+              element={
+                <PrivateRoute>
+                  <RackManagement />
+                </PrivateRoute>
+              }
+            />
+            <Route
+              path="/rooms"
+              element={
+                <PrivateRoute>
+                  <RoomManagement />
+                </PrivateRoute>
+              }
+            />
+            <Route
+              path="/fields"
+              element={
+                <PrivateRoute>
+                  <DeviceFieldManagement />
+                </PrivateRoute>
+              }
+            />
+            <Route
+              path="/visualization-3d"
+              element={
+                <PrivateRoute>
+                  <Scene3DProvider>
+                    <Rack3DVisualization />
+                  </Scene3DProvider>
+                </PrivateRoute>
+              }
+            />
+            <Route
+              path="/consumables"
+              element={
+                <PrivateRoute>
+                  <ConsumableManagement />
+                </PrivateRoute>
+              }
+            />
+            <Route
+              path="/consumables-categories"
+              element={
+                <PrivateRoute>
+                  <CategoryManagement />
+                </PrivateRoute>
+              }
+            />
+            <Route
+              path="/consumables-stats"
+              element={
+                <PrivateRoute>
+                  <ConsumableStatistics />
+                </PrivateRoute>
+              }
+            />
+            <Route
+              path="/consumables-logs"
+              element={
+                <PrivateRoute>
+                  <ConsumableLogs />
+                </PrivateRoute>
+              }
+            />
+            <Route
+              path="/users"
+              element={
+                <PrivateRoute>
+                  <UserManagement />
+                </PrivateRoute>
+              }
+            />
+            <Route
+              path="/tickets"
+              element={
+                <PrivateRoute>
+                  <TicketManagement />
+                </PrivateRoute>
+              }
+            />
+            <Route
+              path="/ticket-categories"
+              element={
+                <PrivateRoute>
+                  <TicketCategoryManagement />
+                </PrivateRoute>
+              }
+            />
+            <Route
+              path="/ticket-statistics"
+              element={
+                <PrivateRoute>
+                  <TicketStatistics />
+                </PrivateRoute>
+              }
+            />
+            <Route
+              path="/ticket-fields"
+              element={
+                <PrivateRoute>
+                  <TicketFieldManagement />
+                </PrivateRoute>
+              }
+            />
+            <Route
+              path="/settings"
+              element={
+                <PrivateRoute>
+                  <SystemSettings />
+                </PrivateRoute>
+              }
+            />
+            <Route
+              path="/cables"
+              element={
+                <PrivateRoute>
+                  <CableManagement />
+                </PrivateRoute>
+              }
+            />
+            <Route
+              path="/ports"
+              element={
+                <PrivateRoute>
+                  <PortManagement />
+                </PrivateRoute>
+              }
+            />
             <Route path="*" element={<Navigate to="/" replace />} />
           </Routes>
         </Suspense>
@@ -467,4 +681,4 @@ function App() {
   );
 }
 
-export default App;
\ No newline at end of file
+export default App;
diff --git a/frontend/src/api/cache.js b/frontend/src/api/cache.js
index 28537bf..8d51dd5 100644
--- a/frontend/src/api/cache.js
+++ b/frontend/src/api/cache.js
@@ -9,7 +9,7 @@ const cacheManager = (() => {
     return `${method}:${url}:${paramsStr}`;
   };
 
-  const isExpired = (key) => {
+  const isExpired = key => {
     const timestamp = cacheTimestamps.get(key);
     if (!timestamp) return true;
     const ttl = config.get(key)?.ttl || defaultTTL;
@@ -34,7 +34,7 @@ const cacheManager = (() => {
     return key;
   };
 
-  const invalidate = (url) => {
+  const invalidate = url => {
     const keysToDelete = [];
     cache.forEach((_, key) => {
       if (key.includes(url)) {
@@ -49,7 +49,7 @@ const cacheManager = (() => {
     return keysToDelete.length;
   };
 
-  const invalidatePattern = (pattern) => {
+  const invalidatePattern = pattern => {
     const regex = new RegExp(pattern);
     const keysToDelete = [];
     cache.forEach((_, key) => {
@@ -78,7 +78,7 @@ const cacheManager = (() => {
   const getStats = () => {
     return {
       size: cache.size,
-      keys: Array.from(cache.keys())
+      keys: Array.from(cache.keys()),
     };
   };
 
@@ -90,37 +90,29 @@ const cacheManager = (() => {
     clear,
     setTTL,
     getStats,
-    defaultTTL
+    defaultTTL,
   };
 })();
 
-const cacheInterceptor = (api) => {
+const cacheInterceptor = api => {
   const requestCache = new Set();
   const pendingRequests = new Map();
 
   api.interceptors.request.use(
-    (config) => {
+    config => {
       if (config.method?.toLowerCase() === 'get') {
-        const cacheKey = cacheManager.generateKey(
-          config.method,
-          config.url,
-          config.params
-        );
+        const cacheKey = cacheManager.generateKey(config.method, config.url, config.params);
 
         if (requestCache.has(cacheKey)) {
           config.adapter = () => {
-            const cachedData = cacheManager.get(
-              config.method,
-              config.url,
-              config.params
-            );
+            const cachedData = cacheManager.get(config.method, config.url, config.params);
             if (cachedData) {
               return Promise.resolve({
                 data: cachedData,
                 status: 200,
                 statusText: 'OK',
                 headers: {},
-                config
+                config,
               });
             }
             requestCache.delete(cacheKey);
@@ -130,11 +122,11 @@ const cacheInterceptor = (api) => {
       }
       return config;
     },
-    (error) => Promise.reject(error)
+    error => Promise.reject(error)
   );
 
   api.interceptors.response.use(
-    (response) => {
+    response => {
       if (response.config.method?.toLowerCase() === 'get') {
         const cacheKey = cacheManager.generateKey(
           response.config.method,
@@ -151,7 +143,7 @@ const cacheInterceptor = (api) => {
       }
       return response;
     },
-    (error) => {
+    error => {
       if (error.config) {
         const cacheKey = cacheManager.generateKey(
           error.config.method,
@@ -178,108 +170,113 @@ export const cachedAPI = {
     });
   },
 
-  post: (url, data) => api.post(url, data).then(data => {
-    cacheManager.invalidate(url);
-    return data;
-  }),
+  post: (url, data) =>
+    api.post(url, data).then(data => {
+      cacheManager.invalidate(url);
+      return data;
+    }),
 
-  put: (url, data) => api.put(url, data).then(data => {
-    cacheManager.invalidate(url);
-    return data;
-  }),
+  put: (url, data) =>
+    api.put(url, data).then(data => {
+      cacheManager.invalidate(url);
+      return data;
+    }),
 
-  delete: (url) => api.delete(url).then(data => {
-    cacheManager.invalidate(url);
-    return data;
-  }),
+  delete: url =>
+    api.delete(url).then(data => {
+      cacheManager.invalidate(url);
+      return data;
+    }),
 
-  invalidate: (url) => cacheManager.invalidate(url),
+  invalidate: url => cacheManager.invalidate(url),
 
-  invalidatePattern: (pattern) => cacheManager.invalidatePattern(pattern),
+  invalidatePattern: pattern => cacheManager.invalidatePattern(pattern),
 
   clearCache: () => cacheManager.clear(),
 
   setCacheTTL: (url, ttl) => cacheManager.setTTL(url, ttl),
 
-  getCacheStats: () => cacheManager.getStats()
+  getCacheStats: () => cacheManager.getStats(),
 };
 
 export const deviceAPI = {
-  list: (params) => cachedAPI.get('/devices', params),
-  get: (deviceId) => cachedAPI.get(`/devices/${deviceId}`),
-  create: (data) => cachedAPI.post('/devices', data),
+  list: params => cachedAPI.get('/devices', params),
+  get: deviceId => cachedAPI.get(`/devices/${deviceId}`),
+  create: data => cachedAPI.post('/devices', data),
   update: (deviceId, data) => cachedAPI.put(`/api/devices/${deviceId}`, data),
-  delete: (deviceId) => cachedAPI.delete(`/api/devices/${deviceId}`),
-  batchOffline: (data) => cachedAPI.post('/devices/batch-offline', data),
-  batchDelete: (data) => cachedAPI.delete('/devices/batch-delete', { data }),
-  export: (params) => api.get('/devices/export', { params, responseType: 'blob' }),
-  import: (formData) => api.post('/devices/import', formData, {
-    headers: { 'Content-Type': 'multipart/form-data' }
-  })
+  delete: deviceId => cachedAPI.delete(`/api/devices/${deviceId}`),
+  batchOffline: data => cachedAPI.post('/devices/batch-offline', data),
+  batchDelete: data => cachedAPI.delete('/devices/batch-delete', { data }),
+  export: params => api.get('/devices/export', { params, responseType: 'blob' }),
+  import: formData =>
+    api.post('/devices/import', formData, {
+      headers: { 'Content-Type': 'multipart/form-data' },
+    }),
 };
 
 export const rackAPI = {
-  list: (params) => cachedAPI.get('/racks', params),
-  get: (rackId) => cachedAPI.get(`/racks/${rackId}`),
-  create: (data) => cachedAPI.post('/racks', data),
+  list: params => cachedAPI.get('/racks', params),
+  get: rackId => cachedAPI.get(`/racks/${rackId}`),
+  create: data => cachedAPI.post('/racks', data),
   update: (rackId, data) => cachedAPI.put(`/racks/${rackId}`, data),
-  delete: (rackId) => cachedAPI.delete(`/racks/${rackId}`),
-  import: (formData) => api.post('/racks/import', formData, {
-    headers: { 'Content-Type': 'multipart/form-data' }
-  })
+  delete: rackId => cachedAPI.delete(`/racks/${rackId}`),
+  import: formData =>
+    api.post('/racks/import', formData, {
+      headers: { 'Content-Type': 'multipart/form-data' },
+    }),
 };
 
 export const roomAPI = {
-  list: (params) => cachedAPI.get('/rooms', params),
-  get: (roomId) => cachedAPI.get(`/rooms/${roomId}`),
-  create: (data) => cachedAPI.post('/rooms', data),
+  list: params => cachedAPI.get('/rooms', params),
+  get: roomId => cachedAPI.get(`/rooms/${roomId}`),
+  create: data => cachedAPI.post('/rooms', data),
   update: (roomId, data) => cachedAPI.put(`/rooms/${roomId}`, data),
-  delete: (roomId) => cachedAPI.delete(`/rooms/${roomId}`)
+  delete: roomId => cachedAPI.delete(`/rooms/${roomId}`),
 };
 
 export const deviceFieldAPI = {
   list: () => cachedAPI.get('/deviceFields'),
-  get: (fieldId) => cachedAPI.get(`/deviceFields/${fieldId}`),
-  create: (data) => cachedAPI.post('/deviceFields', data),
+  get: fieldId => cachedAPI.get(`/deviceFields/${fieldId}`),
+  create: data => cachedAPI.post('/deviceFields', data),
   update: (fieldId, data) => cachedAPI.put(`/deviceFields/${fieldId}`, data),
-  delete: (fieldId) => cachedAPI.delete(`/deviceFields/${fieldId}`),
-  updateConfig: (data) => cachedAPI.post('/deviceFields/config', data)
+  delete: fieldId => cachedAPI.delete(`/deviceFields/${fieldId}`),
+  updateConfig: data => cachedAPI.post('/deviceFields/config', data),
 };
 
 export const consumableAPI = {
-  list: (params) => cachedAPI.get('/consumables', params),
-  get: (consumableId) => cachedAPI.get(`/consumables/${consumableId}`),
-  create: (data) => cachedAPI.post('/consumables', data),
+  list: params => cachedAPI.get('/consumables', params),
+  get: consumableId => cachedAPI.get(`/consumables/${consumableId}`),
+  create: data => cachedAPI.post('/consumables', data),
   update: (consumableId, data) => cachedAPI.put(`/consumables/${consumableId}`, data),
-  delete: (consumableId) => cachedAPI.delete(`/consumables/${consumableId}`),
-  import: (data) => cachedAPI.post('/consumables/import', data),
-  quickInOut: (data) => cachedAPI.post('/consumables/quick-inout', data),
+  delete: consumableId => cachedAPI.delete(`/consumables/${consumableId}`),
+  import: data => cachedAPI.post('/consumables/import', data),
+  quickInOut: data => cachedAPI.post('/consumables/quick-inout', data),
   getStatistics: () => cachedAPI.get('/consumables/statistics/summary'),
-  getLowStock: () => cachedAPI.get('/consumables/low-stock')
+  getLowStock: () => cachedAPI.get('/consumables/low-stock'),
 };
 
 export const consumableCategoryAPI = {
-  list: (params) => cachedAPI.get('/consumable-categories', params),
-  getList: (params) => cachedAPI.get('/consumable-categories/list', params),
-  create: (data) => cachedAPI.post('/consumable-categories', data),
+  list: params => cachedAPI.get('/consumable-categories', params),
+  getList: params => cachedAPI.get('/consumable-categories/list', params),
+  create: data => cachedAPI.post('/consumable-categories', data),
   update: (id, data) => cachedAPI.put(`/consumable-categories/${id}`, data),
-  delete: (id) => cachedAPI.delete(`/consumable-categories/${id}`)
+  delete: id => cachedAPI.delete(`/consumable-categories/${id}`),
 };
 
 export const consumableLogAPI = {
-  list: (params) => cachedAPI.get('/consumables/logs', params),
-  create: (data) => cachedAPI.post('/consumables/logs', data),
-  export: (params) => api.get('/consumables/logs/export', { params, responseType: 'blob' }),
-  import: (data) => cachedAPI.post('/consumables/logs/import', data)
+  list: params => cachedAPI.get('/consumables/logs', params),
+  create: data => cachedAPI.post('/consumables/logs', data),
+  export: params => api.get('/consumables/logs/export', { params, responseType: 'blob' }),
+  import: data => cachedAPI.post('/consumables/logs/import', data),
 };
 
 export const ticketCategoryAPI = {
-  list: (params) => cachedAPI.get('/ticket-categories', params),
-  create: (data) => cachedAPI.post('/ticket-categories', data),
+  list: params => cachedAPI.get('/ticket-categories', params),
+  create: data => cachedAPI.post('/ticket-categories', data),
   update: (code, data) => cachedAPI.put(`/ticket-categories/${code}`, data),
-  delete: (code) => cachedAPI.delete(`/ticket-categories/${code}`),
+  delete: code => cachedAPI.delete(`/ticket-categories/${code}`),
   getTree: () => cachedAPI.get('/ticket-categories/tree'),
-  init: () => cachedAPI.post('/ticket-categories/init')
+  init: () => cachedAPI.post('/ticket-categories/init'),
 };
 
 export { cacheManager };
diff --git a/frontend/src/api/index.js b/frontend/src/api/index.js
index 85a7548..79b6ca4 100644
--- a/frontend/src/api/index.js
+++ b/frontend/src/api/index.js
@@ -6,17 +6,17 @@ const api = axios.create({
   baseURL: API_BASE_URL,
   timeout: 30000,
   headers: {
-    'Content-Type': 'application/json'
-  }
+    'Content-Type': 'application/json',
+  },
 });
 
 api.interceptors.request.use(
-  (config) => {
+  config => {
     const token = localStorage.getItem('token');
     if (token) {
       config.headers.Authorization = `Bearer ${token}`;
     }
-    
+
     // 开发环境下安全日志：过滤敏感字段
     if (process.env.NODE_ENV === 'development') {
       const sensitiveFields = ['password', 'oldPassword', 'newPassword', 'confirmPassword'];
@@ -28,26 +28,26 @@ api.interceptors.request.use(
       }
       console.log(`[API] ${config.method?.toUpperCase()} ${config.url}`, safeData || '');
     }
-    
+
     return config;
   },
-  (error) => {
+  error => {
     return Promise.reject(error);
   }
 );
 
 api.interceptors.response.use(
-  (response) => {
+  response => {
     return response.data;
   },
-  (error) => {
+  error => {
     if (error.response) {
       const { status, data } = error.response;
-      
+
       if (status === 401) {
         const currentPath = window.location.pathname;
         console.log('[API] 401 error, current path:', currentPath);
-        
+
         if (!currentPath.startsWith('/login')) {
           const savedToken = localStorage.getItem('token');
           if (savedToken) {
@@ -58,96 +58,96 @@ api.interceptors.response.use(
           window.location.href = '/login';
         }
       }
-      
+
       return Promise.reject(data.message || '请求失败');
     }
-    
+
     if (error.code === 'ECONNABORTED') {
       return Promise.reject('请求超时，请稍后重试');
     }
-    
+
     return Promise.reject('网络错误，请检查网络连接');
   }
 );
 
 export const authAPI = {
   checkAdmin: () => api.get('/auth/check-admin'),
-  register: (data) => api.post('/auth/register', data),
-  login: (data) => api.post('/auth/login', data),
-  unlock: (data) => api.post('/auth/unlock', data),
+  register: data => api.post('/auth/register', data),
+  login: data => api.post('/auth/login', data),
+  unlock: data => api.post('/auth/unlock', data),
   getProfile: () => api.get('/auth/profile'),
-  updateProfile: (data) => api.put('/auth/profile', data),
-  changePassword: (data) => api.put('/auth/password', data)
+  updateProfile: data => api.put('/auth/profile', data),
+  changePassword: data => api.put('/auth/password', data),
 };
 
 export const userAPI = {
-  list: (params) => api.get('/users', { params }),
+  list: params => api.get('/users', { params }),
   all: () => api.get('/users/all'),
-  get: (userId) => api.get(`/users/${userId}`),
-  create: (data) => api.post('/users', data),
+  get: userId => api.get(`/users/${userId}`),
+  create: data => api.post('/users', data),
   update: (userId, data) => api.put(`/users/${userId}`, data),
   resetPassword: (userId, data) => api.put(`/users/${userId}/password`, data),
-  delete: (userId) => api.delete(`/users/${userId}`),
+  delete: userId => api.delete(`/users/${userId}`),
   uploadAvatar: (userId, file) => {
     const formData = new FormData();
     formData.append('avatar', file);
     return api.post(`/users/${userId}/avatar`, formData, {
-      headers: { 'Content-Type': 'multipart/form-data' }
+      headers: { 'Content-Type': 'multipart/form-data' },
     });
   },
-  deleteAvatar: (userId) => api.delete(`/users/${userId}/avatar`),
-  approve: (userId) => api.put(`/users/${userId}/approve`),
-  reject: (userId) => api.put(`/users/${userId}/reject`)
+  deleteAvatar: userId => api.delete(`/users/${userId}/avatar`),
+  approve: userId => api.put(`/users/${userId}/approve`),
+  reject: userId => api.put(`/users/${userId}/reject`),
 };
 
 export const roleAPI = {
-  list: (params) => api.get('/roles', { params }),
+  list: params => api.get('/roles', { params }),
   all: () => api.get('/roles/all'),
-  get: (roleId) => api.get(`/roles/${roleId}`),
-  create: (data) => api.post('/roles', data),
+  get: roleId => api.get(`/roles/${roleId}`),
+  create: data => api.post('/roles', data),
   update: (roleId, data) => api.put(`/roles/${roleId}`, data),
-  delete: (roleId) => api.delete(`/roles/${roleId}`),
-  initRoles: () => api.post('/roles/init-roles')
+  delete: roleId => api.delete(`/roles/${roleId}`),
+  initRoles: () => api.post('/roles/init-roles'),
 };
 
 export const loginHistoryAPI = {
-  list: (params) => api.get('/login-history', { params }),
+  list: params => api.get('/login-history', { params }),
   getByUser: (userId, params) => api.get(`/login-history/user/${userId}`, { params }),
-  delete: (id) => api.delete(`/login-history/${id}`),
-  clear: (data) => api.delete('/login-history', { data })
+  delete: id => api.delete(`/login-history/${id}`),
+  clear: data => api.delete('/login-history', { data }),
 };
 
 export const operationLogAPI = {
-  list: (params) => api.get('/operation-logs', { params }),
+  list: params => api.get('/operation-logs', { params }),
   getActions: () => api.get('/operation-logs/actions'),
   getModules: () => api.get('/operation-logs/modules'),
-  delete: (id) => api.delete(`/operation-logs/${id}`),
-  clear: (data) => api.delete('/operation-logs', { data })
+  delete: id => api.delete(`/operation-logs/${id}`),
+  clear: data => api.delete('/operation-logs', { data }),
 };
 
 export const ticketAPI = {
-  list: (params) => api.get('/tickets', { params }),
-  get: (ticketId) => api.get(`/tickets/${ticketId}`),
-  create: (data) => api.post('/tickets', data),
+  list: params => api.get('/tickets', { params }),
+  get: ticketId => api.get(`/tickets/${ticketId}`),
+  create: data => api.post('/tickets', data),
   update: (ticketId, data) => api.put(`/tickets/${ticketId}`, data),
-  delete: (ticketId) => api.delete(`/tickets/${ticketId}`),
+  delete: ticketId => api.delete(`/tickets/${ticketId}`),
   assign: (ticketId, data) => api.put(`/tickets/${ticketId}/assign`, data),
   transfer: (ticketId, data) => api.put(`/tickets/${ticketId}/transfer`, data),
   process: (ticketId, data) => api.put(`/tickets/${ticketId}/process`, data),
   close: (ticketId, data) => api.put(`/tickets/${ticketId}/close`, data),
   reopen: (ticketId, data) => api.put(`/tickets/${ticketId}/reopen`, data),
-  getOperations: (ticketId) => api.get(`/tickets/${ticketId}/operations`),
-  getStatistics: (params) => api.get('/tickets/statistics', { params })
+  getOperations: ticketId => api.get(`/tickets/${ticketId}/operations`),
+  getStatistics: params => api.get('/tickets/statistics', { params }),
 };
 
 export const ticketCategoryAPI = {
-  list: (params) => api.get('/ticket-categories', { params }),
-  get: (code) => api.get(`/ticket-categories/${code}`),
-  create: (data) => api.post('/ticket-categories', data),
+  list: params => api.get('/ticket-categories', { params }),
+  get: code => api.get(`/ticket-categories/${code}`),
+  create: data => api.post('/ticket-categories', data),
   update: (code, data) => api.put(`/ticket-categories/${code}`, data),
-  delete: (code) => api.delete(`/ticket-categories/${code}`),
+  delete: code => api.delete(`/ticket-categories/${code}`),
   tree: () => api.get('/ticket-categories/tree'),
-  init: () => api.post('/ticket-categories/init')
+  init: () => api.post('/ticket-categories/init'),
 };
 
 export default api;
diff --git a/frontend/src/components/3d/DeviceModel.jsx b/frontend/src/components/3d/DeviceModel.jsx
index b816133..8d99e6c 100644
--- a/frontend/src/components/3d/DeviceModel.jsx
+++ b/frontend/src/components/3d/DeviceModel.jsx
@@ -30,75 +30,75 @@ const SHARED_GEOMETRIES = {
 // 共享材质（按类型分类，避免重复创建相同材质）
 const SHARED_MATERIALS = {
   // 机身材质 - 深灰色哑光金属
-  chassis: new THREE.MeshStandardMaterial({ 
-    color: "#333333", 
-    roughness: 0.9, 
-    metalness: 0.3 
+  chassis: new THREE.MeshStandardMaterial({
+    color: '#333333',
+    roughness: 0.9,
+    metalness: 0.3,
   }),
   // 面板材质 - 灰色塑料
-  panel: new THREE.MeshStandardMaterial({ 
-    color: "#555555", 
-    roughness: 0.8, 
-    metalness: 0.1 
+  panel: new THREE.MeshStandardMaterial({
+    color: '#555555',
+    roughness: 0.8,
+    metalness: 0.1,
   }),
   // 面板高亮材质 - 悬停/选中时使用
-  panelHover: new THREE.MeshStandardMaterial({ 
-    color: "#666666", 
-    roughness: 0.8, 
-    metalness: 0.1 
+  panelHover: new THREE.MeshStandardMaterial({
+    color: '#666666',
+    roughness: 0.8,
+    metalness: 0.1,
   }),
   // LED 灯材质
-  led: new THREE.MeshBasicMaterial({ 
-    toneMapped: false 
+  led: new THREE.MeshBasicMaterial({
+    toneMapped: false,
   }),
   // 状态灯底座
-  ledBase: new THREE.MeshStandardMaterial({ 
-    color: "#333333" 
+  ledBase: new THREE.MeshStandardMaterial({
+    color: '#333333',
   }),
   // 深色面板
-  darkPanel: new THREE.MeshStandardMaterial({ 
-    color: "#1e293b", 
-    roughness: 0.7, 
-    metalness: 0.5 
+  darkPanel: new THREE.MeshStandardMaterial({
+    color: '#1e293b',
+    roughness: 0.7,
+    metalness: 0.5,
   }),
   // 硬盘托架
-  driveBay: new THREE.MeshStandardMaterial({ 
-    color: "#334155", 
-    roughness: 0.6, 
-    metalness: 0.4 
+  driveBay: new THREE.MeshStandardMaterial({
+    color: '#334155',
+    roughness: 0.6,
+    metalness: 0.4,
   }),
   // 装饰条
-  accent: new THREE.MeshStandardMaterial({ 
-    color: "#000000", 
-    roughness: 0.2 
+  accent: new THREE.MeshStandardMaterial({
+    color: '#000000',
+    roughness: 0.2,
   }),
   // 金属细节
-  metalDetail: new THREE.MeshStandardMaterial({ 
-    color: "#cbd5e1" 
+  metalDetail: new THREE.MeshStandardMaterial({
+    color: '#cbd5e1',
   }),
   // 网口
-  networkPort: new THREE.MeshStandardMaterial({ 
-    color: "#1e293b", 
-    roughness: 0.3 
+  networkPort: new THREE.MeshStandardMaterial({
+    color: '#1e293b',
+    roughness: 0.3,
   }),
   // 网口发光
-  networkLed: new THREE.MeshBasicMaterial({ 
-    color: "#10b981", 
-    toneMapped: false 
+  networkLed: new THREE.MeshBasicMaterial({
+    color: '#10b981',
+    toneMapped: false,
   }),
   // 电源
-  powerSupply: new THREE.MeshStandardMaterial({ 
-    color: "#374151", 
-    roughness: 0.5 
+  powerSupply: new THREE.MeshStandardMaterial({
+    color: '#374151',
+    roughness: 0.5,
   }),
   // 风扇
-  fan: new THREE.MeshStandardMaterial({ 
-    color: "#1f2937", 
-    roughness: 0.4 
+  fan: new THREE.MeshStandardMaterial({
+    color: '#1f2937',
+    roughness: 0.4,
   }),
   // 散热孔
-  vent: new THREE.MeshStandardMaterial({ 
-    color: "#111827" 
+  vent: new THREE.MeshStandardMaterial({
+    color: '#111827',
   }),
 };
 
@@ -147,396 +147,477 @@ const SHARED_INSTANCED_MATERIALS = {
 };
 
 const InstancedStatusLights = ({ count, positions, colors: statusColors, zOffset }) => {
-    const meshRef = useRef();
+  const meshRef = useRef();
 
-    const dummy = useMemo(() => new THREE.Object3D(), []);
+  const dummy = useMemo(() => new THREE.Object3D(), []);
 
-    useEffect(() => {
-        if (meshRef.current) {
-            for (let i = 0; i < count; i++) {
-                dummy.position.set(positions[i].x, positions[i].y, positions[i].z + zOffset);
-                dummy.updateMatrix();
-                meshRef.current.setMatrixAt(i, dummy.matrix);
-            }
-            meshRef.current.instanceMatrix.needsUpdate = true;
-        }
-    }, [count, positions, zOffset, dummy]);
+  useEffect(() => {
+    if (meshRef.current) {
+      for (let i = 0; i < count; i++) {
+        dummy.position.set(positions[i].x, positions[i].y, positions[i].z + zOffset);
+        dummy.updateMatrix();
+        meshRef.current.setMatrixAt(i, dummy.matrix);
+      }
+      meshRef.current.instanceMatrix.needsUpdate = true;
+    }
+  }, [count, positions, zOffset, dummy]);
 
-    // 修复：正确更新实例颜色
-    useEffect(() => {
-        if (meshRef.current) {
-            for (let i = 0; i < count; i++) {
-                const color = new THREE.Color(statusColors[i] || '#22c55e');
-                meshRef.current.setColorAt(i, color);
-            }
-            if (meshRef.current.instanceColor) {
-                meshRef.current.instanceColor.needsUpdate = true;
-            }
-        }
-    }, [count, statusColors]);
+  // 修复：正确更新实例颜色
+  useEffect(() => {
+    if (meshRef.current) {
+      for (let i = 0; i < count; i++) {
+        const color = new THREE.Color(statusColors[i] || '#22c55e');
+        meshRef.current.setColorAt(i, color);
+      }
+      if (meshRef.current.instanceColor) {
+        meshRef.current.instanceColor.needsUpdate = true;
+      }
+    }
+  }, [count, statusColors]);
 
-    // 资源清理
-    useEffect(() => {
-        return () => {
-            if (meshRef.current) {
-                meshRef.current.geometry?.dispose();
-                meshRef.current.material?.dispose();
-            }
-        };
-    }, []);
+  // 资源清理
+  useEffect(() => {
+    return () => {
+      if (meshRef.current) {
+        meshRef.current.geometry?.dispose();
+        meshRef.current.material?.dispose();
+      }
+    };
+  }, []);
 
-    return (
-        <instancedMesh ref={meshRef} args={[SHARED_INSTANCED_GEOMETRIES.statusLight, SHARED_INSTANCED_MATERIALS.statusLight, count]}>
-        </instancedMesh>
-    );
+  return (
+    <instancedMesh
+      ref={meshRef}
+      args={[
+        SHARED_INSTANCED_GEOMETRIES.statusLight,
+        SHARED_INSTANCED_MATERIALS.statusLight,
+        count,
+      ]}
+    ></instancedMesh>
+  );
 };
 
 const InstancedDriveBays = ({ count, positions, color, hasDetail = true }) => {
-    const meshRef = useRef();
-    const detailRef = useRef();
-    const dummy = useMemo(() => new THREE.Object3D(), []);
+  const meshRef = useRef();
+  const detailRef = useRef();
+  const dummy = useMemo(() => new THREE.Object3D(), []);
 
-    useEffect(() => {
-        if (meshRef.current) {
-            for (let i = 0; i < count; i++) {
-                dummy.position.set(positions[i].x, positions[i].y, positions[i].z);
-                dummy.scale.set(1, 1, 1);
-                dummy.updateMatrix();
-                meshRef.current.setMatrixAt(i, dummy.matrix);
-            }
-            meshRef.current.instanceMatrix.needsUpdate = true;
-        }
-        if (detailRef.current && hasDetail) {
-            for (let i = 0; i < count; i++) {
-                dummy.position.set(positions[i].x + 0.04, positions[i].y, positions[i].z + 0.003);
-                dummy.scale.set(1, 1, 1);
-                dummy.updateMatrix();
-                detailRef.current.setMatrixAt(i, dummy.matrix);
-            }
-            detailRef.current.instanceMatrix.needsUpdate = true;
-        }
-    }, [count, positions, hasDetail, dummy]);
+  useEffect(() => {
+    if (meshRef.current) {
+      for (let i = 0; i < count; i++) {
+        dummy.position.set(positions[i].x, positions[i].y, positions[i].z);
+        dummy.scale.set(1, 1, 1);
+        dummy.updateMatrix();
+        meshRef.current.setMatrixAt(i, dummy.matrix);
+      }
+      meshRef.current.instanceMatrix.needsUpdate = true;
+    }
+    if (detailRef.current && hasDetail) {
+      for (let i = 0; i < count; i++) {
+        dummy.position.set(positions[i].x + 0.04, positions[i].y, positions[i].z + 0.003);
+        dummy.scale.set(1, 1, 1);
+        dummy.updateMatrix();
+        detailRef.current.setMatrixAt(i, dummy.matrix);
+      }
+      detailRef.current.instanceMatrix.needsUpdate = true;
+    }
+  }, [count, positions, hasDetail, dummy]);
 
-    // 资源清理
-    useEffect(() => {
-        return () => {
-            if (meshRef.current) {
-                meshRef.current.geometry?.dispose();
-                meshRef.current.material?.dispose();
-            }
-            if (detailRef.current) {
-                detailRef.current.geometry?.dispose();
-                detailRef.current.material?.dispose();
-            }
-        };
-    }, []);
+  // 资源清理
+  useEffect(() => {
+    return () => {
+      if (meshRef.current) {
+        meshRef.current.geometry?.dispose();
+        meshRef.current.material?.dispose();
+      }
+      if (detailRef.current) {
+        detailRef.current.geometry?.dispose();
+        detailRef.current.material?.dispose();
+      }
+    };
+  }, []);
 
-    return (
-        <group>
-            <instancedMesh ref={meshRef} args={[SHARED_INSTANCED_GEOMETRIES.driveBay, SHARED_INSTANCED_MATERIALS.driveBay, count]}>
-            </instancedMesh>
-            {hasDetail && (
-                <instancedMesh ref={detailRef} args={[SHARED_INSTANCED_GEOMETRIES.driveDetail, SHARED_INSTANCED_MATERIALS.driveDetail, count]}>
-                </instancedMesh>
-            )}
-        </group>
-    );
+  return (
+    <group>
+      <instancedMesh
+        ref={meshRef}
+        args={[SHARED_INSTANCED_GEOMETRIES.driveBay, SHARED_INSTANCED_MATERIALS.driveBay, count]}
+      ></instancedMesh>
+      {hasDetail && (
+        <instancedMesh
+          ref={detailRef}
+          args={[
+            SHARED_INSTANCED_GEOMETRIES.driveDetail,
+            SHARED_INSTANCED_MATERIALS.driveDetail,
+            count,
+          ]}
+        ></instancedMesh>
+      )}
+    </group>
+  );
 };
 
 const InstancedStorageBays = ({ count, positions, color }) => {
-    const meshRef = useRef();
-    const detailRef = useRef();
-    const dummy = useMemo(() => new THREE.Object3D(), []);
+  const meshRef = useRef();
+  const detailRef = useRef();
+  const dummy = useMemo(() => new THREE.Object3D(), []);
 
-    useEffect(() => {
-        if (meshRef.current) {
-            for (let i = 0; i < count; i++) {
-                dummy.position.set(positions[i].x, positions[i].y, positions[i].z);
-                dummy.scale.set(1, 1, 1);
-                dummy.updateMatrix();
-                meshRef.current.setMatrixAt(i, dummy.matrix);
-            }
-            meshRef.current.instanceMatrix.needsUpdate = true;
-        }
-        if (detailRef.current) {
-            for (let i = 0; i < count; i++) {
-                dummy.position.set(positions[i].x + 0.03, positions[i].y, positions[i].z + 0.003);
-                dummy.scale.set(1, 1, 1);
-                dummy.updateMatrix();
-                detailRef.current.setMatrixAt(i, dummy.matrix);
-            }
-            detailRef.current.instanceMatrix.needsUpdate = true;
-        }
-    }, [count, positions, dummy]);
+  useEffect(() => {
+    if (meshRef.current) {
+      for (let i = 0; i < count; i++) {
+        dummy.position.set(positions[i].x, positions[i].y, positions[i].z);
+        dummy.scale.set(1, 1, 1);
+        dummy.updateMatrix();
+        meshRef.current.setMatrixAt(i, dummy.matrix);
+      }
+      meshRef.current.instanceMatrix.needsUpdate = true;
+    }
+    if (detailRef.current) {
+      for (let i = 0; i < count; i++) {
+        dummy.position.set(positions[i].x + 0.03, positions[i].y, positions[i].z + 0.003);
+        dummy.scale.set(1, 1, 1);
+        dummy.updateMatrix();
+        detailRef.current.setMatrixAt(i, dummy.matrix);
+      }
+      detailRef.current.instanceMatrix.needsUpdate = true;
+    }
+  }, [count, positions, dummy]);
 
-    // 资源清理
-    useEffect(() => {
-        return () => {
-            if (meshRef.current) {
-                meshRef.current.geometry?.dispose();
-                meshRef.current.material?.dispose();
-            }
-            if (detailRef.current) {
-                detailRef.current.geometry?.dispose();
-                detailRef.current.material?.dispose();
-            }
-        };
-    }, []);
+  // 资源清理
+  useEffect(() => {
+    return () => {
+      if (meshRef.current) {
+        meshRef.current.geometry?.dispose();
+        meshRef.current.material?.dispose();
+      }
+      if (detailRef.current) {
+        detailRef.current.geometry?.dispose();
+        detailRef.current.material?.dispose();
+      }
+    };
+  }, []);
 
-    return (
-        <group>
-            <instancedMesh ref={meshRef} args={[SHARED_INSTANCED_GEOMETRIES.storageBay, SHARED_INSTANCED_MATERIALS.storageBay, count]}>
-            </instancedMesh>
-            <instancedMesh ref={detailRef} args={[SHARED_INSTANCED_GEOMETRIES.storageDetail, SHARED_INSTANCED_MATERIALS.storageDetail, count]}>
-            </instancedMesh>
-        </group>
-    );
+  return (
+    <group>
+      <instancedMesh
+        ref={meshRef}
+        args={[
+          SHARED_INSTANCED_GEOMETRIES.storageBay,
+          SHARED_INSTANCED_MATERIALS.storageBay,
+          count,
+        ]}
+      ></instancedMesh>
+      <instancedMesh
+        ref={detailRef}
+        args={[
+          SHARED_INSTANCED_GEOMETRIES.storageDetail,
+          SHARED_INSTANCED_MATERIALS.storageDetail,
+          count,
+        ]}
+      ></instancedMesh>
+    </group>
+  );
 };
 
 const InstancedRJ45Ports = ({ count, positions, statuses, frontZ }) => {
-    const meshRef = useRef();
-    const innerRef = useRef();
-    const tabRef = useRef();
-    const ledRef = useRef();
-    const dummy = useMemo(() => new THREE.Object3D(), []);
+  const meshRef = useRef();
+  const innerRef = useRef();
+  const tabRef = useRef();
+  const ledRef = useRef();
+  const dummy = useMemo(() => new THREE.Object3D(), []);
 
-    useEffect(() => {
-        if (meshRef.current) {
-            for (let i = 0; i < count; i++) {
-                dummy.position.set(positions[i].x, positions[i].y + 0.012, frontZ + 0.006);
-                dummy.scale.set(1, 1, 1);
-                dummy.updateMatrix();
-                meshRef.current.setMatrixAt(i, dummy.matrix);
-            }
-            meshRef.current.instanceMatrix.needsUpdate = true;
-        }
-        if (innerRef.current) {
-            for (let i = 0; i < count; i++) {
-                dummy.position.set(positions[i].x, positions[i].y + 0.012, frontZ + 0.007);
-                dummy.scale.set(1, 1, 1);
-                dummy.updateMatrix();
-                innerRef.current.setMatrixAt(i, dummy.matrix);
-            }
-            innerRef.current.instanceMatrix.needsUpdate = true;
-        }
-        if (tabRef.current) {
-            for (let i = 0; i < count; i++) {
-                dummy.position.set(positions[i].x, positions[i].y + 0.015, frontZ + 0.008);
-                dummy.scale.set(1, 1, 1);
-                dummy.updateMatrix();
-                tabRef.current.setMatrixAt(i, dummy.matrix);
-            }
-            tabRef.current.instanceMatrix.needsUpdate = true;
-        }
-        if (ledRef.current) {
-            for (let i = 0; i < count; i++) {
-                const status = statuses[i] || 'disconnected';
-                const ledY = positions[i].y + (i % 2 === 0 ? 0.021 : -0.002);
-                dummy.position.set(positions[i].x - 0.004, ledY, frontZ + 0.006);
-                dummy.scale.set(1, 1, 1);
-                dummy.updateMatrix();
-                ledRef.current.setMatrixAt(i, dummy.matrix);
-            }
-            ledRef.current.instanceMatrix.needsUpdate = true;
-        }
-    }, [count, positions, statuses, frontZ, dummy]);
+  useEffect(() => {
+    if (meshRef.current) {
+      for (let i = 0; i < count; i++) {
+        dummy.position.set(positions[i].x, positions[i].y + 0.012, frontZ + 0.006);
+        dummy.scale.set(1, 1, 1);
+        dummy.updateMatrix();
+        meshRef.current.setMatrixAt(i, dummy.matrix);
+      }
+      meshRef.current.instanceMatrix.needsUpdate = true;
+    }
+    if (innerRef.current) {
+      for (let i = 0; i < count; i++) {
+        dummy.position.set(positions[i].x, positions[i].y + 0.012, frontZ + 0.007);
+        dummy.scale.set(1, 1, 1);
+        dummy.updateMatrix();
+        innerRef.current.setMatrixAt(i, dummy.matrix);
+      }
+      innerRef.current.instanceMatrix.needsUpdate = true;
+    }
+    if (tabRef.current) {
+      for (let i = 0; i < count; i++) {
+        dummy.position.set(positions[i].x, positions[i].y + 0.015, frontZ + 0.008);
+        dummy.scale.set(1, 1, 1);
+        dummy.updateMatrix();
+        tabRef.current.setMatrixAt(i, dummy.matrix);
+      }
+      tabRef.current.instanceMatrix.needsUpdate = true;
+    }
+    if (ledRef.current) {
+      for (let i = 0; i < count; i++) {
+        const status = statuses[i] || 'disconnected';
+        const ledY = positions[i].y + (i % 2 === 0 ? 0.021 : -0.002);
+        dummy.position.set(positions[i].x - 0.004, ledY, frontZ + 0.006);
+        dummy.scale.set(1, 1, 1);
+        dummy.updateMatrix();
+        ledRef.current.setMatrixAt(i, dummy.matrix);
+      }
+      ledRef.current.instanceMatrix.needsUpdate = true;
+    }
+  }, [count, positions, statuses, frontZ, dummy]);
 
-    const ledColors = useMemo(() => {
-        return statuses.map(s => s !== 'disconnected' ? (s === 'fault' ? '#ef4444' : '#22c55e') : '#475569');
-    }, [statuses]);
-
-    // 资源清理
-    useEffect(() => {
-        return () => {
-            if (meshRef.current) {
-                meshRef.current.geometry?.dispose();
-                meshRef.current.material?.dispose();
-            }
-            if (innerRef.current) {
-                innerRef.current.geometry?.dispose();
-                innerRef.current.material?.dispose();
-            }
-            if (tabRef.current) {
-                tabRef.current.geometry?.dispose();
-                tabRef.current.material?.dispose();
-            }
-            if (ledRef.current) {
-                ledRef.current.geometry?.dispose();
-                ledRef.current.material?.dispose();
-            }
-        };
-    }, []);
-
-    return (
-        <group>
-            <instancedMesh ref={meshRef} args={[SHARED_INSTANCED_GEOMETRIES.networkPort, SHARED_INSTANCED_MATERIALS.networkPort, count]}>
-            </instancedMesh>
-            <instancedMesh ref={innerRef} args={[SHARED_INSTANCED_GEOMETRIES.networkPort, SHARED_INSTANCED_MATERIALS.networkPort, count]}>
-            </instancedMesh>
-            <instancedMesh ref={tabRef} args={[SHARED_INSTANCED_GEOMETRIES.networkLed, SHARED_INSTANCED_MATERIALS.networkLed, count]}>
-            </instancedMesh>
-            <instancedMesh ref={ledRef} args={[SHARED_INSTANCED_GEOMETRIES.networkLed, SHARED_INSTANCED_MATERIALS.networkLed, count]}>
-            </instancedMesh>
-        </group>
+  const ledColors = useMemo(() => {
+    return statuses.map(s =>
+      s !== 'disconnected' ? (s === 'fault' ? '#ef4444' : '#22c55e') : '#475569'
     );
+  }, [statuses]);
+
+  // 资源清理
+  useEffect(() => {
+    return () => {
+      if (meshRef.current) {
+        meshRef.current.geometry?.dispose();
+        meshRef.current.material?.dispose();
+      }
+      if (innerRef.current) {
+        innerRef.current.geometry?.dispose();
+        innerRef.current.material?.dispose();
+      }
+      if (tabRef.current) {
+        tabRef.current.geometry?.dispose();
+        tabRef.current.material?.dispose();
+      }
+      if (ledRef.current) {
+        ledRef.current.geometry?.dispose();
+        ledRef.current.material?.dispose();
+      }
+    };
+  }, []);
+
+  return (
+    <group>
+      <instancedMesh
+        ref={meshRef}
+        args={[
+          SHARED_INSTANCED_GEOMETRIES.networkPort,
+          SHARED_INSTANCED_MATERIALS.networkPort,
+          count,
+        ]}
+      ></instancedMesh>
+      <instancedMesh
+        ref={innerRef}
+        args={[
+          SHARED_INSTANCED_GEOMETRIES.networkPort,
+          SHARED_INSTANCED_MATERIALS.networkPort,
+          count,
+        ]}
+      ></instancedMesh>
+      <instancedMesh
+        ref={tabRef}
+        args={[
+          SHARED_INSTANCED_GEOMETRIES.networkLed,
+          SHARED_INSTANCED_MATERIALS.networkLed,
+          count,
+        ]}
+      ></instancedMesh>
+      <instancedMesh
+        ref={ledRef}
+        args={[
+          SHARED_INSTANCED_GEOMETRIES.networkLed,
+          SHARED_INSTANCED_MATERIALS.networkLed,
+          count,
+        ]}
+      ></instancedMesh>
+    </group>
+  );
 };
 
 const InstancedSFPports = ({ count, positions, statuses, frontZ }) => {
-    const meshRef = useRef();
-    const innerRef = useRef();
-    const connectorRef = useRef();
-    const ledRef = useRef();
-    const dummy = useMemo(() => new THREE.Object3D(), []);
+  const meshRef = useRef();
+  const innerRef = useRef();
+  const connectorRef = useRef();
+  const ledRef = useRef();
+  const dummy = useMemo(() => new THREE.Object3D(), []);
 
-    useEffect(() => {
-        if (meshRef.current) {
-            for (let i = 0; i < count; i++) {
-                dummy.position.set(positions[i].x, positions[i].y, frontZ + 0.006);
-                dummy.scale.set(1, 1, 1);
-                dummy.updateMatrix();
-                meshRef.current.setMatrixAt(i, dummy.matrix);
-            }
-            meshRef.current.instanceMatrix.needsUpdate = true;
-        }
-        if (innerRef.current) {
-            for (let i = 0; i < count; i++) {
-                dummy.position.set(positions[i].x, positions[i].y, frontZ + 0.009);
-                dummy.scale.set(1, 1, 1);
-                dummy.updateMatrix();
-                innerRef.current.setMatrixAt(i, dummy.matrix);
-            }
-            innerRef.current.instanceMatrix.needsUpdate = true;
-        }
-        if (connectorRef.current) {
-            for (let i = 0; i < count; i++) {
-                const isConnected = statuses[i] !== 'disconnected';
-                dummy.position.set(positions[i].x, positions[i].y, frontZ + 0.012);
-                dummy.scale.set(isConnected ? 1 : 0.001, 1, 1);
-                dummy.updateMatrix();
-                connectorRef.current.setMatrixAt(i, dummy.matrix);
-            }
-            connectorRef.current.instanceMatrix.needsUpdate = true;
-        }
-        if (ledRef.current) {
-            for (let i = 0; i < count; i++) {
-                const isConnected = statuses[i] !== 'disconnected';
-                dummy.position.set(positions[i].x, positions[i].y + 0.01, frontZ + 0.009);
-                dummy.scale.set(1, 1, 1);
-                dummy.updateMatrix();
-                ledRef.current.setMatrixAt(i, dummy.matrix);
-            }
-            ledRef.current.instanceMatrix.needsUpdate = true;
-        }
-    }, [count, positions, statuses, frontZ, dummy]);
+  useEffect(() => {
+    if (meshRef.current) {
+      for (let i = 0; i < count; i++) {
+        dummy.position.set(positions[i].x, positions[i].y, frontZ + 0.006);
+        dummy.scale.set(1, 1, 1);
+        dummy.updateMatrix();
+        meshRef.current.setMatrixAt(i, dummy.matrix);
+      }
+      meshRef.current.instanceMatrix.needsUpdate = true;
+    }
+    if (innerRef.current) {
+      for (let i = 0; i < count; i++) {
+        dummy.position.set(positions[i].x, positions[i].y, frontZ + 0.009);
+        dummy.scale.set(1, 1, 1);
+        dummy.updateMatrix();
+        innerRef.current.setMatrixAt(i, dummy.matrix);
+      }
+      innerRef.current.instanceMatrix.needsUpdate = true;
+    }
+    if (connectorRef.current) {
+      for (let i = 0; i < count; i++) {
+        const isConnected = statuses[i] !== 'disconnected';
+        dummy.position.set(positions[i].x, positions[i].y, frontZ + 0.012);
+        dummy.scale.set(isConnected ? 1 : 0.001, 1, 1);
+        dummy.updateMatrix();
+        connectorRef.current.setMatrixAt(i, dummy.matrix);
+      }
+      connectorRef.current.instanceMatrix.needsUpdate = true;
+    }
+    if (ledRef.current) {
+      for (let i = 0; i < count; i++) {
+        const isConnected = statuses[i] !== 'disconnected';
+        dummy.position.set(positions[i].x, positions[i].y + 0.01, frontZ + 0.009);
+        dummy.scale.set(1, 1, 1);
+        dummy.updateMatrix();
+        ledRef.current.setMatrixAt(i, dummy.matrix);
+      }
+      ledRef.current.instanceMatrix.needsUpdate = true;
+    }
+  }, [count, positions, statuses, frontZ, dummy]);
 
-    // 修复：正确更新SFP指示灯颜色
-    useEffect(() => {
-        if (ledRef.current) {
-            for (let i = 0; i < count; i++) {
-                const isConnected = statuses[i] !== 'disconnected';
-                const color = new THREE.Color(isConnected ? '#22c55e' : '#475569');
-                ledRef.current.setColorAt(i, color);
-            }
-            if (ledRef.current.instanceColor) {
-                ledRef.current.instanceColor.needsUpdate = true;
-            }
-        }
-    }, [count, statuses]);
+  // 修复：正确更新SFP指示灯颜色
+  useEffect(() => {
+    if (ledRef.current) {
+      for (let i = 0; i < count; i++) {
+        const isConnected = statuses[i] !== 'disconnected';
+        const color = new THREE.Color(isConnected ? '#22c55e' : '#475569');
+        ledRef.current.setColorAt(i, color);
+      }
+      if (ledRef.current.instanceColor) {
+        ledRef.current.instanceColor.needsUpdate = true;
+      }
+    }
+  }, [count, statuses]);
 
-    // 资源清理
-    useEffect(() => {
-        return () => {
-            if (meshRef.current) {
-                meshRef.current.geometry?.dispose();
-                meshRef.current.material?.dispose();
-            }
-            if (innerRef.current) {
-                innerRef.current.geometry?.dispose();
-                innerRef.current.material?.dispose();
-            }
-            if (connectorRef.current) {
-                connectorRef.current.geometry?.dispose();
-                connectorRef.current.material?.dispose();
-            }
-            if (ledRef.current) {
-                ledRef.current.geometry?.dispose();
-                ledRef.current.material?.dispose();
-            }
-        };
-    }, []);
+  // 资源清理
+  useEffect(() => {
+    return () => {
+      if (meshRef.current) {
+        meshRef.current.geometry?.dispose();
+        meshRef.current.material?.dispose();
+      }
+      if (innerRef.current) {
+        innerRef.current.geometry?.dispose();
+        innerRef.current.material?.dispose();
+      }
+      if (connectorRef.current) {
+        connectorRef.current.geometry?.dispose();
+        connectorRef.current.material?.dispose();
+      }
+      if (ledRef.current) {
+        ledRef.current.geometry?.dispose();
+        ledRef.current.material?.dispose();
+      }
+    };
+  }, []);
 
-    return (
-        <group>
-            <instancedMesh ref={meshRef} args={[SHARED_INSTANCED_GEOMETRIES.sfpPort, SHARED_INSTANCED_MATERIALS.networkPort, count]} />
-            <instancedMesh ref={innerRef} args={[SHARED_INSTANCED_GEOMETRIES.sfpInner, SHARED_INSTANCED_MATERIALS.driveDetail, count]} />
-            <instancedMesh ref={connectorRef} args={[SHARED_INSTANCED_GEOMETRIES.sfpConnector, SHARED_INSTANCED_MATERIALS.metalDetail, count]} />
-            <instancedMesh ref={ledRef} args={[SHARED_INSTANCED_GEOMETRIES.sfpLed, SHARED_INSTANCED_MATERIALS.networkLed, count]} />
-        </group>
-    );
+  return (
+    <group>
+      <instancedMesh
+        ref={meshRef}
+        args={[SHARED_INSTANCED_GEOMETRIES.sfpPort, SHARED_INSTANCED_MATERIALS.networkPort, count]}
+      />
+      <instancedMesh
+        ref={innerRef}
+        args={[SHARED_INSTANCED_GEOMETRIES.sfpInner, SHARED_INSTANCED_MATERIALS.driveDetail, count]}
+      />
+      <instancedMesh
+        ref={connectorRef}
+        args={[
+          SHARED_INSTANCED_GEOMETRIES.sfpConnector,
+          SHARED_INSTANCED_MATERIALS.metalDetail,
+          count,
+        ]}
+      />
+      <instancedMesh
+        ref={ledRef}
+        args={[SHARED_INSTANCED_GEOMETRIES.sfpLed, SHARED_INSTANCED_MATERIALS.networkLed, count]}
+      />
+    </group>
+  );
 };
 
 const FirewallFace = ({ device, height, frontZ, isSelected }) => {
   const halfWidth = 0.4826 / 2;
 
   return (
-      <group>
-        {/* 防火墙左侧红色标识条 */}
-        <mesh position={[-halfWidth + 0.02, 0, frontZ + 0.006]}>
-           <boxGeometry args={[0.015, height - 0.008, 0.003]} />
-           <meshStandardMaterial color="#ef4444" emissive="#ef4444" emissiveIntensity={0.3} />
+    <group>
+      {/* 防火墙左侧红色标识条 */}
+      <mesh position={[-halfWidth + 0.02, 0, frontZ + 0.006]}>
+        <boxGeometry args={[0.015, height - 0.008, 0.003]} />
+        <meshStandardMaterial color="#ef4444" emissive="#ef4444" emissiveIntensity={0.3} />
+      </mesh>
+      {/* 防火墙主面板边框 */}
+      <mesh position={[-halfWidth + 0.035, 0, frontZ + 0.005]}>
+        <boxGeometry args={[0.005, height - 0.004, 0.002]} />
+        <meshStandardMaterial color="#dc2626" />
+      </mesh>
+
+      <mesh position={[0, 0, frontZ + 0.0055]}>
+        <boxGeometry args={[0.46, height - 0.004, 0.002]} />
+        <meshStandardMaterial color="#2d3748" roughness={0.7} metalness={0.6} />
+      </mesh>
+
+      <group position={[-0.08, 0, frontZ + 0.007]}>
+        <mesh>
+          <boxGeometry args={[0.12, 0.03, 0.002]} />
+          <meshStandardMaterial color="#000000" roughness={0.1} metalness={0.8} />
         </mesh>
-        {/* 防火墙主面板边框 */}
-        <mesh position={[-halfWidth + 0.035, 0, frontZ + 0.005]}>
-           <boxGeometry args={[0.005, height - 0.004, 0.002]} />
-           <meshStandardMaterial color="#dc2626" />
-        </mesh>
-
-        <mesh position={[0, 0, frontZ + 0.0055]}>
-            <boxGeometry args={[0.46, height - 0.004, 0.002]} />
-            <meshStandardMaterial color="#2d3748" roughness={0.7} metalness={0.6} />
-        </mesh>
-
-        <group position={[-0.08, 0, frontZ + 0.007]}>
-            <mesh>
-                <boxGeometry args={[0.12, 0.03, 0.002]} />
-                <meshStandardMaterial color="#000000" roughness={0.1} metalness={0.8} />
-            </mesh>
-            <group position={[0, 0, 0.002]}>
-                 <mesh>
-                    <boxGeometry args={[0.10, 0.001, 0.001]} />
-                    <meshBasicMaterial color="#10b981" transparent opacity={0.5} />
-                 </mesh>
-            </group>
-        </group>
-
-        <group position={[0.1, 0, frontZ + 0.007]}>
-            {!PERFORMANCE_MODE && Array.from({ length: 4 }).map((_, col) => (
-                 <mesh key={col} position={[-0.03 + col * 0.02, 0, 0]}>
-                    <circleGeometry args={[0.008, 6]} />
-                    <meshBasicMaterial color="#1a202c" />
-                 </mesh>
-            ))}
-            {!PERFORMANCE_MODE && (
-                <pointLight position={[0, 0, -0.01]} color="#f97316" intensity={0.8} distance={0.2} />
-            )}
-        </group>
-
-        <group position={[0.2, 0.01, frontZ + 0.008]}>
-            {['#22c55e', '#22c55e', device.status === 'error' ? '#ef4444' : '#4b5563'].map((color, i) => (
-                <mesh key={i} position={[0, -i * 0.01, 0]}>
-                    <circleGeometry args={[0.002, 8]} />
-                    <meshBasicMaterial color={color} />
-                    {i === 2 && device.status === 'error' && (
-                         <pointLight color="#ef4444" intensity={1} distance={0.05} />
-                    )}
-                </mesh>
-            ))}
+        <group position={[0, 0, 0.002]}>
+          <mesh>
+            <boxGeometry args={[0.1, 0.001, 0.001]} />
+            <meshBasicMaterial color="#10b981" transparent opacity={0.5} />
+          </mesh>
         </group>
       </group>
+
+      <group position={[0.1, 0, frontZ + 0.007]}>
+        {!PERFORMANCE_MODE &&
+          Array.from({ length: 4 }).map((_, col) => (
+            <mesh key={col} position={[-0.03 + col * 0.02, 0, 0]}>
+              <circleGeometry args={[0.008, 6]} />
+              <meshBasicMaterial color="#1a202c" />
+            </mesh>
+          ))}
+        {!PERFORMANCE_MODE && (
+          <pointLight position={[0, 0, -0.01]} color="#f97316" intensity={0.8} distance={0.2} />
+        )}
+      </group>
+
+      <group position={[0.2, 0.01, frontZ + 0.008]}>
+        {['#22c55e', '#22c55e', device.status === 'error' ? '#ef4444' : '#4b5563'].map(
+          (color, i) => (
+            <mesh key={i} position={[0, -i * 0.01, 0]}>
+              <circleGeometry args={[0.002, 8]} />
+              <meshBasicMaterial color={color} />
+              {i === 2 && device.status === 'error' && (
+                <pointLight color="#ef4444" intensity={1} distance={0.05} />
+              )}
+            </mesh>
+          )
+        )}
+      </group>
+    </group>
   );
 };
 
-const DeviceModel = ({ device, rackHeight, isSelected, onClick, onHover, uHeight: propUHeight, position, rackDepth, slideEnabled = true }) => {
+const DeviceModel = ({
+  device,
+  rackHeight,
+  isSelected,
+  onClick,
+  onHover,
+  uHeight: propUHeight,
+  position,
+  rackDepth,
+  slideEnabled = true,
+}) => {
   const mesh = useRef();
   const groupRef = useRef();
   const [hovered, setHover] = useState(false);
@@ -550,7 +631,7 @@ const DeviceModel = ({ device, rackHeight, isSelected, onClick, onHover, uHeight
   const [backPanelLevel, setBackPanelLevel] = useState(0); // 0: 不渲染, 1: 简化, 2: 完整
   const { camera } = useThree();
   const frameCount = useRef(0);
-  
+
   // 使用传入的 uHeight (默认为 0.04445m)
   const uHeight = propUHeight || 0.04445;
   const depth = rackDepth || 1.0; // 机柜深度，默认1米
@@ -564,13 +645,13 @@ const DeviceModel = ({ device, rackHeight, isSelected, onClick, onHover, uHeight
     const targetZ = isExtendedRef.current ? 0.6 : 0;
     const lerpFactor = 0.1;
     currentZRef.current += (targetZ - currentZRef.current) * lerpFactor;
-    
+
     // 直接操作 group 的 position，不通过 React state
     if (groupRef.current) {
       groupRef.current.position.z = currentZRef.current;
     }
   });
-  
+
   // 背板渲染控制 - 根据相机位置动态调整
   // 只在相机绕到背面时才渲染背板
   useFrame(() => {
@@ -603,22 +684,22 @@ const DeviceModel = ({ device, rackHeight, isSelected, onClick, onHover, uHeight
   const chassisDepth = 0.8; // 机身深度 800mm
   const panelWidth = 0.4826; // 前面板宽度 482.6mm (19英寸)
   const panelDepth = 0.02; // 前面板厚度 20mm
-  
+
   // 计算实际位置（防止超出机柜）
   // 优先使用父组件传入的 position，如果未传入则内部计算（作为 fallback）
   // 注意：父组件 RackModel 已经计算好了 position=[0, yPos, 0]
   // 我们只需要处理设备的高度
-  
+
   const dHeight = device.height || device.u_height || 1;
   const height = dHeight * uHeight;
-  
+
   // 间隙调整：减少设备上下间隙，使其更饱满，减少视觉偏差
   const gap = 0.002; // 总间隙 2mm
 
   // Z轴定位
   // 假设机柜中心为0，前沿为 depth/2
   // 设备前面板应该贴近前沿
-  const frontZ = depth / 2 - 0.02; 
+  const frontZ = depth / 2 - 0.02;
   const panelZ = frontZ - panelDepth / 2;
   const chassisZ = frontZ - panelDepth - chassisDepth / 2;
 
@@ -631,24 +712,24 @@ const DeviceModel = ({ device, rackHeight, isSelected, onClick, onHover, uHeight
     storage: '#8b5cf6', // --color-device-storage
     default: '#3b82f6',
     status: {
-        running: '#10b981', // --color-status-running
-        warning: '#f59e0b', // --color-status-warning
-        error: '#ef4444',   // --color-status-error
-        offline: '#6b7280'  // --color-status-offline
+      running: '#10b981', // --color-status-running
+      warning: '#f59e0b', // --color-status-warning
+      error: '#ef4444', // --color-status-error
+      offline: '#6b7280', // --color-status-offline
     },
     panelBg: '#1e293b', // 深色面板背景
     panelLight: '#334155',
-    text: '#f1f5f9'
+    text: '#f1f5f9',
   };
 
-  const getDeviceColor = (type) => {
-      const t = type?.toLowerCase() || '';
-      if (t.includes('server') || t.includes('服务器')) return colors.server;
-      if (t.includes('switch') || t.includes('交换机')) return colors.switch;
-      if (t.includes('router') || t.includes('路由器')) return colors.router;
-      if (t.includes('firewall') || t.includes('防火墙')) return colors.firewall;
-      if (t.includes('storage') || t.includes('存储')) return colors.storage;
-      return colors.default;
+  const getDeviceColor = type => {
+    const t = type?.toLowerCase() || '';
+    if (t.includes('server') || t.includes('服务器')) return colors.server;
+    if (t.includes('switch') || t.includes('交换机')) return colors.switch;
+    if (t.includes('router') || t.includes('路由器')) return colors.router;
+    if (t.includes('firewall') || t.includes('防火墙')) return colors.firewall;
+    if (t.includes('storage') || t.includes('存储')) return colors.storage;
+    return colors.default;
   };
 
   const deviceColor = getDeviceColor(device.type);
@@ -664,78 +745,76 @@ const DeviceModel = ({ device, rackHeight, isSelected, onClick, onHover, uHeight
 
     const drivePositions = [];
     for (let row = 0; row < driveRows; row++) {
-        for (let col = 0; col < driveCols; col++) {
-            if (!is2U && row > 0) continue;
-            const xPos = (col - 1) * (driveWidth + 0.005);
-            const yPos = is2U ? (row === 0 ? 0.02 : -0.02) : 0;
-            drivePositions.push({ x: xPos, y: yPos, z: 0 });
-        }
+      for (let col = 0; col < driveCols; col++) {
+        if (!is2U && row > 0) continue;
+        const xPos = (col - 1) * (driveWidth + 0.005);
+        const yPos = is2U ? (row === 0 ? 0.02 : -0.02) : 0;
+        drivePositions.push({ x: xPos, y: yPos, z: 0 });
+      }
     }
 
     return (
       <group>
-         {/* 服务器主面板 - 深蓝色 */}
-         <mesh position={[0, 0, frontZ + 0.0055]}>
-            <boxGeometry args={[0.44, height - 0.004, 0.002]} />
-            <meshStandardMaterial color="#1e293b" roughness={0.7} metalness={0.5} />
-         </mesh>
-         {/* 服务器左侧标识条 - 亮蓝色 */}
-         <mesh position={[-0.21, 0, frontZ + 0.006]}>
-            <boxGeometry args={[0.015, height - 0.008, 0.003]} />
-            <meshStandardMaterial color="#3b82f6" emissive="#3b82f6" emissiveIntensity={0.2} />
-         </mesh>
+        {/* 服务器主面板 - 深蓝色 */}
+        <mesh position={[0, 0, frontZ + 0.0055]}>
+          <boxGeometry args={[0.44, height - 0.004, 0.002]} />
+          <meshStandardMaterial color="#1e293b" roughness={0.7} metalness={0.5} />
+        </mesh>
+        {/* 服务器左侧标识条 - 亮蓝色 */}
+        <mesh position={[-0.21, 0, frontZ + 0.006]}>
+          <boxGeometry args={[0.015, height - 0.008, 0.003]} />
+          <meshStandardMaterial color="#3b82f6" emissive="#3b82f6" emissiveIntensity={0.2} />
+        </mesh>
 
-         <group position={[-0.18, 0, frontZ + 0.006]}>
-             <mesh position={[-0.02, 0, 0]}>
-                 <boxGeometry args={[0.04, height - 0.01, 0.002]} />
-                 <meshStandardMaterial color="#000000" roughness={0.2} />
-             </mesh>
-             <group position={[-0.025, 0.01, 0.002]}>
-                 <mesh rotation={[Math.PI/2, 0, 0]}>
-                     <cylinderGeometry args={[0.004, 0.004, 0.002, 16]} />
-                     <meshStandardMaterial color="#cbd5e1" metalness={0.8} />
-                 </mesh>
-                 {!PERFORMANCE_MODE && (
-                     <pointLight color="#22c55e" intensity={0.5} distance={0.05} />
-                 )}
-                 <mesh position={[0, 0, 0.0011]} rotation={[Math.PI/2, 0, 0]}>
-                     <cylinderGeometry args={[0.002, 0.002, 0.001, 16]} />
-                     <meshBasicMaterial color={device.status === 'offline' ? '#4b5563' : '#22c55e'} />
-                 </mesh>
-             </group>
-             <mesh position={[-0.015, 0.01, 0.002]} rotation={[Math.PI/2, 0, 0]}>
-                 <cylinderGeometry args={[0.002, 0.002, 0.002, 16]} />
-                 <meshStandardMaterial color="#3b82f6" />
-             </mesh>
-             <mesh position={[-0.02, -0.01, 0.002]}>
-                 <boxGeometry args={[0.006, 0.012, 0.002]} />
-                 <meshStandardMaterial color="#475569" />
-             </mesh>
-             <mesh position={[-0.02, -0.01, 0.001]}>
-                 <boxGeometry args={[0.004, 0.01, 0.001]} />
-                 <meshBasicMaterial color="#000" />
-             </mesh>
-         </group>
+        <group position={[-0.18, 0, frontZ + 0.006]}>
+          <mesh position={[-0.02, 0, 0]}>
+            <boxGeometry args={[0.04, height - 0.01, 0.002]} />
+            <meshStandardMaterial color="#000000" roughness={0.2} />
+          </mesh>
+          <group position={[-0.025, 0.01, 0.002]}>
+            <mesh rotation={[Math.PI / 2, 0, 0]}>
+              <cylinderGeometry args={[0.004, 0.004, 0.002, 16]} />
+              <meshStandardMaterial color="#cbd5e1" metalness={0.8} />
+            </mesh>
+            {!PERFORMANCE_MODE && <pointLight color="#22c55e" intensity={0.5} distance={0.05} />}
+            <mesh position={[0, 0, 0.0011]} rotation={[Math.PI / 2, 0, 0]}>
+              <cylinderGeometry args={[0.002, 0.002, 0.001, 16]} />
+              <meshBasicMaterial color={device.status === 'offline' ? '#4b5563' : '#22c55e'} />
+            </mesh>
+          </group>
+          <mesh position={[-0.015, 0.01, 0.002]} rotation={[Math.PI / 2, 0, 0]}>
+            <cylinderGeometry args={[0.002, 0.002, 0.002, 16]} />
+            <meshStandardMaterial color="#3b82f6" />
+          </mesh>
+          <mesh position={[-0.02, -0.01, 0.002]}>
+            <boxGeometry args={[0.006, 0.012, 0.002]} />
+            <meshStandardMaterial color="#475569" />
+          </mesh>
+          <mesh position={[-0.02, -0.01, 0.001]}>
+            <boxGeometry args={[0.004, 0.01, 0.001]} />
+            <meshBasicMaterial color="#000" />
+          </mesh>
+        </group>
 
-         <group position={[0.05, 0, frontZ + 0.006]}>
-            <InstancedDriveBays 
-                count={drivePositions.length} 
-                positions={drivePositions} 
-                color="#334155"
-                hasDetail={!PERFORMANCE_MODE}
-            />
-         </group>
-         
-         <group position={[0.2, 0, frontZ + 0.006]}>
-             <mesh position={[0, 0, 0.002]} rotation={[0, 0, Math.PI/2]}>
-                 <cylinderGeometry args={[0.005, 0.005, 0.002, 6]} />
-                 <meshStandardMaterial color="#3b82f6" />
-             </mesh>
-             <mesh position={[0, 0, 0.003]}>
-                 <boxGeometry args={[0.012, 0.006, 0.001]} />
-                 <meshBasicMaterial color="#000" />
-             </mesh>
-         </group>
+        <group position={[0.05, 0, frontZ + 0.006]}>
+          <InstancedDriveBays
+            count={drivePositions.length}
+            positions={drivePositions}
+            color="#334155"
+            hasDetail={!PERFORMANCE_MODE}
+          />
+        </group>
+
+        <group position={[0.2, 0, frontZ + 0.006]}>
+          <mesh position={[0, 0, 0.002]} rotation={[0, 0, Math.PI / 2]}>
+            <cylinderGeometry args={[0.005, 0.005, 0.002, 6]} />
+            <meshStandardMaterial color="#3b82f6" />
+          </mesh>
+          <mesh position={[0, 0, 0.003]}>
+            <boxGeometry args={[0.012, 0.006, 0.001]} />
+            <meshBasicMaterial color="#000" />
+          </mesh>
+        </group>
       </group>
     );
   };
@@ -744,52 +823,53 @@ const DeviceModel = ({ device, rackHeight, isSelected, onClick, onHover, uHeight
   const renderStorageFace = () => {
     const rows = PERFORMANCE_MODE ? 2 : 3;
     const cols = PERFORMANCE_MODE ? 2 : 4;
-    const bayWidth = 0.10;
+    const bayWidth = 0.1;
     const bayHeight = 0.028;
 
     const bayPositions = [];
     for (let row = 0; row < rows; row++) {
-        for (let col = 0; col < cols; col++) {
-            const xPos = (col - 1) * (bayWidth + 0.002);
-            const yStep = (height - 0.02) / rows;
-            const yPos = (rows - 1 - row) * yStep - (rows - 1) * yStep / 2;
-            bayPositions.push({ x: xPos, y: yPos, z: 0 });
-        }
+      for (let col = 0; col < cols; col++) {
+        const xPos = (col - 1) * (bayWidth + 0.002);
+        const yStep = (height - 0.02) / rows;
+        const yPos = (rows - 1 - row) * yStep - ((rows - 1) * yStep) / 2;
+        bayPositions.push({ x: xPos, y: yPos, z: 0 });
+      }
     }
 
     return (
-        <group>
-            {/* 存储设备主面板 - 深紫色 */}
-            <mesh position={[0, 0, frontZ + 0.0055]}>
-                <boxGeometry args={[0.44, height - 0.004, 0.002]} />
-                <meshStandardMaterial color="#0f172a" roughness={0.8} />
-            </mesh>
-            {/* 存储设备左侧标识条 - 紫色 */}
-            <mesh position={[-0.21, 0, frontZ + 0.006]}>
-                <boxGeometry args={[0.015, height - 0.008, 0.003]} />
-                <meshStandardMaterial color="#8b5cf6" emissive="#8b5cf6" emissiveIntensity={0.2} />
-            </mesh>
+      <group>
+        {/* 存储设备主面板 - 深紫色 */}
+        <mesh position={[0, 0, frontZ + 0.0055]}>
+          <boxGeometry args={[0.44, height - 0.004, 0.002]} />
+          <meshStandardMaterial color="#0f172a" roughness={0.8} />
+        </mesh>
+        {/* 存储设备左侧标识条 - 紫色 */}
+        <mesh position={[-0.21, 0, frontZ + 0.006]}>
+          <boxGeometry args={[0.015, height - 0.008, 0.003]} />
+          <meshStandardMaterial color="#8b5cf6" emissive="#8b5cf6" emissiveIntensity={0.2} />
+        </mesh>
 
-            <group position={[0, 0, frontZ + 0.008]}>
-                <InstancedStorageBays 
-                    count={bayPositions.length} 
-                    positions={bayPositions} 
-                    color="#334155"
-                />
-            </group>
+        <group position={[0, 0, frontZ + 0.008]}>
+          <InstancedStorageBays
+            count={bayPositions.length}
+            positions={bayPositions}
+            color="#334155"
+          />
         </group>
+      </group>
     );
   };
 
   // 渲染交换机前面板细节
   const renderSwitchFace = () => {
-    const getPortStatus = (portName) => {
-        if (!device.cables || !Array.isArray(device.cables)) return 'disconnected';
-        const cable = device.cables.find(c => 
-            (c.sourceDeviceId === device.deviceId && c.sourcePort === portName) ||
-            (c.targetDeviceId === device.deviceId && c.targetPort === portName)
-        );
-        return cable ? (cable.status || 'normal') : 'disconnected';
+    const getPortStatus = portName => {
+      if (!device.cables || !Array.isArray(device.cables)) return 'disconnected';
+      const cable = device.cables.find(
+        c =>
+          (c.sourceDeviceId === device.deviceId && c.sourcePort === portName) ||
+          (c.targetDeviceId === device.deviceId && c.targetPort === portName)
+      );
+      return cable ? cable.status || 'normal' : 'disconnected';
     };
 
     const sfpCount = PERFORMANCE_MODE ? 2 : 4;
@@ -799,105 +879,105 @@ const DeviceModel = ({ device, rackHeight, isSelected, onClick, onHover, uHeight
     const sfpPositions = [];
     const sfpStatuses = [];
     for (let i = 0; i < sfpCount; i++) {
-        sfpPositions.push({ x: -0.13 + i * 0.025, y: -0.005, z: 0 });
-        sfpStatuses.push(getPortStatus(`SFP+ ${i + 1}`));
+      sfpPositions.push({ x: -0.13 + i * 0.025, y: -0.005, z: 0 });
+      sfpStatuses.push(getPortStatus(`SFP+ ${i + 1}`));
     }
 
     const rj45PortCount = rj45GroupCount * rj45ColCount * 2;
     const rj45Positions = [];
     const rj45Statuses = [];
     for (let groupIndex = 0; groupIndex < rj45GroupCount; groupIndex++) {
-        const groupX = -0.02 + groupIndex * 0.09;
-        for (let colIndex = 0; colIndex < rj45ColCount; colIndex++) {
-            const portX = -0.03 + colIndex * 0.012;
-            const globalCol = groupIndex * rj45ColCount + colIndex;
-            const topPortNum = globalCol * 2 + 1;
-            const bottomPortNum = globalCol * 2 + 2;
-            const topStatus = getPortStatus(`Port ${topPortNum}`);
-            const bottomStatus = getPortStatus(`Port ${bottomPortNum}`);
-            rj45Positions.push({ x: groupX + portX, y: 0, z: 0 });
-            rj45Statuses.push(topStatus);
-            rj45Positions.push({ x: groupX + portX, y: -0.024, z: 0 });
-            rj45Statuses.push(bottomStatus);
-        }
+      const groupX = -0.02 + groupIndex * 0.09;
+      for (let colIndex = 0; colIndex < rj45ColCount; colIndex++) {
+        const portX = -0.03 + colIndex * 0.012;
+        const globalCol = groupIndex * rj45ColCount + colIndex;
+        const topPortNum = globalCol * 2 + 1;
+        const bottomPortNum = globalCol * 2 + 2;
+        const topStatus = getPortStatus(`Port ${topPortNum}`);
+        const bottomStatus = getPortStatus(`Port ${bottomPortNum}`);
+        rj45Positions.push({ x: groupX + portX, y: 0, z: 0 });
+        rj45Statuses.push(topStatus);
+        rj45Positions.push({ x: groupX + portX, y: -0.024, z: 0 });
+        rj45Statuses.push(bottomStatus);
+      }
     }
 
     return (
       <group>
         {/* 交换机主面板 - 深绿色背景突出显示 */}
         <mesh position={[0, 0, frontZ + 0.0055]}>
-            <boxGeometry args={[0.44, height - 0.004, 0.002]} />
-            <meshStandardMaterial color="#064e3b" roughness={0.5} metalness={0.5} />
+          <boxGeometry args={[0.44, height - 0.004, 0.002]} />
+          <meshStandardMaterial color="#064e3b" roughness={0.5} metalness={0.5} />
         </mesh>
         {/* 交换机左侧标识条 - 亮绿色 */}
         <mesh position={[-0.21, 0, frontZ + 0.006]}>
-            <boxGeometry args={[0.015, height - 0.008, 0.003]} />
-            <meshStandardMaterial color="#10b981" emissive="#10b981" emissiveIntensity={0.2} />
+          <boxGeometry args={[0.015, height - 0.008, 0.003]} />
+          <meshStandardMaterial color="#10b981" emissive="#10b981" emissiveIntensity={0.2} />
         </mesh>
         {/* 交换机类型标识 */}
-        <mesh position={[-0.19, height/2 - 0.015, frontZ + 0.007]}>
-            <boxGeometry args={[0.025, 0.012, 0.002]} />
-            <meshStandardMaterial color="#065f46" />
+        <mesh position={[-0.19, height / 2 - 0.015, frontZ + 0.007]}>
+          <boxGeometry args={[0.025, 0.012, 0.002]} />
+          <meshStandardMaterial color="#065f46" />
         </mesh>
 
         <group position={[-0.19, 0, frontZ + 0.006]}>
-             <mesh position={[0, 0, 0]}>
-                 <boxGeometry args={[0.05, height - 0.015, 0.002]} />
-                 <meshStandardMaterial color="#1e293b" />
-             </mesh>
-            <mesh position={[-0.015, 0.005, 0.002]}>
-                <boxGeometry args={[0.012, 0.01, 0.002]} />
-                <meshStandardMaterial color="#94a3b8" />
-            </mesh>
-            <mesh position={[-0.015, 0.012, 0.002]}>
-                 <boxGeometry args={[0.012, 0.002, 0.001]} />
-                 <meshBasicMaterial color="#3b82f6" />
-            </mesh>
+          <mesh position={[0, 0, 0]}>
+            <boxGeometry args={[0.05, height - 0.015, 0.002]} />
+            <meshStandardMaterial color="#1e293b" />
+          </mesh>
+          <mesh position={[-0.015, 0.005, 0.002]}>
+            <boxGeometry args={[0.012, 0.01, 0.002]} />
+            <meshStandardMaterial color="#94a3b8" />
+          </mesh>
+          <mesh position={[-0.015, 0.012, 0.002]}>
+            <boxGeometry args={[0.012, 0.002, 0.001]} />
+            <meshBasicMaterial color="#3b82f6" />
+          </mesh>
 
-            <mesh position={[0.015, 0.005, 0.002]}>
-                <boxGeometry args={[0.008, 0.012, 0.002]} />
-                <meshStandardMaterial color="#cbd5e1" />
-            </mesh>
-            
-            <group position={[0, -0.01, 0.002]}>
-                 {['SYS', 'PWR'].map((label, idx) => (
-                     <group key={label} position={[(idx - 0.5) * 0.02, 0, 0]}>
-                        <mesh>
-                            <circleGeometry args={[0.0015, 8]} />
-                            <meshBasicMaterial color="#22c55e" />
-                        </mesh>
-                     </group>
-                 ))}
-            </group>
+          <mesh position={[0.015, 0.005, 0.002]}>
+            <boxGeometry args={[0.008, 0.012, 0.002]} />
+            <meshStandardMaterial color="#cbd5e1" />
+          </mesh>
+
+          <group position={[0, -0.01, 0.002]}>
+            {['SYS', 'PWR'].map((label, idx) => (
+              <group key={label} position={[(idx - 0.5) * 0.02, 0, 0]}>
+                <mesh>
+                  <circleGeometry args={[0.0015, 8]} />
+                  <meshBasicMaterial color="#22c55e" />
+                </mesh>
+              </group>
+            ))}
+          </group>
         </group>
 
         <group position={[-0.13, -0.005, 0]}>
-            <InstancedSFPports 
-                count={sfpCount} 
-                positions={sfpPositions} 
-                statuses={sfpStatuses} 
-                frontZ={frontZ}
-            />
+          <InstancedSFPports
+            count={sfpCount}
+            positions={sfpPositions}
+            statuses={sfpStatuses}
+            frontZ={frontZ}
+          />
         </group>
 
         <group position={[-0.02, 0, 0]}>
-            <InstancedRJ45Ports 
-                count={rj45PortCount} 
-                positions={rj45Positions} 
-                statuses={rj45Statuses} 
-                frontZ={frontZ}
-            />
+          <InstancedRJ45Ports
+            count={rj45PortCount}
+            positions={rj45Positions}
+            statuses={rj45Statuses}
+            frontZ={frontZ}
+          />
         </group>
       </group>
     );
   };
 
   // 渲染简化版背板（只显示基础背板）
-  const renderSimplifiedBackPanel = (backZ) => {
+  const renderSimplifiedBackPanel = backZ => {
     return (
       <group position={[0, 0, backZ]} rotation={[0, Math.PI, 0]}>
         {/* 基础背板 - 使用共享几何体 */}
-        <mesh 
+        <mesh
           position={[0, 0, 0.001]}
           geometry={SHARED_GEOMETRIES.box}
           material={SHARED_MATERIALS.panel}
@@ -908,15 +988,15 @@ const DeviceModel = ({ device, rackHeight, isSelected, onClick, onHover, uHeight
   };
 
   // 渲染完整版背板（包含 PSU、风扇、网卡等细节）
-  const renderFullBackPanel = (backZ) => {
+  const renderFullBackPanel = backZ => {
     return (
       <group position={[0, 0, backZ]} rotation={[0, Math.PI, 0]}>
         {/* 基础背板 - 透明玻璃质感 */}
         <mesh position={[0, 0, 0.001]}>
           <boxGeometry args={[chassisWidth, height - gap, 0.002]} />
-          <meshStandardMaterial 
-            color="#94a3b8" 
-            transparent 
+          <meshStandardMaterial
+            color="#94a3b8"
+            transparent
             opacity={0.3}
             roughness={0.2}
             metalness={0.8}
@@ -926,7 +1006,7 @@ const DeviceModel = ({ device, rackHeight, isSelected, onClick, onHover, uHeight
         {/* 电源模块 (PSU) - 左侧 */}
         <group position={[0.25, 0, 0.002]}>
           {[-0.02, 0.02].map((yOffset, i) => (
-            <group key={i} position={[0, height > 0.15 ? yOffset * 2 : 0, 0]}> 
+            <group key={i} position={[0, height > 0.15 ? yOffset * 2 : 0, 0]}>
               {(height > 0.15 || i === 0) && (
                 <group position={[i === 1 && height <= 0.15 ? -0.06 : 0, 0, 0]}>
                   {/* PSU 面板 */}
@@ -966,7 +1046,7 @@ const DeviceModel = ({ device, rackHeight, isSelected, onClick, onHover, uHeight
               </mesh>
               {/* 风扇叶片 */}
               <mesh position={[0, 0, 0.001]}>
-                <circleGeometry args={[Math.min(0.035, (height-0.03)/2), 8]} />
+                <circleGeometry args={[Math.min(0.035, (height - 0.03) / 2), 8]} />
                 <meshBasicMaterial color="#334155" />
               </mesh>
               {/* 红色拉手 */}
@@ -1006,7 +1086,7 @@ const DeviceModel = ({ device, rackHeight, isSelected, onClick, onHover, uHeight
   const renderBackPanel = () => {
     // Back face Z position
     const backZ = chassisZ - chassisDepth / 2;
-    
+
     // 根据背板级别决定渲染内容
     switch (backPanelLevel) {
       case 0:
@@ -1027,29 +1107,36 @@ const DeviceModel = ({ device, rackHeight, isSelected, onClick, onHover, uHeight
     if (type.includes('server') || type.includes('服务器')) return renderServerFace();
     if (type.includes('switch') || type.includes('交换机')) return renderSwitchFace();
     if (type.includes('storage') || type.includes('存储')) return renderStorageFace();
-    if (type.includes('firewall') || type.includes('防火墙') || type.includes('router') || type.includes('路由器')) {
-        return <FirewallFace device={device} height={height} frontZ={frontZ} isSelected={isSelected} />;
+    if (
+      type.includes('firewall') ||
+      type.includes('防火墙') ||
+      type.includes('router') ||
+      type.includes('路由器')
+    ) {
+      return (
+        <FirewallFace device={device} height={height} frontZ={frontZ} isSelected={isSelected} />
+      );
     }
-    
+
     // 默认通用设备样式
     return (
-       <group>
-           {/* 默认面板纹理 */}
-           <mesh position={[0, 0, frontZ + 0.0055]}>
-              <boxGeometry args={[0.44, height - 0.004, 0.002]} />
-              <meshStandardMaterial color="#374151" roughness={0.6} metalness={0.4} />
-           </mesh>
-           {/* 左侧灰色标识条 */}
-           <mesh position={[-0.21, 0, frontZ + 0.006]}>
-               <boxGeometry args={[0.015, height - 0.008, 0.003]} />
-               <meshStandardMaterial color="#6b7280" emissive="#6b7280" emissiveIntensity={0.1} />
-           </mesh>
-           {/* 装饰线 */}
-           <mesh position={[0, 0, frontZ + 0.007]}>
-               <boxGeometry args={[0.4, 0.003, 0.001]} />
-               <meshStandardMaterial color={deviceColor} />
-           </mesh>
-       </group>
+      <group>
+        {/* 默认面板纹理 */}
+        <mesh position={[0, 0, frontZ + 0.0055]}>
+          <boxGeometry args={[0.44, height - 0.004, 0.002]} />
+          <meshStandardMaterial color="#374151" roughness={0.6} metalness={0.4} />
+        </mesh>
+        {/* 左侧灰色标识条 */}
+        <mesh position={[-0.21, 0, frontZ + 0.006]}>
+          <boxGeometry args={[0.015, height - 0.008, 0.003]} />
+          <meshStandardMaterial color="#6b7280" emissive="#6b7280" emissiveIntensity={0.1} />
+        </mesh>
+        {/* 装饰线 */}
+        <mesh position={[0, 0, frontZ + 0.007]}>
+          <boxGeometry args={[0.4, 0.003, 0.001]} />
+          <meshStandardMaterial color={deviceColor} />
+        </mesh>
+      </group>
     );
   };
 
@@ -1057,12 +1144,12 @@ const DeviceModel = ({ device, rackHeight, isSelected, onClick, onHover, uHeight
     <group position={position || [0, 0, 0]}>
       <group
         ref={groupRef}
-        onClick={(e) => {
+        onClick={e => {
           e.stopPropagation();
           isExtendedRef.current = !isExtendedRef.current;
           onClick && onClick(device);
         }}
-        onPointerOver={(e) => {
+        onPointerOver={e => {
           e.stopPropagation();
           // 使用 ref 避免重复设置状态
           if (!isHoveredRef.current) {
@@ -1071,7 +1158,7 @@ const DeviceModel = ({ device, rackHeight, isSelected, onClick, onHover, uHeight
             onHover && onHover(device);
           }
         }}
-        onPointerOut={(e) => {
+        onPointerOut={e => {
           // 重置 ref 并更新状态
           if (isHoveredRef.current) {
             isHoveredRef.current = false;
@@ -1081,8 +1168,8 @@ const DeviceModel = ({ device, rackHeight, isSelected, onClick, onHover, uHeight
         }}
       >
         {/* 机身 (Chassis) - 使用共享几何体和材质 */}
-        <mesh 
-          ref={mesh} 
+        <mesh
+          ref={mesh}
           position={[0, 0, chassisZ]}
           geometry={SHARED_GEOMETRIES.box}
           material={SHARED_MATERIALS.chassis}
@@ -1090,7 +1177,7 @@ const DeviceModel = ({ device, rackHeight, isSelected, onClick, onHover, uHeight
         />
 
         {/* 前面板底座 (Front Panel Base) - 使用共享资源 */}
-        <mesh 
+        <mesh
           position={[0, 0, panelZ]}
           geometry={SHARED_GEOMETRIES.box}
           material={hovered || isSelected ? SHARED_MATERIALS.panelHover : SHARED_MATERIALS.panel}
@@ -1099,10 +1186,20 @@ const DeviceModel = ({ device, rackHeight, isSelected, onClick, onHover, uHeight
 
         {/* 告警时的红色辉光 (设备两侧) */}
         {(device.status === 'error' || device.status === 'fault') && (
-            <>
-                <pointLight position={[-0.4, 0, frontZ]} color="#ff0000" intensity={0.8} distance={0.3} />
-                <pointLight position={[0.4, 0, frontZ]} color="#ff0000" intensity={0.8} distance={0.3} />
-            </>
+          <>
+            <pointLight
+              position={[-0.4, 0, frontZ]}
+              color="#ff0000"
+              intensity={0.8}
+              distance={0.3}
+            />
+            <pointLight
+              position={[0.4, 0, frontZ]}
+              color="#ff0000"
+              intensity={0.8}
+              distance={0.3}
+            />
+          </>
         )}
 
         {/* 设备特定前面板细节 */}
@@ -1111,7 +1208,7 @@ const DeviceModel = ({ device, rackHeight, isSelected, onClick, onHover, uHeight
         {/* 设备背板细节 */}
         {renderBackPanel()}
       </group>
-      
+
       {/* 设备名称 (悬浮显示，避免遮挡细节) - 暂时禁用 */}
       {/* {hovered && (
           <Text
@@ -1128,21 +1225,21 @@ const DeviceModel = ({ device, rackHeight, isSelected, onClick, onHover, uHeight
       )} */}
 
       {/* 状态指示灯 (统一位置) - 使用共享几何体 */}
-      <group position={[panelWidth/2 - 0.03, 0, frontZ + 0.01]}>
-         {/* 灯座 */}
-         <mesh 
-           position={[0, 0, -0.002]}
-           geometry={SHARED_GEOMETRIES.circle}
-           material={SHARED_MATERIALS.ledBase}
-           scale={[0.01, 0.01, 1]}
-         />
-         {/* 发光体 - 需要动态颜色，使用克隆材质 */}
-         <mesh>
-            <circleGeometry args={[0.006, 16]} />
-            <meshBasicMaterial color={statusColor} toneMapped={false} />
-         </mesh>
-         {/* 光晕效果 */}
-         <pointLight color={statusColor} intensity={0.5} distance={0.1} />
+      <group position={[panelWidth / 2 - 0.03, 0, frontZ + 0.01]}>
+        {/* 灯座 */}
+        <mesh
+          position={[0, 0, -0.002]}
+          geometry={SHARED_GEOMETRIES.circle}
+          material={SHARED_MATERIALS.ledBase}
+          scale={[0.01, 0.01, 1]}
+        />
+        {/* 发光体 - 需要动态颜色，使用克隆材质 */}
+        <mesh>
+          <circleGeometry args={[0.006, 16]} />
+          <meshBasicMaterial color={statusColor} toneMapped={false} />
+        </mesh>
+        {/* 光晕效果 */}
+        <pointLight color={statusColor} intensity={0.5} distance={0.1} />
       </group>
     </group>
   );
diff --git a/frontend/src/components/3d/LODManager.jsx b/frontend/src/components/3d/LODManager.jsx
index 57b686c..857967a 100644
--- a/frontend/src/components/3d/LODManager.jsx
+++ b/frontend/src/components/3d/LODManager.jsx
@@ -5,12 +5,12 @@ import * as THREE from 'three';
 export const LOD_LEVELS = {
   HIGH: 0,
   MEDIUM: 1,
-  LOW: 2
+  LOW: 2,
 };
 
 export const LOD_DISTANCES = {
   HIGH: 5,
-  MEDIUM: 10
+  MEDIUM: 10,
 };
 
 const createSimplifiedDeviceMesh = (device, uHeight, rackDepth, deviceColor, statusColor) => {
@@ -34,7 +34,7 @@ const createSimplifiedDeviceMesh = (device, uHeight, rackDepth, deviceColor, sta
         <boxGeometry args={[chassisWidth, height - 0.002, chassisDepth]} />
         <meshStandardMaterial color="#333333" roughness={0.9} metalness={0.3} />
       </mesh>
-      <mesh position={[panelWidth/2 - 0.03, halfHeight - 0.02, frontZ + 0.01]}>
+      <mesh position={[panelWidth / 2 - 0.03, halfHeight - 0.02, frontZ + 0.01]}>
         <circleGeometry args={[0.006, 16]} />
         <meshBasicMaterial color={statusColor} toneMapped={false} />
       </mesh>
@@ -65,9 +65,9 @@ const createMediumDeviceMesh = (device, uHeight, rackDepth, deviceColor, statusC
         <meshStandardMaterial color={deviceColor} roughness={0.8} metalness={0.1} />
       </mesh>
       <mesh position={[0, 0, frontZ - panelDepth - chassisDepth / 2]}>
-          <boxGeometry args={[chassisWidth, height - 0.002, chassisDepth]} />
-          <meshStandardMaterial color="#333333" roughness={0.9} metalness={0.3} />
-        </mesh>
+        <boxGeometry args={[chassisWidth, height - 0.002, chassisDepth]} />
+        <meshStandardMaterial color="#333333" roughness={0.9} metalness={0.3} />
+      </mesh>
       <group position={[-0.18, 0, frontZ + 0.006]}>
         <mesh position={[-0.02, 0, 0]}>
           <boxGeometry args={[0.04, height - 0.01, 0.002]} />
@@ -86,7 +86,7 @@ const createMediumDeviceMesh = (device, uHeight, rackDepth, deviceColor, statusC
           </mesh>
         ))}
       </group>
-      <mesh position={[panelWidth/2 - 0.03, halfHeight - 0.02, frontZ + 0.01]}>
+      <mesh position={[panelWidth / 2 - 0.03, halfHeight - 0.02, frontZ + 0.01]}>
         <circleGeometry args={[0.006, 16]} />
         <meshBasicMaterial color={statusColor} toneMapped={false} />
       </mesh>
@@ -94,15 +94,15 @@ const createMediumDeviceMesh = (device, uHeight, rackDepth, deviceColor, statusC
   );
 };
 
-const LODManager = ({ 
-  device, 
-  uHeight, 
-  rackDepth, 
-  position, 
-  deviceColor, 
-  statusColor, 
+const LODManager = ({
+  device,
+  uHeight,
+  rackDepth,
+  position,
+  deviceColor,
+  statusColor,
   children,
-  level = LOD_LEVELS.HIGH
+  level = LOD_LEVELS.HIGH,
 }) => {
   const groupRef = useRef();
   const highDetailRef = useRef();
@@ -119,26 +119,26 @@ const LODManager = ({
 
   useFrame(() => {
     if (!groupRef.current) return;
-    
+
     // 节流：每5帧检查一次
     frameCount.current++;
     if (frameCount.current % 5 !== 0) return;
-    
+
     const distance = camera.position.distanceTo(groupRef.current.position);
     distanceRef.current = distance;
-    
+
     // 添加缓冲避免频繁切换（10% 缓冲）
     const buffer = 0.1;
     const highThreshold = LOD_DISTANCES.HIGH * (1 + buffer);
     const mediumThreshold = LOD_DISTANCES.MEDIUM * (1 + buffer);
-    
+
     let newLevel = LOD_LEVELS.HIGH;
     if (distance > mediumThreshold) {
       newLevel = LOD_LEVELS.LOW;
     } else if (distance > highThreshold) {
       newLevel = LOD_LEVELS.MEDIUM;
     }
-    
+
     // 只有当级别变化时才更新
     if (newLevel !== lodLevelRef.current) {
       lodLevelRef.current = newLevel;
@@ -169,12 +169,12 @@ const LODManager = ({
       <group ref={highDetailRef} visible={true}>
         {children}
       </group>
-      
+
       {/* 中等细节模型 */}
       <group ref={mediumDetailRef} visible={false}>
         {createMediumDeviceMesh(device, uHeight, rackDepth, deviceColor, statusColor)}
       </group>
-      
+
       {/* 低细节模型 */}
       <group ref={lowDetailRef} visible={false}>
         {createSimplifiedDeviceMesh(device, uHeight, rackDepth, deviceColor, statusColor)}
diff --git a/frontend/src/components/3d/RackModel.jsx b/frontend/src/components/3d/RackModel.jsx
index 40a1f6a..b803370 100644
--- a/frontend/src/components/3d/RackModel.jsx
+++ b/frontend/src/components/3d/RackModel.jsx
@@ -3,24 +3,24 @@ import * as THREE from 'three';
 import DeviceModel from './DeviceModel';
 import LODManager, { LOD_LEVELS } from './LODManager';
 
-const RackModel = ({ 
-  rack, 
-  devices = [], 
-  selectedDeviceId, 
-  onDeviceClick, 
-  onDeviceLeave, 
-  onDeviceHover, 
-  onEditDevice, 
-  onAddNic, 
-  onAddPort, 
+const RackModel = ({
+  rack,
+  devices = [],
+  selectedDeviceId,
+  onDeviceClick,
+  onDeviceLeave,
+  onDeviceHover,
+  onEditDevice,
+  onAddNic,
+  onAddPort,
   tooltipFields,
-  deviceSlideEnabled = true
+  deviceSlideEnabled = true,
 }) => {
   const width = 0.6;
   const depth = 1.0;
   const uHeight = 0.04445;
   const postWidth = 0.05;
-  
+
   const rackHeight = rack?.height || 45;
   const height = rackHeight * uHeight + 0.2;
 
@@ -33,21 +33,21 @@ const RackModel = ({
     storage: '#8b5cf6',
     default: '#3b82f6',
     status: {
-        running: '#10b981',
-        warning: '#f59e0b',
-        error: '#ef4444',
-        offline: '#6b7280'
-    }
+      running: '#10b981',
+      warning: '#f59e0b',
+      error: '#ef4444',
+      offline: '#6b7280',
+    },
   };
 
-  const getDeviceColor = (type) => {
-      const t = type?.toLowerCase() || '';
-      if (t.includes('server') || t.includes('服务器')) return colors.server;
-      if (t.includes('switch') || t.includes('交换机')) return colors.switch;
-      if (t.includes('router') || t.includes('路由器')) return colors.router;
-      if (t.includes('firewall') || t.includes('防火墙')) return colors.firewall;
-      if (t.includes('storage') || t.includes('存储')) return colors.storage;
-      return colors.default;
+  const getDeviceColor = type => {
+    const t = type?.toLowerCase() || '';
+    if (t.includes('server') || t.includes('服务器')) return colors.server;
+    if (t.includes('switch') || t.includes('交换机')) return colors.switch;
+    if (t.includes('router') || t.includes('路由器')) return colors.router;
+    if (t.includes('firewall') || t.includes('防火墙')) return colors.firewall;
+    if (t.includes('storage') || t.includes('存储')) return colors.storage;
+    return colors.default;
   };
 
   // 设备组的Y偏移量（与下方设备渲染的偏移一致）
@@ -62,7 +62,7 @@ const RackModel = ({
       const yPos = (u - 1) * uHeight + uHeight / 2 + deviceGroupOffset;
 
       // 创建数字纹理 - 白色数字在深色背景上更清晰
-      const createNumberTexture = (num) => {
+      const createNumberTexture = num => {
         const canvas = document.createElement('canvas');
         canvas.width = 128;
         canvas.height = 128;
@@ -90,9 +90,9 @@ const RackModel = ({
       const planeGeometry = new THREE.PlaneGeometry(planeSize, planeSize);
 
       // 前侧柱子的位置: [-width/2 + postWidth/2, y, depth/2 - postWidth/2]
-      const leftPostX = -width/2 + postWidth/2;
-      const rightPostX = width/2 - postWidth/2;
-      const frontPostZ = depth/2 - postWidth/2;
+      const leftPostX = -width / 2 + postWidth / 2;
+      const rightPostX = width / 2 - postWidth / 2;
+      const frontPostZ = depth / 2 - postWidth / 2;
 
       // 刻度线颜色：每5U使用醒目的黄色，其他使用灰色
       const tickColor = isMajorU ? '#fbbf24' : '#6b7280';
@@ -102,7 +102,7 @@ const RackModel = ({
         <group key={`u-label-${u}`}>
           {/* 左前侧柱子上的U位标识 - 贴在柱子正侧面（面向前方） */}
           <mesh
-            position={[leftPostX, yPos, frontPostZ + postWidth/2 + 0.001]}
+            position={[leftPostX, yPos, frontPostZ + postWidth / 2 + 0.001]}
             geometry={planeGeometry}
           >
             <meshBasicMaterial
@@ -114,7 +114,7 @@ const RackModel = ({
           </mesh>
           {/* 右前侧柱子上的U位标识 - 贴在柱子正侧面（面向前方） */}
           <mesh
-            position={[rightPostX, yPos, frontPostZ + postWidth/2 + 0.001]}
+            position={[rightPostX, yPos, frontPostZ + postWidth / 2 + 0.001]}
             geometry={planeGeometry}
           >
             <meshBasicMaterial
@@ -125,12 +125,12 @@ const RackModel = ({
             />
           </mesh>
           {/* 左前侧柱子上的刻度线 */}
-          <mesh position={[leftPostX, yPos, frontPostZ + postWidth/2 + 0.002]}>
+          <mesh position={[leftPostX, yPos, frontPostZ + postWidth / 2 + 0.002]}>
             <boxGeometry args={[postWidth, tickHeight, 0.001]} />
             <meshBasicMaterial color={tickColor} />
           </mesh>
           {/* 右前侧柱子上的刻度线 */}
-          <mesh position={[rightPostX, yPos, frontPostZ + postWidth/2 + 0.002]}>
+          <mesh position={[rightPostX, yPos, frontPostZ + postWidth / 2 + 0.002]}>
             <boxGeometry args={[postWidth, tickHeight, 0.001]} />
             <meshBasicMaterial color={tickColor} />
           </mesh>
@@ -142,53 +142,47 @@ const RackModel = ({
 
   // 生成机柜框架
   const frame = useMemo(() => {
-    const materialProps = { color: "#333", roughness: 0.5, metalness: 0.8 };
+    const materialProps = { color: '#333', roughness: 0.5, metalness: 0.8 };
     const postArgs = [postWidth, height, postWidth];
     const topBottomArgs = [width + 0.02, 0.02, depth + 0.02];
 
     return (
       <group>
-        <mesh position={[-width/2 + postWidth/2, height/2, -depth/2 + postWidth/2]}>
+        <mesh position={[-width / 2 + postWidth / 2, height / 2, -depth / 2 + postWidth / 2]}>
           <boxGeometry args={postArgs} />
           <meshStandardMaterial {...materialProps} />
         </mesh>
-        <mesh position={[width/2 - postWidth/2, height/2, -depth/2 + postWidth/2]}>
+        <mesh position={[width / 2 - postWidth / 2, height / 2, -depth / 2 + postWidth / 2]}>
           <boxGeometry args={postArgs} />
           <meshStandardMaterial {...materialProps} />
         </mesh>
-        <mesh position={[-width/2 + postWidth/2, height/2, depth/2 - postWidth/2]}>
+        <mesh position={[-width / 2 + postWidth / 2, height / 2, depth / 2 - postWidth / 2]}>
           <boxGeometry args={postArgs} />
           <meshStandardMaterial {...materialProps} />
         </mesh>
-        <mesh position={[width/2 - postWidth/2, height/2, depth/2 - postWidth/2]}>
+        <mesh position={[width / 2 - postWidth / 2, height / 2, depth / 2 - postWidth / 2]}>
           <boxGeometry args={postArgs} />
           <meshStandardMaterial {...materialProps} />
         </mesh>
 
         <mesh position={[0, height, 0]}>
-            <boxGeometry args={topBottomArgs} />
-            <meshStandardMaterial {...materialProps} />
+          <boxGeometry args={topBottomArgs} />
+          <meshStandardMaterial {...materialProps} />
         </mesh>
         <mesh position={[0, 0, 0]}>
-            <boxGeometry args={topBottomArgs} />
-            <meshStandardMaterial {...materialProps} />
+          <boxGeometry args={topBottomArgs} />
+          <meshStandardMaterial {...materialProps} />
         </mesh>
 
-        {[-1, 1].map((side) => (
-            <mesh key={`side-${side}`} position={[side * (width/2 - 0.005), height/2, 0]}>
-                <boxGeometry args={[0.01, height - 0.04, depth - 0.04]} />
-                <meshStandardMaterial
-                    color="#2d3748"
-                    roughness={0.4}
-                    metalness={0.7}
-                    side={2}
-                />
-            </mesh>
+        {[-1, 1].map(side => (
+          <mesh key={`side-${side}`} position={[side * (width / 2 - 0.005), height / 2, 0]}>
+            <boxGeometry args={[0.01, height - 0.04, depth - 0.04]} />
+            <meshStandardMaterial color="#2d3748" roughness={0.4} metalness={0.7} side={2} />
+          </mesh>
         ))}
 
         {/* U位刻度标识 */}
         {uLabels}
-
       </group>
     );
   }, [width, height, depth, postWidth, uLabels]);
@@ -197,47 +191,47 @@ const RackModel = ({
     <group position={[0, 0.5, 0]}>
       {frame}
 
-      <group position={[0, 0.1, 0]}> 
-        {devices.map((device) => {
-            const uStart = device.position || device.u_position || 1;
-            const uSize = device.height || device.u_height || 1;
-            const yPos = (uStart - 1) * uHeight + (uSize * uHeight) / 2;
-            
-            const deviceColor = getDeviceColor(device.type);
-            const statusColor = colors.status[device.status] || colors.status.running;
-            
-            return (
-                <LODManager
-                    key={device.id}
-                    device={device}
-                    uHeight={uHeight}
-                    rackDepth={depth}
-                    position={[0, yPos, 0]}
-                    deviceColor={deviceColor}
-                    statusColor={statusColor}
-                    level={LOD_LEVELS.HIGH}
-                >
-                    <DeviceModel
-                        device={device}
-                        uHeight={uHeight}
-                        rackDepth={depth}
-                        position={[0, 0, 0]}
-                        isSelected={selectedDeviceId === device.id}
-                        onClick={onDeviceClick}
-                        onPointerOver={onDeviceHover}
-                        onPointerOut={onDeviceLeave}
-                        onEdit={onEditDevice}
-                        onAddNic={onAddNic}
-                        onAddPort={onAddPort}
-                        tooltipFields={tooltipFields}
-                        slideEnabled={deviceSlideEnabled}
-                    />
-                </LODManager>
-            );
+      <group position={[0, 0.1, 0]}>
+        {devices.map(device => {
+          const uStart = device.position || device.u_position || 1;
+          const uSize = device.height || device.u_height || 1;
+          const yPos = (uStart - 1) * uHeight + (uSize * uHeight) / 2;
+
+          const deviceColor = getDeviceColor(device.type);
+          const statusColor = colors.status[device.status] || colors.status.running;
+
+          return (
+            <LODManager
+              key={device.id}
+              device={device}
+              uHeight={uHeight}
+              rackDepth={depth}
+              position={[0, yPos, 0]}
+              deviceColor={deviceColor}
+              statusColor={statusColor}
+              level={LOD_LEVELS.HIGH}
+            >
+              <DeviceModel
+                device={device}
+                uHeight={uHeight}
+                rackDepth={depth}
+                position={[0, 0, 0]}
+                isSelected={selectedDeviceId === device.id}
+                onClick={onDeviceClick}
+                onPointerOver={onDeviceHover}
+                onPointerOut={onDeviceLeave}
+                onEdit={onEditDevice}
+                onAddNic={onAddNic}
+                onAddPort={onAddPort}
+                tooltipFields={tooltipFields}
+                slideEnabled={deviceSlideEnabled}
+              />
+            </LODManager>
+          );
         })}
       </group>
     </group>
   );
 };
 
-export default RackModel;
\ No newline at end of file
+export default RackModel;
diff --git a/frontend/src/components/3d/Scene.jsx b/frontend/src/components/3d/Scene.jsx
index 10f819b..f3d0bd4 100644
--- a/frontend/src/components/3d/Scene.jsx
+++ b/frontend/src/components/3d/Scene.jsx
@@ -1,4 +1,11 @@
-import React, { Suspense, useMemo, useRef, useEffect, forwardRef, useImperativeHandle } from 'react';
+import React, {
+  Suspense,
+  useMemo,
+  useRef,
+  useEffect,
+  forwardRef,
+  useImperativeHandle,
+} from 'react';
 import { Canvas, useFrame, useThree } from '@react-three/fiber';
 import { OrbitControls, PerspectiveCamera, Environment } from '@react-three/drei';
 const envMapUrl = '/assets/3d/env.hdr';
@@ -22,7 +29,7 @@ const Controls = ({ rack, onControlsReady }) => {
   const { camera } = useThree();
   // 机柜中心点（中轴线）
   const rackHeight = rack?.height || 45;
-  const targetY = rackHeight * 0.04445 / 2 + 0.5;
+  const targetY = (rackHeight * 0.04445) / 2 + 0.5;
   const fixedTarget = useMemo(() => new THREE.Vector3(0, targetY, 0), [targetY]);
 
   // 根据机柜高度计算合适的相机距离限制
@@ -48,7 +55,7 @@ const Controls = ({ rack, onControlsReady }) => {
             camera.position.copy(initialCameraPosition);
             controlsRef.current.target.copy(fixedTarget);
             controlsRef.current.update();
-          }
+          },
         });
       }
     }
@@ -76,107 +83,122 @@ const Controls = ({ rack, onControlsReady }) => {
       enableZoom={true}
       enableRotate={true}
       mouseButtons={{
-        LEFT: 0,    // 左键旋转
-        MIDDLE: 1,  // 中键平移
-        RIGHT: 2    // 右键平移
+        LEFT: 0, // 左键旋转
+        MIDDLE: 1, // 中键平移
+        RIGHT: 2, // 右键平移
       }}
       touches={{
         ONE: 1,
-        TWO: 2
+        TWO: 2,
       }}
     />
   );
 };
 
-const Scene = forwardRef(({ rack, tooltipFields, onDeviceClick, onDeviceHover, onDeviceLeave }, ref) => {
-  // 从 Context 获取3D场景状态
-  const {
-    devices,
-    selectedDevice,
-    deviceSlideEnabled
-  } = useScene3D();
+const Scene = forwardRef(
+  ({ rack, tooltipFields, onDeviceClick, onDeviceHover, onDeviceLeave }, ref) => {
+    // 从 Context 获取3D场景状态
+    const { devices, selectedDevice, deviceSlideEnabled } = useScene3D();
 
-  // 用于存储 controls API
-  const controlsApiRef = useRef(null);
+    // 用于存储 controls API
+    const controlsApiRef = useRef(null);
 
-  // 使用 useImperativeHandle 暴露重置方法给父组件
-  useImperativeHandle(ref, () => ({
-    resetView: () => {
-      if (controlsApiRef.current) {
-        controlsApiRef.current.reset();
-      }
-    }
-  }));
+    // 使用 useImperativeHandle 暴露重置方法给父组件
+    useImperativeHandle(ref, () => ({
+      resetView: () => {
+        if (controlsApiRef.current) {
+          controlsApiRef.current.reset();
+        }
+      },
+    }));
 
-  // 使用 useMemo 稳定 props 引用
-  const rackModelProps = useMemo(() => ({
-    rack,
-    devices,
-    selectedDeviceId: selectedDevice?.id,
-    onDeviceClick,
-    onDeviceLeave,
-    onDeviceHover,
-    tooltipFields,
-    deviceSlideEnabled
-  }), [rack, devices, selectedDevice, onDeviceClick, onDeviceLeave, onDeviceHover, tooltipFields, deviceSlideEnabled]);
+    // 使用 useMemo 稳定 props 引用
+    const rackModelProps = useMemo(
+      () => ({
+        rack,
+        devices,
+        selectedDeviceId: selectedDevice?.id,
+        onDeviceClick,
+        onDeviceLeave,
+        onDeviceHover,
+        tooltipFields,
+        deviceSlideEnabled,
+      }),
+      [
+        rack,
+        devices,
+        selectedDevice,
+        onDeviceClick,
+        onDeviceLeave,
+        onDeviceHover,
+        tooltipFields,
+        deviceSlideEnabled,
+      ]
+    );
 
-  // 根据机柜高度动态计算相机初始位置
-  const rackHeight = rack?.height || 45;
-  const rackHeightMeters = rackHeight * 0.04445;
-  // 相机位置：确保能完整看到机柜，高度随机柜高度调整
-  const cameraPosition = useMemo(() => {
-    const baseHeight = 2;
-    const heightFactor = rackHeightMeters * 0.6;
-    const distance = Math.max(3, rackHeightMeters * 1.2);
-    return [distance * 0.7, baseHeight + heightFactor * 0.3, distance];
-  }, [rackHeightMeters]);
+    // 根据机柜高度动态计算相机初始位置
+    const rackHeight = rack?.height || 45;
+    const rackHeightMeters = rackHeight * 0.04445;
+    // 相机位置：确保能完整看到机柜，高度随机柜高度调整
+    const cameraPosition = useMemo(() => {
+      const baseHeight = 2;
+      const heightFactor = rackHeightMeters * 0.6;
+      const distance = Math.max(3, rackHeightMeters * 1.2);
+      return [distance * 0.7, baseHeight + heightFactor * 0.3, distance];
+    }, [rackHeightMeters]);
 
-  // 相机目标点（机柜中心）
-  const cameraTarget = useMemo(() => {
-    return [0, rackHeightMeters / 2 + 0.5, 0];
-  }, [rackHeightMeters]);
+    // 相机目标点（机柜中心）
+    const cameraTarget = useMemo(() => {
+      return [0, rackHeightMeters / 2 + 0.5, 0];
+    }, [rackHeightMeters]);
 
-  return (
-    <Canvas
-      shadows
-      dpr={deviceDpr}
-      performance={{ min: 0.5 }}
-      gl={{
-        antialias: true, // 对所有设备开启抗锯齿提升清晰度
-        alpha: true, // 必须开启alpha以支持透明背景
-        powerPreference: 'high-performance'
-      }}
-      style={{ background: 'transparent' }}
-    >
-      <PerspectiveCamera makeDefault position={cameraPosition} fov={45} />
+    return (
+      <Canvas
+        shadows
+        dpr={deviceDpr}
+        performance={{ min: 0.5 }}
+        gl={{
+          antialias: true, // 对所有设备开启抗锯齿提升清晰度
+          alpha: true, // 必须开启alpha以支持透明背景
+          powerPreference: 'high-performance',
+        }}
+        style={{ background: 'transparent' }}
+      >
+        <PerspectiveCamera makeDefault position={cameraPosition} fov={45} />
 
-      <ambientLight intensity={0.5} color="#ffffff" />
-      <pointLight position={[5, 8, 5]} intensity={2} color="#ffffff" castShadow />
-      <directionalLight
-        position={[10, 10, 5]}
-        intensity={1}
-        castShadow
-        shadow-mapSize={[2048, 2048]}
-        shadow-camera-far={20}
-        shadow-camera-left={-10}
-        shadow-camera-right={10}
-        shadow-camera-top={10}
-        shadow-camera-bottom={-10}
-      />
+        <ambientLight intensity={0.5} color="#ffffff" />
+        <pointLight position={[5, 8, 5]} intensity={2} color="#ffffff" castShadow />
+        <directionalLight
+          position={[10, 10, 5]}
+          intensity={1}
+          castShadow
+          shadow-mapSize={[2048, 2048]}
+          shadow-camera-far={20}
+          shadow-camera-left={-10}
+          shadow-camera-right={10}
+          shadow-camera-top={10}
+          shadow-camera-bottom={-10}
+        />
 
-      <Suspense fallback={null}>
-        <Environment files={envMapUrl} blur={0.5} resolution={256} background={false} />
-      </Suspense>
+        <Suspense fallback={null}>
+          <Environment files={envMapUrl} blur={0.5} resolution={256} background={false} />
+        </Suspense>
 
-      {/* Models */}
-      <group position={[0, 0, 0]}>
-        <RackModel {...rackModelProps} />
-      </group>
+        {/* Models */}
+        <group position={[0, 0, 0]}>
+          <RackModel {...rackModelProps} />
+        </group>
 
-      {/* Controls - 使用独立组件保持旋转中心固定 */}
-      <Controls rack={rack} onControlsReady={(api) => { controlsApiRef.current = api; }} />
-    </Canvas>
-  );
-});
+        {/* Controls - 使用独立组件保持旋转中心固定 */}
+        <Controls
+          rack={rack}
+          onControlsReady={api => {
+            controlsApiRef.current = api;
+          }}
+        />
+      </Canvas>
+    );
+  }
+);
 
-export default Scene;
\ No newline at end of file
+export default Scene;
diff --git a/frontend/src/components/3d/materials/devicePanel.jsx b/frontend/src/components/3d/materials/devicePanel.jsx
index 8ac5594..19de2d9 100644
--- a/frontend/src/components/3d/materials/devicePanel.jsx
+++ b/frontend/src/components/3d/materials/devicePanel.jsx
@@ -3,27 +3,62 @@ import { MATERIAL_CONFIGS, MATERIAL_TYPES } from './constants.js';
 
 export const createDeviceChassisMaterial = (options = {}) => {
   const config = MATERIAL_CONFIGS[MATERIAL_TYPES.DEVICE_CHASSIS];
-  return <meshStandardMaterial color={config.color} metalness={config.metalness} roughness={config.roughness} {...options} />;
+  return (
+    <meshStandardMaterial
+      color={config.color}
+      metalness={config.metalness}
+      roughness={config.roughness}
+      {...options}
+    />
+  );
 };
 
 export const createDevicePanelMaterial = (options = {}) => {
   const config = MATERIAL_CONFIGS[MATERIAL_TYPES.DEVICE_PANEL];
-  return <meshStandardMaterial color={config.color} metalness={config.metalness} roughness={config.roughness} {...options} />;
+  return (
+    <meshStandardMaterial
+      color={config.color}
+      metalness={config.metalness}
+      roughness={config.roughness}
+      {...options}
+    />
+  );
 };
 
 export const createDevicePanelSelectedMaterial = (options = {}) => {
   const config = MATERIAL_CONFIGS[MATERIAL_TYPES.DEVICE_PANEL_SELECTED];
-  return <meshStandardMaterial color={config.color} metalness={config.metalness} roughness={config.roughness} {...options} />;
+  return (
+    <meshStandardMaterial
+      color={config.color}
+      metalness={config.metalness}
+      roughness={config.roughness}
+      {...options}
+    />
+  );
 };
 
 export const createDriveTrayMaterial = (options = {}) => {
   const config = MATERIAL_CONFIGS[MATERIAL_TYPES.DRIVE_TRAY];
-  return <meshStandardMaterial color={config.color} metalness={config.metalness} roughness={config.roughness} {...options} />;
+  return (
+    <meshStandardMaterial
+      color={config.color}
+      metalness={config.metalness}
+      roughness={config.roughness}
+      {...options}
+    />
+  );
 };
 
 export const createDriveTrayHandleMaterial = (options = {}) => {
   const config = MATERIAL_CONFIGS[MATERIAL_TYPES.DRIVE_TRAY_HANDLE];
-  return <meshStandardMaterial color={config.color} metalness={config.metalness} roughness={config.roughness} {...options} />;
+  return (
+    <meshStandardMaterial
+      color={config.color}
+      metalness={config.metalness}
+      roughness={config.roughness}
+      {...options}
+    />
+  );
 };
 
 export const createLedIndicatorMaterial = (color = '#10b981', options = {}) => {
@@ -37,32 +72,78 @@ export const createLedErrorMaterial = (options = {}) => {
 
 export const createSfpPortMaterial = (options = {}) => {
   const config = MATERIAL_CONFIGS[MATERIAL_TYPES.SFP_PORT];
-  return <meshPhysicalMaterial color={config.color} metalness={config.metalness} roughness={config.roughness} transparent opacity={config.opacity} {...options} />;
+  return (
+    <meshPhysicalMaterial
+      color={config.color}
+      metalness={config.metalness}
+      roughness={config.roughness}
+      transparent
+      opacity={config.opacity}
+      {...options}
+    />
+  );
 };
 
 export const createRj45PortMaterial = (options = {}) => {
   const config = MATERIAL_CONFIGS[MATERIAL_TYPES.RJ45_PORT];
-  return <meshStandardMaterial color={config.color} metalness={config.metalness} roughness={config.roughness} {...options} />;
+  return (
+    <meshStandardMaterial
+      color={config.color}
+      metalness={config.metalness}
+      roughness={config.roughness}
+      {...options}
+    />
+  );
 };
 
 export const createVentHoleMaterial = (options = {}) => {
   const config = MATERIAL_CONFIGS[MATERIAL_TYPES.VENT_HOLE];
-  return <meshStandardMaterial color={config.color} metalness={config.metalness} roughness={config.roughness} {...options} />;
+  return (
+    <meshStandardMaterial
+      color={config.color}
+      metalness={config.metalness}
+      roughness={config.roughness}
+      {...options}
+    />
+  );
 };
 
 export const createBackPanelMaterial = (options = {}) => {
   const config = MATERIAL_CONFIGS[MATERIAL_TYPES.BACK_PANEL];
-  return <meshStandardMaterial color={config.color} metalness={config.metalness} roughness={config.roughness} transparent opacity={config.opacity} {...options} />;
+  return (
+    <meshStandardMaterial
+      color={config.color}
+      metalness={config.metalness}
+      roughness={config.roughness}
+      transparent
+      opacity={config.opacity}
+      {...options}
+    />
+  );
 };
 
 export const createPsuModuleMaterial = (options = {}) => {
   const config = MATERIAL_CONFIGS[MATERIAL_TYPES.PSU_MODULE];
-  return <meshStandardMaterial color={config.color} metalness={config.metalness} roughness={config.roughness} {...options} />;
+  return (
+    <meshStandardMaterial
+      color={config.color}
+      metalness={config.metalness}
+      roughness={config.roughness}
+      {...options}
+    />
+  );
 };
 
 export const createFanModuleMaterial = (options = {}) => {
   const config = MATERIAL_CONFIGS[MATERIAL_TYPES.FAN_MODULE];
-  return <meshStandardMaterial color={config.color} metalness={config.metalness} roughness={config.roughness} {...options} />;
+  return (
+    <meshStandardMaterial
+      color={config.color}
+      metalness={config.metalness}
+      roughness={config.roughness}
+      {...options}
+    />
+  );
 };
 
 export const createConsolePortMaterial = (color = '#facc15') => {
diff --git a/frontend/src/components/3d/materials/rackFrame.jsx b/frontend/src/components/3d/materials/rackFrame.jsx
index 697a27b..8a2abc3 100644
--- a/frontend/src/components/3d/materials/rackFrame.jsx
+++ b/frontend/src/components/3d/materials/rackFrame.jsx
@@ -3,32 +3,79 @@ import { MATERIAL_CONFIGS, MATERIAL_TYPES } from './constants.js';
 
 export const createRackFrameMaterial = (options = {}) => {
   const config = MATERIAL_CONFIGS[MATERIAL_TYPES.RACK_FRAME];
-  return <meshStandardMaterial color={config.color} metalness={config.metalness} roughness={config.roughness} envMapIntensity={config.envMapIntensity} {...options} />;
+  return (
+    <meshStandardMaterial
+      color={config.color}
+      metalness={config.metalness}
+      roughness={config.roughness}
+      envMapIntensity={config.envMapIntensity}
+      {...options}
+    />
+  );
 };
 
 export const createRailMaterial = (options = {}) => {
   const config = MATERIAL_CONFIGS[MATERIAL_TYPES.RAIL];
-  return <meshStandardMaterial color={config.color} metalness={config.metalness} roughness={config.roughness} envMapIntensity={config.envMapIntensity} {...options} />;
+  return (
+    <meshStandardMaterial
+      color={config.color}
+      metalness={config.metalness}
+      roughness={config.roughness}
+      envMapIntensity={config.envMapIntensity}
+      {...options}
+    />
+  );
 };
 
 export const createRailHoleMaterial = (options = {}) => {
   const config = MATERIAL_CONFIGS[MATERIAL_TYPES.RAIL_HOLE];
-  return <meshBasicMaterial color={config.color} metalness={config.metalness} roughness={config.roughness} {...options} />;
+  return (
+    <meshBasicMaterial
+      color={config.color}
+      metalness={config.metalness}
+      roughness={config.roughness}
+      {...options}
+    />
+  );
 };
 
 export const createSidePanelMaterial = (options = {}) => {
   const config = MATERIAL_CONFIGS[MATERIAL_TYPES.SIDE_PANEL];
-  return <meshStandardMaterial color={config.color} metalness={config.metalness} roughness={config.roughness} envMapIntensity={config.envMapIntensity} {...options} />;
+  return (
+    <meshStandardMaterial
+      color={config.color}
+      metalness={config.metalness}
+      roughness={config.roughness}
+      envMapIntensity={config.envMapIntensity}
+      {...options}
+    />
+  );
 };
 
 export const createTopPlateMaterial = (options = {}) => {
   const config = MATERIAL_CONFIGS[MATERIAL_TYPES.TOP_PLATE];
-  return <meshStandardMaterial color={config.color} metalness={config.metalness} roughness={config.roughness} envMapIntensity={config.envMapIntensity} {...options} />;
+  return (
+    <meshStandardMaterial
+      color={config.color}
+      metalness={config.metalness}
+      roughness={config.roughness}
+      envMapIntensity={config.envMapIntensity}
+      {...options}
+    />
+  );
 };
 
 export const createBottomPlateMaterial = (options = {}) => {
   const config = MATERIAL_CONFIGS[MATERIAL_TYPES.BOTTOM_PLATE];
-  return <meshStandardMaterial color={config.color} metalness={config.metalness} roughness={config.roughness} envMapIntensity={config.envMapIntensity} {...options} />;
+  return (
+    <meshStandardMaterial
+      color={config.color}
+      metalness={config.metalness}
+      roughness={config.roughness}
+      envMapIntensity={config.envMapIntensity}
+      {...options}
+    />
+  );
 };
 
 export const createTextLabelMaterial = (color = '#ffffff') => {
diff --git a/frontend/src/components/3d/materials/utils.jsx b/frontend/src/components/3d/materials/utils.jsx
index d802a1d..7675a0f 100644
--- a/frontend/src/components/3d/materials/utils.jsx
+++ b/frontend/src/components/3d/materials/utils.jsx
@@ -1,10 +1,10 @@
 import { MATERIAL_CONFIGS, MATERIAL_TYPES } from './constants.js';
 
-export const getMaterialConfig = (type) => {
+export const getMaterialConfig = type => {
   return MATERIAL_CONFIGS[type] || null;
 };
 
-export const getMaterialType = (type) => {
+export const getMaterialType = type => {
   return MATERIAL_TYPES[type] || null;
 };
 
diff --git a/frontend/src/components/CableCreateModal.jsx b/frontend/src/components/CableCreateModal.jsx
index 9fed575..35680e1 100644
--- a/frontend/src/components/CableCreateModal.jsx
+++ b/frontend/src/components/CableCreateModal.jsx
@@ -20,7 +20,7 @@ const CableCreateModal = ({ visible, onClose, onSuccess, sourceDevice }) => {
       form.resetFields();
       if (sourceDevice) {
         form.setFieldsValue({
-            sourceDeviceId: sourceDevice.deviceId || sourceDevice.id,
+          sourceDeviceId: sourceDevice.deviceId || sourceDevice.id,
         });
         fetchDevicePorts(sourceDevice.deviceId || sourceDevice.id, 'source');
       }
@@ -63,12 +63,12 @@ const CableCreateModal = ({ visible, onClose, onSuccess, sourceDevice }) => {
     }
   };
 
-  const handleSourceDeviceChange = (deviceId) => {
+  const handleSourceDeviceChange = deviceId => {
     form.setFieldsValue({ sourcePort: undefined });
     fetchDevicePorts(deviceId, 'source');
   };
 
-  const handleTargetDeviceChange = (deviceId) => {
+  const handleTargetDeviceChange = deviceId => {
     form.setFieldsValue({ targetPort: undefined });
     fetchDevicePorts(deviceId, 'target');
   };
@@ -85,22 +85,19 @@ const CableCreateModal = ({ visible, onClose, onSuccess, sourceDevice }) => {
       let payload = { ...values };
 
       // If Source is NOT Switch AND Target IS Switch, swap them
-      if (sourceDev && targetDev && 
-          sourceDev.type !== 'switch' && 
-          targetDev.type === 'switch') {
-          
-          payload = {
-              ...values,
-              sourceDeviceId: values.targetDeviceId,
-              sourcePort: values.targetPort,
-              targetDeviceId: values.sourceDeviceId,
-              targetPort: values.sourcePort
-          };
-          console.log('Swapped source/target to ensure Switch is Source');
+      if (sourceDev && targetDev && sourceDev.type !== 'switch' && targetDev.type === 'switch') {
+        payload = {
+          ...values,
+          sourceDeviceId: values.targetDeviceId,
+          sourcePort: values.targetPort,
+          targetDeviceId: values.sourceDeviceId,
+          targetPort: values.sourcePort,
+        };
+        console.log('Swapped source/target to ensure Switch is Source');
       }
 
       await axios.post('/api/cables', payload);
-      
+
       message.success('接线创建成功');
       onSuccess?.();
       onClose();
@@ -130,122 +127,125 @@ const CableCreateModal = ({ visible, onClose, onSuccess, sourceDevice }) => {
     >
       <Form form={form} layout="vertical">
         <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
-            {/* Source Side */}
-            <div style={{ padding: '12px', background: '#f9f9f9', borderRadius: '8px' }}>
-                <div style={{ marginBottom: 12, fontWeight: 500, color: '#666' }}>源设备 (起点)</div>
-                <Form.Item
-                    name="sourceDeviceId"
-                    label="设备"
-                    rules={[{ required: true, message: '请选择源设备' }]}
-                >
-                    <Select
-                        placeholder="选择源设备"
-                        showSearch
-                        filterOption={(input, option) =>
-                            (option?.children ?? '').toLowerCase().includes(input.toLowerCase())
-                        }
-                        onChange={handleSourceDeviceChange}
-                        loading={fetchingDevices}
-                        disabled={!!sourceDevice} // Lock source device if provided
-                    >
-                        {devices.map(d => (
-                            <Option key={d.deviceId} value={d.deviceId}>{d.name}</Option>
-                        ))}
-                    </Select>
-                </Form.Item>
-                <Form.Item
-                    name="sourcePort"
-                    label="端口"
-                    rules={[{ required: true, message: '请选择源端口' }]}
-                >
-                    <Select placeholder="选择源端口" showSearch>
-                        {sourcePorts.map(p => (
-                            <Option key={p.portId} value={p.portName}>
-                                {p.portName} ({p.portType})
-                            </Option>
-                        ))}
-                    </Select>
-                </Form.Item>
-            </div>
+          {/* Source Side */}
+          <div style={{ padding: '12px', background: '#f9f9f9', borderRadius: '8px' }}>
+            <div style={{ marginBottom: 12, fontWeight: 500, color: '#666' }}>源设备 (起点)</div>
+            <Form.Item
+              name="sourceDeviceId"
+              label="设备"
+              rules={[{ required: true, message: '请选择源设备' }]}
+            >
+              <Select
+                placeholder="选择源设备"
+                showSearch
+                filterOption={(input, option) =>
+                  (option?.children ?? '').toLowerCase().includes(input.toLowerCase())
+                }
+                onChange={handleSourceDeviceChange}
+                loading={fetchingDevices}
+                disabled={!!sourceDevice} // Lock source device if provided
+              >
+                {devices.map(d => (
+                  <Option key={d.deviceId} value={d.deviceId}>
+                    {d.name}
+                  </Option>
+                ))}
+              </Select>
+            </Form.Item>
+            <Form.Item
+              name="sourcePort"
+              label="端口"
+              rules={[{ required: true, message: '请选择源端口' }]}
+            >
+              <Select placeholder="选择源端口" showSearch>
+                {sourcePorts.map(p => (
+                  <Option key={p.portId} value={p.portName}>
+                    {p.portName} ({p.portType})
+                  </Option>
+                ))}
+              </Select>
+            </Form.Item>
+          </div>
 
-            {/* Target Side */}
-            <div style={{ padding: '12px', background: '#f9f9f9', borderRadius: '8px' }}>
-                <div style={{ marginBottom: 12, fontWeight: 500, color: '#666' }}>目标设备 (终点)</div>
-                <Form.Item
-                    name="targetDeviceId"
-                    label="设备"
-                    rules={[{ required: true, message: '请选择目标设备' }]}
-                >
-                    <Select
-                        placeholder="选择目标设备"
-                        showSearch
-                        filterOption={(input, option) =>
-                            (option?.children ?? '').toLowerCase().includes(input.toLowerCase())
-                        }
-                        onChange={handleTargetDeviceChange}
-                        loading={fetchingDevices}
-                    >
-                        {devices.filter(d => d.deviceId !== form.getFieldValue('sourceDeviceId')).map(d => (
-                            <Option key={d.deviceId} value={d.deviceId}>{d.name}</Option>
-                        ))}
-                    </Select>
-                </Form.Item>
-                <Form.Item
-                    name="targetPort"
-                    label="端口"
-                    rules={[{ required: true, message: '请选择目标端口' }]}
-                >
-                    <Select 
-                        placeholder="选择目标端口" 
-                        showSearch
-                        disabled={!form.getFieldValue('targetDeviceId')}
-                    >
-                        {targetPorts.map(p => (
-                            <Option key={p.portId} value={p.portName}>
-                                {p.portName} ({p.portType})
-                            </Option>
-                        ))}
-                    </Select>
-                </Form.Item>
-            </div>
+          {/* Target Side */}
+          <div style={{ padding: '12px', background: '#f9f9f9', borderRadius: '8px' }}>
+            <div style={{ marginBottom: 12, fontWeight: 500, color: '#666' }}>目标设备 (终点)</div>
+            <Form.Item
+              name="targetDeviceId"
+              label="设备"
+              rules={[{ required: true, message: '请选择目标设备' }]}
+            >
+              <Select
+                placeholder="选择目标设备"
+                showSearch
+                filterOption={(input, option) =>
+                  (option?.children ?? '').toLowerCase().includes(input.toLowerCase())
+                }
+                onChange={handleTargetDeviceChange}
+                loading={fetchingDevices}
+              >
+                {devices
+                  .filter(d => d.deviceId !== form.getFieldValue('sourceDeviceId'))
+                  .map(d => (
+                    <Option key={d.deviceId} value={d.deviceId}>
+                      {d.name}
+                    </Option>
+                  ))}
+              </Select>
+            </Form.Item>
+            <Form.Item
+              name="targetPort"
+              label="端口"
+              rules={[{ required: true, message: '请选择目标端口' }]}
+            >
+              <Select
+                placeholder="选择目标端口"
+                showSearch
+                disabled={!form.getFieldValue('targetDeviceId')}
+              >
+                {targetPorts.map(p => (
+                  <Option key={p.portId} value={p.portName}>
+                    {p.portName} ({p.portType})
+                  </Option>
+                ))}
+              </Select>
+            </Form.Item>
+          </div>
         </div>
 
         <div style={{ marginTop: 16 }}>
-            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 16 }}>
-                <Form.Item
-                    name="cableType"
-                    label="线缆类型"
-                    initialValue="ethernet"
-                    rules={[{ required: true }]}
-                >
-                    <Select>
-                        <Option value="ethernet">网线</Option>
-                        <Option value="fiber">光纤</Option>
-                        <Option value="copper">铜缆</Option>
-                    </Select>
-                </Form.Item>
-                <Form.Item
-                    name="status"
-                    label="状态"
-                    initialValue="normal"
-                    rules={[{ required: true }]}
-                >
-                    <Select>
-                        <Option value="normal">正常</Option>
-                        <Option value="fault">故障</Option>
-                        <Option value="disconnected">未连接</Option>
-                    </Select>
-                </Form.Item>
-                <Form.Item
-                    name="cableLength"
-                    label="长度 (米)"
-                >
-                    <Input type="number" min={0} />
-                </Form.Item>
-            </div>
-            <Form.Item name="description" label="描述">
-                <Input.TextArea rows={2} />
+          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 16 }}>
+            <Form.Item
+              name="cableType"
+              label="线缆类型"
+              initialValue="ethernet"
+              rules={[{ required: true }]}
+            >
+              <Select>
+                <Option value="ethernet">网线</Option>
+                <Option value="fiber">光纤</Option>
+                <Option value="copper">铜缆</Option>
+              </Select>
             </Form.Item>
+            <Form.Item
+              name="status"
+              label="状态"
+              initialValue="normal"
+              rules={[{ required: true }]}
+            >
+              <Select>
+                <Option value="normal">正常</Option>
+                <Option value="fault">故障</Option>
+                <Option value="disconnected">未连接</Option>
+              </Select>
+            </Form.Item>
+            <Form.Item name="cableLength" label="长度 (米)">
+              <Input type="number" min={0} />
+            </Form.Item>
+          </div>
+          <Form.Item name="description" label="描述">
+            <Input.TextArea rows={2} />
+          </Form.Item>
         </div>
       </Form>
     </Modal>
diff --git a/frontend/src/components/DeviceDetailDrawer.jsx b/frontend/src/components/DeviceDetailDrawer.jsx
index 9e78960..a7898e1 100644
--- a/frontend/src/components/DeviceDetailDrawer.jsx
+++ b/frontend/src/components/DeviceDetailDrawer.jsx
@@ -1,6 +1,24 @@
 import React, { useState, useCallback, useMemo } from 'react';
-import { Drawer, Tabs, Tag, Space, Typography, Empty, Card, Tooltip, Button, Popconfirm } from 'antd';
-import { ApiOutlined, CloudServerOutlined, EnvironmentOutlined, EditOutlined, PlusCircleOutlined, DeleteOutlined } from '@ant-design/icons';
+import {
+  Drawer,
+  Tabs,
+  Tag,
+  Space,
+  Typography,
+  Empty,
+  Card,
+  Tooltip,
+  Button,
+  Popconfirm,
+} from 'antd';
+import {
+  ApiOutlined,
+  CloudServerOutlined,
+  EnvironmentOutlined,
+  EditOutlined,
+  PlusCircleOutlined,
+  DeleteOutlined,
+} from '@ant-design/icons';
 import NetworkCardPanel from './NetworkCardPanel';
 
 const { Text, Title } = Typography;
@@ -10,25 +28,38 @@ const designTokens = {
     primary: '#667eea',
     success: '#10b981',
     error: '#ef4444',
-    warning: '#f59e0b'
+    warning: '#f59e0b',
   },
   spacing: {
     sm: 8,
-    md: 16
-  }
+    md: 16,
+  },
 };
 
-function DeviceDetailDrawer({ device, visible, onClose, cables, onRefreshCables, onEdit, onAddNic, onAddPort, onAddCable, onDeleteCable, tooltipFields, refreshTrigger }) {
+function DeviceDetailDrawer({
+  device,
+  visible,
+  onClose,
+  cables,
+  onRefreshCables,
+  onEdit,
+  onAddNic,
+  onAddPort,
+  onAddCable,
+  onDeleteCable,
+  tooltipFields,
+  refreshTrigger,
+}) {
   const [activeTab, setActiveTab] = useState('ports');
 
   const deviceCables = useMemo(() => {
     if (!device || !cables) return [];
-    return cables.filter(c =>
-      c.sourceDeviceId === device.deviceId || c.targetDeviceId === device.deviceId
+    return cables.filter(
+      c => c.sourceDeviceId === device.deviceId || c.targetDeviceId === device.deviceId
     );
   }, [device, cables]);
 
-  const getStatusTag = useCallback((status) => {
+  const getStatusTag = useCallback(status => {
     const config = {
       running: { color: 'success', text: '运行中' },
       normal: { color: 'success', text: '正常' },
@@ -36,13 +67,13 @@ function DeviceDetailDrawer({ device, visible, onClose, cables, onRefreshCables,
       error: { color: 'error', text: '故障' },
       fault: { color: 'error', text: '故障' },
       offline: { color: 'default', text: '离线' },
-      maintenance: { color: 'processing', text: '维护中' }
+      maintenance: { color: 'processing', text: '维护中' },
     };
     const { color, text } = config[status] || { color: 'default', text: status };
     return <Tag color={color}>{text}</Tag>;
   }, []);
 
-  const getDeviceTypeName = useCallback((type) => {
+  const getDeviceTypeName = useCallback(type => {
     const typeMap = {
       server: '服务器',
       switch: '交换机',
@@ -50,41 +81,53 @@ function DeviceDetailDrawer({ device, visible, onClose, cables, onRefreshCables,
       storage: '存储设备',
       firewall: '防火墙',
       ups: 'UPS',
-      pdu: 'PDU'
+      pdu: 'PDU',
     };
     return typeMap[type?.toLowerCase()] || type || '未知设备';
   }, []);
 
-  const renderFieldValue = useCallback((field, device) => {
+  const renderFieldValue = useCallback(
+    (field, device) => {
       const fieldKey = field.field;
       if (fieldKey === 'status') return getStatusTag(device.status);
-      
+
       // 优先从device对象获取值，如果没有则从customFields中获取
       let value = device[fieldKey];
-      if ((value === undefined || value === null) && device.customFields && typeof device.customFields === 'object') {
-          value = device.customFields[fieldKey];
+      if (
+        (value === undefined || value === null) &&
+        device.customFields &&
+        typeof device.customFields === 'object'
+      ) {
+        value = device.customFields[fieldKey];
       }
-      
+
       if (fieldKey === 'type') value = getDeviceTypeName(value);
-      else if (fieldKey === 'position') value = `U${device.position} ${device.height ? `(${device.height}U)` : ''}`;
-      
-      return <Text strong style={{ fontSize: '14px' }}>{value !== undefined && value !== null ? value : '-'}</Text>;
-  }, [getStatusTag, getDeviceTypeName]);
+      else if (fieldKey === 'position')
+        value = `U${device.position} ${device.height ? `(${device.height}U)` : ''}`;
+
+      return (
+        <Text strong style={{ fontSize: '14px' }}>
+          {value !== undefined && value !== null ? value : '-'}
+        </Text>
+      );
+    },
+    [getStatusTag, getDeviceTypeName]
+  );
 
   const displayFields = useMemo(() => {
-      if (tooltipFields && Object.keys(tooltipFields).length > 0) {
-          return Object.values(tooltipFields).filter(f => f.enabled);
-      }
-      
-      // Default fallback fields if no config
-      return [
-          { field: 'deviceId', label: '设备ID' },
-          { field: 'type', label: '设备类型' },
-          { field: 'status', label: '设备状态' },
-          { field: 'position', label: '位置' },
-          { field: 'ipAddress', label: 'IP地址' },
-          { field: 'brand', label: '品牌' }
-      ];
+    if (tooltipFields && Object.keys(tooltipFields).length > 0) {
+      return Object.values(tooltipFields).filter(f => f.enabled);
+    }
+
+    // Default fallback fields if no config
+    return [
+      { field: 'deviceId', label: '设备ID' },
+      { field: 'type', label: '设备类型' },
+      { field: 'status', label: '设备状态' },
+      { field: 'position', label: '位置' },
+      { field: 'ipAddress', label: 'IP地址' },
+      { field: 'brand', label: '品牌' },
+    ];
   }, [tooltipFields]);
 
   const tabItems = [
@@ -103,7 +146,7 @@ function DeviceDetailDrawer({ device, visible, onClose, cables, onRefreshCables,
           onRefresh={onRefreshCables}
           refreshTrigger={refreshTrigger}
         />
-      )
+      ),
     },
     {
       key: 'cables',
@@ -138,38 +181,64 @@ function DeviceDetailDrawer({ device, visible, onClose, cables, onRefreshCables,
                   <div style={{ marginBottom: designTokens.spacing.sm }}>
                     <Space direction="vertical" size={4}>
                       <div>
-                        <Text type="secondary" style={{ fontSize: '12px' }}>源设备：</Text>
+                        <Text type="secondary" style={{ fontSize: '12px' }}>
+                          源设备：
+                        </Text>
                         <div style={{ fontWeight: 500 }}>
                           {cable.sourceDevice?.name || '-'}
-                          <Tag color="blue" style={{ marginLeft: '8px' }}>{cable.sourcePort}</Tag>
+                          <Tag color="blue" style={{ marginLeft: '8px' }}>
+                            {cable.sourcePort}
+                          </Tag>
                         </div>
                       </div>
                       <div>
-                        <Text type="secondary" style={{ fontSize: '12px' }}>目标设备：</Text>
+                        <Text type="secondary" style={{ fontSize: '12px' }}>
+                          目标设备：
+                        </Text>
                         <div style={{ fontWeight: 500 }}>
                           {cable.targetDevice?.name || '-'}
-                          <Tag color="green" style={{ marginLeft: '8px' }}>{cable.targetPort}</Tag>
+                          <Tag color="green" style={{ marginLeft: '8px' }}>
+                            {cable.targetPort}
+                          </Tag>
                         </div>
                       </div>
                     </Space>
                   </div>
 
                   <Space wrap>
-                    <Tag color={cable.status === 'normal' ? 'success' : cable.status === 'fault' ? 'error' : 'default'}>
-                      {cable.status === 'normal' ? '正常' : cable.status === 'fault' ? '故障' : '未连接'}
+                    <Tag
+                      color={
+                        cable.status === 'normal'
+                          ? 'success'
+                          : cable.status === 'fault'
+                            ? 'error'
+                            : 'default'
+                      }
+                    >
+                      {cable.status === 'normal'
+                        ? '正常'
+                        : cable.status === 'fault'
+                          ? '故障'
+                          : '未连接'}
                     </Tag>
                     <Tag color="purple">
-                      {cable.cableType === 'ethernet' ? '网线' : cable.cableType === 'fiber' ? '光纤' : '铜缆'}
+                      {cable.cableType === 'ethernet'
+                        ? '网线'
+                        : cable.cableType === 'fiber'
+                          ? '光纤'
+                          : '铜缆'}
                     </Tag>
-                    {cable.cableLength && (
-                      <Tag color="orange">
-                        {cable.cableLength}m
-                      </Tag>
-                    )}
+                    {cable.cableLength && <Tag color="orange">{cable.cableLength}m</Tag>}
                   </Space>
 
                   {cable.description && (
-                    <div style={{ marginTop: designTokens.spacing.sm, fontSize: '12px', color: '#666' }}>
+                    <div
+                      style={{
+                        marginTop: designTokens.spacing.sm,
+                        fontSize: '12px',
+                        color: '#666',
+                      }}
+                    >
                       {cable.description}
                     </div>
                   )}
@@ -178,8 +247,8 @@ function DeviceDetailDrawer({ device, visible, onClose, cables, onRefreshCables,
             </Space>
           )}
         </div>
-      )
-    }
+      ),
+    },
   ];
 
   if (!device) return null;
@@ -189,11 +258,15 @@ function DeviceDetailDrawer({ device, visible, onClose, cables, onRefreshCables,
       title={
         <Space style={{ maxWidth: '280px', overflow: 'hidden' }}>
           <CloudServerOutlined style={{ color: designTokens.colors.primary, flexShrink: 0 }} />
-          <span style={{
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            whiteSpace: 'nowrap'
-          }}>设备详情 - {device.name}</span>
+          <span
+            style={{
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+            }}
+          >
+            设备详情 - {device.name}
+          </span>
         </Space>
       }
       placement="right"
@@ -206,42 +279,51 @@ function DeviceDetailDrawer({ device, visible, onClose, cables, onRefreshCables,
             <Button icon={<EditOutlined />} onClick={() => onEdit?.(device)} />
           </Tooltip>
           <Tooltip title="添加网卡">
-            <Button icon={<PlusCircleOutlined />} onClick={() => onAddNic?.(device)}>加网卡</Button>
+            <Button icon={<PlusCircleOutlined />} onClick={() => onAddNic?.(device)}>
+              加网卡
+            </Button>
           </Tooltip>
           <Tooltip title="添加端口">
-            <Button icon={<ApiOutlined />} onClick={() => onAddPort?.(device)}>加端口</Button>
+            <Button icon={<ApiOutlined />} onClick={() => onAddPort?.(device)}>
+              加端口
+            </Button>
           </Tooltip>
           <Tooltip title="添加接线">
-            <Button icon={<EnvironmentOutlined />} onClick={() => onAddCable?.(device)}>加接线</Button>
+            <Button icon={<EnvironmentOutlined />} onClick={() => onAddCable?.(device)}>
+              加接线
+            </Button>
           </Tooltip>
         </Space>
       }
       styles={{ body: { padding: '16px 20px', overflow: 'auto' } }}
     >
       <div className="device-info-section" style={{ marginBottom: '20px' }}>
-        <Title level={5} style={{ margin: '0 0 12px 0', color: '#1e293b' }}>基本信息</Title>
-        <div className="info-grid" style={{
-          display: 'grid',
-          gridTemplateColumns: 'repeat(2, 1fr)',
-          gap: '12px',
-          background: '#f8fafc',
-          padding: '16px',
-          borderRadius: '10px'
-        }}>
+        <Title level={5} style={{ margin: '0 0 12px 0', color: '#1e293b' }}>
+          基本信息
+        </Title>
+        <div
+          className="info-grid"
+          style={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(2, 1fr)',
+            gap: '12px',
+            background: '#f8fafc',
+            padding: '16px',
+            borderRadius: '10px',
+          }}
+        >
           {displayFields.map(field => (
             <div className="info-item" key={field.field}>
-              <Text type="secondary" style={{ fontSize: '12px', display: 'block' }}>{field.label}</Text>
+              <Text type="secondary" style={{ fontSize: '12px', display: 'block' }}>
+                {field.label}
+              </Text>
               {renderFieldValue(field, device)}
             </div>
           ))}
         </div>
       </div>
 
-      <Tabs
-        activeKey={activeTab}
-        onChange={setActiveTab}
-        items={tabItems}
-      />
+      <Tabs activeKey={activeTab} onChange={setActiveTab} items={tabItems} />
     </Drawer>
   );
 }
diff --git a/frontend/src/components/NetworkCardCreateModal.jsx b/frontend/src/components/NetworkCardCreateModal.jsx
index b71091f..da09e69 100644
--- a/frontend/src/components/NetworkCardCreateModal.jsx
+++ b/frontend/src/components/NetworkCardCreateModal.jsx
@@ -9,12 +9,12 @@ const { TextArea } = Input;
 const designTokens = {
   colors: {
     primary: {
-      main: '#667eea'
-    }
+      main: '#667eea',
+    },
   },
   borderRadius: {
-    medium: '10px'
-  }
+    medium: '10px',
+  },
 };
 
 function NetworkCardCreateModal({ device, visible, onClose, onSuccess }) {
@@ -33,7 +33,7 @@ function NetworkCardCreateModal({ device, visible, onClose, onSuccess }) {
         description: values.description,
         model: values.model,
         manufacturer: values.manufacturer,
-        status: values.status
+        status: values.status,
       });
 
       message.success('网卡创建成功');
@@ -77,7 +77,7 @@ function NetworkCardCreateModal({ device, visible, onClose, onSuccess }) {
         form={form}
         layout="vertical"
         initialValues={{
-          status: 'normal'
+          status: 'normal',
         }}
       >
         <Form.Item
@@ -92,24 +92,15 @@ function NetworkCardCreateModal({ device, visible, onClose, onSuccess }) {
           }
           rules={[
             { required: true, message: '请输入网卡名称' },
-            { max: 50, message: '名称不能超过50个字符' }
+            { max: 50, message: '名称不能超过50个字符' },
           ]}
         >
           <Input placeholder="例如: 网卡1、eth0、LAN1" />
         </Form.Item>
 
         <Space style={{ display: 'flex', width: '100%' }}>
-          <Form.Item
-            name="slotNumber"
-            label="插槽编号"
-            style={{ flex: 1 }}
-          >
-            <InputNumber
-              placeholder="可选"
-              min={1}
-              max={100}
-              style={{ width: '100%' }}
-            />
+          <Form.Item name="slotNumber" label="插槽编号" style={{ flex: 1 }}>
+            <InputNumber placeholder="可选" min={1} max={100} style={{ width: '100%' }} />
           </Form.Item>
 
           <Form.Item
@@ -128,27 +119,16 @@ function NetworkCardCreateModal({ device, visible, onClose, onSuccess }) {
         </Space>
 
         <Space style={{ display: 'flex', width: '100%' }}>
-          <Form.Item
-            name="manufacturer"
-            label="制造商"
-            style={{ flex: 1 }}
-          >
+          <Form.Item name="manufacturer" label="制造商" style={{ flex: 1 }}>
             <Input placeholder="如: Intel、Realtek、Broadcom" />
           </Form.Item>
 
-          <Form.Item
-            name="model"
-            label="型号"
-            style={{ flex: 1 }}
-          >
+          <Form.Item name="model" label="型号" style={{ flex: 1 }}>
             <Input placeholder="如: X520-DA2" />
           </Form.Item>
         </Space>
 
-        <Form.Item
-          name="description"
-          label="描述"
-        >
+        <Form.Item name="description" label="描述">
           <TextArea rows={2} placeholder="请输入描述信息（可选）" />
         </Form.Item>
       </Form>
diff --git a/frontend/src/components/NetworkCardPanel.jsx b/frontend/src/components/NetworkCardPanel.jsx
index d771309..b76f187 100644
--- a/frontend/src/components/NetworkCardPanel.jsx
+++ b/frontend/src/components/NetworkCardPanel.jsx
@@ -1,6 +1,25 @@
 import React, { useState, useEffect, useCallback } from 'react';
-import { Table, Button, Space, Tag, Tooltip, Popconfirm, Empty, Spin, Badge, Collapse, Card } from 'antd';
-import { PlusOutlined, DeleteOutlined, ReloadOutlined, ApiOutlined, CloudServerOutlined, FolderOutlined } from '@ant-design/icons';
+import {
+  Table,
+  Button,
+  Space,
+  Tag,
+  Tooltip,
+  Popconfirm,
+  Empty,
+  Spin,
+  Badge,
+  Collapse,
+  Card,
+} from 'antd';
+import {
+  PlusOutlined,
+  DeleteOutlined,
+  ReloadOutlined,
+  ApiOutlined,
+  CloudServerOutlined,
+  FolderOutlined,
+} from '@ant-design/icons';
 import axios from 'axios';
 import PortCreateModal from './PortCreateModal';
 import NetworkCardCreateModal from './NetworkCardCreateModal';
@@ -10,12 +29,12 @@ const { Panel } = Collapse;
 const designTokens = {
   colors: {
     primary: {
-      main: '#667eea'
+      main: '#667eea',
     },
     success: '#10b981',
     error: '#ef4444',
-    warning: '#f59e0b'
-  }
+    warning: '#f59e0b',
+  },
 };
 
 function NetworkCardPanel({ deviceId, deviceName, onRefresh, refreshTrigger }) {
@@ -34,7 +53,7 @@ function NetworkCardPanel({ deviceId, deviceName, onRefresh, refreshTrigger }) {
       setLoading(true);
       const [cardsResponse, networkCardsResponse] = await Promise.all([
         axios.get(`/api/network-cards/device/${deviceId}/with-ports`),
-        axios.get(`/api/network-cards/device/${deviceId}`)
+        axios.get(`/api/network-cards/device/${deviceId}`),
       ]);
 
       const cardsData = cardsResponse.data || [];
@@ -58,27 +77,35 @@ function NetworkCardPanel({ deviceId, deviceName, onRefresh, refreshTrigger }) {
     fetchData();
   }, [fetchData, refreshTrigger]);
 
-  const handleDeleteCard = useCallback(async (card) => {
-    try {
-      await axios.delete(`/api/network-cards/${card.nicId}`);
-      import('antd').then(({ message }) => message.success('网卡删除成功'));
-      fetchData();
-      onRefresh?.();
-    } catch (error) {
-      import('antd').then(({ message }) => message.error(error.response?.data?.error || '网卡删除失败'));
-    }
-  }, [fetchData, onRefresh]);
+  const handleDeleteCard = useCallback(
+    async card => {
+      try {
+        await axios.delete(`/api/network-cards/${card.nicId}`);
+        import('antd').then(({ message }) => message.success('网卡删除成功'));
+        fetchData();
+        onRefresh?.();
+      } catch (error) {
+        import('antd').then(({ message }) =>
+          message.error(error.response?.data?.error || '网卡删除失败')
+        );
+      }
+    },
+    [fetchData, onRefresh]
+  );
 
-  const handleDeletePort = useCallback(async (port) => {
-    try {
-      await axios.delete(`/api/device-ports/${port.portId}`);
-      import('antd').then(({ message }) => message.success('端口删除成功'));
-      fetchData();
-      onRefresh?.();
-    } catch (error) {
-      import('antd').then(({ message }) => message.error('端口删除失败'));
-    }
-  }, [fetchData, onRefresh]);
+  const handleDeletePort = useCallback(
+    async port => {
+      try {
+        await axios.delete(`/api/device-ports/${port.portId}`);
+        import('antd').then(({ message }) => message.success('端口删除成功'));
+        fetchData();
+        onRefresh?.();
+      } catch (error) {
+        import('antd').then(({ message }) => message.error('端口删除失败'));
+      }
+    },
+    [fetchData, onRefresh]
+  );
 
   const handleCreateCardSuccess = useCallback(() => {
     fetchData();
@@ -90,7 +117,7 @@ function NetworkCardPanel({ deviceId, deviceName, onRefresh, refreshTrigger }) {
     onRefresh?.();
   }, [fetchData, onRefresh]);
 
-  const handleExpand = (nicId) => {
+  const handleExpand = nicId => {
     setExpandedCards(prev => {
       if (prev.includes(nicId)) {
         return prev.filter(id => id !== nicId);
@@ -99,27 +126,27 @@ function NetworkCardPanel({ deviceId, deviceName, onRefresh, refreshTrigger }) {
     });
   };
 
-  const getStatusTag = (status) => {
+  const getStatusTag = status => {
     const config = {
       free: { color: 'success', text: '空闲' },
       occupied: { color: 'processing', text: '占用' },
       fault: { color: 'error', text: '故障' },
       normal: { color: 'success', text: '正常' },
       warning: { color: 'warning', text: '警告' },
-      offline: { color: 'default', text: '离线' }
+      offline: { color: 'default', text: '离线' },
     };
     const { color, text } = config[status] || { color: 'default', text: status };
     return <Tag color={color}>{text}</Tag>;
   };
 
-  const getTypeTag = (type) => {
+  const getTypeTag = type => {
     const config = {
-      'RJ45': { color: 'blue', text: 'RJ45' },
-      'SFP': { color: 'green', text: 'SFP' },
+      RJ45: { color: 'blue', text: 'RJ45' },
+      SFP: { color: 'green', text: 'SFP' },
       'SFP+': { color: 'cyan', text: 'SFP+' },
-      'SFP28': { color: 'purple', text: 'SFP28' },
-      'QSFP': { color: 'orange', text: 'QSFP' },
-      'QSFP28': { color: 'red', text: 'QSFP28' }
+      SFP28: { color: 'purple', text: 'SFP28' },
+      QSFP: { color: 'orange', text: 'QSFP' },
+      QSFP28: { color: 'red', text: 'QSFP28' },
     };
     const { color, text } = config[type] || { color: 'default', text: type };
     return <Tag color={color}>{text}</Tag>;
@@ -132,34 +159,34 @@ function NetworkCardPanel({ deviceId, deviceName, onRefresh, refreshTrigger }) {
         dataIndex: 'portName',
         key: 'portName',
         width: 120,
-        render: (text) => <span style={{ fontWeight: 500 }}>{text}</span>
+        render: text => <span style={{ fontWeight: 500 }}>{text}</span>,
       },
       {
         title: '类型',
         dataIndex: 'portType',
         key: 'portType',
         width: 80,
-        render: (type) => getTypeTag(type)
+        render: type => getTypeTag(type),
       },
       {
         title: '速率',
         dataIndex: 'portSpeed',
         key: 'portSpeed',
-        width: 70
+        width: 70,
       },
       {
         title: '状态',
         dataIndex: 'status',
         key: 'status',
         width: 70,
-        render: (status) => getStatusTag(status)
+        render: status => getStatusTag(status),
       },
       {
         title: 'VLAN',
         dataIndex: 'vlanId',
         key: 'vlanId',
         width: 60,
-        render: (vlanId) => vlanId || '-'
+        render: vlanId => vlanId || '-',
       },
       {
         title: '操作',
@@ -178,8 +205,8 @@ function NetworkCardPanel({ deviceId, deviceName, onRefresh, refreshTrigger }) {
               </Button>
             </Popconfirm>
           </Space>
-        )
-      }
+        ),
+      },
     ];
 
     return (
@@ -194,30 +221,41 @@ function NetworkCardPanel({ deviceId, deviceName, onRefresh, refreshTrigger }) {
     );
   };
 
-  const renderCardHeader = (card) => {
+  const renderCardHeader = card => {
     const stats = card.stats || { free: 0, occupied: 0, fault: 0, total: 0 };
-    
+
     return (
-      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%' }}>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          width: '100%',
+        }}
+      >
         <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
-          <div style={{
-            width: '36px',
-            height: '36px',
-            borderRadius: '8px',
-            background: card.isUngrouped 
-              ? 'linear-gradient(135deg, #94a3b8 0%, #64748b 100%)'
-              : 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            color: '#fff'
-          }}>
+          <div
+            style={{
+              width: '36px',
+              height: '36px',
+              borderRadius: '8px',
+              background: card.isUngrouped
+                ? 'linear-gradient(135deg, #94a3b8 0%, #64748b 100%)'
+                : 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              color: '#fff',
+            }}
+          >
             {card.isUngrouped ? <FolderOutlined /> : <CloudServerOutlined />}
           </div>
           <div>
             <div style={{ fontWeight: 600, fontSize: '14px', color: '#1e293b' }}>
               {card.name}
-              {card.slotNumber && <span style={{ color: '#94a3b8', marginLeft: 8 }}>插槽 {card.slotNumber}</span>}
+              {card.slotNumber && (
+                <span style={{ color: '#94a3b8', marginLeft: 8 }}>插槽 {card.slotNumber}</span>
+              )}
             </div>
             <div style={{ fontSize: '12px', color: '#64748b' }}>
               {card.description || (card.isUngrouped ? '未分配到网卡的端口' : '网卡')}
@@ -248,7 +286,7 @@ function NetworkCardPanel({ deviceId, deviceName, onRefresh, refreshTrigger }) {
             type="primary"
             size="small"
             icon={<PlusOutlined />}
-            onClick={(e) => {
+            onClick={e => {
               e.stopPropagation();
               setSelectedCard(card);
               setCreatePortModalVisible(true);
@@ -270,26 +308,35 @@ function NetworkCardPanel({ deviceId, deviceName, onRefresh, refreshTrigger }) {
     );
   }
 
-  const totalStats = cards.reduce((acc, card) => {
-    const stats = card.stats || {};
-    acc.total += stats.total || 0;
-    acc.free += stats.free || 0;
-    acc.occupied += stats.occupied || 0;
-    acc.fault += stats.fault || 0;
-    return acc;
-  }, { total: 0, free: 0, occupied: 0, fault: 0 });
+  const totalStats = cards.reduce(
+    (acc, card) => {
+      const stats = card.stats || {};
+      acc.total += stats.total || 0;
+      acc.free += stats.free || 0;
+      acc.occupied += stats.occupied || 0;
+      acc.fault += stats.fault || 0;
+      return acc;
+    },
+    { total: 0, free: 0, occupied: 0, fault: 0 }
+  );
 
   return (
     <div className="network-card-panel">
-      <div className="panel-header" style={{
-        display: 'flex',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        marginBottom: '16px'
-      }}>
+      <div
+        className="panel-header"
+        style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          marginBottom: '16px',
+        }}
+      >
         <div className="stats" style={{ display: 'flex', gap: '24px' }}>
           <Space size={16}>
-            <Badge count={networkCards.length} style={{ backgroundColor: designTokens.colors.primary.main }} />
+            <Badge
+              count={networkCards.length}
+              style={{ backgroundColor: designTokens.colors.primary.main }}
+            />
             <span style={{ color: '#64748b', fontSize: '13px' }}>个网卡</span>
             <Badge count={totalStats.total} style={{ backgroundColor: '#667eea' }} />
             <span style={{ color: '#64748b', fontSize: '13px' }}>个端口</span>
@@ -334,11 +381,11 @@ function NetworkCardPanel({ deviceId, deviceName, onRefresh, refreshTrigger }) {
       ) : (
         <Collapse
           activeKey={expandedCards}
-          onChange={(keys) => setExpandedCards(keys)}
+          onChange={keys => setExpandedCards(keys)}
           expandIconPosition="end"
           style={{ background: 'transparent' }}
         >
-          {cards.map((card) => (
+          {cards.map(card => (
             <Panel
               key={card.nicId}
               header={renderCardHeader(card)}
@@ -346,7 +393,7 @@ function NetworkCardPanel({ deviceId, deviceName, onRefresh, refreshTrigger }) {
                 background: '#fff',
                 borderRadius: '8px',
                 marginBottom: '8px',
-                border: '1px solid #e2e8f0'
+                border: '1px solid #e2e8f0',
               }}
             >
               {card.ports && card.ports.length > 0 ? (
diff --git a/frontend/src/components/PortCreateModal.jsx b/frontend/src/components/PortCreateModal.jsx
index 05aac55..20570ba 100644
--- a/frontend/src/components/PortCreateModal.jsx
+++ b/frontend/src/components/PortCreateModal.jsx
@@ -1,5 +1,17 @@
 import React, { useState, useCallback, useEffect, useMemo } from 'react';
-import { Modal, Form, Input, Select, InputNumber, message, Space, Button, Tooltip, Alert, Tag } from 'antd';
+import {
+  Modal,
+  Form,
+  Input,
+  Select,
+  InputNumber,
+  message,
+  Space,
+  Button,
+  Tooltip,
+  Alert,
+  Tag,
+} from 'antd';
 import { PlusOutlined, InfoCircleOutlined } from '@ant-design/icons';
 import axios from 'axios';
 
@@ -10,12 +22,12 @@ const designTokens = {
   colors: {
     primary: {
       main: '#667eea',
-      gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
-    }
+      gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+    },
   },
   borderRadius: {
-    medium: '10px'
-  }
+    medium: '10px',
+  },
 };
 
 function parsePortRange(portName) {
@@ -24,34 +36,34 @@ function parsePortRange(portName) {
   }
 
   const trimmed = portName.trim();
-  
+
   if (!trimmed.includes('-')) {
     return null;
   }
 
   const [startPart, endPart] = trimmed.split('-').map(s => s.trim());
-  
+
   if (!startPart || !endPart) {
     return null;
   }
 
   const startNumMatch = startPart.match(/(\d+)$/);
   const endNumMatch = endPart.match(/(\d+)$/);
-  
+
   if (!startNumMatch || !endNumMatch) {
     return null;
   }
 
   const startNum = parseInt(startNumMatch[1], 10);
   const endNum = parseInt(endNumMatch[1], 10);
-  
+
   if (startNum >= endNum || endNum - startNum > 1000) {
     return null;
   }
 
   const prefix = startPart.replace(startNumMatch[0], '');
   const portCount = endNum - startNum + 1;
-  
+
   const ports = [];
   for (let i = 0; i < portCount; i++) {
     const num = startNum + i;
@@ -64,17 +76,17 @@ function parsePortRange(portName) {
     startNum,
     endNum,
     portCount,
-    ports
+    ports,
   };
 }
 
 function generatePortNames(portName) {
   const result = parsePortRange(portName);
-  
+
   if (result && result.isRange) {
     return result.ports;
   }
-  
+
   return [portName];
 }
 
@@ -92,7 +104,7 @@ function PortCreateModal({ device, visible, onClose, onSuccess, defaultNicId, ne
       setPreviewPorts([]);
       setShowPreview(false);
       form.resetFields();
-      
+
       if (defaultNicId) {
         form.setFieldsValue({ nicId: defaultNicId });
       }
@@ -116,10 +128,10 @@ function PortCreateModal({ device, visible, onClose, onSuccess, defaultNicId, ne
     }
   };
 
-  const handlePortNameChange = useCallback((e) => {
+  const handlePortNameChange = useCallback(e => {
     const value = e.target.value;
     const ports = generatePortNames(value);
-    
+
     if (ports.length > 1) {
       setPreviewPorts(ports.slice(0, 20));
       setShowPreview(true);
@@ -135,7 +147,7 @@ function PortCreateModal({ device, visible, onClose, onSuccess, defaultNicId, ne
       setLoading(true);
 
       const portNames = generatePortNames(values.portName);
-      
+
       if (portNames.length === 1) {
         await axios.post('/api/device-ports', {
           deviceId: device.deviceId,
@@ -145,7 +157,7 @@ function PortCreateModal({ device, visible, onClose, onSuccess, defaultNicId, ne
           portSpeed: values.portSpeed,
           vlanId: values.vlanId,
           status: values.status,
-          description: values.description
+          description: values.description,
         });
         message.success('端口创建成功');
       } else {
@@ -158,7 +170,7 @@ function PortCreateModal({ device, visible, onClose, onSuccess, defaultNicId, ne
           portSpeed: values.portSpeed,
           vlanId: values.vlanId,
           status: values.status,
-          description: values.description
+          description: values.description,
         }));
 
         await axios.post('/api/device-ports/batch', { ports: portsData });
@@ -196,9 +208,7 @@ function PortCreateModal({ device, visible, onClose, onSuccess, defaultNicId, ne
         <Space>
           <PlusOutlined style={{ color: designTokens.colors.primary.main }} />
           <span>新增端口 - {device?.name || '设备'}</span>
-          {portCount > 1 && (
-            <Tag color="blue">{portCount} 个端口</Tag>
-          )}
+          {portCount > 1 && <Tag color="blue">{portCount} 个端口</Tag>}
         </Space>
       }
       open={visible}
@@ -217,18 +227,11 @@ function PortCreateModal({ device, visible, onClose, onSuccess, defaultNicId, ne
         initialValues={{
           portType: 'RJ45',
           portSpeed: '1G',
-          status: 'free'
+          status: 'free',
         }}
       >
-        <Form.Item
-          name="deviceId"
-          label="设备"
-        >
-          <Input
-            value={device?.name}
-            disabled
-            placeholder={device?.deviceId}
-          />
+        <Form.Item name="deviceId" label="设备">
+          <Input value={device?.name} disabled placeholder={device?.deviceId} />
         </Form.Item>
 
         <Form.Item
@@ -263,16 +266,19 @@ function PortCreateModal({ device, visible, onClose, onSuccess, defaultNicId, ne
           label={
             <Space>
               端口名称
-              <Tooltip title="支持单个端口（如 eth0/1）或端口范围（如 1/0/1-1/0/48）" mouseEnterDelay={0.5}>
+              <Tooltip
+                title="支持单个端口（如 eth0/1）或端口范围（如 1/0/1-1/0/48）"
+                mouseEnterDelay={0.5}
+              >
                 <InfoCircleOutlined style={{ color: '#999' }} />
               </Tooltip>
             </Space>
           }
           rules={[
             { required: true, message: '请输入端口名称' },
-            { 
-              pattern: /^[\w\/:\-]+$/, 
-              message: '端口名称格式不正确' 
+            {
+              pattern: /^[\w\/:\-]+$/,
+              message: '端口名称格式不正确',
             },
             {
               validator: (_, value) => {
@@ -282,13 +288,13 @@ function PortCreateModal({ device, visible, onClose, onSuccess, defaultNicId, ne
                   return Promise.reject(new Error('单次最多创建1000个端口'));
                 }
                 return Promise.resolve();
-              }
-            }
+              },
+            },
           ]}
         >
-          <Input 
-            placeholder="例如: eth0/1 或 1/0/1-1/0/48" 
-            onChange={(e) => {
+          <Input
+            placeholder="例如: eth0/1 或 1/0/1-1/0/48"
+            onChange={e => {
               // 确保 Form 值更新
               form.setFieldValue('portName', e.target.value);
               handlePortNameChange(e);
@@ -303,9 +309,12 @@ function PortCreateModal({ device, visible, onClose, onSuccess, defaultNicId, ne
               <div style={{ marginTop: 8 }}>
                 <Space wrap size={4}>
                   {previewPorts.map((port, index) => (
-                    <Tag key={index} color="blue">{port}</Tag>
+                    <Tag key={index} color="blue">
+                      {port}
+                    </Tag>
                   ))}
-                  {previewPorts.length < parsePortRange(form.getFieldValue('portName'))?.portCount && (
+                  {previewPorts.length <
+                    parsePortRange(form.getFieldValue('portName'))?.portCount && (
                     <Tag color="default">...等</Tag>
                   )}
                 </Space>
@@ -352,17 +361,8 @@ function PortCreateModal({ device, visible, onClose, onSuccess, defaultNicId, ne
         </Space>
 
         <Space style={{ display: 'flex', width: '100%' }}>
-          <Form.Item
-            name="vlanId"
-            label="VLAN ID"
-            style={{ flex: 1 }}
-          >
-            <InputNumber
-              placeholder="1-4094"
-              min={1}
-              max={4094}
-              style={{ width: '100%' }}
-            />
+          <Form.Item name="vlanId" label="VLAN ID" style={{ flex: 1 }}>
+            <InputNumber placeholder="1-4094" min={1} max={4094} style={{ width: '100%' }} />
           </Form.Item>
 
           <Form.Item
@@ -379,25 +379,30 @@ function PortCreateModal({ device, visible, onClose, onSuccess, defaultNicId, ne
           </Form.Item>
         </Space>
 
-        <Form.Item
-          name="description"
-          label="描述"
-        >
+        <Form.Item name="description" label="描述">
           <TextArea rows={2} placeholder="请输入描述信息（可选）" />
         </Form.Item>
 
-        <div style={{ 
-          background: '#f5f5f5', 
-          padding: '12px 16px', 
-          borderRadius: '8px',
-          fontSize: '12px',
-          color: '#666'
-        }}>
+        <div
+          style={{
+            background: '#f5f5f5',
+            padding: '12px 16px',
+            borderRadius: '8px',
+            fontSize: '12px',
+            color: '#666',
+          }}
+        >
           <strong>格式说明：</strong>
           <ul style={{ margin: '8px 0 0 0', paddingLeft: '20px' }}>
-            <li>单个端口：<code>eth0/1</code>、<code>gigabitethernet1/0/1</code></li>
-            <li>端口范围：<code>1/0/1-1/0/48</code>（创建 1/0/1 到 1/0/48 共48个端口）</li>
-            <li>简单范围：<code>eth1-eth24</code>（创建 eth1 到 eth24 共24个端口）</li>
+            <li>
+              单个端口：<code>eth0/1</code>、<code>gigabitethernet1/0/1</code>
+            </li>
+            <li>
+              端口范围：<code>1/0/1-1/0/48</code>（创建 1/0/1 到 1/0/48 共48个端口）
+            </li>
+            <li>
+              简单范围：<code>eth1-eth24</code>（创建 eth1 到 eth24 共24个端口）
+            </li>
           </ul>
         </div>
       </Form>
diff --git a/frontend/src/components/PortManagementPanel.jsx b/frontend/src/components/PortManagementPanel.jsx
index 029f9f1..14bac10 100644
--- a/frontend/src/components/PortManagementPanel.jsx
+++ b/frontend/src/components/PortManagementPanel.jsx
@@ -1,18 +1,24 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import { Table, Button, Space, Tag, Tooltip, Popconfirm, Empty, Spin, Badge } from 'antd';
-import { PlusOutlined, EditOutlined, DeleteOutlined, ReloadOutlined, ApiOutlined } from '@ant-design/icons';
+import {
+  PlusOutlined,
+  EditOutlined,
+  DeleteOutlined,
+  ReloadOutlined,
+  ApiOutlined,
+} from '@ant-design/icons';
 import axios from 'axios';
 import PortCreateModal from './PortCreateModal';
 
 const designTokens = {
   colors: {
     primary: {
-      main: '#667eea'
+      main: '#667eea',
     },
     success: '#10b981',
     error: '#ef4444',
-    warning: '#f59e0b'
-  }
+    warning: '#f59e0b',
+  },
 };
 
 function PortManagementPanel({ deviceId, deviceName, onRefresh }) {
@@ -38,40 +44,43 @@ function PortManagementPanel({ deviceId, deviceName, onRefresh }) {
     fetchPorts();
   }, [fetchPorts]);
 
-  const handleDelete = useCallback(async (port) => {
-    try {
-      await axios.delete(`/api/device-ports/${port.portId}`);
-      import('antd').then(({ message }) => message.success('端口删除成功'));
-      fetchPorts();
-      onRefresh?.();
-    } catch (error) {
-      import('antd').then(({ message }) => message.error('端口删除失败'));
-    }
-  }, [fetchPorts, onRefresh]);
+  const handleDelete = useCallback(
+    async port => {
+      try {
+        await axios.delete(`/api/device-ports/${port.portId}`);
+        import('antd').then(({ message }) => message.success('端口删除成功'));
+        fetchPorts();
+        onRefresh?.();
+      } catch (error) {
+        import('antd').then(({ message }) => message.error('端口删除失败'));
+      }
+    },
+    [fetchPorts, onRefresh]
+  );
 
   const handleCreateSuccess = useCallback(() => {
     fetchPorts();
     onRefresh?.();
   }, [fetchPorts, onRefresh]);
 
-  const getStatusTag = (status) => {
+  const getStatusTag = status => {
     const config = {
       free: { color: 'success', text: '空闲' },
       occupied: { color: 'processing', text: '占用' },
-      fault: { color: 'error', text: '故障' }
+      fault: { color: 'error', text: '故障' },
     };
     const { color, text } = config[status] || { color: 'default', text: status };
     return <Tag color={color}>{text}</Tag>;
   };
 
-  const getTypeTag = (type) => {
+  const getTypeTag = type => {
     const config = {
-      'RJ45': { color: 'blue', text: 'RJ45' },
-      'SFP': { color: 'green', text: 'SFP' },
+      RJ45: { color: 'blue', text: 'RJ45' },
+      SFP: { color: 'green', text: 'SFP' },
       'SFP+': { color: 'cyan', text: 'SFP+' },
-      'SFP28': { color: 'purple', text: 'SFP28' },
-      'QSFP': { color: 'orange', text: 'QSFP' },
-      'QSFP28': { color: 'red', text: 'QSFP28' }
+      SFP28: { color: 'purple', text: 'SFP28' },
+      QSFP: { color: 'orange', text: 'QSFP' },
+      QSFP28: { color: 'red', text: 'QSFP28' },
     };
     const { color, text } = config[type] || { color: 'default', text: type };
     return <Tag color={color}>{text}</Tag>;
@@ -83,38 +92,38 @@ function PortManagementPanel({ deviceId, deviceName, onRefresh }) {
       dataIndex: 'portName',
       key: 'portName',
       width: 120,
-      render: (text) => (
+      render: text => (
         <Tooltip title={text}>
           <span style={{ fontWeight: 500 }}>{text}</span>
         </Tooltip>
-      )
+      ),
     },
     {
       title: '类型',
       dataIndex: 'portType',
       key: 'portType',
       width: 90,
-      render: (type) => getTypeTag(type)
+      render: type => getTypeTag(type),
     },
     {
       title: '速率',
       dataIndex: 'portSpeed',
       key: 'portSpeed',
-      width: 80
+      width: 80,
     },
     {
       title: '状态',
       dataIndex: 'status',
       key: 'status',
       width: 80,
-      render: (status) => getStatusTag(status)
+      render: status => getStatusTag(status),
     },
     {
       title: 'VLAN',
       dataIndex: 'vlanId',
       key: 'vlanId',
       width: 70,
-      render: (vlanId) => vlanId || '-'
+      render: vlanId => vlanId || '-',
     },
     {
       title: '操作',
@@ -129,18 +138,13 @@ function PortManagementPanel({ deviceId, deviceName, onRefresh }) {
             okText="确定"
             cancelText="取消"
           >
-            <Button
-              type="link"
-              size="small"
-              danger
-              icon={<DeleteOutlined />}
-            >
+            <Button type="link" size="small" danger icon={<DeleteOutlined />}>
               删除
             </Button>
           </Popconfirm>
         </Space>
-      )
-    }
+      ),
+    },
   ];
 
   const freeCount = ports.filter(p => p.status === 'free').length;
@@ -169,11 +173,7 @@ function PortManagementPanel({ deviceId, deviceName, onRefresh }) {
           </Space>
         </div>
         <Space>
-          <Button
-            icon={<ReloadOutlined />}
-            onClick={fetchPorts}
-            size="small"
-          >
+          <Button icon={<ReloadOutlined />} onClick={fetchPorts} size="small">
             刷新
           </Button>
           <Button
@@ -182,7 +182,7 @@ function PortManagementPanel({ deviceId, deviceName, onRefresh }) {
             onClick={() => setCreateModalVisible(true)}
             style={{
               background: designTokens.colors.primary.gradient,
-              border: 'none'
+              border: 'none',
             }}
           >
             新增端口
diff --git a/frontend/src/components/PortPanel.jsx b/frontend/src/components/PortPanel.jsx
index 7948c43..a32f249 100644
--- a/frontend/src/components/PortPanel.jsx
+++ b/frontend/src/components/PortPanel.jsx
@@ -2,28 +2,36 @@ import React, { useState } from 'react';
 import { Tooltip, Badge, Divider, Pagination } from 'antd';
 import { LinkOutlined, SwapRightOutlined, AimOutlined, NodeIndexOutlined } from '@ant-design/icons';
 
-const PortPanel = ({ ports, deviceName, deviceId, cables = [], devices = [], onPortClick, compact = false }) => {
+const PortPanel = ({
+  ports,
+  deviceName,
+  deviceId,
+  cables = [],
+  devices = [],
+  onPortClick,
+  compact = false,
+}) => {
   const [currentPage, setCurrentPage] = useState(1);
   const [pageSize, setPageSize] = useState(48); // 默认每页48个端口
 
   // 按端口名称排序（升序）
   const sortedPorts = [...ports].sort((a, b) => {
     // 尝试按数字部分排序，支持格式如：1/0/1, eth0/1, GigabitEthernet1/0/1 等
-    const extractNumbers = (str) => {
+    const extractNumbers = str => {
       const matches = str.match(/\d+/g);
       return matches ? matches.map(Number) : [];
     };
-    
+
     const numsA = extractNumbers(a.portName);
     const numsB = extractNumbers(b.portName);
-    
+
     // 逐个比较数字部分
     for (let i = 0; i < Math.min(numsA.length, numsB.length); i++) {
       if (numsA[i] !== numsB[i]) {
         return numsA[i] - numsB[i];
       }
     }
-    
+
     // 如果数字部分相同，按字符串排序
     return a.portName.localeCompare(b.portName);
   });
@@ -35,7 +43,7 @@ const PortPanel = ({ ports, deviceName, deviceId, cables = [], devices = [], onP
   const paginatedPorts = sortedPorts.slice(startIndex, endIndex);
 
   // 获取端口状态颜色
-  const getPortStatusColor = (status) => {
+  const getPortStatusColor = status => {
     switch (status) {
       case 'free':
         return '#6b7280'; // 灰色 - 空闲
@@ -51,7 +59,7 @@ const PortPanel = ({ ports, deviceName, deviceId, cables = [], devices = [], onP
   };
 
   // 获取端口状态文本
-  const getPortStatusText = (status) => {
+  const getPortStatusText = status => {
     switch (status) {
       case 'free':
         return '空闲';
@@ -67,7 +75,7 @@ const PortPanel = ({ ports, deviceName, deviceId, cables = [], devices = [], onP
   };
 
   // 获取端口类型图标 - 使用更真实的端口符号
-  const getPortTypeIcon = (portType) => {
+  const getPortTypeIcon = portType => {
     switch (portType) {
       case 'RJ45':
         return '⬡'; // 六边形表示网口
@@ -84,7 +92,7 @@ const PortPanel = ({ ports, deviceName, deviceId, cables = [], devices = [], onP
   };
 
   // 获取简化端口显示名称（只显示数字）
-  const getPortDisplayName = (portName) => {
+  const getPortDisplayName = portName => {
     // 提取最后的数字
     const match = portName.match(/(\d+)$/);
     if (match) {
@@ -95,47 +103,49 @@ const PortPanel = ({ ports, deviceName, deviceId, cables = [], devices = [], onP
   };
 
   // 获取线缆类型文本
-  const getCableTypeText = (cableType) => {
+  const getCableTypeText = cableType => {
     const typeMap = {
-      'ethernet': '网线',
-      'fiber': '光纤',
-      'copper': '铜缆',
-      'power': '电源线'
+      ethernet: '网线',
+      fiber: '光纤',
+      copper: '铜缆',
+      power: '电源线',
     };
     return typeMap[cableType] || cableType || '未知';
   };
 
   // 获取线缆类型颜色
-  const getCableTypeColor = (cableType) => {
+  const getCableTypeColor = cableType => {
     const colorMap = {
-      'ethernet': '#52c41a',
-      'fiber': '#1890ff',
-      'copper': '#faad14',
-      'power': '#ff4d4f'
+      ethernet: '#52c41a',
+      fiber: '#1890ff',
+      copper: '#faad14',
+      power: '#ff4d4f',
     };
     return colorMap[cableType] || '#999';
   };
 
   // 查找端口关联的接线
-  const findPortCable = (port) => {
+  const findPortCable = port => {
     if (!cables || cables.length === 0) return null;
-    
-    return cables.find(cable => 
-      (cable.sourceDeviceId === deviceId && cable.sourcePortId === port.portId) ||
-      (cable.targetDeviceId === deviceId && cable.targetPortId === port.portId) ||
-      (cable.sourceDeviceId === deviceId && cable.sourcePort === port.portName) ||
-      (cable.targetDeviceId === deviceId && cable.targetPort === port.portName)
+
+    return cables.find(
+      cable =>
+        (cable.sourceDeviceId === deviceId && cable.sourcePortId === port.portId) ||
+        (cable.targetDeviceId === deviceId && cable.targetPortId === port.portId) ||
+        (cable.sourceDeviceId === deviceId && cable.sourcePort === port.portName) ||
+        (cable.targetDeviceId === deviceId && cable.targetPort === port.portName)
     );
   };
 
   // 获取连接的对端信息
   const getPeerInfo = (cable, currentPort) => {
     if (!cable) return null;
-    
-    const isSource = cable.sourceDeviceId === deviceId || 
-                     (cable.sourcePortId && cable.sourcePortId === currentPort.portId) ||
-                     cable.sourcePort === currentPort.portName;
-    
+
+    const isSource =
+      cable.sourceDeviceId === deviceId ||
+      (cable.sourcePortId && cable.sourcePortId === currentPort.portId) ||
+      cable.sourcePort === currentPort.portName;
+
     if (isSource) {
       // 当前是源端，返回目标端信息
       const targetDevice = devices.find(d => d.deviceId === cable.targetDeviceId);
@@ -143,7 +153,7 @@ const PortPanel = ({ ports, deviceName, deviceId, cables = [], devices = [], onP
         deviceName: targetDevice?.name || cable.targetDeviceId,
         deviceId: cable.targetDeviceId,
         portName: cable.targetPort || cable.targetPortId,
-        direction: 'out'
+        direction: 'out',
       };
     } else {
       // 当前是目标端，返回源端信息
@@ -152,37 +162,60 @@ const PortPanel = ({ ports, deviceName, deviceId, cables = [], devices = [], onP
         deviceName: sourceDevice?.name || cable.sourceDeviceId,
         deviceId: cable.sourceDeviceId,
         portName: cable.sourcePort || cable.sourcePortId,
-        direction: 'in'
+        direction: 'in',
       };
     }
   };
 
   // 渲染端口详情提示
-  const renderPortTooltip = (port) => {
+  const renderPortTooltip = port => {
     const cable = findPortCable(port);
     const peerInfo = cable ? getPeerInfo(cable, port) : null;
-    
+
     return (
       <div style={{ padding: '8px 4px', minWidth: '220px' }}>
         {/* 端口基本信息 */}
-        <div style={{ fontWeight: 600, fontSize: 14, marginBottom: 8, borderBottom: '1px solid rgba(255,255,255,0.2)', paddingBottom: 4 }}>
+        <div
+          style={{
+            fontWeight: 600,
+            fontSize: 14,
+            marginBottom: 8,
+            borderBottom: '1px solid rgba(255,255,255,0.2)',
+            paddingBottom: 4,
+          }}
+        >
           <NodeIndexOutlined style={{ marginRight: 6 }} />
           {port.portName}
         </div>
         <div style={{ fontSize: 12, lineHeight: '1.8' }}>
-          <div><span style={{ opacity: 0.7 }}>端口类型:</span> {port.portType}</div>
-          <div><span style={{ opacity: 0.7 }}>端口速率:</span> {port.portSpeed}</div>
-          <div><span style={{ opacity: 0.7 }}>状态:</span> 
-            <span style={{ 
-              color: getPortStatusColor(port.status),
-              marginLeft: 4,
-              fontWeight: 500
-            }}>
+          <div>
+            <span style={{ opacity: 0.7 }}>端口类型:</span> {port.portType}
+          </div>
+          <div>
+            <span style={{ opacity: 0.7 }}>端口速率:</span> {port.portSpeed}
+          </div>
+          <div>
+            <span style={{ opacity: 0.7 }}>状态:</span>
+            <span
+              style={{
+                color: getPortStatusColor(port.status),
+                marginLeft: 4,
+                fontWeight: 500,
+              }}
+            >
               {getPortStatusText(port.status)}
             </span>
           </div>
-          {port.vlanId && <div><span style={{ opacity: 0.7 }}>VLAN:</span> {port.vlanId}</div>}
-          {port.description && <div><span style={{ opacity: 0.7 }}>描述:</span> {port.description}</div>}
+          {port.vlanId && (
+            <div>
+              <span style={{ opacity: 0.7 }}>VLAN:</span> {port.vlanId}
+            </div>
+          )}
+          {port.description && (
+            <div>
+              <span style={{ opacity: 0.7 }}>描述:</span> {port.description}
+            </div>
+          )}
         </div>
 
         {/* 接线信息 */}
@@ -196,62 +229,60 @@ const PortPanel = ({ ports, deviceName, deviceId, cables = [], devices = [], onP
             <div style={{ fontSize: 12, lineHeight: '1.8' }}>
               {/* 线缆类型和长度 */}
               <div style={{ marginBottom: 6 }}>
-                <span style={{ 
-                  display: 'inline-block',
-                  padding: '2px 8px',
-                  borderRadius: '4px',
-                  background: getCableTypeColor(cable.cableType) + '20',
-                  color: getCableTypeColor(cable.cableType),
-                  fontSize: '11px',
-                  fontWeight: 500
-                }}>
+                <span
+                  style={{
+                    display: 'inline-block',
+                    padding: '2px 8px',
+                    borderRadius: '4px',
+                    background: getCableTypeColor(cable.cableType) + '20',
+                    color: getCableTypeColor(cable.cableType),
+                    fontSize: '11px',
+                    fontWeight: 500,
+                  }}
+                >
                   {getCableTypeText(cable.cableType)}
                 </span>
                 {cable.cableLength && (
-                  <span style={{ marginLeft: 8, opacity: 0.8 }}>
-                    {cable.cableLength}m
-                  </span>
+                  <span style={{ marginLeft: 8, opacity: 0.8 }}>{cable.cableLength}m</span>
                 )}
               </div>
-              
+
               {/* 连接方向 */}
-              <div style={{ 
-                display: 'flex', 
-                alignItems: 'center', 
-                gap: '8px',
-                padding: '8px',
-                background: 'rgba(255,255,255,0.05)',
-                borderRadius: '6px',
-                marginTop: '8px'
-              }}>
+              <div
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '8px',
+                  padding: '8px',
+                  background: 'rgba(255,255,255,0.05)',
+                  borderRadius: '6px',
+                  marginTop: '8px',
+                }}
+              >
                 <div style={{ textAlign: 'center' }}>
-                  <div style={{ 
-                    width: '32px', 
-                    height: '32px', 
-                    borderRadius: '50%', 
-                    background: peerInfo.direction === 'out' ? '#52c41a20' : '#1890ff20',
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    fontSize: '14px'
-                  }}>
+                  <div
+                    style={{
+                      width: '32px',
+                      height: '32px',
+                      borderRadius: '50%',
+                      background: peerInfo.direction === 'out' ? '#52c41a20' : '#1890ff20',
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      fontSize: '14px',
+                    }}
+                  >
                     {peerInfo.direction === 'out' ? '📤' : '📥'}
                   </div>
                   <div style={{ fontSize: '10px', marginTop: '2px', opacity: 0.6 }}>
                     {peerInfo.direction === 'out' ? '输出' : '输入'}
                   </div>
                 </div>
-                
+
                 <div style={{ flex: 1 }}>
-                  <div style={{ fontWeight: 500, color: '#fff' }}>
-                    {peerInfo.deviceName}
-                  </div>
-                  <div style={{ fontSize: '11px', opacity: 0.7 }}>
-                    端口: {peerInfo.portName}
-                  </div>
-                  <div style={{ fontSize: '10px', opacity: 0.5 }}>
-                    ID: {peerInfo.deviceId}
-                  </div>
+                  <div style={{ fontWeight: 500, color: '#fff' }}>{peerInfo.deviceName}</div>
+                  <div style={{ fontSize: '11px', opacity: 0.7 }}>端口: {peerInfo.portName}</div>
+                  <div style={{ fontSize: '10px', opacity: 0.5 }}>ID: {peerInfo.deviceId}</div>
                 </div>
               </div>
 
@@ -285,34 +316,40 @@ const PortPanel = ({ ports, deviceName, deviceId, cables = [], devices = [], onP
   };
 
   return (
-    <div style={{
-      background: 'linear-gradient(145deg, #1e293b 0%, #0f172a 100%)',
-      borderRadius: compact ? '12px' : '16px',
-      padding: compact ? '16px' : '24px',
-      boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1)',
-      border: '1px solid rgba(255, 255, 255, 0.1)'
-    }}>
+    <div
+      style={{
+        background: 'linear-gradient(145deg, #1e293b 0%, #0f172a 100%)',
+        borderRadius: compact ? '12px' : '16px',
+        padding: compact ? '16px' : '24px',
+        boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1)',
+        border: '1px solid rgba(255, 255, 255, 0.1)',
+      }}
+    >
       {/* 设备标题 - compact 模式下隐藏 */}
       {!compact && (
-        <div style={{
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-          marginBottom: '20px',
-          paddingBottom: '16px',
-          borderBottom: '1px solid rgba(255, 255, 255, 0.1)'
-        }}>
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            marginBottom: '20px',
+            paddingBottom: '16px',
+            borderBottom: '1px solid rgba(255, 255, 255, 0.1)',
+          }}
+        >
           <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
-            <div style={{
-              width: '40px',
-              height: '40px',
-              borderRadius: '10px',
-              background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              fontSize: '20px'
-            }}>
+            <div
+              style={{
+                width: '40px',
+                height: '40px',
+                borderRadius: '10px',
+                background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                fontSize: '20px',
+              }}
+            >
               🔌
             </div>
             <div>
@@ -324,37 +361,43 @@ const PortPanel = ({ ports, deviceName, deviceId, cables = [], devices = [], onP
               </div>
             </div>
           </div>
-          
+
           {/* 状态图例 */}
           <div style={{ display: 'flex', gap: '16px' }}>
             <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
-              <div style={{
-                width: '8px',
-                height: '8px',
-                borderRadius: '50%',
-                background: '#6b7280',
-                boxShadow: '0 0 8px #6b7280'
-              }} />
+              <div
+                style={{
+                  width: '8px',
+                  height: '8px',
+                  borderRadius: '50%',
+                  background: '#6b7280',
+                  boxShadow: '0 0 8px #6b7280',
+                }}
+              />
               <span style={{ fontSize: '12px', color: 'rgba(255,255,255,0.6)' }}>空闲</span>
             </div>
             <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
-              <div style={{
-                width: '8px',
-                height: '8px',
-                borderRadius: '50%',
-                background: '#10b981',
-                boxShadow: '0 0 8px #10b981'
-              }} />
+              <div
+                style={{
+                  width: '8px',
+                  height: '8px',
+                  borderRadius: '50%',
+                  background: '#10b981',
+                  boxShadow: '0 0 8px #10b981',
+                }}
+              />
               <span style={{ fontSize: '12px', color: 'rgba(255,255,255,0.6)' }}>已连接</span>
             </div>
             <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
-              <div style={{
-                width: '8px',
-                height: '8px',
-                borderRadius: '50%',
-                background: '#ef4444',
-                boxShadow: '0 0 8px #ef4444'
-              }} />
+              <div
+                style={{
+                  width: '8px',
+                  height: '8px',
+                  borderRadius: '50%',
+                  background: '#ef4444',
+                  boxShadow: '0 0 8px #ef4444',
+                }}
+              />
               <span style={{ fontSize: '12px', color: 'rgba(255,255,255,0.6)' }}>故障</span>
             </div>
           </div>
@@ -362,29 +405,31 @@ const PortPanel = ({ ports, deviceName, deviceId, cables = [], devices = [], onP
       )}
 
       {/* 端口网格 - 固定每行24个端口 */}
-      <div style={{
-        display: 'grid',
-        gridTemplateColumns: 'repeat(24, 1fr)',
-        gap: '8px',
-        padding: '16px',
-        background: 'rgba(0, 0, 0, 0.3)',
-        borderRadius: '12px',
-        border: '1px solid rgba(255, 255, 255, 0.05)'
-      }}>
-        {paginatedPorts.map((port) => {
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(24, 1fr)',
+          gap: '8px',
+          padding: '16px',
+          background: 'rgba(0, 0, 0, 0.3)',
+          borderRadius: '12px',
+          border: '1px solid rgba(255, 255, 255, 0.05)',
+        }}
+      >
+        {paginatedPorts.map(port => {
           const statusColor = getPortStatusColor(port.status);
           const isClickable = onPortClick && port.status !== 'disabled';
           const cable = findPortCable(port);
-          
+
           return (
-            <Tooltip 
-              key={port.portId} 
+            <Tooltip
+              key={port.portId}
               title={renderPortTooltip(port)}
               placement="top"
               color="#1e293b"
-              overlayStyle={{ 
+              overlayStyle={{
                 borderRadius: '8px',
-                border: '1px solid rgba(255, 255, 255, 0.1)'
+                border: '1px solid rgba(255, 255, 255, 0.1)',
               }}
             >
               <div
@@ -397,69 +442,79 @@ const PortPanel = ({ ports, deviceName, deviceId, cables = [], devices = [], onP
                   cursor: isClickable ? 'pointer' : 'not-allowed',
                   transition: 'all 0.2s ease',
                   position: 'relative',
-                  minWidth: '0'
+                  minWidth: '0',
                 }}
               >
                 {/* LED 指示灯 - 在端口上方 */}
-                <div style={{
-                  width: '6px',
-                  height: '6px',
-                  borderRadius: '50%',
-                  background: statusColor,
-                  boxShadow: `0 0 6px ${statusColor}, 0 0 12px ${statusColor}50`,
-                  marginBottom: '4px',
-                  animation: port.status === 'fault' ? 'pulse 1.5s infinite' : 'none'
-                }} />
-                
+                <div
+                  style={{
+                    width: '6px',
+                    height: '6px',
+                    borderRadius: '50%',
+                    background: statusColor,
+                    boxShadow: `0 0 6px ${statusColor}, 0 0 12px ${statusColor}50`,
+                    marginBottom: '4px',
+                    animation: port.status === 'fault' ? 'pulse 1.5s infinite' : 'none',
+                  }}
+                />
+
                 {/* 端口主体 - 矩形样式 */}
-                <div style={{
-                  width: '100%',
-                  aspectRatio: '1 / 1.2',
-                  background: 'linear-gradient(180deg, #2a3441 0%, #1e2530 100%)',
-                  border: `2px solid ${statusColor}`,
-                  borderRadius: '2px',
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  position: 'relative',
-                  boxShadow: `inset 0 1px 0 rgba(255,255,255,0.1), 0 2px 4px rgba(0,0,0,0.3)`
-                }}>
+                <div
+                  style={{
+                    width: '100%',
+                    aspectRatio: '1 / 1.2',
+                    background: 'linear-gradient(180deg, #2a3441 0%, #1e2530 100%)',
+                    border: `2px solid ${statusColor}`,
+                    borderRadius: '2px',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    position: 'relative',
+                    boxShadow: `inset 0 1px 0 rgba(255,255,255,0.1), 0 2px 4px rgba(0,0,0,0.3)`,
+                  }}
+                >
                   {/* 端口内部图标 */}
-                  <div style={{
-                    fontSize: '10px',
-                    color: statusColor,
-                    opacity: 0.8
-                  }}>
+                  <div
+                    style={{
+                      fontSize: '10px',
+                      color: statusColor,
+                      opacity: 0.8,
+                    }}
+                  >
                     {getPortTypeIcon(port.portType)}
                   </div>
-                  
+
                   {/* 接线指示标记 */}
                   {cable && (
-                    <div style={{
-                      position: 'absolute',
-                      top: '1px',
-                      right: '1px',
-                      width: '4px',
-                      height: '4px',
-                      borderRadius: '50%',
-                      background: getCableTypeColor(cable.cableType),
-                      boxShadow: `0 0 3px ${getCableTypeColor(cable.cableType)}`
-                    }} />
+                    <div
+                      style={{
+                        position: 'absolute',
+                        top: '1px',
+                        right: '1px',
+                        width: '4px',
+                        height: '4px',
+                        borderRadius: '50%',
+                        background: getCableTypeColor(cable.cableType),
+                        boxShadow: `0 0 3px ${getCableTypeColor(cable.cableType)}`,
+                      }}
+                    />
                   )}
                 </div>
-                
+
                 {/* 端口名称 - 在端口下方 */}
-                <div style={{
-                  fontSize: '9px',
-                  fontWeight: 500,
-                  color: 'rgba(255, 255, 255, 0.7)',
-                  textAlign: 'center',
-                  marginTop: '3px',
-                  whiteSpace: 'nowrap',
-                  overflow: 'hidden',
-                  textOverflow: 'ellipsis',
-                  maxWidth: '100%'
-                }}>
+                <div
+                  style={{
+                    fontSize: '9px',
+                    fontWeight: 500,
+                    color: 'rgba(255, 255, 255, 0.7)',
+                    textAlign: 'center',
+                    marginTop: '3px',
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    maxWidth: '100%',
+                  }}
+                >
                   {getPortDisplayName(port.portName)}
                 </div>
               </div>
@@ -470,13 +525,15 @@ const PortPanel = ({ ports, deviceName, deviceId, cables = [], devices = [], onP
 
       {/* 分页 */}
       {totalPorts > pageSize && (
-        <div style={{
-          display: 'flex',
-          justifyContent: 'center',
-          padding: '16px 0 0 0',
-          borderTop: '1px solid rgba(255, 255, 255, 0.1)',
-          marginTop: '16px'
-        }}>
+        <div
+          style={{
+            display: 'flex',
+            justifyContent: 'center',
+            padding: '16px 0 0 0',
+            borderTop: '1px solid rgba(255, 255, 255, 0.1)',
+            marginTop: '16px',
+          }}
+        >
           <Pagination
             current={currentPage}
             total={totalPorts}
@@ -487,11 +544,11 @@ const PortPanel = ({ ports, deviceName, deviceId, cables = [], devices = [], onP
             }}
             showSizeChanger
             showQuickJumper
-            showTotal={(total) => `共 ${total} 个端口`}
+            showTotal={total => `共 ${total} 个端口`}
             pageSizeOptions={['24', '48', '96']}
             size="small"
             style={{
-              color: 'rgba(255, 255, 255, 0.8)'
+              color: 'rgba(255, 255, 255, 0.8)',
             }}
           />
         </div>
diff --git a/frontend/src/components/ProtectedRoute.jsx b/frontend/src/components/ProtectedRoute.jsx
index 7830dcc..75e45b3 100644
--- a/frontend/src/components/ProtectedRoute.jsx
+++ b/frontend/src/components/ProtectedRoute.jsx
@@ -9,14 +9,16 @@ const ProtectedRoute = ({ children, requiredPermission }) => {
 
   if (!initialized) {
     return (
-      <div style={{ 
-        display: 'flex', 
-        flexDirection: 'column',
-        justifyContent: 'center', 
-        alignItems: 'center', 
-        height: '100vh',
-        gap: '16px'
-      }}>
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          alignItems: 'center',
+          height: '100vh',
+          gap: '16px',
+        }}
+      >
         <Spin size="large" />
         <span style={{ color: '#8c8c8c', fontSize: '14px' }}>加载中...</span>
       </div>
diff --git a/frontend/src/components/ServerBackplanePanel.jsx b/frontend/src/components/ServerBackplanePanel.jsx
index 8a7a8a8..3c4b1ef 100644
--- a/frontend/src/components/ServerBackplanePanel.jsx
+++ b/frontend/src/components/ServerBackplanePanel.jsx
@@ -9,7 +9,7 @@ import {
   DesktopOutlined,
   UsbOutlined,
   MonitorOutlined,
-  SettingOutlined
+  SettingOutlined,
 } from '@ant-design/icons';
 import PortPanel from './PortPanel';
 import axios from 'axios';
@@ -23,8 +23,8 @@ const designTokens = {
     error: '#ef4444',
     warning: '#f59e0b',
     metal: { light: '#9ca3af', DEFAULT: '#6b7280', dark: '#4b5563' },
-    slot: { empty: '#d1d5db', occupied: '#3b82f6' }
-  }
+    slot: { empty: '#d1d5db', occupied: '#3b82f6' },
+  },
 };
 
 /**
@@ -44,7 +44,7 @@ const ServerBackplanePanel = ({
   cables,
   allDevices,
   onPortClick,
-  onManageNetworkCards
+  onManageNetworkCards,
 }) => {
   const [cards, setCards] = useState([]);
   const [loading, setLoading] = useState(false);
@@ -82,9 +82,20 @@ const ServerBackplanePanel = ({
       const name = (card.name || '').toLowerCase();
 
       // 判断网卡类型
-      if (name.includes('idrac') || name.includes('ilo') || name.includes('bmc') || name.includes('mgmt') || name.includes('管理')) {
+      if (
+        name.includes('idrac') ||
+        name.includes('ilo') ||
+        name.includes('bmc') ||
+        name.includes('mgmt') ||
+        name.includes('管理')
+      ) {
         management.push({ ...card, type: 'management' });
-      } else if (slotNum === 0 || name.includes('onboard') || name.includes('板载') || name.includes('内置')) {
+      } else if (
+        slotNum === 0 ||
+        name.includes('onboard') ||
+        name.includes('板载') ||
+        name.includes('内置')
+      ) {
         onboard.push({ ...card, type: 'onboard' });
       } else {
         expansionSlots.push({ ...card, type: 'expansion', slotIndex: slotNum });
@@ -115,7 +126,7 @@ const ServerBackplanePanel = ({
           alignItems: 'center',
           gap: '6px',
           border: '2px solid #4b5563',
-          boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.1)'
+          boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.1)',
         }}
       >
         <div style={{ fontSize: '10px', color: '#9ca3af', fontWeight: 600 }}>MGMT</div>
@@ -134,7 +145,7 @@ const ServerBackplanePanel = ({
               justifyContent: 'center',
               cursor: 'pointer',
               transition: 'all 0.2s',
-              boxShadow: '0 2px 4px rgba(0,0,0,0.3)'
+              boxShadow: '0 2px 4px rgba(0,0,0,0.3)',
             }}
           >
             <SettingOutlined style={{ fontSize: 16, color: '#10b981' }} />
@@ -152,7 +163,7 @@ const ServerBackplanePanel = ({
               border: '2px dashed #6b7280',
               display: 'flex',
               alignItems: 'center',
-              justifyContent: 'center'
+              justifyContent: 'center',
             }}
           >
             <PlusOutlined style={{ fontSize: 14, color: '#6b7280' }} />
@@ -160,11 +171,47 @@ const ServerBackplanePanel = ({
         )}
 
         {/* 其他接口占位 */}
-        <div style={{ width: '48px', height: '24px', background: '#1f2937', borderRadius: '2px', border: '1px solid #4b5563' }}>
-          <Text style={{ fontSize: '8px', color: '#6b7280', display: 'block', textAlign: 'center', lineHeight: '22px' }}>VGA</Text>
+        <div
+          style={{
+            width: '48px',
+            height: '24px',
+            background: '#1f2937',
+            borderRadius: '2px',
+            border: '1px solid #4b5563',
+          }}
+        >
+          <Text
+            style={{
+              fontSize: '8px',
+              color: '#6b7280',
+              display: 'block',
+              textAlign: 'center',
+              lineHeight: '22px',
+            }}
+          >
+            VGA
+          </Text>
         </div>
-        <div style={{ width: '48px', height: '16px', background: '#1f2937', borderRadius: '2px', border: '1px solid #4b5563' }}>
-          <Text style={{ fontSize: '8px', color: '#6b7280', display: 'block', textAlign: 'center', lineHeight: '14px' }}>USB</Text>
+        <div
+          style={{
+            width: '48px',
+            height: '16px',
+            background: '#1f2937',
+            borderRadius: '2px',
+            border: '1px solid #4b5563',
+          }}
+        >
+          <Text
+            style={{
+              fontSize: '8px',
+              color: '#6b7280',
+              display: 'block',
+              textAlign: 'center',
+              lineHeight: '14px',
+            }}
+          >
+            USB
+          </Text>
         </div>
       </div>
     );
@@ -182,11 +229,20 @@ const ServerBackplanePanel = ({
           borderRadius: '4px',
           padding: '12px',
           border: '2px solid #6b7280',
-          boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.1)'
+          boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.1)',
         }}
       >
-        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '8px' }}>
-          <Text style={{ fontSize: '11px', color: '#d1d5db', fontWeight: 600 }}>板载网卡 (Onboard)</Text>
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            marginBottom: '8px',
+          }}
+        >
+          <Text style={{ fontSize: '11px', color: '#d1d5db', fontWeight: 600 }}>
+            板载网卡 (Onboard)
+          </Text>
           {onboardCard && (
             <Badge
               count={onboardCard.ports?.length || 0}
@@ -204,18 +260,21 @@ const ServerBackplanePanel = ({
               padding: '12px',
               border: `2px solid ${onboardCard.ports?.length > 0 ? designTokens.colors.primary.main : '#6b7280'}`,
               cursor: 'pointer',
-              transition: 'all 0.2s'
+              transition: 'all 0.2s',
             }}
           >
             {/* 4个RJ45端口布局 */}
             <div style={{ display: 'flex', gap: '12px', justifyContent: 'center' }}>
-              {[0, 1, 2, 3].map((idx) => {
+              {[0, 1, 2, 3].map(idx => {
                 const port = onboardCard.ports?.[idx];
                 const hasPort = !!port;
                 const isOccupied = hasPort && port.status === 'occupied';
 
                 return (
-                  <Tooltip key={idx} title={hasPort ? `${port.portName} - ${port.status}` : '未配置'}>
+                  <Tooltip
+                    key={idx}
+                    title={hasPort ? `${port.portName} - ${port.status}` : '未配置'}
+                  >
                     <div
                       style={{
                         width: '40px',
@@ -224,15 +283,18 @@ const ServerBackplanePanel = ({
                           ? 'linear-gradient(180deg, #374151 0%, #1f2937 100%)'
                           : '#374151',
                         borderRadius: '4px',
-                        border: `2px solid ${hasPort
-                          ? (isOccupied ? designTokens.colors.success : designTokens.colors.metal.light)
-                          : '#4b5563'
+                        border: `2px solid ${
+                          hasPort
+                            ? isOccupied
+                              ? designTokens.colors.success
+                              : designTokens.colors.metal.light
+                            : '#4b5563'
                         }`,
                         display: 'flex',
                         flexDirection: 'column',
                         alignItems: 'center',
                         justifyContent: 'center',
-                        position: 'relative'
+                        position: 'relative',
                       }}
                     >
                       {/* LED指示灯 */}
@@ -241,13 +303,11 @@ const ServerBackplanePanel = ({
                           width: '4px',
                           height: '4px',
                           borderRadius: '50%',
-                          background: hasPort
-                            ? (isOccupied ? '#10b981' : '#6b7280')
-                            : '#374151',
+                          background: hasPort ? (isOccupied ? '#10b981' : '#6b7280') : '#374151',
                           position: 'absolute',
                           top: '2px',
                           right: '2px',
-                          boxShadow: isOccupied ? '0 0 4px #10b981' : 'none'
+                          boxShadow: isOccupied ? '0 0 4px #10b981' : 'none',
                         }}
                       />
                       <span style={{ fontSize: '8px', color: '#9ca3af' }}>⬡</span>
@@ -273,7 +333,7 @@ const ServerBackplanePanel = ({
               alignItems: 'center',
               justifyContent: 'center',
               cursor: 'pointer',
-              gap: '8px'
+              gap: '8px',
             }}
           >
             <PlusOutlined style={{ fontSize: 20, color: '#6b7280' }} />
@@ -303,13 +363,23 @@ const ServerBackplanePanel = ({
           borderRadius: '4px',
           padding: '12px',
           border: '2px solid #6b7280',
-          boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.1)'
+          boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.1)',
         }}
       >
-        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '8px' }}>
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            marginBottom: '8px',
+          }}
+        >
           <Text style={{ fontSize: '11px', color: '#d1d5db', fontWeight: 600 }}>PCIe 扩展插槽</Text>
           <Space size={4}>
-            <Badge count={expansionSlots.length} style={{ backgroundColor: designTokens.colors.primary.main }} />
+            <Badge
+              count={expansionSlots.length}
+              style={{ backgroundColor: designTokens.colors.primary.main }}
+            />
             <Text style={{ fontSize: '10px', color: '#9ca3af' }}>/{totalSlots}</Text>
           </Space>
         </div>
@@ -318,7 +388,9 @@ const ServerBackplanePanel = ({
           {slots.map(({ slotNumber, card }) => (
             <Tooltip
               key={slotNumber}
-              title={card ? `${card.name} (${card.ports?.length || 0}口)` : `插槽 ${slotNumber} (空闲)`}
+              title={
+                card ? `${card.name} (${card.ports?.length || 0}口)` : `插槽 ${slotNumber} (空闲)`
+              }
             >
               <div
                 onClick={() => card && setSelectedSlot(card)}
@@ -337,15 +409,24 @@ const ServerBackplanePanel = ({
                   padding: '6px',
                   cursor: card ? 'pointer' : 'default',
                   transition: 'all 0.2s',
-                  boxShadow: card ? '0 2px 8px rgba(59, 130, 246, 0.3)' : 'none'
+                  boxShadow: card ? '0 2px 8px rgba(59, 130, 246, 0.3)' : 'none',
                 }}
               >
-                <Text style={{ fontSize: '9px', color: '#6b7280', fontWeight: 600 }}>Slot {slotNumber}</Text>
+                <Text style={{ fontSize: '9px', color: '#6b7280', fontWeight: 600 }}>
+                  Slot {slotNumber}
+                </Text>
 
                 {card ? (
                   <>
                     <CloudServerOutlined style={{ fontSize: 20, color: '#3b82f6' }} />
-                    <div style={{ display: 'flex', gap: '2px', flexWrap: 'wrap', justifyContent: 'center' }}>
+                    <div
+                      style={{
+                        display: 'flex',
+                        gap: '2px',
+                        flexWrap: 'wrap',
+                        justifyContent: 'center',
+                      }}
+                    >
                       {card.ports?.slice(0, 4).map((port, idx) => (
                         <div
                           key={idx}
@@ -354,19 +435,30 @@ const ServerBackplanePanel = ({
                             height: '8px',
                             borderRadius: '1px',
                             background: port.status === 'occupied' ? '#10b981' : '#6b7280',
-                            boxShadow: port.status === 'occupied' ? '0 0 2px #10b981' : 'none'
+                            boxShadow: port.status === 'occupied' ? '0 0 2px #10b981' : 'none',
                           }}
                         />
                       ))}
                       {card.ports?.length > 4 && (
-                        <Text style={{ fontSize: '8px', color: '#9ca3af' }}>+{card.ports.length - 4}</Text>
+                        <Text style={{ fontSize: '8px', color: '#9ca3af' }}>
+                          +{card.ports.length - 4}
+                        </Text>
                       )}
                     </div>
-                    <Text style={{ fontSize: '8px', color: '#9ca3af' }}>{card.ports?.length || 0}口</Text>
+                    <Text style={{ fontSize: '8px', color: '#9ca3af' }}>
+                      {card.ports?.length || 0}口
+                    </Text>
                   </>
                 ) : (
                   <>
-                    <div style={{ width: '40px', height: '40px', border: '2px dashed #4b5563', borderRadius: '4px' }} />
+                    <div
+                      style={{
+                        width: '40px',
+                        height: '40px',
+                        border: '2px dashed #4b5563',
+                        borderRadius: '4px',
+                      }}
+                    />
                     <Text style={{ fontSize: '8px', color: '#6b7280' }}>空闲</Text>
                   </>
                 )}
@@ -390,11 +482,13 @@ const ServerBackplanePanel = ({
           border: '2px solid #4b5563',
           display: 'flex',
           flexDirection: 'column',
-          gap: '8px'
+          gap: '8px',
         }}
       >
-        <Text style={{ fontSize: '10px', color: '#9ca3af', fontWeight: 600, textAlign: 'center' }}>电源</Text>
-        {[1, 2].map((psu) => (
+        <Text style={{ fontSize: '10px', color: '#9ca3af', fontWeight: 600, textAlign: 'center' }}>
+          电源
+        </Text>
+        {[1, 2].map(psu => (
           <div
             key={psu}
             style={{
@@ -406,7 +500,7 @@ const ServerBackplanePanel = ({
               flexDirection: 'column',
               alignItems: 'center',
               justifyContent: 'center',
-              gap: '4px'
+              gap: '4px',
             }}
           >
             <ThunderboltOutlined style={{ fontSize: 20, color: '#10b981' }} />
@@ -417,7 +511,7 @@ const ServerBackplanePanel = ({
                 height: '6px',
                 borderRadius: '50%',
                 background: '#10b981',
-                boxShadow: '0 0 6px #10b981'
+                boxShadow: '0 0 6px #10b981',
               }}
             />
           </div>
@@ -445,17 +539,24 @@ const ServerBackplanePanel = ({
           padding: '8px 12px',
           background: '#f8fafc',
           borderRadius: '8px',
-          border: '1px solid #e2e8f0'
+          border: '1px solid #e2e8f0',
         }}
       >
         <Space>
-          <Badge count={cards.filter(c => !c.isUngrouped).length} style={{ backgroundColor: designTokens.colors.primary.main }} />
-          <Text type="secondary" style={{ fontSize: '13px' }}>个网卡</Text>
+          <Badge
+            count={cards.filter(c => !c.isUngrouped).length}
+            style={{ backgroundColor: designTokens.colors.primary.main }}
+          />
+          <Text type="secondary" style={{ fontSize: '13px' }}>
+            个网卡
+          </Text>
           <Badge
             count={cards.reduce((acc, card) => acc + (card.ports?.length || 0), 0)}
             style={{ backgroundColor: '#667eea' }}
           />
-          <Text type="secondary" style={{ fontSize: '13px' }}>个端口</Text>
+          <Text type="secondary" style={{ fontSize: '13px' }}>
+            个端口
+          </Text>
         </Space>
         <Space>
           <Button size="small" icon={<ReloadOutlined />} onClick={fetchData}>
@@ -480,7 +581,7 @@ const ServerBackplanePanel = ({
           borderRadius: '8px',
           padding: '16px',
           border: '3px solid #374151',
-          boxShadow: 'inset 0 2px 4px rgba(0,0,0,0.2), 0 4px 12px rgba(0,0,0,0.3)'
+          boxShadow: 'inset 0 2px 4px rgba(0,0,0,0.2), 0 4px 12px rgba(0,0,0,0.3)',
         }}
       >
         {/* 服务器标识 */}
@@ -492,7 +593,7 @@ const ServerBackplanePanel = ({
             marginBottom: '12px',
             padding: '6px 12px',
             background: 'rgba(0,0,0,0.3)',
-            borderRadius: '4px'
+            borderRadius: '4px',
           }}
         >
           <DesktopOutlined style={{ fontSize: 14, color: '#9ca3af', marginRight: 8 }} />
@@ -536,16 +637,34 @@ const ServerBackplanePanel = ({
       >
         {selectedSlot && (
           <div>
-            <div style={{ marginBottom: '16px', padding: '12px', background: '#f8fafc', borderRadius: '8px' }}>
+            <div
+              style={{
+                marginBottom: '16px',
+                padding: '12px',
+                background: '#f8fafc',
+                borderRadius: '8px',
+              }}
+            >
               <Space direction="vertical" size={4} style={{ width: '100%' }}>
-                <Text type="secondary">类型: {selectedSlot.type === 'onboard' ? '板载网卡' : selectedSlot.type === 'management' ? '管理口' : '扩展网卡'}</Text>
-                {selectedSlot.description && <Text type="secondary">描述: {selectedSlot.description}</Text>}
+                <Text type="secondary">
+                  类型:{' '}
+                  {selectedSlot.type === 'onboard'
+                    ? '板载网卡'
+                    : selectedSlot.type === 'management'
+                      ? '管理口'
+                      : '扩展网卡'}
+                </Text>
+                {selectedSlot.description && (
+                  <Text type="secondary">描述: {selectedSlot.description}</Text>
+                )}
                 <div>
                   <Text type="secondary">端口统计: </Text>
                   <Space size={8}>
                     <Tag color="success">空闲: {selectedSlot.stats?.free || 0}</Tag>
                     <Tag color="processing">占用: {selectedSlot.stats?.occupied || 0}</Tag>
-                    {selectedSlot.stats?.fault > 0 && <Tag color="error">故障: {selectedSlot.stats.fault}</Tag>}
+                    {selectedSlot.stats?.fault > 0 && (
+                      <Tag color="error">故障: {selectedSlot.stats.fault}</Tag>
+                    )}
                     <Tag color="blue">总计: {selectedSlot.ports?.length || 0}</Tag>
                   </Space>
                 </div>
diff --git a/frontend/src/components/VirtualDeviceList.jsx b/frontend/src/components/VirtualDeviceList.jsx
index 92dc7b2..830e031 100644
--- a/frontend/src/components/VirtualDeviceList.jsx
+++ b/frontend/src/components/VirtualDeviceList.jsx
@@ -1,6 +1,13 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { Button, Empty, Spin, Badge, Typography, Space, Checkbox, Tooltip } from 'antd';
-import { DownOutlined, UpOutlined, EyeOutlined, EyeInvisibleOutlined, PlusOutlined, CloudServerOutlined } from '@ant-design/icons';
+import {
+  DownOutlined,
+  UpOutlined,
+  EyeOutlined,
+  EyeInvisibleOutlined,
+  PlusOutlined,
+  CloudServerOutlined,
+} from '@ant-design/icons';
 import ServerBackplanePanel from './ServerBackplanePanel';
 import PortPanel from './PortPanel';
 
@@ -9,7 +16,7 @@ const { Text } = Typography;
 /**
  * 虚拟设备列表组件
  * 用于优化大量设备面板的渲染性能
- * 
+ *
  * @param {Object[]} devices - 设备列表
  * @param {Object} groupedPorts - 按设备分组的端口数据
  * @param {Object[]} cables - 接线列表
@@ -29,7 +36,7 @@ const VirtualDeviceList = ({
   onAddPort,
   onManageNetworkCards,
   initialVisibleCount = 5,
-  loadMoreCount = 5
+  loadMoreCount = 5,
 }) => {
   const [visibleCount, setVisibleCount] = useState(initialVisibleCount);
   const [loading, setLoading] = useState(false);
@@ -54,10 +61,10 @@ const VirtualDeviceList = ({
     const options = {
       root: null,
       rootMargin: '100px',
-      threshold: 0.1
+      threshold: 0.1,
     };
 
-    observerRef.current = new IntersectionObserver((entries) => {
+    observerRef.current = new IntersectionObserver(entries => {
       entries.forEach(entry => {
         if (entry.isIntersecting && !loading && visibleCount < devices.length) {
           loadMore();
@@ -79,7 +86,7 @@ const VirtualDeviceList = ({
 
   const loadMore = useCallback(() => {
     if (loading || visibleCount >= devices.length) return;
-    
+
     setLoading(true);
     // 模拟异步加载，实际可以直接同步更新
     setTimeout(() => {
@@ -110,10 +117,10 @@ const VirtualDeviceList = ({
     setShowAll(false);
   }, [devices]);
 
-  const toggleDeviceExpand = (deviceId) => {
+  const toggleDeviceExpand = deviceId => {
     setExpandedDevices(prev => ({
       ...prev,
-      [deviceId]: !prev[deviceId]
+      [deviceId]: !prev[deviceId],
     }));
   };
 
@@ -121,42 +128,38 @@ const VirtualDeviceList = ({
   const hasMore = visibleCount < devices.length;
 
   if (devices.length === 0) {
-    return (
-      <Empty 
-        description="暂无设备数据" 
-        style={{ padding: '60px 0' }}
-      />
-    );
+    return <Empty description="暂无设备数据" style={{ padding: '60px 0' }} />;
   }
 
   return (
     <div ref={containerRef} style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
       {/* 控制栏 */}
-      <div style={{
-        display: 'flex',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        padding: '12px 16px',
-        background: '#f8fafc',
-        borderRadius: '8px',
-        border: '1px solid #e2e8f0'
-      }}>
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          padding: '12px 16px',
+          background: '#f8fafc',
+          borderRadius: '8px',
+          border: '1px solid #e2e8f0',
+        }}
+      >
         <Space align="center">
           <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-            <Text strong style={{ fontSize: '14px' }}>设备列表</Text>
-            <Badge 
-              count={devices.length} 
-              style={{ backgroundColor: '#667eea' }}
-            />
+            <Text strong style={{ fontSize: '14px' }}>
+              设备列表
+            </Text>
+            <Badge count={devices.length} style={{ backgroundColor: '#667eea' }} />
           </div>
           <Text type="secondary" style={{ fontSize: '12px' }}>
             显示 {visibleDevices.length} / {devices.length}
           </Text>
         </Space>
-        
+
         <Space>
-          <Button 
-            size="small" 
+          <Button
+            size="small"
             icon={showAll ? <UpOutlined /> : <DownOutlined />}
             onClick={showAll ? handleCollapseAll : handleShowAll}
           >
@@ -166,7 +169,7 @@ const VirtualDeviceList = ({
       </div>
 
       {/* 设备面板列表 */}
-      {visibleDevices.map((device) => {
+      {visibleDevices.map(device => {
         const deviceId = device.deviceId;
         const data = groupedPorts[deviceId] || { device, ports: [] };
         const isExpanded = expandedDevices[deviceId];
@@ -174,14 +177,14 @@ const VirtualDeviceList = ({
         const occupiedCount = data.ports?.filter(p => p.status === 'occupied').length || 0;
 
         return (
-          <div 
+          <div
             key={deviceId}
             style={{
               border: '1px solid #e2e8f0',
               borderRadius: '12px',
               overflow: 'hidden',
               background: '#fff',
-              transition: 'all 0.3s ease'
+              transition: 'all 0.3s ease',
             }}
           >
             {/* 设备标题栏 */}
@@ -195,31 +198,37 @@ const VirtualDeviceList = ({
                 background: isExpanded ? '#f1f5f9' : '#fff',
                 cursor: 'pointer',
                 borderBottom: isExpanded ? '1px solid #e2e8f0' : 'none',
-                transition: 'background 0.2s'
+                transition: 'background 0.2s',
               }}
-              onMouseEnter={(e) => {
+              onMouseEnter={e => {
                 e.currentTarget.style.background = '#f1f5f9';
               }}
-              onMouseLeave={(e) => {
+              onMouseLeave={e => {
                 if (!isExpanded) {
                   e.currentTarget.style.background = '#fff';
                 }
               }}
             >
               <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
-                <div style={{
-                  width: '40px',
-                  height: '40px',
-                  borderRadius: '10px',
-                  background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  fontSize: '20px'
-                }}>
-                  {device.type?.toLowerCase()?.includes('server') ? '🖥️' :
-                   device.type?.toLowerCase()?.includes('switch') ? '🔀' :
-                   device.type?.toLowerCase()?.includes('router') ? '🌐' : '📦'}
+                <div
+                  style={{
+                    width: '40px',
+                    height: '40px',
+                    borderRadius: '10px',
+                    background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    fontSize: '20px',
+                  }}
+                >
+                  {device.type?.toLowerCase()?.includes('server')
+                    ? '🖥️'
+                    : device.type?.toLowerCase()?.includes('switch')
+                      ? '🔀'
+                      : device.type?.toLowerCase()?.includes('router')
+                        ? '🌐'
+                        : '📦'}
                 </div>
                 <div>
                   <div style={{ fontWeight: 600, fontSize: '15px', color: '#1e293b' }}>
@@ -233,16 +242,16 @@ const VirtualDeviceList = ({
 
               <Space size="middle">
                 <Space size="small">
-                  <Badge 
-                    count={occupiedCount} 
+                  <Badge
+                    count={occupiedCount}
                     style={{ backgroundColor: '#3b82f6' }}
                     overflowCount={999}
                   />
                   <Text type="secondary" style={{ fontSize: '12px' }}>
                     已用
                   </Text>
-                  <Badge 
-                    count={portCount} 
+                  <Badge
+                    count={portCount}
                     style={{ backgroundColor: '#10b981' }}
                     overflowCount={999}
                   />
@@ -257,13 +266,13 @@ const VirtualDeviceList = ({
                     type="primary"
                     size="small"
                     icon={<CloudServerOutlined />}
-                    onClick={(e) => {
+                    onClick={e => {
                       e.stopPropagation(); // 防止触发折叠
                       onManageNetworkCards && onManageNetworkCards(device);
                     }}
                     style={{
                       background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
-                      border: 'none'
+                      border: 'none',
                     }}
                   >
                     网卡管理
@@ -275,13 +284,13 @@ const VirtualDeviceList = ({
                   type="primary"
                   size="small"
                   icon={<PlusOutlined />}
-                  onClick={(e) => {
+                  onClick={e => {
                     e.stopPropagation(); // 防止触发折叠
                     onAddPort && onAddPort(device);
                   }}
                   style={{
                     background: 'linear-gradient(135deg, #10b981 0%, #059669 100%)',
-                    border: 'none'
+                    border: 'none',
                   }}
                 >
                   添加端口
@@ -318,7 +327,9 @@ const VirtualDeviceList = ({
                     cables={cables}
                     allDevices={allDevices}
                     onPortClick={onPortClick}
-                    onManageNetworkCards={() => onManageNetworkCards && onManageNetworkCards(device)}
+                    onManageNetworkCards={() =>
+                      onManageNetworkCards && onManageNetworkCards(device)
+                    }
                   />
                 )}
               </div>
@@ -329,20 +340,18 @@ const VirtualDeviceList = ({
 
       {/* 加载更多触发器 */}
       {hasMore && !showAll && (
-        <div 
+        <div
           id="load-more-trigger"
           style={{
             textAlign: 'center',
             padding: '20px',
-            color: '#64748b'
+            color: '#64748b',
           }}
         >
           {loading ? (
             <Spin size="small" tip="加载更多设备..." />
           ) : (
-            <Text type="secondary">
-              向下滚动加载更多 ({devices.length - visibleCount} 个设备)
-            </Text>
+            <Text type="secondary">向下滚动加载更多 ({devices.length - visibleCount} 个设备)</Text>
           )}
         </div>
       )}
diff --git a/frontend/src/config/theme.js b/frontend/src/config/theme.js
index f568419..0c6387a 100644
--- a/frontend/src/config/theme.js
+++ b/frontend/src/config/theme.js
@@ -9,49 +9,49 @@ export const designTokens = {
       main: '#667eea',
       gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
       light: '#8b9ff0',
-      dark: '#4f5db8'
+      dark: '#4f5db8',
     },
     success: {
       main: '#10b981',
       gradient: 'linear-gradient(135deg, #10b981 0%, #059669 100%)',
       light: '#34d399',
-      dark: '#047857'
+      dark: '#047857',
     },
     warning: {
       main: '#f59e0b',
       gradient: 'linear-gradient(135deg, #f59e0b 0%, #d97706 100%)',
       light: '#fbbf24',
-      dark: '#b45309'
+      dark: '#b45309',
     },
     error: {
       main: '#ef4444',
       gradient: 'linear-gradient(135deg, #ef4444 0%, #dc2626 100%)',
       light: '#f87171',
-      dark: '#b91c1c'
+      dark: '#b91c1c',
     },
     text: {
       primary: '#1e293b',
       secondary: '#64748b',
       tertiary: '#94a3b8',
-      inverse: '#ffffff'
+      inverse: '#ffffff',
     },
     background: {
       primary: '#ffffff',
       secondary: '#f8fafc',
       tertiary: '#f1f5f9',
-      dark: '#1e293b'
+      dark: '#1e293b',
     },
     border: {
       light: '#e2e8f0',
       medium: '#cbd5e1',
-      dark: '#94a3b8'
+      dark: '#94a3b8',
     },
     device: {
       server: '#3b82f6',
       switch: '#22c55e',
       router: '#f59e0b',
       storage: '#8b5cf6',
-      other: '#64748b'
+      other: '#64748b',
     },
     status: {
       normal: '#10b981',
@@ -60,35 +60,35 @@ export const designTokens = {
       error: '#ef4444',
       fault: '#ef4444',
       offline: '#6b7280',
-      maintenance: '#3b82f6'
-    }
+      maintenance: '#3b82f6',
+    },
   },
   shadows: {
     small: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
     medium: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)',
     large: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)',
     xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)',
-    glow: '0 0 20px rgba(102, 126, 234, 0.3)'
+    glow: '0 0 20px rgba(102, 126, 234, 0.3)',
   },
   borderRadius: {
     small: '6px',
     medium: '10px',
     large: '16px',
     xl: '24px',
-    round: '50%'
+    round: '50%',
   },
   transitions: {
     fast: '150ms cubic-bezier(0.4, 0, 0.2, 1)',
     normal: '300ms cubic-bezier(0.4, 0, 0.2, 1)',
-    slow: '500ms cubic-bezier(0.4, 0, 0.2, 1)'
+    slow: '500ms cubic-bezier(0.4, 0, 0.2, 1)',
   },
   spacing: {
     xs: '4px',
     sm: '8px',
     md: '16px',
     lg: '24px',
-    xl: '32px'
-  }
+    xl: '32px',
+  },
 };
 
 export default designTokens;
diff --git a/frontend/src/constants/deviceManagementConstants.js b/frontend/src/constants/deviceManagementConstants.js
index 63c8137..632a6c8 100644
--- a/frontend/src/constants/deviceManagementConstants.js
+++ b/frontend/src/constants/deviceManagementConstants.js
@@ -12,7 +12,7 @@ export const PAGINATION_CONFIG = {
   // 显示快速跳转
   showSizeChanger: true,
   // 显示总数
-  showTotal: (total, range) => `第 ${range[0]}-${range[1]} 条，共 ${total} 条`
+  showTotal: (total, range) => `第 ${range[0]}-${range[1]} 条，共 ${total} 条`,
 };
 
 // 搜索防抖延迟（毫秒）
@@ -21,7 +21,7 @@ export const DEBOUNCE_DELAY = 300;
 // 表格滚动配置
 export const TABLE_SCROLL_CONFIG = {
   x: 'max-content',
-  y: 'calc(100vh - 400px)'
+  y: 'calc(100vh - 400px)',
 };
 
 // 默认设备字段配置
@@ -32,7 +32,7 @@ export const DEFAULT_DEVICE_FIELDS = [
     fieldType: 'text',
     required: true,
     visible: true,
-    editable: false
+    editable: false,
   },
   {
     fieldName: 'name',
@@ -40,7 +40,7 @@ export const DEFAULT_DEVICE_FIELDS = [
     fieldType: 'text',
     required: true,
     visible: true,
-    editable: true
+    editable: true,
   },
   {
     fieldName: 'type',
@@ -54,8 +54,8 @@ export const DEFAULT_DEVICE_FIELDS = [
       { value: 'switch', label: '交换机' },
       { value: 'router', label: '路由器' },
       { value: 'storage', label: '存储设备' },
-      { value: 'other', label: '其他设备' }
-    ]
+      { value: 'other', label: '其他设备' },
+    ],
   },
   {
     fieldName: 'model',
@@ -63,7 +63,7 @@ export const DEFAULT_DEVICE_FIELDS = [
     fieldType: 'text',
     required: false,
     visible: true,
-    editable: true
+    editable: true,
   },
   {
     fieldName: 'serialNumber',
@@ -71,7 +71,7 @@ export const DEFAULT_DEVICE_FIELDS = [
     fieldType: 'text',
     required: true,
     visible: true,
-    editable: true
+    editable: true,
   },
   {
     fieldName: 'rackId',
@@ -79,7 +79,7 @@ export const DEFAULT_DEVICE_FIELDS = [
     fieldType: 'text',
     required: true,
     visible: true,
-    editable: true
+    editable: true,
   },
   {
     fieldName: 'position',
@@ -87,7 +87,7 @@ export const DEFAULT_DEVICE_FIELDS = [
     fieldType: 'number',
     required: true,
     visible: true,
-    editable: true
+    editable: true,
   },
   {
     fieldName: 'height',
@@ -95,7 +95,7 @@ export const DEFAULT_DEVICE_FIELDS = [
     fieldType: 'number',
     required: true,
     visible: true,
-    editable: true
+    editable: true,
   },
   {
     fieldName: 'powerConsumption',
@@ -103,7 +103,7 @@ export const DEFAULT_DEVICE_FIELDS = [
     fieldType: 'number',
     required: false,
     visible: true,
-    editable: true
+    editable: true,
   },
   {
     fieldName: 'ipAddress',
@@ -111,7 +111,7 @@ export const DEFAULT_DEVICE_FIELDS = [
     fieldType: 'text',
     required: false,
     visible: true,
-    editable: true
+    editable: true,
   },
   {
     fieldName: 'status',
@@ -124,8 +124,8 @@ export const DEFAULT_DEVICE_FIELDS = [
       { value: 'running', label: '运行中' },
       { value: 'maintenance', label: '维护中' },
       { value: 'offline', label: '离线' },
-      { value: 'fault', label: '故障' }
-    ]
+      { value: 'fault', label: '故障' },
+    ],
   },
   {
     fieldName: 'purchaseDate',
@@ -133,7 +133,7 @@ export const DEFAULT_DEVICE_FIELDS = [
     fieldType: 'date',
     required: false,
     visible: true,
-    editable: true
+    editable: true,
   },
   {
     fieldName: 'warrantyExpiry',
@@ -141,7 +141,7 @@ export const DEFAULT_DEVICE_FIELDS = [
     fieldType: 'date',
     required: false,
     visible: true,
-    editable: true
+    editable: true,
   },
   {
     fieldName: 'description',
@@ -149,8 +149,8 @@ export const DEFAULT_DEVICE_FIELDS = [
     fieldType: 'textarea',
     required: false,
     visible: true,
-    editable: true
-  }
+    editable: true,
+  },
 ];
 
 // 基础字段名称列表（用于导入导出时排除自定义字段）
@@ -168,7 +168,7 @@ export const BASE_FIELD_NAMES = [
   'status',
   'purchaseDate',
   'warrantyExpiry',
-  'description'
+  'description',
 ];
 
 // 系统字段列表（不可编辑）
@@ -186,7 +186,7 @@ export const IMPORT_CONFIG = {
   // 单次最大导入条数
   maxImportCount: 5000,
   // 编码格式
-  encoding: 'gbk'
+  encoding: 'gbk',
 };
 
 // 导出配置
@@ -196,7 +196,7 @@ export const EXPORT_CONFIG = {
   // 日期格式
   dateFormat: 'YYYY-MM-DD_HH-mm-ss',
   // 支持的导出格式
-  formats: ['xlsx', 'csv']
+  formats: ['xlsx', 'csv'],
 };
 
 // 模态框配置
@@ -210,7 +210,7 @@ export const MODAL_CONFIG = {
   // 导入模态框宽度
   importModalWidth: 600,
   // 导出模态框宽度
-  exportModalWidth: 500
+  exportModalWidth: 500,
 };
 
 // 统计卡片配置
@@ -220,7 +220,7 @@ export const STATS_CONFIG = {
   // 显示的维护中设备数量上限
   maxMaintenanceDisplay: 99,
   // 显示的故障设备数量上限
-  maxFaultDisplay: 99
+  maxFaultDisplay: 99,
 };
 
 // 设备类型选项（用于筛选）
@@ -230,7 +230,7 @@ export const DEVICE_TYPE_OPTIONS = [
   { value: 'switch', label: '交换机' },
   { value: 'router', label: '路由器' },
   { value: 'storage', label: '存储设备' },
-  { value: 'other', label: '其他设备' }
+  { value: 'other', label: '其他设备' },
 ];
 
 // 设备状态选项（用于筛选）
@@ -239,7 +239,7 @@ export const DEVICE_STATUS_OPTIONS = [
   { value: 'running', label: '运行中' },
   { value: 'maintenance', label: '维护中' },
   { value: 'offline', label: '离线' },
-  { value: 'fault', label: '故障' }
+  { value: 'fault', label: '故障' },
 ];
 
 // 表格列宽配置
@@ -258,13 +258,13 @@ export const COLUMN_WIDTH_CONFIG = {
   purchaseDate: 110,
   warrantyExpiry: 110,
   description: 200,
-  action: 150
+  action: 150,
 };
 
 // 空状态配置
 export const EMPTY_STATE_CONFIG = {
   description: '暂无设备数据',
-  image: 'https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg'
+  image: 'https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg',
 };
 
 // 操作按钮配置
@@ -272,7 +272,7 @@ export const ACTION_BUTTON_CONFIG = {
   // 批量操作阈值（超过此数量显示确认对话框）
   batchConfirmThreshold: 10,
   // 批量删除确认消息
-  batchDeleteConfirmMessage: (count) => `确定要删除选中的 ${count} 个设备吗？此操作不可恢复。`,
+  batchDeleteConfirmMessage: count => `确定要删除选中的 ${count} 个设备吗？此操作不可恢复。`,
   // 单个删除确认消息
-  singleDeleteConfirmMessage: (name) => `确定要删除设备 "${name}" 吗？此操作不可恢复。`
+  singleDeleteConfirmMessage: name => `确定要删除设备 "${name}" 吗？此操作不可恢复。`,
 };
diff --git a/frontend/src/context/AuthContext.jsx b/frontend/src/context/AuthContext.jsx
index 4f6c59b..9263a49 100644
--- a/frontend/src/context/AuthContext.jsx
+++ b/frontend/src/context/AuthContext.jsx
@@ -13,13 +13,13 @@ export const useAuth = () => {
 
 export const AuthProvider = ({ children }) => {
   console.log('[AuthContext] Initializing...');
-  
+
   const savedToken = localStorage.getItem('token');
   const savedUser = localStorage.getItem('user');
-  
+
   console.log('[AuthContext] Saved token:', savedToken ? 'exists' : 'null');
   console.log('[AuthContext] Saved user:', savedUser ? 'exists' : 'null');
-  
+
   const [user, setUser] = useState(() => {
     try {
       if (savedUser) {
@@ -30,7 +30,7 @@ export const AuthProvider = ({ children }) => {
     }
     return null;
   });
-  
+
   const [token, setToken] = useState(() => savedToken);
   const [loading, setLoading] = useState(false);
   const [initialized, setInitialized] = useState(false);
@@ -38,7 +38,7 @@ export const AuthProvider = ({ children }) => {
   useEffect(() => {
     const currentToken = localStorage.getItem('token');
     const currentUser = localStorage.getItem('user');
-    
+
     if (currentToken && currentToken === token) {
       if (currentUser) {
         try {
@@ -97,7 +97,7 @@ export const AuthProvider = ({ children }) => {
     }
   };
 
-  const register = async (userData) => {
+  const register = async userData => {
     try {
       const response = await authAPI.register(userData);
       if (response.success) {
@@ -123,13 +123,13 @@ export const AuthProvider = ({ children }) => {
     setUser(null);
   }, []);
 
-  const updateUser = (newUserData) => {
+  const updateUser = newUserData => {
     const updatedUser = { ...user, ...newUserData };
     setUser(updatedUser);
     localStorage.setItem('user', JSON.stringify(updatedUser));
   };
 
-  const hasPermission = (permission) => {
+  const hasPermission = permission => {
     if (!user) return false;
     return true;
   };
@@ -144,14 +144,10 @@ export const AuthProvider = ({ children }) => {
     logout,
     updateUser,
     hasPermission,
-    checkAdmin: () => authAPI.checkAdmin()
+    checkAdmin: () => authAPI.checkAdmin(),
   };
 
-  return (
-    <AuthContext.Provider value={value}>
-      {children}
-    </AuthContext.Provider>
-  );
+  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
 };
 
 export default AuthContext;
diff --git a/frontend/src/context/ConfigContext.jsx b/frontend/src/context/ConfigContext.jsx
index 1d1b85b..4f72ae0 100644
--- a/frontend/src/context/ConfigContext.jsx
+++ b/frontend/src/context/ConfigContext.jsx
@@ -17,7 +17,7 @@ export const ConfigProvider = ({ children }) => {
     date_format: 'YYYY-MM-DD',
     session_timeout: 30,
     max_login_attempts: 5,
-    maintenance_mode: false
+    maintenance_mode: false,
   });
   const [loading, setLoading] = useState(true);
 
@@ -27,15 +27,15 @@ export const ConfigProvider = ({ children }) => {
       const response = await axios.get('/api/system-settings');
       const settings = response.data;
       const configValues = {};
-      
+
       // 将配置转换为扁平结构
       Object.entries(settings).forEach(([key, value]) => {
         configValues[key] = value.value;
       });
-      
+
       setConfig(prev => ({
         ...prev,
-        ...configValues
+        ...configValues,
       }));
     } catch (error) {
       console.error('加载系统配置失败:', error);
@@ -50,10 +50,10 @@ export const ConfigProvider = ({ children }) => {
   }, []);
 
   // 更新配置
-  const updateConfig = (newConfig) => {
+  const updateConfig = newConfig => {
     setConfig(prev => ({
       ...prev,
-      ...newConfig
+      ...newConfig,
     }));
   };
 
diff --git a/frontend/src/context/Scene3DContext.jsx b/frontend/src/context/Scene3DContext.jsx
index cff9f8b..2766991 100644
--- a/frontend/src/context/Scene3DContext.jsx
+++ b/frontend/src/context/Scene3DContext.jsx
@@ -17,11 +17,11 @@ export const Scene3DProvider = ({ children }) => {
   const [loadingDevices, setLoadingDevices] = useState(false);
 
   // 使用 useCallback 稳定回调函数
-  const selectDevice = useCallback((device) => {
+  const selectDevice = useCallback(device => {
     setSelectedDevice(device);
   }, []);
 
-  const hoverDevice = useCallback((device) => {
+  const hoverDevice = useCallback(device => {
     setHoveredDevice(device);
   }, []);
 
@@ -29,72 +29,84 @@ export const Scene3DProvider = ({ children }) => {
     setDeviceSlideEnabled(prev => !prev);
   }, []);
 
-  const setDeviceSlide = useCallback((enabled) => {
+  const setDeviceSlide = useCallback(enabled => {
     setDeviceSlideEnabled(enabled);
   }, []);
 
-  const updateDevices = useCallback((newDevices) => {
+  const updateDevices = useCallback(newDevices => {
     setDevices(newDevices);
   }, []);
 
-  const updateRacks = useCallback((newRacks) => {
+  const updateRacks = useCallback(newRacks => {
     setRacks(newRacks);
   }, []);
 
-  const selectRack = useCallback((rack) => {
+  const selectRack = useCallback(rack => {
     setSelectedRack(rack);
   }, []);
 
-  const updateDeviceCables = useCallback((cables) => {
+  const updateDeviceCables = useCallback(cables => {
     setDeviceCables(cables);
   }, []);
 
-  const setLoading = useCallback((loading) => {
+  const setLoading = useCallback(loading => {
     setLoadingDevices(loading);
   }, []);
 
   // 使用 useMemo 缓存 context value，避免不必要的重渲染
-  const value = useMemo(() => ({
-    // 状态
-    devices,
-    selectedDevice,
-    hoveredDevice,
-    deviceSlideEnabled,
-    selectedRack,
-    racks,
-    deviceCables,
-    loadingDevices,
-    // 方法
-    selectDevice,
-    hoverDevice,
-    toggleDeviceSlide,
-    setDeviceSlide,
-    updateDevices,
-    updateRacks,
-    selectRack,
-    updateDeviceCables,
-    setLoading,
-    // 直接设置状态的方法（用于兼容现有代码）
-    setDevices,
-    setSelectedDevice,
-    setHoveredDevice,
-    setDeviceSlideEnabled,
-    setSelectedRack,
-    setRacks,
-    setDeviceCables,
-    setLoadingDevices,
-  }), [
-    devices, selectedDevice, hoveredDevice, deviceSlideEnabled, 
-    selectedRack, racks, deviceCables, loadingDevices,
-    selectDevice, hoverDevice, toggleDeviceSlide, setDeviceSlide,
-    updateDevices, updateRacks, selectRack, updateDeviceCables, setLoading
-  ]);
-
-  return (
-    <Scene3DContext.Provider value={value}>
-      {children}
-    </Scene3DContext.Provider>
+  const value = useMemo(
+    () => ({
+      // 状态
+      devices,
+      selectedDevice,
+      hoveredDevice,
+      deviceSlideEnabled,
+      selectedRack,
+      racks,
+      deviceCables,
+      loadingDevices,
+      // 方法
+      selectDevice,
+      hoverDevice,
+      toggleDeviceSlide,
+      setDeviceSlide,
+      updateDevices,
+      updateRacks,
+      selectRack,
+      updateDeviceCables,
+      setLoading,
+      // 直接设置状态的方法（用于兼容现有代码）
+      setDevices,
+      setSelectedDevice,
+      setHoveredDevice,
+      setDeviceSlideEnabled,
+      setSelectedRack,
+      setRacks,
+      setDeviceCables,
+      setLoadingDevices,
+    }),
+    [
+      devices,
+      selectedDevice,
+      hoveredDevice,
+      deviceSlideEnabled,
+      selectedRack,
+      racks,
+      deviceCables,
+      loadingDevices,
+      selectDevice,
+      hoverDevice,
+      toggleDeviceSlide,
+      setDeviceSlide,
+      updateDevices,
+      updateRacks,
+      selectRack,
+      updateDeviceCables,
+      setLoading,
+    ]
   );
+
+  return <Scene3DContext.Provider value={value}>{children}</Scene3DContext.Provider>;
 };
 
 // 自定义 Hook
diff --git a/frontend/src/hooks/useDesignTokens.js b/frontend/src/hooks/useDesignTokens.js
index c43da6c..67c7471 100644
--- a/frontend/src/hooks/useDesignTokens.js
+++ b/frontend/src/hooks/useDesignTokens.js
@@ -18,7 +18,7 @@ export const useDesignTokens = () => {
         primary: {
           main: primaryColor,
           gradient: `linear-gradient(135deg, ${primaryColor} 0%, ${secondaryColor} 100%)`,
-          light: '#8b9ff0'
+          light: '#8b9ff0',
         },
         success: { main: '#10b981' },
         warning: { main: '#f59e0b' },
@@ -26,15 +26,15 @@ export const useDesignTokens = () => {
         text: {
           primary: '#1e293b',
           secondary: '#64748b',
-          inverse: '#ffffff'
+          inverse: '#ffffff',
         },
         background: {
           primary: '#ffffff',
           secondary: '#f8fafc',
-          dark: '#1e293b'
+          dark: '#1e293b',
         },
         border: {
-          light: '#e2e8f0'
+          light: '#e2e8f0',
         },
         sidebar: {
           bg: '#ffffff',
@@ -43,23 +43,23 @@ export const useDesignTokens = () => {
           text: '#475569',
           textHover: primaryColor,
           textActive: primaryColor,
-          border: '#e2e8f0'
-        }
+          border: '#e2e8f0',
+        },
       },
       shadows: {
         small: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
         medium: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)',
-        large: '0 10px 15px -3px rgba(0, 0, 0, 0.1)'
+        large: '0 10px 15px -3px rgba(0, 0, 0, 0.1)',
       },
       borderRadius: {
         small: '6px',
-        medium: '10px'
+        medium: '10px',
       },
       spacing: {
         sm: '8px',
         md: '16px',
-        lg: '24px'
-      }
+        lg: '24px',
+      },
     };
   }, [config?.primary_color, config?.secondary_color]);
 
@@ -74,16 +74,20 @@ export const useDesignTokens = () => {
 function hexToRgb(hex) {
   // 移除 # 号
   const cleanHex = hex.replace('#', '');
-  
+
   // 处理简写格式 (如: #fff)
-  const fullHex = cleanHex.length === 3 
-    ? cleanHex.split('').map(c => c + c).join('')
-    : cleanHex;
-  
+  const fullHex =
+    cleanHex.length === 3
+      ? cleanHex
+          .split('')
+          .map(c => c + c)
+          .join('')
+      : cleanHex;
+
   const r = parseInt(fullHex.substring(0, 2), 16);
   const g = parseInt(fullHex.substring(2, 4), 16);
   const b = parseInt(fullHex.substring(4, 6), 16);
-  
+
   return `${r}, ${g}, ${b}`;
 }
 
diff --git a/frontend/src/index.css b/frontend/src/index.css
index bb5b92d..5ed86f9 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -5,9 +5,9 @@
 }
 
 body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
+  font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',
+    'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   background-color: #f5f7fa;
@@ -149,19 +149,24 @@ body {
   transform: translateY(-1px);
 }
 
-.ant-input, .ant-select-selector, .ant-picker {
+.ant-input,
+.ant-select-selector,
+.ant-picker {
   border-radius: 8px !important;
   border: 1px solid #d9d9d9 !important;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
 }
 
-.ant-input:hover, .ant-select-selector:hover, .ant-picker:hover {
+.ant-input:hover,
+.ant-select-selector:hover,
+.ant-picker:hover {
   border-color: #40a9ff !important;
   box-shadow: 0 2px 6px rgba(24, 144, 255, 0.15) !important;
 }
 
-.ant-input:focus, .ant-input-focused,
+.ant-input:focus,
+.ant-input-focused,
 .ant-select-focused .ant-select-selector,
 .ant-picker-focused {
   border-color: #1890ff !important;
@@ -188,7 +193,8 @@ body {
   box-shadow: 0 2px 6px rgba(24, 144, 255, 0.15) !important;
 }
 
-.ant-input-affix-wrapper:focus, .ant-input-affix-wrapper-focused {
+.ant-input-affix-wrapper:focus,
+.ant-input-affix-wrapper-focused {
   border-color: #1890ff !important;
   box-shadow: 0 0 0 3px rgba(24, 144, 255, 0.15) !important;
 }
@@ -881,4 +887,4 @@ body {
 .welcome-banner p {
   color: rgba(255, 255, 255, 0.9);
   margin: 0;
-}
\ No newline at end of file
+}
diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx
index a402382..36eab19 100644
--- a/frontend/src/main.jsx
+++ b/frontend/src/main.jsx
@@ -10,4 +10,4 @@ ReactDOM.createRoot(document.getElementById('root')).render(
       <App />
     </AuthProvider>
   </React.StrictMode>
-);
\ No newline at end of file
+);
diff --git a/frontend/src/pages/CableManagement.jsx b/frontend/src/pages/CableManagement.jsx
index 906f3df..16d4d8e 100644
--- a/frontend/src/pages/CableManagement.jsx
+++ b/frontend/src/pages/CableManagement.jsx
@@ -1,6 +1,35 @@
 import React, { useState, useEffect, useCallback } from 'react';
-import { Table, Button, Modal, Form, Input, Select, message, Card, Space, Popconfirm, Tag, Tooltip, Collapse, Empty, Spin, Upload, Progress, Checkbox } from 'antd';
-import { PlusOutlined, EditOutlined, DeleteOutlined, SearchOutlined, ReloadOutlined, ExportOutlined, ImportOutlined, DownloadOutlined, UploadOutlined as UploadIcon } from '@ant-design/icons';
+import {
+  Table,
+  Button,
+  Modal,
+  Form,
+  Input,
+  Select,
+  message,
+  Card,
+  Space,
+  Popconfirm,
+  Tag,
+  Tooltip,
+  Collapse,
+  Empty,
+  Spin,
+  Upload,
+  Progress,
+  Checkbox,
+} from 'antd';
+import {
+  PlusOutlined,
+  EditOutlined,
+  DeleteOutlined,
+  SearchOutlined,
+  ReloadOutlined,
+  ExportOutlined,
+  ImportOutlined,
+  DownloadOutlined,
+  UploadOutlined as UploadIcon,
+} from '@ant-design/icons';
 import axios from 'axios';
 import * as XLSX from 'xlsx';
 import Papa from 'papaparse';
@@ -14,35 +43,35 @@ const designTokens = {
       main: '#667eea',
       gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
       light: '#8b9ff0',
-      dark: '#4f5db8'
+      dark: '#4f5db8',
     },
     success: {
       main: '#10b981',
       gradient: 'linear-gradient(135deg, #10b981 0%, #059669 100%)',
       light: '#34d399',
-      dark: '#047857'
+      dark: '#047857',
     },
     warning: {
       main: '#f59e0b',
       gradient: 'linear-gradient(135deg, #f59e0b 0%, #d97706 100%)',
       light: '#fbbf24',
-      dark: '#b45309'
+      dark: '#b45309',
     },
     error: {
       main: '#ef4444',
       gradient: 'linear-gradient(135deg, #ef4444 0%, #dc2626 100%)',
       light: '#f87171',
-      dark: '#b91c1c'
-    }
+      dark: '#b91c1c',
+    },
   },
   borderRadius: {
     small: '6px',
     medium: '10px',
-    large: '16px'
+    large: '16px',
   },
   shadows: {
-    medium: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)'
-  }
+    medium: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)',
+  },
 };
 
 function CableManagement() {
@@ -55,12 +84,12 @@ function CableManagement() {
   const [filters, setFilters] = useState({
     switchDeviceId: '',
     status: 'all',
-    cableType: 'all'
+    cableType: 'all',
   });
   const [modalVisible, setModalVisible] = useState(false);
   const [editingCable, setEditingCable] = useState(null);
   const [form] = Form.useForm();
-  
+
   const [importModalVisible, setImportModalVisible] = useState(false);
   const [importFileList, setImportFileList] = useState([]);
   const [importPreview, setImportPreview] = useState([]);
@@ -88,7 +117,7 @@ function CableManagement() {
         if (!grouped[switchId]) {
           grouped[switchId] = {
             switch: cable.sourceDevice,
-            cables: []
+            cables: [],
           };
         }
         grouped[switchId].cables.push(cable);
@@ -128,12 +157,12 @@ function CableManagement() {
     }
   }, []);
 
-  const fetchDevicePorts = useCallback(async (deviceId) => {
+  const fetchDevicePorts = useCallback(async deviceId => {
     if (!deviceId) {
       setDevicePorts(prev => ({ ...prev, [deviceId]: [] }));
       return;
     }
-    
+
     try {
       const response = await axios.get(`/api/device-ports/device/${deviceId}`);
       setDevicePorts(prev => ({ ...prev, [deviceId]: response.data || [] }));
@@ -156,7 +185,7 @@ function CableManagement() {
     setFilters({
       switchDeviceId: '',
       status: 'all',
-      cableType: 'all'
+      cableType: 'all',
     });
   };
 
@@ -166,7 +195,7 @@ function CableManagement() {
     setModalVisible(true);
   };
 
-  const handleEdit = (cable) => {
+  const handleEdit = cable => {
     setEditingCable(cable);
     form.setFieldsValue({
       sourceDeviceId: cable.sourceDeviceId,
@@ -176,12 +205,12 @@ function CableManagement() {
       cableType: cable.cableType,
       cableLength: cable.cableLength,
       status: cable.status,
-      description: cable.description
+      description: cable.description,
     });
     setModalVisible(true);
   };
 
-  const handleDelete = async (cableId) => {
+  const handleDelete = async cableId => {
     try {
       await axios.delete(`/api/cables/${cableId}`);
       message.success('删除成功');
@@ -192,7 +221,7 @@ function CableManagement() {
     }
   };
 
-  const handleDeleteSwitch = async (switchId) => {
+  const handleDeleteSwitch = async switchId => {
     try {
       await axios.delete(`/api/devices/${switchId}`);
       message.success('删除设备成功');
@@ -228,7 +257,7 @@ function CableManagement() {
           sourceDeviceId: values.sourceDeviceId,
           sourcePort: values.sourcePort,
           targetDeviceId: values.targetDeviceId,
-          targetPort: values.targetPort
+          targetPort: values.targetPort,
         });
 
         if (checkResponse.data.hasConflict) {
@@ -247,10 +276,12 @@ function CableManagement() {
       } catch (error) {
         if (error.response?.status === 409) {
           // 冲突错误
-          setConflictInfo([{
-            type: 'unknown',
-            existingCable: error.response.data.existingCable
-          }]);
+          setConflictInfo([
+            {
+              type: 'unknown',
+              existingCable: error.response.data.existingCable,
+            },
+          ]);
           setPendingSubmitValues(values);
           setConflictModalVisible(true);
         } else {
@@ -269,7 +300,7 @@ function CableManagement() {
 
       await axios.post('/api/cables', {
         ...pendingSubmitValues,
-        force: true
+        force: true,
       });
 
       message.success('接线已强制接管并创建成功');
@@ -291,16 +322,16 @@ function CableManagement() {
     setImportProgress({ current: 0, total: 0 });
   };
 
-  const handleFileUpload = (info) => {
+  const handleFileUpload = info => {
     const { file } = info;
     setImportFileList([file]);
-    
+
     const reader = new FileReader();
-    reader.onload = async (e) => {
+    reader.onload = async e => {
       try {
         const data = e.target.result;
         let parsedData = [];
-        
+
         if (file.name.endsWith('.xlsx') || file.name.endsWith('.xls')) {
           const workbook = XLSX.read(data, { type: 'binary' });
           const sheetName = workbook.SheetNames[0];
@@ -310,15 +341,15 @@ function CableManagement() {
           Papa.parse(data, {
             header: true,
             skipEmptyLines: true,
-            complete: (results) => {
+            complete: results => {
               parsedData = results.data;
-            }
+            },
           });
         } else {
           message.error('不支持的文件格式，请上传 .xlsx 或 .csv 文件');
           return;
         }
-        
+
         const validatedData = await validateImportData(parsedData);
         setImportPreview(validatedData);
         setImportProgress({ current: 0, total: validatedData.length });
@@ -327,64 +358,64 @@ function CableManagement() {
         console.error('文件解析失败:', error);
       }
     };
-    
+
     reader.readAsBinaryString(file);
   };
 
-  const validateImportData = async (data) => {
+  const validateImportData = async data => {
     const validatedData = [];
     const errors = [];
-    
+
     for (let i = 0; i < data.length; i++) {
       const row = data[i];
       const error = await validateCableRow(row, i);
-      
+
       if (error) {
         errors.push(error);
       } else {
         validatedData.push(row);
       }
     }
-    
+
     if (errors.length > 0) {
       message.warning(`发现 ${errors.length} 条数据错误，已跳过`);
       console.log('导入错误:', errors);
     }
-    
+
     return validatedData;
   };
 
   const validateCableRow = async (row, index) => {
     const errors = [];
-    
+
     if (!row['源设备ID'] || !row['源设备端口']) {
       return { valid: false, error: `第 ${index + 1} 行：缺少必填字段（源设备ID或源设备端口）` };
     }
-    
+
     const sourceDevice = devices.find(d => d.deviceId === row['源设备ID']);
     if (!sourceDevice) {
       return { valid: false, error: `第 ${index + 1} 行：源设备不存在` };
     }
-    
+
     const targetDevice = devices.find(d => d.deviceId === row['目标设备ID']);
     if (!targetDevice) {
       return { valid: false, error: `第 ${index + 1} 行：目标设备不存在` };
     }
-    
+
     const validCableTypes = ['网线', '光纤', '铜缆'];
     if (!validCableTypes.includes(row['线缆类型'])) {
       return { valid: false, error: `第 ${index + 1} 行：无效的线缆类型` };
     }
-    
+
     const validStatuses = ['正常', '故障', '未连接'];
     if (!validStatuses.includes(row['状态'])) {
       return { valid: false, error: `第 ${index + 1} 行：无效的状态` };
     }
-    
+
     if (errors.length > 0) {
       return { valid: false, error: errors.join('; ') };
     }
-    
+
     return { valid: true };
   };
 
@@ -393,23 +424,23 @@ function CableManagement() {
       message.warning('请先选择要导入的数据');
       return;
     }
-    
+
     setImporting(true);
     setImportProgress({ current: 0, total: importPreview.length });
-    
+
     try {
       const cableTypeMap = {
-        '网线': 'ethernet',
-        '光纤': 'fiber',
-        '铜缆': 'copper'
+        网线: 'ethernet',
+        光纤: 'fiber',
+        铜缆: 'copper',
       };
-      
+
       const statusMap = {
-        '正常': 'normal',
-        '故障': 'fault',
-        '未连接': 'disconnected'
+        正常: 'normal',
+        故障: 'fault',
+        未连接: 'disconnected',
       };
-      
+
       const cablesData = importPreview.map((row, index) => ({
         cableId: `CABLE-${Date.now()}-${index}`,
         sourceDeviceId: row['源设备ID'],
@@ -419,22 +450,22 @@ function CableManagement() {
         cableType: cableTypeMap[row['线缆类型']] || 'ethernet',
         cableLength: row['线缆长度(米)'],
         status: statusMap[row['状态']] || 'normal',
-        description: row['描述']
+        description: row['描述'],
       }));
-      
+
       const response = await axios.post('/api/cables/batch', { cables: cablesData });
-      
+
       const { total, success, failed, errors } = response.data;
-      
+
       setImportProgress({ current: total, total: total });
-      
+
       if (failed > 0) {
         console.error('导入错误:', errors);
         message.warning(`导入完成！成功 ${success} 条，失败 ${failed} 条`);
       } else {
         message.success(`导入完成！成功 ${success} 条`);
       }
-      
+
       fetchCables();
       setImportModalVisible(false);
       setImportPreview([]);
@@ -449,38 +480,38 @@ function CableManagement() {
   const handleDownloadTemplate = () => {
     const templateData = [
       {
-        '源设备ID': 'DEV001',
-        '源设备端口': 'eth0/1',
-        '目标设备ID': 'DEV002',
-        '目标设备端口': 'eth0',
-        '线缆类型': '网线',
+        源设备ID: 'DEV001',
+        源设备端口: 'eth0/1',
+        目标设备ID: 'DEV002',
+        目标设备端口: 'eth0',
+        线缆类型: '网线',
         '线缆长度(米)': '5',
-        '状态': '正常',
-        '描述': '示例接线'
-      }
+        状态: '正常',
+        描述: '示例接线',
+      },
     ];
-    
+
     const worksheet = XLSX.utils.json_to_sheet(templateData);
     const workbook = XLSX.utils.book_new();
     XLSX.utils.book_append_sheet(workbook, worksheet, '接线数据');
     XLSX.writeFile(workbook, '接线导入模板.xlsx');
   };
 
-  const getStatusTag = (status) => {
+  const getStatusTag = status => {
     const statusMap = {
       normal: { color: 'success', text: '正常' },
       fault: { color: 'error', text: '故障' },
-      disconnected: { color: 'default', text: '未连接' }
+      disconnected: { color: 'default', text: '未连接' },
     };
     const config = statusMap[status] || { color: 'default', text: status };
     return <Tag color={config.color}>{config.text}</Tag>;
   };
 
-  const getCableTypeTag = (type) => {
+  const getCableTypeTag = type => {
     const typeMap = {
-      '网线': { color: 'blue', text: '网线' },
-      '光纤': { color: 'green', text: '光纤' },
-      '铜缆': { color: 'orange', text: '铜缆' }
+      网线: { color: 'blue', text: '网线' },
+      光纤: { color: 'green', text: '光纤' },
+      铜缆: { color: 'orange', text: '铜缆' },
     };
     const config = typeMap[type] || { color: 'default', text: type };
     return <Tag color={config.color}>{config.text}</Tag>;
@@ -494,7 +525,7 @@ function CableManagement() {
     return {
       status: cable.status,
       text: cable.status === 'normal' ? '已连接' : cable.status === 'fault' ? '故障' : '未连接',
-      color: cable.status === 'normal' ? 'success' : cable.status === 'fault' ? 'error' : 'default'
+      color: cable.status === 'normal' ? 'success' : cable.status === 'fault' ? 'error' : 'default',
     };
   };
 
@@ -503,31 +534,31 @@ function CableManagement() {
       title: '端口名称',
       dataIndex: 'portName',
       key: 'portName',
-      width: 120
+      width: 120,
     },
     {
       title: '端口类型',
       dataIndex: 'portType',
       key: 'portType',
       width: 100,
-      render: (type) => {
+      render: type => {
         const typeMap = {
-          'RJ45': { color: 'blue', text: 'RJ45' },
-          'SFP': { color: 'green', text: 'SFP' },
+          RJ45: { color: 'blue', text: 'RJ45' },
+          SFP: { color: 'green', text: 'SFP' },
           'SFP+': { color: 'cyan', text: 'SFP+' },
-          'SFP28': { color: 'purple', text: 'SFP28' },
-          'QSFP': { color: 'orange', text: 'QSFP' },
-          'QSFP28': { color: 'red', text: 'QSFP28' }
+          SFP28: { color: 'purple', text: 'SFP28' },
+          QSFP: { color: 'orange', text: 'QSFP' },
+          QSFP28: { color: 'red', text: 'QSFP28' },
         };
         const config = typeMap[type] || { color: 'default', text: type };
         return <Tag color={config.color}>{config.text}</Tag>;
-      }
+      },
     },
     {
       title: '端口速率',
       dataIndex: 'portSpeed',
       key: 'portSpeed',
-      width: 100
+      width: 100,
     },
     {
       title: '连接状态',
@@ -537,7 +568,7 @@ function CableManagement() {
       render: (_, record) => {
         const status = getPortConnectionStatus(record.portName, record.switchData);
         return <Tag color={status.color}>{status.text}</Tag>;
-      }
+      },
     },
     {
       title: '目标设备',
@@ -553,7 +584,7 @@ function CableManagement() {
             <div style={{ fontSize: 12, color: '#999' }}>{cable.targetPort}</div>
           </div>
         );
-      }
+      },
     },
     {
       title: '线缆类型',
@@ -564,7 +595,7 @@ function CableManagement() {
         const cable = record.switchData.cables.find(c => c.sourcePort === record.portName);
         if (!cable) return '-';
         return getCableTypeTag(cable.cableType);
-      }
+      },
     },
     {
       title: '长度(米)',
@@ -575,7 +606,7 @@ function CableManagement() {
         const cable = record.switchData.cables.find(c => c.sourcePort === record.portName);
         if (!cable) return '-';
         return cable.cableLength ? `${cable.cableLength}m` : '-';
-      }
+      },
     },
     {
       title: '操作',
@@ -602,12 +633,7 @@ function CableManagement() {
                   okText="确定"
                   cancelText="取消"
                 >
-                  <Button
-                    type="link"
-                    size="small"
-                    danger
-                    icon={<DeleteOutlined />}
-                  >
+                  <Button type="link" size="small" danger icon={<DeleteOutlined />}>
                     删除
                   </Button>
                 </Popconfirm>
@@ -615,17 +641,17 @@ function CableManagement() {
             )}
           </Space>
         );
-      }
-    }
+      },
+    },
   ];
 
   return (
     <div style={{ padding: '24px', background: '#f5f5f5', minHeight: '100vh' }}>
-      <Card 
-        style={{ 
+      <Card
+        style={{
           borderRadius: designTokens.borderRadius.large,
           boxShadow: designTokens.shadows.medium,
-          marginBottom: 16
+          marginBottom: 16,
         }}
       >
         <div style={{ marginBottom: 16 }}>
@@ -634,7 +660,7 @@ function CableManagement() {
               placeholder="选择交换机"
               style={{ width: 200 }}
               value={filters.switchDeviceId || undefined}
-              onChange={(value) => setFilters(prev => ({ ...prev, switchDeviceId: value }))}
+              onChange={value => setFilters(prev => ({ ...prev, switchDeviceId: value }))}
               allowClear
               showSearch
               filterOption={(input, option) => {
@@ -655,67 +681,65 @@ function CableManagement() {
               placeholder="线缆类型"
               style={{ width: 120 }}
               value={filters.cableType}
-              onChange={(value) => setFilters(prev => ({ ...prev, cableType: value }))}
+              onChange={value => setFilters(prev => ({ ...prev, cableType: value }))}
             >
               <Option value="all">全部</Option>
               <Option value="ethernet">网线</Option>
               <Option value="fiber">光纤</Option>
               <Option value="copper">铜缆</Option>
             </Select>
-            
+
             <Select
               placeholder="连接状态"
               style={{ width: 120 }}
               value={filters.status}
-              onChange={(value) => setFilters(prev => ({ ...prev, status: value }))}
+              onChange={value => setFilters(prev => ({ ...prev, status: value }))}
             >
               <Option value="all">全部</Option>
               <Option value="normal">已连接</Option>
               <Option value="fault">故障</Option>
               <Option value="disconnected">未连接</Option>
             </Select>
-            
-            <Button 
-              type="primary" 
-              icon={<SearchOutlined />} 
+
+            <Button
+              type="primary"
+              icon={<SearchOutlined />}
               onClick={handleSearch}
               style={{ background: designTokens.colors.primary.gradient, border: 'none' }}
             >
               搜索
             </Button>
-            
+
             <Button icon={<ReloadOutlined />} onClick={handleReset}>
               重置
             </Button>
           </Space>
         </div>
-        
+
         <div style={{ marginBottom: 16 }}>
           <Space>
-            <Button 
-              type="primary" 
-              icon={<PlusOutlined />} 
+            <Button
+              type="primary"
+              icon={<PlusOutlined />}
               onClick={handleAdd}
               style={{ background: designTokens.colors.primary.gradient, border: 'none' }}
             >
               新增接线
             </Button>
-            
-            <Button 
-              type="primary" 
-              icon={<ImportOutlined />} 
+
+            <Button
+              type="primary"
+              icon={<ImportOutlined />}
               onClick={handleImport}
               style={{ background: designTokens.colors.primary.gradient, border: 'none' }}
             >
               批量导入
             </Button>
-            
-            <Button icon={<ExportOutlined />}>
-              导出
-            </Button>
+
+            <Button icon={<ExportOutlined />}>导出</Button>
           </Space>
         </div>
-        
+
         {loading ? (
           <div style={{ textAlign: 'center', padding: '40px' }}>
             <Spin size="large" tip="加载接线数据中..." />
@@ -733,26 +757,37 @@ function CableManagement() {
               const switchDevice = switchData.switch;
               const switchPorts = devicePorts[switchId] || [];
               const connectedCount = switchData.cables.filter(c => c.status === 'normal').length;
-              const disconnectedCount = switchData.cables.filter(c => c.status === 'disconnected').length;
+              const disconnectedCount = switchData.cables.filter(
+                c => c.status === 'disconnected'
+              ).length;
               const faultCount = switchData.cables.filter(c => c.status === 'fault').length;
-              
+
               return (
                 <Panel
                   key={switchId}
                   header={
-                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%' }}>
+                    <div
+                      style={{
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'space-between',
+                        width: '100%',
+                      }}
+                    >
                       <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
-                        <div style={{
-                          width: '40px',
-                          height: '40px',
-                          borderRadius: designTokens.borderRadius.medium,
-                          background: designTokens.colors.primary.gradient,
-                          display: 'flex',
-                          alignItems: 'center',
-                          justifyContent: 'center',
-                          color: '#fff',
-                          fontSize: '18px'
-                        }}>
+                        <div
+                          style={{
+                            width: '40px',
+                            height: '40px',
+                            borderRadius: designTokens.borderRadius.medium,
+                            background: designTokens.colors.primary.gradient,
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            color: '#fff',
+                            fontSize: '18px',
+                          }}
+                        >
                           🔀
                         </div>
                         <div>
@@ -792,12 +827,7 @@ function CableManagement() {
                         okText="确定"
                         cancelText="取消"
                       >
-                        <Button
-                          type="link"
-                          size="small"
-                          danger
-                          icon={<DeleteOutlined />}
-                        >
+                        <Button type="link" size="small" danger icon={<DeleteOutlined />}>
                           删除设备
                         </Button>
                       </Popconfirm>
@@ -808,7 +838,7 @@ function CableManagement() {
                     columns={portColumns}
                     dataSource={switchPorts.map(port => ({
                       ...port,
-                      switchData: switchData
+                      switchData: switchData,
                     }))}
                     rowKey="portId"
                     pagination={false}
@@ -821,7 +851,7 @@ function CableManagement() {
           </Collapse>
         )}
       </Card>
-      
+
       <Modal
         title={editingCable ? '编辑接线' : '新增接线'}
         open={modalVisible}
@@ -849,7 +879,7 @@ function CableManagement() {
                 const searchText = `${device.name} ${device.deviceId}`.toLowerCase();
                 return searchText.indexOf(input.toLowerCase()) >= 0;
               }}
-              onChange={(value) => {
+              onChange={value => {
                 fetchDevicePorts(value);
                 form.setFieldsValue({ sourcePort: undefined });
               }}
@@ -874,7 +904,8 @@ function CableManagement() {
                 const ports = devicePorts[form.getFieldValue('sourceDeviceId')] || [];
                 const port = ports.find(p => p.portName === option.value);
                 if (!port) return false;
-                const searchText = `${port.portName} ${port.portType} ${port.portSpeed}`.toLowerCase();
+                const searchText =
+                  `${port.portName} ${port.portType} ${port.portSpeed}`.toLowerCase();
                 return searchText.indexOf(input.toLowerCase()) >= 0;
               }}
               disabled={!form.getFieldValue('sourceDeviceId')}
@@ -901,7 +932,7 @@ function CableManagement() {
                 const searchText = `${device.name} ${device.deviceId}`.toLowerCase();
                 return searchText.indexOf(input.toLowerCase()) >= 0;
               }}
-              onChange={(value) => {
+              onChange={value => {
                 fetchDevicePorts(value);
                 form.setFieldsValue({ targetPort: undefined });
               }}
@@ -926,7 +957,8 @@ function CableManagement() {
                 const ports = devicePorts[form.getFieldValue('targetDeviceId')] || [];
                 const port = ports.find(p => p.portName === option.value);
                 if (!port) return false;
-                const searchText = `${port.portName} ${port.portType} ${port.portSpeed}`.toLowerCase();
+                const searchText =
+                  `${port.portName} ${port.portType} ${port.portSpeed}`.toLowerCase();
                 return searchText.indexOf(input.toLowerCase()) >= 0;
               }}
               disabled={!form.getFieldValue('targetDeviceId')}
@@ -951,14 +983,11 @@ function CableManagement() {
               <Option value="copper">铜缆</Option>
             </Select>
           </Form.Item>
-          
-          <Form.Item
-            name="cableLength"
-            label="线缆长度(米)"
-          >
+
+          <Form.Item name="cableLength" label="线缆长度(米)">
             <Input type="number" placeholder="请输入线缆长度" />
           </Form.Item>
-          
+
           <Form.Item
             name="status"
             label="状态"
@@ -971,16 +1000,13 @@ function CableManagement() {
               <Option value="disconnected">未连接</Option>
             </Select>
           </Form.Item>
-          
-          <Form.Item
-            name="description"
-            label="描述"
-          >
+
+          <Form.Item name="description" label="描述">
             <Input.TextArea rows={3} placeholder="请输入描述" />
           </Form.Item>
         </Form>
       </Modal>
-      
+
       <Modal
         title="批量导入接线"
         open={importModalVisible}
@@ -994,24 +1020,20 @@ function CableManagement() {
           <Button key="cancel" onClick={() => setImportModalVisible(false)}>
             取消
           </Button>,
-          <Button 
-            key="download" 
-            icon={<DownloadOutlined />} 
-            onClick={handleDownloadTemplate}
-          >
+          <Button key="download" icon={<DownloadOutlined />} onClick={handleDownloadTemplate}>
             下载模板
           </Button>,
-          <Button 
-            key="import" 
-            type="primary" 
-            icon={<ImportOutlined />} 
+          <Button
+            key="import"
+            type="primary"
+            icon={<ImportOutlined />}
             onClick={handleBatchImport}
             loading={importing}
             disabled={importPreview.length === 0}
             style={{ background: designTokens.colors.primary.gradient, border: 'none' }}
           >
             开始导入
-          </Button>
+          </Button>,
         ]}
       >
         <div style={{ marginBottom: 16 }}>
@@ -1031,26 +1053,29 @@ function CableManagement() {
               <p className="ant-upload-hint">支持 .xlsx, .xls, .csv 格式</p>
             </Upload.Dragger>
           </div>
-          
+
           <div style={{ display: 'flex', gap: '12px', marginBottom: 16 }}>
-            <Checkbox checked={skipExisting} onChange={(e) => setSkipExisting(e.target.checked)}>
+            <Checkbox checked={skipExisting} onChange={e => setSkipExisting(e.target.checked)}>
               跳过已存在的接线
             </Checkbox>
-            <Checkbox checked={updateExisting} onChange={(e) => setUpdateExisting(e.target.checked)}>
+            <Checkbox checked={updateExisting} onChange={e => setUpdateExisting(e.target.checked)}>
               更新已存在的接线
             </Checkbox>
           </div>
-          
+
           {importPreview.length > 0 && (
             <>
               <div style={{ marginBottom: 16 }}>
-                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
+                <div
+                  style={{
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    marginBottom: 8,
+                  }}
+                >
                   <Text strong>数据预览（前10条）</Text>
-                  <Button 
-                    size="small" 
-                    icon={<DownloadOutlined />} 
-                    onClick={handleDownloadTemplate}
-                  >
+                  <Button size="small" icon={<DownloadOutlined />} onClick={handleDownloadTemplate}>
                     下载模板
                   </Button>
                 </div>
@@ -1060,46 +1085,46 @@ function CableManagement() {
                       title: '源设备ID',
                       dataIndex: '源设备ID',
                       key: 'sourceDeviceId',
-                      width: 150
+                      width: 150,
                     },
                     {
                       title: '源设备端口',
                       dataIndex: '源设备端口',
                       key: 'sourcePort',
-                      width: 120
+                      width: 120,
                     },
                     {
                       title: '目标设备ID',
                       dataIndex: '目标设备ID',
                       key: 'targetDeviceId',
-                      width: 150
+                      width: 150,
                     },
                     {
                       title: '目标设备端口',
                       dataIndex: '目标设备端口',
                       key: 'targetPort',
-                      width: 120
+                      width: 120,
                     },
                     {
                       title: '线缆类型',
                       dataIndex: '线缆类型',
                       key: 'cableType',
                       width: 100,
-                      render: (type) => getCableTypeTag(type)
+                      render: type => getCableTypeTag(type),
                     },
                     {
                       title: '状态',
                       dataIndex: '状态',
                       key: 'status',
                       width: 100,
-                      render: (status) => getStatusTag(status)
+                      render: status => getStatusTag(status),
                     },
                     {
                       title: '描述',
                       dataIndex: '描述',
                       key: 'description',
-                      ellipsis: true
-                    }
+                      ellipsis: true,
+                    },
                   ]}
                   dataSource={importPreview.slice(0, 10)}
                   rowKey={(record, index) => index}
@@ -1108,7 +1133,7 @@ function CableManagement() {
                   scroll={{ x: 1000 }}
                 />
               </div>
-              
+
               {importPreview.length > 10 && (
                 <div style={{ textAlign: 'center', marginTop: 8 }}>
                   <Text type="secondary">仅显示前10条数据，共 {importPreview.length} 条</Text>
@@ -1116,17 +1141,17 @@ function CableManagement() {
               )}
             </>
           )}
-          
+
           {importing && (
             <div style={{ textAlign: 'center', padding: '24px' }}>
               <Spin size="large" tip="导入中..." />
               <div style={{ marginTop: 16 }}>
-                <Progress 
-                  percent={Math.round((importProgress.current / importProgress.total) * 100)} 
+                <Progress
+                  percent={Math.round((importProgress.current / importProgress.total) * 100)}
                   status="active"
                   strokeColor={{
                     '0%': designTokens.colors.primary.main,
-                    '100%': designTokens.colors.success.main
+                    '100%': designTokens.colors.success.main,
                   }}
                 />
                 <div style={{ marginTop: 8 }}>
@@ -1135,7 +1160,8 @@ function CableManagement() {
                   </Text>
                   {importProgress.current > 0 && (
                     <Text type="secondary">
-                      预计剩余时间：{Math.ceil((importProgress.total - importProgress.current) / 5)} 秒
+                      预计剩余时间：{Math.ceil((importProgress.total - importProgress.current) / 5)}{' '}
+                      秒
                     </Text>
                   )}
                 </div>
@@ -1165,14 +1191,9 @@ function CableManagement() {
           >
             取消
           </Button>,
-          <Button
-            key="force"
-            type="primary"
-            danger
-            onClick={handleForceSubmit}
-          >
+          <Button key="force" type="primary" danger onClick={handleForceSubmit}>
             强制接管
-          </Button>
+          </Button>,
         ]}
         width={600}
       >
@@ -1190,7 +1211,11 @@ function CableManagement() {
               >
                 <div style={{ marginBottom: 8 }}>
                   <Tag color="error">
-                    {conflict.type === 'source' ? '源端口' : conflict.type === 'target' ? '目标端口' : '端口'}
+                    {conflict.type === 'source'
+                      ? '源端口'
+                      : conflict.type === 'target'
+                        ? '目标端口'
+                        : '端口'}
                   </Tag>
                   <span style={{ fontWeight: 500, marginLeft: 8 }}>{conflict.port}</span>
                 </div>
@@ -1199,11 +1224,15 @@ function CableManagement() {
                     <div>当前连接：</div>
                     <div style={{ marginTop: 4, paddingLeft: 12 }}>
                       <div>
-                        源设备：{conflict.existingCable.sourceDevice?.name || conflict.existingCable.sourceDeviceId}
+                        源设备：
+                        {conflict.existingCable.sourceDevice?.name ||
+                          conflict.existingCable.sourceDeviceId}
                         ({conflict.existingCable.sourcePort})
                       </div>
                       <div style={{ marginTop: 2 }}>
-                        目标设备：{conflict.existingCable.targetDevice?.name || conflict.existingCable.targetDeviceId}
+                        目标设备：
+                        {conflict.existingCable.targetDevice?.name ||
+                          conflict.existingCable.targetDeviceId}
                         ({conflict.existingCable.targetPort})
                       </div>
                       <div style={{ marginTop: 2 }}>
@@ -1214,7 +1243,15 @@ function CableManagement() {
                 )}
               </Card>
             ))}
-            <div style={{ marginTop: 16, padding: 12, background: '#fff7ed', borderRadius: 6, border: '1px solid #fed7aa' }}>
+            <div
+              style={{
+                marginTop: 16,
+                padding: 12,
+                background: '#fff7ed',
+                borderRadius: 6,
+                border: '1px solid #fed7aa',
+              }}
+            >
               <span style={{ color: '#ea580c' }}>💡</span>
               <span style={{ marginLeft: 8, color: '#9a3412' }}>
                 点击"强制接管"将断开原有连接并创建新接线。此操作不可恢复！
diff --git a/frontend/src/pages/CategoryManagement.jsx b/frontend/src/pages/CategoryManagement.jsx
index c2378dc..811eff5 100644
--- a/frontend/src/pages/CategoryManagement.jsx
+++ b/frontend/src/pages/CategoryManagement.jsx
@@ -1,5 +1,18 @@
 import React, { useState, useEffect } from 'react';
-import { Table, Button, Modal, Form, Input, InputNumber, Select, message, Card, Space, Popconfirm, Tag } from 'antd';
+import {
+  Table,
+  Button,
+  Modal,
+  Form,
+  Input,
+  InputNumber,
+  Select,
+  message,
+  Card,
+  Space,
+  Popconfirm,
+  Tag,
+} from 'antd';
 import { PlusOutlined, EditOutlined, DeleteOutlined, SearchOutlined } from '@ant-design/icons';
 import axios from 'axios';
 
@@ -15,7 +28,7 @@ function CategoryManagement() {
     current: 1,
     pageSize: 10,
     total: 0,
-    showTotal: (total) => `共 ${total} 条记录`
+    showTotal: total => `共 ${total} 条记录`,
   });
   const [keyword, setKeyword] = useState('');
   const [status, setStatus] = useState('all');
@@ -24,7 +37,7 @@ function CategoryManagement() {
     try {
       setLoading(true);
       const response = await axios.get('/api/consumable-categories', {
-        params: { page, pageSize, keyword, status }
+        params: { page, pageSize, keyword, status },
       });
       setCategories(response.data.categories);
       setPagination(prev => ({ ...prev, current: page, pageSize, total: response.data.total }));
@@ -56,7 +69,7 @@ function CategoryManagement() {
     setEditingCategory(null);
   };
 
-  const handleSubmit = async (values) => {
+  const handleSubmit = async values => {
     try {
       if (editingCategory) {
         await axios.put(`/api/consumable-categories/${editingCategory.id}`, values);
@@ -69,12 +82,14 @@ function CategoryManagement() {
       fetchCategories();
       setEditingCategory(null);
     } catch (error) {
-      message.error(error.response?.data?.error || (editingCategory ? '分类更新失败' : '分类创建失败'));
+      message.error(
+        error.response?.data?.error || (editingCategory ? '分类更新失败' : '分类创建失败')
+      );
       console.error('提交失败:', error);
     }
   };
 
-  const handleDelete = async (id) => {
+  const handleDelete = async id => {
     try {
       await axios.delete(`/api/consumable-categories/${id}`);
       message.success('删除成功');
@@ -90,44 +105,44 @@ function CategoryManagement() {
       title: 'ID',
       dataIndex: 'id',
       key: 'id',
-      width: 80
+      width: 80,
     },
     {
       title: '分类名称',
       dataIndex: 'name',
       key: 'name',
-      width: 150
+      width: 150,
     },
     {
       title: '描述',
       dataIndex: 'description',
       key: 'description',
       width: 200,
-      render: (value) => value || '-'
+      render: value => value || '-',
     },
     {
       title: '排序',
       dataIndex: 'sortOrder',
       key: 'sortOrder',
-      width: 80
+      width: 80,
     },
     {
       title: '状态',
       dataIndex: 'status',
       key: 'status',
       width: 100,
-      render: (value) => (
+      render: value => (
         <Tag color={value === 'active' ? 'green' : 'red'}>
           {value === 'active' ? '启用' : '停用'}
         </Tag>
-      )
+      ),
     },
     {
       title: '创建时间',
       dataIndex: 'createdAt',
       key: 'createdAt',
       width: 180,
-      render: (value) => value ? new Date(value).toLocaleString('zh-CN') : '-'
+      render: value => (value ? new Date(value).toLocaleString('zh-CN') : '-'),
     },
     {
       title: '操作',
@@ -135,26 +150,40 @@ function CategoryManagement() {
       width: 150,
       render: (_, record) => (
         <Space>
-          <Button type="primary" icon={<EditOutlined />} size="small" onClick={() => showModal(record)}>编辑</Button>
+          <Button
+            type="primary"
+            icon={<EditOutlined />}
+            size="small"
+            onClick={() => showModal(record)}
+          >
+            编辑
+          </Button>
           <Popconfirm title="确定删除?" onConfirm={() => handleDelete(record.id)}>
-            <Button danger icon={<DeleteOutlined />} size="small">删除</Button>
+            <Button danger icon={<DeleteOutlined />} size="small">
+              删除
+            </Button>
           </Popconfirm>
         </Space>
-      )
-    }
+      ),
+    },
   ];
 
   return (
     <div>
-      <Card title="耗材分类管理" extra={
-        <Button type="primary" icon={<PlusOutlined />} onClick={() => showModal()}>添加分类</Button>
-      }>
+      <Card
+        title="耗材分类管理"
+        extra={
+          <Button type="primary" icon={<PlusOutlined />} onClick={() => showModal()}>
+            添加分类
+          </Button>
+        }
+      >
         <Card size="small" style={{ marginBottom: 16 }}>
           <Space>
             <Input.Search
               placeholder="搜索分类名称、描述"
               style={{ width: 300 }}
-              onSearch={(value) => setKeyword(value)}
+              onSearch={value => setKeyword(value)}
               allowClear
             />
             <Select value={status} onChange={setStatus} style={{ width: 120 }}>
@@ -172,7 +201,7 @@ function CategoryManagement() {
           rowKey="id"
           loading={loading}
           pagination={pagination}
-          onChange={(pagination) => fetchCategories(pagination.current, pagination.pageSize)}
+          onChange={pagination => fetchCategories(pagination.current, pagination.pageSize)}
           scroll={{ x: 1000 }}
         />
       </Card>
@@ -185,7 +214,14 @@ function CategoryManagement() {
         width={500}
       >
         <Form form={form} layout="vertical" onFinish={handleSubmit}>
-          <Form.Item name="name" label="分类名称" rules={[{ required: true, message: '请输入分类名称' }, { max: 50, message: '分类名称不能超过50个字符' }]}>
+          <Form.Item
+            name="name"
+            label="分类名称"
+            rules={[
+              { required: true, message: '请输入分类名称' },
+              { max: 50, message: '分类名称不能超过50个字符' },
+            ]}
+          >
             <Input placeholder="请输入分类名称" />
           </Form.Item>
           <Form.Item name="description" label="描述">
@@ -202,7 +238,9 @@ function CategoryManagement() {
           </Form.Item>
           <Form.Item>
             <Space>
-              <Button type="primary" htmlType="submit">{editingCategory ? '更新' : '创建'}</Button>
+              <Button type="primary" htmlType="submit">
+                {editingCategory ? '更新' : '创建'}
+              </Button>
               <Button onClick={handleCancel}>取消</Button>
             </Space>
           </Form.Item>
diff --git a/frontend/src/pages/ConsumableLogs.jsx b/frontend/src/pages/ConsumableLogs.jsx
index 7eb3fa2..8b4c4f6 100644
--- a/frontend/src/pages/ConsumableLogs.jsx
+++ b/frontend/src/pages/ConsumableLogs.jsx
@@ -1,6 +1,34 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { Table, Card, Space, Select, DatePicker, Input, Tag, Button, message, Modal, Upload, Radio, Dropdown, Form, Tooltip, Timeline } from 'antd';
-import { HistoryOutlined, SearchOutlined, FileTextOutlined, DownloadOutlined, UploadOutlined, FileExcelOutlined, FileOutlined, DownOutlined, EditOutlined, EyeOutlined } from '@ant-design/icons';
+import {
+  Table,
+  Card,
+  Space,
+  Select,
+  DatePicker,
+  Input,
+  Tag,
+  Button,
+  message,
+  Modal,
+  Upload,
+  Radio,
+  Dropdown,
+  Form,
+  Tooltip,
+  Timeline,
+} from 'antd';
+import {
+  HistoryOutlined,
+  SearchOutlined,
+  FileTextOutlined,
+  DownloadOutlined,
+  UploadOutlined,
+  FileExcelOutlined,
+  FileOutlined,
+  DownOutlined,
+  EditOutlined,
+  EyeOutlined,
+} from '@ant-design/icons';
 import axios from 'axios';
 import dayjs from 'dayjs';
 import * as XLSX from 'xlsx';
@@ -15,7 +43,7 @@ function ConsumableLogs() {
   const [filters, setFilters] = useState({
     operationType: 'all',
     consumableId: '',
-    dateRange: null
+    dateRange: null,
   });
   const [importModalVisible, setImportModalVisible] = useState(false);
   const [importType, setImportType] = useState('excel');
@@ -33,7 +61,7 @@ function ConsumableLogs() {
     try {
       setLoading(true);
       const params = { page, pageSize };
-      
+
       if (currentFilters.operationType !== 'all') {
         params.operationType = currentFilters.operationType;
       }
@@ -44,7 +72,7 @@ function ConsumableLogs() {
         params.startDate = currentFilters.dateRange[0].format('YYYY-MM-DD');
         params.endDate = currentFilters.dateRange[1].format('YYYY-MM-DD');
       }
-      
+
       const response = await axios.get('/api/consumables/logs', { params });
       setLogs(response.data.logs);
       setPagination(prev => ({ ...prev, current: page, total: response.data.total }));
@@ -65,7 +93,7 @@ function ConsumableLogs() {
     fetchLogs(1, pagination.pageSize);
   };
 
-  const getOperationTag = (type) => {
+  const getOperationTag = type => {
     const config = {
       in: { color: 'green', text: '入库' },
       out: { color: 'red', text: '出库' },
@@ -73,7 +101,7 @@ function ConsumableLogs() {
       update: { color: 'orange', text: '更新' },
       delete: { color: 'magenta', text: '删除' },
       adjust: { color: 'purple', text: '调整' },
-      import: { color: 'cyan', text: '导入' }
+      import: { color: 'cyan', text: '导入' },
     };
     const { color, text } = config[type] || { color: 'default', text: type };
     return <Tag color={color}>{text}</Tag>;
@@ -86,27 +114,27 @@ function ConsumableLogs() {
       key: 'createdAt',
       width: 180,
       sorter: (a, b) => new Date(a.createdAt) - new Date(b.createdAt),
-      render: (date) => dayjs(date).format('YYYY-MM-DD HH:mm:ss')
+      render: date => dayjs(date).format('YYYY-MM-DD HH:mm:ss'),
     },
     {
       title: '耗材ID',
       dataIndex: 'consumableId',
       key: 'consumableId',
       width: 150,
-      render: (value) => <code>{value}</code>
+      render: value => <code>{value}</code>,
     },
     {
       title: '耗材名称',
       dataIndex: 'consumableName',
       key: 'consumableName',
-      width: 150
+      width: 150,
     },
     {
       title: '操作类型',
       dataIndex: 'operationType',
       key: 'operationType',
       width: 100,
-      render: (type) => getOperationTag(type)
+      render: type => getOperationTag(type),
     },
     {
       title: '变动数量',
@@ -114,46 +142,49 @@ function ConsumableLogs() {
       key: 'quantity',
       width: 100,
       render: (value, record) => (
-        <span style={{ 
-          color: value > 0 ? '#52c41a' : value < 0 ? '#ff4d4f' : '#888',
-          fontWeight: 'bold'
-        }}>
-          {value > 0 ? '+' : ''}{value}
+        <span
+          style={{
+            color: value > 0 ? '#52c41a' : value < 0 ? '#ff4d4f' : '#888',
+            fontWeight: 'bold',
+          }}
+        >
+          {value > 0 ? '+' : ''}
+          {value}
         </span>
-      )
+      ),
     },
     {
       title: '操作前库存',
       dataIndex: 'previousStock',
       key: 'previousStock',
-      width: 100
+      width: 100,
     },
     {
       title: '操作后库存',
       dataIndex: 'currentStock',
       key: 'currentStock',
-      width: 100
+      width: 100,
     },
     {
       title: '操作人',
       dataIndex: 'operator',
       key: 'operator',
-      width: 120
+      width: 120,
     },
     {
       title: '原因',
       dataIndex: 'reason',
       key: 'reason',
       width: 150,
-      render: (value) => value || '-'
+      render: value => value || '-',
     },
     {
       title: '备注',
       dataIndex: 'notes',
       key: 'notes',
       width: 200,
-      render: (value) => value || '-',
-      ellipsis: true
+      render: value => value || '-',
+      ellipsis: true,
     },
     {
       title: '操作',
@@ -181,8 +212,8 @@ function ConsumableLogs() {
             />
           </Tooltip>
         </Space>
-      )
-    }
+      ),
+    },
   ];
 
   const handleExport = async (currentFilters = filters) => {
@@ -198,18 +229,18 @@ function ConsumableLogs() {
         params.startDate = currentFilters.dateRange[0].format('YYYY-MM-DD');
         params.endDate = currentFilters.dateRange[1].format('YYYY-MM-DD');
       }
-      
-      const response = await axios.get('/api/consumables/logs/export', { 
+
+      const response = await axios.get('/api/consumables/logs/export', {
         params,
-        responseType: 'blob'
+        responseType: 'blob',
       });
-      
+
       const blob = new Blob([response.data], { type: 'text/csv;charset=utf-8;' });
       const link = document.createElement('a');
       link.href = window.URL.createObjectURL(blob);
       link.download = `耗材操作日志_${dayjs().format('YYYYMMDD_HHmmss')}.csv`;
       link.click();
-      
+
       message.success('导出成功');
     } catch (error) {
       message.error('导出失败');
@@ -230,29 +261,29 @@ function ConsumableLogs() {
         params.startDate = currentFilters.dateRange[0].format('YYYY-MM-DD');
         params.endDate = currentFilters.dateRange[1].format('YYYY-MM-DD');
       }
-      
-      const response = await axios.get('/api/consumables/logs', { 
-        params: { ...params, page: 1, pageSize: 10000 }
+
+      const response = await axios.get('/api/consumables/logs', {
+        params: { ...params, page: 1, pageSize: 10000 },
       });
-      
+
       const exportData = response.data.logs.map(log => ({
-        '时间': dayjs(log.createdAt).format('YYYY-MM-DD HH:mm:ss'),
-        '耗材ID': log.consumableId,
-        '耗材名称': log.consumableName,
-        '操作类型': getOperationTypeText(log.operationType),
-        '变动数量': log.quantity,
-        '操作前库存': log.previousStock,
-        '操作后库存': log.currentStock,
-        '操作人': log.operator,
-        '原因': log.reason || '',
-        '备注': log.notes || ''
+        时间: dayjs(log.createdAt).format('YYYY-MM-DD HH:mm:ss'),
+        耗材ID: log.consumableId,
+        耗材名称: log.consumableName,
+        操作类型: getOperationTypeText(log.operationType),
+        变动数量: log.quantity,
+        操作前库存: log.previousStock,
+        操作后库存: log.currentStock,
+        操作人: log.operator,
+        原因: log.reason || '',
+        备注: log.notes || '',
       }));
-      
+
       const ws = XLSX.utils.json_to_sheet(exportData);
       const wb = XLSX.utils.book_new();
       XLSX.utils.book_append_sheet(wb, ws, '操作日志');
       XLSX.writeFile(wb, `耗材操作日志_${dayjs().format('YYYYMMDD_HHmmss')}.xlsx`);
-      
+
       message.success('导出Excel成功');
     } catch (error) {
       message.error('导出Excel失败');
@@ -260,27 +291,27 @@ function ConsumableLogs() {
     }
   };
 
-  const getOperationTypeText = (type) => {
+  const getOperationTypeText = type => {
     const map = {
-      'in': '入库',
-      'out': '出库',
-      'create': '创建',
-      'update': '更新',
-      'delete': '删除',
-      'adjust': '调整',
-      'import': '导入'
+      in: '入库',
+      out: '出库',
+      create: '创建',
+      update: '更新',
+      delete: '删除',
+      adjust: '调整',
+      import: '导入',
     };
     return map[type] || type;
   };
 
-  const handleImport = async (file) => {
+  const handleImport = async file => {
     setImporting(true);
     try {
       const reader = new FileReader();
-      reader.onload = async (e) => {
+      reader.onload = async e => {
         try {
           let logItems = [];
-          
+
           if (importType === 'excel') {
             const workbook = XLSX.read(e.target.result, { type: 'array' });
             const sheetName = workbook.SheetNames[0];
@@ -290,7 +321,7 @@ function ConsumableLogs() {
             const text = e.target.result;
             const lines = text.split('\n').filter(line => line.trim());
             const headers = lines[0].split(',').map(h => h.replace(/"/g, ''));
-            
+
             for (let i = 1; i < lines.length; i++) {
               const values = lines[i].split(',').map(v => v.replace(/"/g, ''));
               const item = {};
@@ -300,12 +331,12 @@ function ConsumableLogs() {
               logItems.push(item);
             }
           }
-          
+
           const response = await axios.post('/api/consumables/logs/import', {
             logs: logItems,
-            operator: '前端导入'
+            operator: '前端导入',
           });
-          
+
           if (response.data.success > 0) {
             message.success(`成功导入 ${response.data.success} 条记录`);
           }
@@ -313,7 +344,7 @@ function ConsumableLogs() {
             message.warning(`导入失败 ${response.data.failed} 条`);
             response.data.errors.forEach(err => console.error(err));
           }
-          
+
           setImportModalVisible(false);
           fetchLogs(1, pagination.pageSize);
         } catch (err) {
@@ -322,7 +353,7 @@ function ConsumableLogs() {
           setImporting(false);
         }
       };
-      
+
       if (importType === 'excel') {
         reader.readAsArrayBuffer(file);
       } else {
@@ -338,16 +369,16 @@ function ConsumableLogs() {
   const downloadTemplate = () => {
     const template = [
       {
-        '耗材ID': 'CON123456',
-        '耗材名称': '示例耗材',
-        '操作类型': '入库',
-        '变动数量': 10,
-        '操作前库存': 100,
-        '操作后库存': 110,
-        '操作人': '管理员',
-        '原因': '示例原因',
-        '备注': '示例备注'
-      }
+        耗材ID: 'CON123456',
+        耗材名称: '示例耗材',
+        操作类型: '入库',
+        变动数量: 10,
+        操作前库存: 100,
+        操作后库存: 110,
+        操作人: '管理员',
+        原因: '示例原因',
+        备注: '示例备注',
+      },
     ];
 
     const ws = XLSX.utils.json_to_sheet(template);
@@ -359,18 +390,18 @@ function ConsumableLogs() {
   };
 
   // 编辑日志
-  const handleEdit = (record) => {
+  const handleEdit = record => {
     setCurrentLog(record);
     form.setFieldsValue({
       reason: record.reason,
       notes: record.notes,
-      modificationReason: ''
+      modificationReason: '',
     });
     setEditModalVisible(true);
   };
 
   // 提交编辑
-  const handleEditSubmit = async (values) => {
+  const handleEditSubmit = async values => {
     if (!currentLog) return;
 
     setEditLoading(true);
@@ -379,7 +410,7 @@ function ConsumableLogs() {
         reason: values.reason,
         notes: values.notes,
         operator: values.operator || '管理员',
-        modificationReason: values.modificationReason
+        modificationReason: values.modificationReason,
       });
 
       message.success('日志修改成功');
@@ -393,7 +424,7 @@ function ConsumableLogs() {
   };
 
   // 查看修改历史
-  const handleViewHistory = async (record) => {
+  const handleViewHistory = async record => {
     setCurrentLog(record);
     setHistoryModalVisible(true);
     setHistoryLoading(true);
@@ -411,7 +442,7 @@ function ConsumableLogs() {
 
   return (
     <div>
-      <Card 
+      <Card
         title={
           <Space>
             <FileTextOutlined />
@@ -425,12 +456,12 @@ function ConsumableLogs() {
               placeholder="搜索耗材ID"
               style={{ width: 200 }}
               allowClear
-              onSearch={(value) => handleFilterChange('consumableId', value)}
+              onSearch={value => handleFilterChange('consumableId', value)}
               prefix={<SearchOutlined />}
             />
             <Select
               value={filters.operationType}
-              onChange={(value) => handleFilterChange('operationType', value)}
+              onChange={value => handleFilterChange('operationType', value)}
               style={{ width: 120 }}
             >
               <Option value="all">全部类型</Option>
@@ -444,11 +475,11 @@ function ConsumableLogs() {
             </Select>
             <RangePicker
               value={filters.dateRange}
-              onChange={(dates) => handleFilterChange('dateRange', dates)}
+              onChange={dates => handleFilterChange('dateRange', dates)}
               placeholder={['开始日期', '结束日期']}
             />
-            <Button 
-              icon={<HistoryOutlined />} 
+            <Button
+              icon={<HistoryOutlined />}
               onClick={() => {
                 setFilters({ operationType: 'all', consumableId: '', dateRange: null });
                 fetchLogs(1, pagination.pageSize);
@@ -463,15 +494,15 @@ function ConsumableLogs() {
                     key: 'csv',
                     icon: <FileOutlined />,
                     label: '导出CSV',
-                    onClick: () => handleExport(filters)
+                    onClick: () => handleExport(filters),
                   },
                   {
                     key: 'excel',
                     icon: <FileExcelOutlined />,
                     label: '导出Excel',
-                    onClick: () => handleExportExcel(filters)
-                  }
-                ]
+                    onClick: () => handleExportExcel(filters),
+                  },
+                ],
               }}
             >
               <Button icon={<DownloadOutlined />}>
@@ -491,11 +522,11 @@ function ConsumableLogs() {
           loading={loading}
           pagination={{
             ...pagination,
-            showTotal: (total) => `共 ${total} 条记录`,
+            showTotal: total => `共 ${total} 条记录`,
             showSizeChanger: true,
-            showQuickJumper: true
+            showQuickJumper: true,
           }}
-          onChange={(pagination) => fetchLogs(pagination.current, pagination.pageSize)}
+          onChange={pagination => fetchLogs(pagination.current, pagination.pageSize)}
           scroll={{ x: 1500 }}
         />
       </Card>
@@ -511,23 +542,23 @@ function ConsumableLogs() {
         width={500}
       >
         <div style={{ marginBottom: 16 }}>
-          <Radio.Group 
-            value={importType} 
-            onChange={(e) => setImportType(e.target.value)}
+          <Radio.Group
+            value={importType}
+            onChange={e => setImportType(e.target.value)}
             style={{ marginBottom: 16 }}
           >
             <Radio.Button value="excel">Excel文件</Radio.Button>
             <Radio.Button value="csv">CSV文件</Radio.Button>
           </Radio.Group>
         </div>
-        
+
         <div style={{ marginBottom: 16 }}>
           <Button type="link" onClick={downloadTemplate}>
             下载导入模板
           </Button>
           <span style={{ color: '#888', marginLeft: 8 }}>（建议先下载模板填写）</span>
         </div>
-        
+
         <Upload
           accept={importType === 'excel' ? '.xlsx,.xls' : '.csv'}
           showUploadList={false}
@@ -537,7 +568,7 @@ function ConsumableLogs() {
             选择{importType === 'excel' ? 'Excel' : 'CSV'}文件并导入
           </Button>
         </Upload>
-        
+
         <div style={{ marginTop: 16, color: '#888', fontSize: 12 }}>
           <p>注意事项：</p>
           <ul>
@@ -561,21 +592,11 @@ function ConsumableLogs() {
         confirmLoading={editLoading}
         width={600}
       >
-        <Form
-          form={form}
-          layout="vertical"
-          onFinish={handleEditSubmit}
-        >
-          <Form.Item
-            label="操作原因"
-            name="reason"
-          >
+        <Form form={form} layout="vertical" onFinish={handleEditSubmit}>
+          <Form.Item label="操作原因" name="reason">
             <Input.TextArea rows={2} placeholder="请输入操作原因" />
           </Form.Item>
-          <Form.Item
-            label="备注"
-            name="notes"
-          >
+          <Form.Item label="备注" name="notes">
             <Input.TextArea rows={3} placeholder="请输入备注信息" />
           </Form.Item>
           <Form.Item
@@ -585,10 +606,7 @@ function ConsumableLogs() {
           >
             <Input.TextArea rows={2} placeholder="请输入修改原因（必填）" />
           </Form.Item>
-          <Form.Item
-            label="修改人"
-            name="operator"
-          >
+          <Form.Item label="修改人" name="operator">
             <Input placeholder="请输入修改人姓名" />
           </Form.Item>
         </Form>
@@ -623,21 +641,38 @@ function ConsumableLogs() {
                   <Tag color={getOperationTag(item.operationType).props.color}>
                     {getOperationTag(item.operationType).props.children}
                   </Tag>
-                  {item.modifiedBy && (
-                    <Tag color="orange">已修改</Tag>
-                  )}
+                  {item.modifiedBy && <Tag color="orange">已修改</Tag>}
                 </div>
                 <div style={{ fontSize: 12, color: '#666' }}>
-                  <p><strong>耗材:</strong> {item.consumableName} ({item.consumableId})</p>
-                  <p><strong>操作人:</strong> {item.operator}</p>
-                  {item.reason && <p><strong>原因:</strong> {item.reason}</p>}
-                  {item.notes && <p><strong>备注:</strong> {item.notes}</p>}
+                  <p>
+                    <strong>耗材:</strong> {item.consumableName} ({item.consumableId})
+                  </p>
+                  <p>
+                    <strong>操作人:</strong> {item.operator}
+                  </p>
+                  {item.reason && (
+                    <p>
+                      <strong>原因:</strong> {item.reason}
+                    </p>
+                  )}
+                  {item.notes && (
+                    <p>
+                      <strong>备注:</strong> {item.notes}
+                    </p>
+                  )}
                   {item.modifiedBy && (
                     <>
-                      <p><strong>修改人:</strong> {item.modifiedBy}</p>
-                      <p><strong>修改时间:</strong> {dayjs(item.modifiedAt).format('YYYY-MM-DD HH:mm:ss')}</p>
+                      <p>
+                        <strong>修改人:</strong> {item.modifiedBy}
+                      </p>
+                      <p>
+                        <strong>修改时间:</strong>{' '}
+                        {dayjs(item.modifiedAt).format('YYYY-MM-DD HH:mm:ss')}
+                      </p>
                       {item.modificationReason && (
-                        <p><strong>修改原因:</strong> {item.modificationReason}</p>
+                        <p>
+                          <strong>修改原因:</strong> {item.modificationReason}
+                        </p>
                       )}
                     </>
                   )}
diff --git a/frontend/src/pages/ConsumableManagement.jsx b/frontend/src/pages/ConsumableManagement.jsx
index 652918f..0d04b83 100644
--- a/frontend/src/pages/ConsumableManagement.jsx
+++ b/frontend/src/pages/ConsumableManagement.jsx
@@ -1,6 +1,32 @@
 import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
-import { Table, Button, Modal, Form, Input, Select, InputNumber, message, Card, Space, Popconfirm, Upload, Table as AntTable, Progress, Checkbox } from 'antd';
-import { PlusOutlined, EditOutlined, DeleteOutlined, SearchOutlined, ExportOutlined, ImportOutlined, UploadOutlined, FileExcelOutlined, InboxOutlined } from '@ant-design/icons';
+import {
+  Table,
+  Button,
+  Modal,
+  Form,
+  Input,
+  Select,
+  InputNumber,
+  message,
+  Card,
+  Space,
+  Popconfirm,
+  Upload,
+  Table as AntTable,
+  Progress,
+  Checkbox,
+} from 'antd';
+import {
+  PlusOutlined,
+  EditOutlined,
+  DeleteOutlined,
+  SearchOutlined,
+  ExportOutlined,
+  ImportOutlined,
+  UploadOutlined,
+  FileExcelOutlined,
+  InboxOutlined,
+} from '@ant-design/icons';
 import axios from 'axios';
 
 const { Option } = Select;
@@ -16,7 +42,7 @@ function ConsumableManagement() {
     current: 1,
     pageSize: 10,
     total: 0,
-    showTotal: (total) => `共 ${total} 条记录`
+    showTotal: total => `共 ${total} 条记录`,
   });
   const [keyword, setKeyword] = useState('');
   const [category, setCategory] = useState('all');
@@ -34,21 +60,24 @@ function ConsumableManagement() {
   const [stockForm] = Form.useForm();
   const [maxStockUnlimited, setMaxStockUnlimited] = useState(false);
 
-  const fetchConsumables = useCallback(async (page = 1, pageSize = 10) => {
-    try {
-      setLoading(true);
-      const response = await axios.get('/api/consumables', {
-        params: { page, pageSize, keyword, category, status }
-      });
-      setConsumables(response.data.consumables);
-      setPagination(prev => ({ ...prev, current: page, pageSize, total: response.data.total }));
-    } catch (error) {
-      message.error('获取耗材列表失败');
-      console.error('获取耗材列表失败:', error);
-    } finally {
-      setLoading(false);
-    }
-  }, [keyword, category, status]);
+  const fetchConsumables = useCallback(
+    async (page = 1, pageSize = 10) => {
+      try {
+        setLoading(true);
+        const response = await axios.get('/api/consumables', {
+          params: { page, pageSize, keyword, category, status },
+        });
+        setConsumables(response.data.consumables);
+        setPagination(prev => ({ ...prev, current: page, pageSize, total: response.data.total }));
+      } catch (error) {
+        message.error('获取耗材列表失败');
+        console.error('获取耗材列表失败:', error);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [keyword, category, status]
+  );
 
   const fetchCategories = useCallback(async () => {
     try {
@@ -64,94 +93,134 @@ function ConsumableManagement() {
     fetchCategories();
   }, [fetchConsumables, fetchCategories]);
 
-  const showModal = useCallback((consumable = null) => {
-    setEditingConsumable(consumable);
-    if (consumable) {
-      const isUnlimited = consumable.maxStock === 0 || consumable.maxStock === null || consumable.maxStock === undefined;
-      setMaxStockUnlimited(isUnlimited);
-      form.setFieldsValue({
-        ...consumable,
-        maxStock: isUnlimited ? undefined : consumable.maxStock
-      });
-    } else {
-      setMaxStockUnlimited(true);
-      form.resetFields();
-      form.setFieldsValue({
-        unit: '个',
-        currentStock: 0,
-        minStock: 0,
-        status: 'active',
-        unitPrice: 0
-      });
-    }
-    setModalVisible(true);
-  }, [form]);
+  const showModal = useCallback(
+    (consumable = null) => {
+      setEditingConsumable(consumable);
+      if (consumable) {
+        const isUnlimited =
+          consumable.maxStock === 0 ||
+          consumable.maxStock === null ||
+          consumable.maxStock === undefined;
+        setMaxStockUnlimited(isUnlimited);
+        form.setFieldsValue({
+          ...consumable,
+          maxStock: isUnlimited ? undefined : consumable.maxStock,
+        });
+      } else {
+        setMaxStockUnlimited(true);
+        form.resetFields();
+        form.setFieldsValue({
+          unit: '个',
+          currentStock: 0,
+          minStock: 0,
+          status: 'active',
+          unitPrice: 0,
+        });
+      }
+      setModalVisible(true);
+    },
+    [form]
+  );
 
   const handleCancel = useCallback(() => {
     setModalVisible(false);
     setEditingConsumable(null);
   }, []);
 
-  const handleSubmit = useCallback(async (values) => {
-    try {
-      const submitData = {
-        ...values,
-        maxStock: maxStockUnlimited ? 0 : values.maxStock,
-        unitPrice: values.unitPrice || 0
-      };
-      if (editingConsumable) {
-        await axios.put(`/api/consumables/${editingConsumable.consumableId}`, submitData);
-        message.success('耗材更新成功');
-      } else {
-        await axios.post('/api/consumables', {
-          ...submitData,
-          consumableId: `CON${Date.now()}`
-        });
-        message.success('耗材创建成功');
+  const handleSubmit = useCallback(
+    async values => {
+      try {
+        const submitData = {
+          ...values,
+          maxStock: maxStockUnlimited ? 0 : values.maxStock,
+          unitPrice: values.unitPrice || 0,
+        };
+        if (editingConsumable) {
+          await axios.put(`/api/consumables/${editingConsumable.consumableId}`, submitData);
+          message.success('耗材更新成功');
+        } else {
+          await axios.post('/api/consumables', {
+            ...submitData,
+            consumableId: `CON${Date.now()}`,
+          });
+          message.success('耗材创建成功');
+        }
+        setModalVisible(false);
+        fetchConsumables();
+        setEditingConsumable(null);
+      } catch (error) {
+        message.error(editingConsumable ? '耗材更新失败' : '耗材创建失败');
+        console.error('提交失败:', error);
       }
-      setModalVisible(false);
-      fetchConsumables();
-      setEditingConsumable(null);
-    } catch (error) {
-      message.error(editingConsumable ? '耗材更新失败' : '耗材创建失败');
-      console.error('提交失败:', error);
-    }
-  }, [editingConsumable, fetchConsumables, maxStockUnlimited]);
+    },
+    [editingConsumable, fetchConsumables, maxStockUnlimited]
+  );
 
-  const handleDelete = useCallback(async (consumableId) => {
-    try {
-      await axios.delete(`/api/consumables/${consumableId}`);
-      message.success('删除成功');
-      fetchConsumables();
-    } catch (error) {
-      message.error('删除失败');
-      console.error('删除失败:', error);
-    }
-  }, [fetchConsumables]);
+  const handleDelete = useCallback(
+    async consumableId => {
+      try {
+        await axios.delete(`/api/consumables/${consumableId}`);
+        message.success('删除成功');
+        fetchConsumables();
+      } catch (error) {
+        message.error('删除失败');
+        console.error('删除失败:', error);
+      }
+    },
+    [fetchConsumables]
+  );
 
-  const handleSearch = useCallback((value) => {
+  const handleSearch = useCallback(value => {
     setKeyword(value);
   }, []);
 
   const exportToCSV = (data, filename) => {
-    const headers = ['耗材ID', '名称', '分类', '单位', '当前库存', '最小库存', '最大库存', '单价', '供应商', '存放位置', '状态'];
-    const keys = ['consumableId', 'name', 'category', 'unit', 'currentStock', 'minStock', 'maxStock', 'unitPrice', 'supplier', 'location', 'status'];
-    
+    const headers = [
+      '耗材ID',
+      '名称',
+      '分类',
+      '单位',
+      '当前库存',
+      '最小库存',
+      '最大库存',
+      '单价',
+      '供应商',
+      '存放位置',
+      '状态',
+    ];
+    const keys = [
+      'consumableId',
+      'name',
+      'category',
+      'unit',
+      'currentStock',
+      'minStock',
+      'maxStock',
+      'unitPrice',
+      'supplier',
+      'location',
+      'status',
+    ];
+
     const csvContent = [
       headers.join(','),
-      ...data.map(row => keys.map(key => {
-        let value = row[key];
-        if (key === 'unitPrice') value = `¥${parseFloat(value || 0).toFixed(2)}`;
-        if (key === 'status') value = value === 'active' ? '启用' : '停用';
-        if (value === null || value === undefined) value = '';
-        const str = String(value);
-        if (str.includes(',') || str.includes('"') || str.includes('\n')) {
-          return `"${str.replace(/"/g, '""')}"`;
-        }
-        return str;
-      }).join(','))
+      ...data.map(row =>
+        keys
+          .map(key => {
+            let value = row[key];
+            if (key === 'unitPrice') value = `¥${parseFloat(value || 0).toFixed(2)}`;
+            if (key === 'status') value = value === 'active' ? '启用' : '停用';
+            if (value === null || value === undefined) value = '';
+            const str = String(value);
+            if (str.includes(',') || str.includes('"') || str.includes('\n')) {
+              return `"${str.replace(/"/g, '""')}"`;
+            }
+            return str;
+          })
+          .join(',')
+      ),
     ].join('\n');
-    
+
     const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
     const url = window.URL.createObjectURL(blob);
     const link = document.createElement('a');
@@ -166,7 +235,7 @@ function ConsumableManagement() {
   const handleExport = async () => {
     try {
       const response = await axios.get('/api/consumables', {
-        params: { keyword, category, status, pageSize: 1000 }
+        params: { keyword, category, status, pageSize: 1000 },
       });
       const consumables = response.data.consumables;
       exportToCSV(consumables, `consumables_${new Date().toISOString().split('T')[0]}.csv`);
@@ -177,21 +246,21 @@ function ConsumableManagement() {
     }
   };
 
-  const parseCSV = (text) => {
+  const parseCSV = text => {
     const lines = text.trim().split('\n');
     if (lines.length < 2) return [];
-    
+
     const headers = lines[0].split(',').map(h => h.trim().replace(/^"|"$/g, ''));
     const data = [];
-    
+
     for (let i = 1; i < lines.length; i++) {
       const line = lines[i].trim();
       if (!line) continue;
-      
+
       let values = [];
       let inQuotes = false;
       let current = '';
-      
+
       for (let j = 0; j < line.length; j++) {
         const char = line[j];
         if (char === '"') {
@@ -204,22 +273,22 @@ function ConsumableManagement() {
         }
       }
       values.push(current.trim().replace(/^"|"$/g, ''));
-      
+
       const row = {};
       headers.forEach((header, idx) => {
         row[header] = values[idx] || '';
       });
       data.push(row);
     }
-    
+
     return data;
   };
 
-  const handleFileChange = (info) => {
+  const handleFileChange = info => {
     const file = info.fileList[info.fileList.length - 1];
     if (file && file.originFileObj) {
       const reader = new FileReader();
-      reader.onload = (e) => {
+      reader.onload = e => {
         const text = e.target.result;
         const parsedData = parseCSV(text);
         setImportPreview(parsedData.slice(0, 10));
@@ -249,57 +318,57 @@ function ConsumableManagement() {
       message.warning('请先选择文件');
       return;
     }
-    
+
     setImporting(true);
     setImportProgress(0);
     setImportPhase('正在读取文件...');
     setImportResult(null);
-    
+
     try {
       const reader = new FileReader();
-      reader.onload = async (e) => {
+      reader.onload = async e => {
         const text = e.target.result;
         setImportProgress(10);
         setImportPhase('正在读取文件...');
-        
+
         setTimeout(() => {
           setImportProgress(20);
           setImportPhase('正在解析CSV数据...');
         }, 100);
-        
+
         const items = parseCSV(text);
         const totalItems = items.length;
-        
+
         setTimeout(() => {
           setImportProgress(30);
           setImportPhase(`共解析 ${totalItems} 条记录，准备提交...`);
         }, 200);
-        
+
         setTimeout(() => {
           setImportProgress(40);
           setImportPhase('正在连接服务器...');
         }, 300);
-        
+
         const response = await axios.post('/api/consumables/import', { items });
-        
+
         setTimeout(() => {
           setImportProgress(60);
           setImportPhase('正在处理服务器响应...');
         }, 100);
-        
+
         setTimeout(() => {
           setImportProgress(80);
           setImportPhase('正在更新本地数据...');
         }, 200);
-        
+
         const results = response.data.results;
-        
+
         setTimeout(() => {
           setImportResult(results);
           setImportProgress(100);
           setImportPhase('导入完成');
           setImporting(false);
-          
+
           if (results.failed > 0) {
             message.warning(`导入完成，成功 ${results.success} 条，失败 ${results.failed} 条`);
           } else {
@@ -317,7 +386,7 @@ function ConsumableManagement() {
           imported: 0,
           failed: 0,
           errors: [{ row: '-', error: '文件读取失败，请检查文件是否损坏' }],
-          message: '文件读取失败'
+          message: '文件读取失败',
         });
         message.error('文件读取失败');
       };
@@ -326,16 +395,16 @@ function ConsumableManagement() {
       setImporting(false);
       setImportProgress(0);
       setImportPhase('导入失败');
-      
+
       let errorMessage = '导入失败，请检查网络连接或服务器状态';
       let errorDetails = [];
-      
+
       if (error.response && error.response.data) {
         const { data } = error.response;
         if (data.errors && Array.isArray(data.errors) && data.errors.length > 0) {
           errorDetails = data.errors.map((err, index) => ({
             row: err.row || index + 1,
-            error: err.error || err.message || '数据格式错误'
+            error: err.error || err.message || '数据格式错误',
           }));
           errorMessage = `导入失败，共发现 ${errorDetails.length} 处数据错误`;
         } else if (data.message) {
@@ -352,23 +421,24 @@ function ConsumableManagement() {
           errorMessage = error.message;
         }
       }
-      
+
       setImportResult({
         success: false,
         total: 0,
         imported: 0,
         failed: 0,
         errors: errorDetails,
-        message: errorMessage
+        message: errorMessage,
       });
-      
+
       message.error(errorMessage);
       console.error('导入耗材失败:', error);
     }
   };
 
   const downloadTemplate = () => {
-    const template = '耗材ID,名称,分类,单位,当前库存,最小库存,最大库存,单价,供应商,存放位置,描述,状态\n,测试耗材,办公用品,个,100,10,500,5.00,XX公司,A柜-01层,测试数据,active';
+    const template =
+      '耗材ID,名称,分类,单位,当前库存,最小库存,最大库存,单价,供应商,存放位置,描述,状态\n,测试耗材,办公用品,个,100,10,500,5.00,XX公司,A柜-01层,测试数据,active';
     const blob = new Blob([template], { type: 'text/csv;charset=utf-8;' });
     const url = window.URL.createObjectURL(blob);
     const link = document.createElement('a');
@@ -380,163 +450,208 @@ function ConsumableManagement() {
     window.URL.revokeObjectURL(url);
   };
 
-  const showStockModal = useCallback((record, type) => {
-    setStockRecord(record);
-    setStockType(type);
-    stockForm.setFieldsValue({
-      consumableId: record.consumableId,
-      consumableName: record.name,
-      quantity: 1,
-      reason: '',
-      notes: ''
-    });
-    setStockModalVisible(true);
-  }, [stockForm]);
+  const showStockModal = useCallback(
+    (record, type) => {
+      setStockRecord(record);
+      setStockType(type);
+      stockForm.setFieldsValue({
+        consumableId: record.consumableId,
+        consumableName: record.name,
+        quantity: 1,
+        reason: '',
+        notes: '',
+      });
+      setStockModalVisible(true);
+    },
+    [stockForm]
+  );
 
   const handleStockCancel = useCallback(() => {
     setStockModalVisible(false);
     setStockRecord(null);
   }, []);
 
-  const handleStockSubmit = useCallback(async (values) => {
-    try {
-      const response = await axios.post('/api/consumables/quick-inout', {
-        consumableId: stockRecord.consumableId,
-        type: stockType,
-        quantity: values.quantity,
-        operator: values.operator || '系统管理员',
-        reason: values.reason,
-        notes: values.notes
-      });
-      message.success(`${stockType === 'in' ? '入库' : '出库'}操作成功`);
-      setStockModalVisible(false);
-      fetchConsumables();
-    } catch (error) {
-      message.error(error.response?.data?.error || `${stockType === 'in' ? '入库' : '出库'}操作失败`);
-      console.error('操作失败:', error);
-    }
-  }, [stockRecord, stockType, fetchConsumables]);
-
-  const columns = useMemo(() => [
-    {
-      title: '名称',
-      dataIndex: 'name',
-      key: 'name',
-      width: 150
-    },
-    {
-      title: '分类',
-      dataIndex: 'category',
-      key: 'category',
-      width: 120
-    },
-    {
-      title: '单位',
-      dataIndex: 'unit',
-      key: 'unit',
-      width: 80
-    },
-    {
-      title: '当前库存',
-      dataIndex: 'currentStock',
-      key: 'currentStock',
-      width: 100,
-      render: (value, record) => {
-        const isLow = value <= record.minStock;
-        return (
-          <span style={{ color: isLow ? '#ff4d4f' : '#52c41a', fontWeight: 'bold' }}>
-            {value}
-          </span>
+  const handleStockSubmit = useCallback(
+    async values => {
+      try {
+        const response = await axios.post('/api/consumables/quick-inout', {
+          consumableId: stockRecord.consumableId,
+          type: stockType,
+          quantity: values.quantity,
+          operator: values.operator || '系统管理员',
+          reason: values.reason,
+          notes: values.notes,
+        });
+        message.success(`${stockType === 'in' ? '入库' : '出库'}操作成功`);
+        setStockModalVisible(false);
+        fetchConsumables();
+      } catch (error) {
+        message.error(
+          error.response?.data?.error || `${stockType === 'in' ? '入库' : '出库'}操作失败`
         );
+        console.error('操作失败:', error);
       }
     },
-    {
-      title: '最小库存',
-      dataIndex: 'minStock',
-      key: 'minStock',
-      width: 100
-    },
-    {
-      title: '最大库存',
-      dataIndex: 'maxStock',
-      key: 'maxStock',
-      width: 100,
-      render: (value) => value === 0 || value === null || value === undefined ? '无限制' : value
-    },
-    {
-      title: '单价(元)',
-      dataIndex: 'unitPrice',
-      key: 'unitPrice',
-      width: 100,
-      render: (value) => `¥${parseFloat(value || 0).toFixed(2)}`
-    },
-    {
-      title: '供应商',
-      dataIndex: 'supplier',
-      key: 'supplier',
-      width: 150,
-      render: (value) => value || '-'
-    },
-    {
-      title: '位置',
-      dataIndex: 'location',
-      key: 'location',
-      width: 120,
-      render: (value) => value || '-'
-    },
-    {
-      title: '描述',
-      dataIndex: 'description',
-      key: 'description',
-      width: 200,
-      render: (value) => value || '-',
-      ellipsis: true
-    },
-    {
-      title: '状态',
-      dataIndex: 'status',
-      key: 'status',
-      width: 100,
-      render: (value) => (
-        <span style={{ color: value === 'active' ? '#52c41a' : '#ff4d4f' }}>
-          {value === 'active' ? '启用' : '停用'}
-        </span>
-      )
-    },
-    {
-      title: '操作',
-      key: 'action',
-      width: 200,
-      render: (_, record) => (
-        <Space>
-          <Button type="primary" icon={<EditOutlined />} size="small" onClick={() => showModal(record)}>编辑</Button>
-          <Button type="default" icon={<InboxOutlined />} size="small" style={{ background: '#f6ffed', borderColor: '#b7eb8f', color: '#52c41a' }} onClick={() => showStockModal(record, 'in')}>入库</Button>
-          <Button type="default" icon={<ExportOutlined />} size="small" style={{ background: '#fff2f0', borderColor: '#ffccc7', color: '#ff4d4f' }} onClick={() => showStockModal(record, 'out')}>出库</Button>
-          <Popconfirm title="确定删除?" onConfirm={() => handleDelete(record.consumableId)}>
-            <Button danger icon={<DeleteOutlined />} size="small">删除</Button>
-          </Popconfirm>
-        </Space>
-      )
-    }
-  ], [showModal, showStockModal, handleDelete]);
+    [stockRecord, stockType, fetchConsumables]
+  );
+
+  const columns = useMemo(
+    () => [
+      {
+        title: '名称',
+        dataIndex: 'name',
+        key: 'name',
+        width: 150,
+      },
+      {
+        title: '分类',
+        dataIndex: 'category',
+        key: 'category',
+        width: 120,
+      },
+      {
+        title: '单位',
+        dataIndex: 'unit',
+        key: 'unit',
+        width: 80,
+      },
+      {
+        title: '当前库存',
+        dataIndex: 'currentStock',
+        key: 'currentStock',
+        width: 100,
+        render: (value, record) => {
+          const isLow = value <= record.minStock;
+          return (
+            <span style={{ color: isLow ? '#ff4d4f' : '#52c41a', fontWeight: 'bold' }}>
+              {value}
+            </span>
+          );
+        },
+      },
+      {
+        title: '最小库存',
+        dataIndex: 'minStock',
+        key: 'minStock',
+        width: 100,
+      },
+      {
+        title: '最大库存',
+        dataIndex: 'maxStock',
+        key: 'maxStock',
+        width: 100,
+        render: value => (value === 0 || value === null || value === undefined ? '无限制' : value),
+      },
+      {
+        title: '单价(元)',
+        dataIndex: 'unitPrice',
+        key: 'unitPrice',
+        width: 100,
+        render: value => `¥${parseFloat(value || 0).toFixed(2)}`,
+      },
+      {
+        title: '供应商',
+        dataIndex: 'supplier',
+        key: 'supplier',
+        width: 150,
+        render: value => value || '-',
+      },
+      {
+        title: '位置',
+        dataIndex: 'location',
+        key: 'location',
+        width: 120,
+        render: value => value || '-',
+      },
+      {
+        title: '描述',
+        dataIndex: 'description',
+        key: 'description',
+        width: 200,
+        render: value => value || '-',
+        ellipsis: true,
+      },
+      {
+        title: '状态',
+        dataIndex: 'status',
+        key: 'status',
+        width: 100,
+        render: value => (
+          <span style={{ color: value === 'active' ? '#52c41a' : '#ff4d4f' }}>
+            {value === 'active' ? '启用' : '停用'}
+          </span>
+        ),
+      },
+      {
+        title: '操作',
+        key: 'action',
+        width: 200,
+        render: (_, record) => (
+          <Space>
+            <Button
+              type="primary"
+              icon={<EditOutlined />}
+              size="small"
+              onClick={() => showModal(record)}
+            >
+              编辑
+            </Button>
+            <Button
+              type="default"
+              icon={<InboxOutlined />}
+              size="small"
+              style={{ background: '#f6ffed', borderColor: '#b7eb8f', color: '#52c41a' }}
+              onClick={() => showStockModal(record, 'in')}
+            >
+              入库
+            </Button>
+            <Button
+              type="default"
+              icon={<ExportOutlined />}
+              size="small"
+              style={{ background: '#fff2f0', borderColor: '#ffccc7', color: '#ff4d4f' }}
+              onClick={() => showStockModal(record, 'out')}
+            >
+              出库
+            </Button>
+            <Popconfirm title="确定删除?" onConfirm={() => handleDelete(record.consumableId)}>
+              <Button danger icon={<DeleteOutlined />} size="small">
+                删除
+              </Button>
+            </Popconfirm>
+          </Space>
+        ),
+      },
+    ],
+    [showModal, showStockModal, handleDelete]
+  );
 
   const previewColumns = [
     { title: '名称', dataIndex: '名称', key: 'name', width: 120 },
     { title: '分类', dataIndex: '分类', key: 'category', width: 100 },
     { title: '单位', dataIndex: '单位', key: 'unit', width: 80 },
     { title: '当前库存', dataIndex: '当前库存', key: 'currentStock', width: 90 },
-    { title: '单价', dataIndex: '单价', key: 'unitPrice', width: 80 }
+    { title: '单价', dataIndex: '单价', key: 'unitPrice', width: 80 },
   ];
 
   return (
     <div>
-      <Card title="耗材管理" extra={
-        <Space>
-          <Button type="primary" icon={<PlusOutlined />} onClick={() => showModal()}>添加耗材</Button>
-          <Button icon={<ImportOutlined />} onClick={showImportModal}>导入</Button>
-          <Button icon={<ExportOutlined />} onClick={handleExport}>导出</Button>
-        </Space>
-      }>
+      <Card
+        title="耗材管理"
+        extra={
+          <Space>
+            <Button type="primary" icon={<PlusOutlined />} onClick={() => showModal()}>
+              添加耗材
+            </Button>
+            <Button icon={<ImportOutlined />} onClick={showImportModal}>
+              导入
+            </Button>
+            <Button icon={<ExportOutlined />} onClick={handleExport}>
+              导出
+            </Button>
+          </Space>
+        }
+      >
         <Card size="small" style={{ marginBottom: 16 }}>
           <Space>
             <Input.Search
@@ -548,7 +663,9 @@ function ConsumableManagement() {
             <Select value={category} onChange={setCategory} style={{ width: 150 }}>
               <Option value="all">所有分类</Option>
               {categories.map(cat => (
-                <Option key={cat.id} value={cat.name}>{cat.name}</Option>
+                <Option key={cat.id} value={cat.name}>
+                  {cat.name}
+                </Option>
               ))}
             </Select>
             <Select value={status} onChange={setStatus} style={{ width: 120 }}>
@@ -565,7 +682,7 @@ function ConsumableManagement() {
           rowKey="consumableId"
           loading={loading}
           pagination={pagination}
-          onChange={(pagination) => fetchConsumables(pagination.current, pagination.pageSize)}
+          onChange={pagination => fetchConsumables(pagination.current, pagination.pageSize)}
           scroll={{ x: 1300 }}
         />
       </Card>
@@ -581,31 +698,47 @@ function ConsumableManagement() {
           <Form.Item name="name" label="名称" rules={[{ required: true, message: '请输入名称' }]}>
             <Input placeholder="请输入耗材名称" />
           </Form.Item>
-          <Form.Item name="category" label="分类" rules={[{ required: true, message: '请选择分类' }]}>
-            <Select
-              placeholder="请选择分类"
-              allowClear
-            >
+          <Form.Item
+            name="category"
+            label="分类"
+            rules={[{ required: true, message: '请选择分类' }]}
+          >
+            <Select placeholder="请选择分类" allowClear>
               {categories.map(cat => (
-                <Option key={cat.id} value={cat.name}>{cat.name}</Option>
+                <Option key={cat.id} value={cat.name}>
+                  {cat.name}
+                </Option>
               ))}
             </Select>
           </Form.Item>
-          <Form.Item name="unit" label="单位" rules={[{ required: true, message: '请输入单位' }]} initialValue="个">
+          <Form.Item
+            name="unit"
+            label="单位"
+            rules={[{ required: true, message: '请输入单位' }]}
+            initialValue="个"
+          >
             <Input placeholder="如: 个、盒、卷、箱" />
           </Form.Item>
           <Space style={{ width: '100%' }}>
-            <Form.Item name="currentStock" label="当前库存" rules={[{ required: true, message: '请输入当前库存' }]}>
+            <Form.Item
+              name="currentStock"
+              label="当前库存"
+              rules={[{ required: true, message: '请输入当前库存' }]}
+            >
               <InputNumber min={0} style={{ width: '100%' }} />
             </Form.Item>
-            <Form.Item name="minStock" label="最小库存" rules={[{ required: true, message: '请输入最小库存' }]}>
+            <Form.Item
+              name="minStock"
+              label="最小库存"
+              rules={[{ required: true, message: '请输入最小库存' }]}
+            >
               <InputNumber min={0} style={{ width: '100%' }} />
             </Form.Item>
             <Form.Item label="最大库存">
               <Space direction="vertical" style={{ width: '100%' }}>
-                <Checkbox 
+                <Checkbox
                   checked={maxStockUnlimited}
-                  onChange={(e) => {
+                  onChange={e => {
                     setMaxStockUnlimited(e.target.checked);
                     if (e.target.checked) {
                       form.setFieldsValue({ maxStock: undefined });
@@ -615,7 +748,11 @@ function ConsumableManagement() {
                   无限制
                 </Checkbox>
                 {!maxStockUnlimited && (
-                  <Form.Item name="maxStock" noStyle rules={[{ required: true, message: '请输入最大库存' }]}>
+                  <Form.Item
+                    name="maxStock"
+                    noStyle
+                    rules={[{ required: true, message: '请输入最大库存' }]}
+                  >
                     <InputNumber min={0} style={{ width: '100%' }} placeholder="请输入最大库存" />
                   </Form.Item>
                 )}
@@ -623,7 +760,13 @@ function ConsumableManagement() {
             </Form.Item>
           </Space>
           <Form.Item name="unitPrice" label="单价(元)">
-            <InputNumber min={0} step={0.01} precision={2} style={{ width: '100%' }} placeholder="请输入单价" />
+            <InputNumber
+              min={0}
+              step={0.01}
+              precision={2}
+              style={{ width: '100%' }}
+              placeholder="请输入单价"
+            />
           </Form.Item>
           <Form.Item name="supplier" label="供应商">
             <Input placeholder="请输入供应商" />
@@ -642,7 +785,9 @@ function ConsumableManagement() {
           </Form.Item>
           <Form.Item>
             <Space>
-              <Button type="primary" htmlType="submit">{editingConsumable ? '更新' : '创建'}</Button>
+              <Button type="primary" htmlType="submit">
+                {editingConsumable ? '更新' : '创建'}
+              </Button>
               <Button onClick={handleCancel}>取消</Button>
             </Space>
           </Form.Item>
@@ -659,20 +804,17 @@ function ConsumableManagement() {
         <Space direction="vertical" style={{ width: '100%' }} size="middle">
           <Card size="small" style={{ background: '#f5f5f5' }}>
             <Space>
-              <Button icon={<FileExcelOutlined />} onClick={downloadTemplate}>下载模板</Button>
+              <Button icon={<FileExcelOutlined />} onClick={downloadTemplate}>
+                下载模板
+              </Button>
               <span style={{ color: '#888', fontSize: 12 }}>请下载模板后填写数据再导入</span>
             </Space>
           </Card>
-          
-          <Upload
-            accept=".csv"
-            maxCount={1}
-            beforeUpload={() => false}
-            onChange={handleFileChange}
-          >
+
+          <Upload accept=".csv" maxCount={1} beforeUpload={() => false} onChange={handleFileChange}>
             <Button icon={<UploadOutlined />}>选择CSV文件</Button>
           </Upload>
-          
+
           {importPreview.length > 0 && (
             <div>
               <div style={{ marginBottom: 8, fontWeight: 'bold' }}>预览 (前10条):</div>
@@ -686,13 +828,13 @@ function ConsumableManagement() {
               />
             </div>
           )}
-          
+
           <div style={{ textAlign: 'right' }}>
             <Space>
               <Button onClick={handleImportCancel}>取消</Button>
-              <Button 
-                type="primary" 
-                onClick={handleImport} 
+              <Button
+                type="primary"
+                onClick={handleImport}
                 loading={importing}
                 disabled={!importFile}
               >
@@ -717,7 +859,11 @@ function ConsumableManagement() {
           <Form.Item name="consumableName" label="耗材名称">
             <Input disabled />
           </Form.Item>
-          <Form.Item name="quantity" label="数量" rules={[{ required: true, message: '请输入数量' }]}>
+          <Form.Item
+            name="quantity"
+            label="数量"
+            rules={[{ required: true, message: '请输入数量' }]}
+          >
             <InputNumber min={1} style={{ width: '100%' }} placeholder="请输入数量" />
           </Form.Item>
           <Form.Item name="operator" label="操作人">
@@ -731,7 +877,9 @@ function ConsumableManagement() {
           </Form.Item>
           <Form.Item>
             <Space>
-              <Button type="primary" htmlType="submit">{stockType === 'in' ? '确认入库' : '确认出库'}</Button>
+              <Button type="primary" htmlType="submit">
+                {stockType === 'in' ? '确认入库' : '确认出库'}
+              </Button>
               <Button onClick={handleStockCancel}>取消</Button>
             </Space>
           </Form.Item>
diff --git a/frontend/src/pages/ConsumableStatistics.jsx b/frontend/src/pages/ConsumableStatistics.jsx
index c482856..ff88455 100644
--- a/frontend/src/pages/ConsumableStatistics.jsx
+++ b/frontend/src/pages/ConsumableStatistics.jsx
@@ -1,6 +1,29 @@
 import React, { useState, useEffect } from 'react';
-import { Card, Row, Col, Statistic, Table, Tag, DatePicker, Space, Select, Progress, message, Button } from 'antd';
-import { InboxOutlined, ExportOutlined, WarningOutlined, DollarOutlined, ShoppingCartOutlined, ExclamationCircleOutlined, PlusOutlined, BarChartOutlined, DownloadOutlined } from '@ant-design/icons';
+import {
+  Card,
+  Row,
+  Col,
+  Statistic,
+  Table,
+  Tag,
+  DatePicker,
+  Space,
+  Select,
+  Progress,
+  message,
+  Button,
+} from 'antd';
+import {
+  InboxOutlined,
+  ExportOutlined,
+  WarningOutlined,
+  DollarOutlined,
+  ShoppingCartOutlined,
+  ExclamationCircleOutlined,
+  PlusOutlined,
+  BarChartOutlined,
+  DownloadOutlined,
+} from '@ant-design/icons';
 import axios from 'axios';
 import dayjs from 'dayjs';
 
@@ -12,60 +35,60 @@ const designTokens = {
     primary: {
       main: '#667eea',
       gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
-      light: '#8b9ff0'
+      light: '#8b9ff0',
     },
     success: {
       main: '#10b981',
-      gradient: 'linear-gradient(135deg, #10b981 0%, #059669 100%)'
+      gradient: 'linear-gradient(135deg, #10b981 0%, #059669 100%)',
     },
     warning: {
       main: '#f59e0b',
-      gradient: 'linear-gradient(135deg, #f59e0b 0%, #d97706 100%)'
+      gradient: 'linear-gradient(135deg, #f59e0b 0%, #d97706 100%)',
     },
     error: {
       main: '#ef4444',
-      gradient: 'linear-gradient(135deg, #ef4444 0%, #dc2626 100%)'
+      gradient: 'linear-gradient(135deg, #ef4444 0%, #dc2626 100%)',
     },
     text: {
       primary: '#1e293b',
       secondary: '#64748b',
       tertiary: '#94a3b8',
-      inverse: '#ffffff'
+      inverse: '#ffffff',
     },
     background: {
       primary: '#ffffff',
       secondary: '#f8fafc',
-      tertiary: '#f1f5f9'
+      tertiary: '#f1f5f9',
     },
     border: {
       light: '#e2e8f0',
       medium: '#cbd5e1',
-      dark: '#94a3b8'
-    }
+      dark: '#94a3b8',
+    },
   },
   shadows: {
     small: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
     medium: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
-    large: '0 10px 15px -3px rgba(0, 0, 0, 0.1)'
+    large: '0 10px 15px -3px rgba(0, 0, 0, 0.1)',
   },
   borderRadius: {
     small: '6px',
     medium: '10px',
-    large: '16px'
+    large: '16px',
   },
   spacing: {
     xs: '4px',
     sm: '8px',
     md: '16px',
     lg: '24px',
-    xl: '32px'
-  }
+    xl: '32px',
+  },
 };
 
 const pageContainerStyle = {
   minHeight: '100vh',
   background: designTokens.colors.background.secondary,
-  padding: designTokens.spacing.lg
+  padding: designTokens.spacing.lg,
 };
 
 const headerStyle = {
@@ -74,7 +97,7 @@ const headerStyle = {
   background: designTokens.colors.background.primary,
   borderRadius: designTokens.borderRadius.large,
   boxShadow: designTokens.shadows.small,
-  border: `1px solid ${designTokens.colors.border.light}`
+  border: `1px solid ${designTokens.colors.border.light}`,
 };
 
 const titleRowStyle = {
@@ -83,7 +106,7 @@ const titleRowStyle = {
   justifyContent: 'space-between',
   marginBottom: designTokens.spacing.md,
   flexWrap: 'wrap',
-  gap: designTokens.spacing.md
+  gap: designTokens.spacing.md,
 };
 
 const titleStyle = {
@@ -92,13 +115,13 @@ const titleStyle = {
   gap: designTokens.spacing.sm,
   fontSize: '20px',
   fontWeight: '600',
-  color: designTokens.colors.text.primary
+  color: designTokens.colors.text.primary,
 };
 
 const statsRowStyle = {
   display: 'flex',
   gap: designTokens.spacing.md,
-  flexWrap: 'wrap'
+  flexWrap: 'wrap',
 };
 
 const statCardStyle = {
@@ -108,22 +131,22 @@ const statCardStyle = {
   boxShadow: designTokens.shadows.small,
   border: `1px solid ${designTokens.colors.border.light}`,
   minWidth: '180px',
-  flex: 1
+  flex: 1,
 };
 
 const statCardTextStyle = {
   fontSize: '13px',
   color: designTokens.colors.text.secondary,
-  marginBottom: designTokens.spacing.xs
+  marginBottom: designTokens.spacing.xs,
 };
 
 const statCardValueStyle = {
   fontSize: '28px',
   fontWeight: '600',
-  color: designTokens.colors.text.primary
+  color: designTokens.colors.text.primary,
 };
 
-const statCardIconStyle = (color) => ({
+const statCardIconStyle = color => ({
   fontSize: '28px',
   color: color,
   display: 'flex',
@@ -132,7 +155,7 @@ const statCardIconStyle = (color) => ({
   width: '48px',
   height: '48px',
   borderRadius: designTokens.borderRadius.medium,
-  background: `${color}12`
+  background: `${color}12`,
 });
 
 const panelStyle = {
@@ -140,7 +163,7 @@ const panelStyle = {
   borderRadius: designTokens.borderRadius.large,
   boxShadow: designTokens.shadows.small,
   border: `1px solid ${designTokens.colors.border.light}`,
-  overflow: 'hidden'
+  overflow: 'hidden',
 };
 
 const panelHeaderStyle = {
@@ -148,7 +171,7 @@ const panelHeaderStyle = {
   borderBottom: `1px solid ${designTokens.colors.border.light}`,
   display: 'flex',
   alignItems: 'center',
-  justifyContent: 'space-between'
+  justifyContent: 'space-between',
 };
 
 const panelTitleStyle = {
@@ -157,11 +180,11 @@ const panelTitleStyle = {
   color: designTokens.colors.text.primary,
   display: 'flex',
   alignItems: 'center',
-  gap: designTokens.spacing.sm
+  gap: designTokens.spacing.sm,
 };
 
 const panelBodyStyle = {
-  padding: designTokens.spacing.lg
+  padding: designTokens.spacing.lg,
 };
 
 const actionButtonStyle = {
@@ -171,7 +194,7 @@ const actionButtonStyle = {
   fontSize: '13px',
   display: 'flex',
   alignItems: 'center',
-  gap: designTokens.spacing.xs
+  gap: designTokens.spacing.xs,
 };
 
 const primaryActionStyle = {
@@ -179,13 +202,19 @@ const primaryActionStyle = {
   background: designTokens.colors.primary.gradient,
   border: 'none',
   color: '#ffffff',
-  boxShadow: designTokens.shadows.small
+  boxShadow: designTokens.shadows.small,
 };
 
 function ConsumableStatistics() {
   const [summary, setSummary] = useState({ total: 0, lowStock: 0, totalValue: 0, byCategory: [] });
   const [lowStockItems, setLowStockItems] = useState([]);
-  const [stats, setStats] = useState({ inCount: 0, outCount: 0, inQuantity: 0, outQuantity: 0, recentRecords: [] });
+  const [stats, setStats] = useState({
+    inCount: 0,
+    outCount: 0,
+    inQuantity: 0,
+    outQuantity: 0,
+    recentRecords: [],
+  });
   const [loading, setLoading] = useState(true);
   const [dateRange, setDateRange] = useState([]);
   const [categoryFilter, setCategoryFilter] = useState(null);
@@ -228,11 +257,7 @@ function ConsumableStatistics() {
   useEffect(() => {
     const loadData = async () => {
       setLoading(true);
-      await Promise.all([
-        fetchSummary(),
-        fetchLowStock(),
-        fetchInOutStats()
-      ]);
+      await Promise.all([fetchSummary(), fetchLowStock(), fetchInOutStats()]);
       setLoading(false);
     };
     loadData();
@@ -248,96 +273,97 @@ function ConsumableStatistics() {
       dataIndex: 'name',
       key: 'name',
       width: 150,
-      render: (text) => (
-        <span style={{ fontWeight: '500', color: designTokens.colors.text.primary }}>
-          {text}
-        </span>
-      )
+      render: text => (
+        <span style={{ fontWeight: '500', color: designTokens.colors.text.primary }}>{text}</span>
+      ),
     },
     {
       title: '分类',
       dataIndex: 'category',
       key: 'category',
       width: 120,
-      render: (category) => (
-        <Tag style={{
-          border: 'none',
-          borderRadius: designTokens.borderRadius.small,
-          background: `${designTokens.colors.primary.main}15`,
-          color: designTokens.colors.primary.main,
-          fontWeight: '500'
-        }}>
+      render: category => (
+        <Tag
+          style={{
+            border: 'none',
+            borderRadius: designTokens.borderRadius.small,
+            background: `${designTokens.colors.primary.main}15`,
+            color: designTokens.colors.primary.main,
+            fontWeight: '500',
+          }}
+        >
           {category}
         </Tag>
-      )
+      ),
     },
     {
       title: '当前库存',
       dataIndex: 'currentStock',
       key: 'currentStock',
       width: 100,
-      render: (value) => (
-        <span style={{
-          color: designTokens.colors.error.main,
-          fontWeight: '600',
-          background: `${designTokens.colors.error.main}12`,
-          padding: `2px ${designTokens.spacing.sm}`,
-          borderRadius: designTokens.borderRadius.small
-        }}>
+      render: value => (
+        <span
+          style={{
+            color: designTokens.colors.error.main,
+            fontWeight: '600',
+            background: `${designTokens.colors.error.main}12`,
+            padding: `2px ${designTokens.spacing.sm}`,
+            borderRadius: designTokens.borderRadius.small,
+          }}
+        >
           {value}
         </span>
-      )
+      ),
     },
     {
       title: '最小库存',
       dataIndex: 'minStock',
       key: 'minStock',
       width: 100,
-      render: (value) => (
-        <span style={{ color: designTokens.colors.text.secondary }}>
-          {value}
-        </span>
-      )
+      render: value => <span style={{ color: designTokens.colors.text.secondary }}>{value}</span>,
     },
     {
       title: '单位',
       dataIndex: 'unit',
       key: 'unit',
       width: 80,
-      render: (value) => (
-        <span style={{ color: designTokens.colors.text.tertiary }}>
-          {value}
-        </span>
-      )
+      render: value => <span style={{ color: designTokens.colors.text.tertiary }}>{value}</span>,
     },
     {
       title: '充足率',
       key: 'rate',
       width: 140,
       render: (_, record) => {
-        const rate = Math.min(100, Math.round((record.currentStock / (record.maxStock || 100)) * 100));
+        const rate = Math.min(
+          100,
+          Math.round((record.currentStock / (record.maxStock || 100)) * 100)
+        );
         const status = rate < 30 ? 'exception' : rate < 60 ? 'active' : 'success';
         return (
           <Progress
             percent={rate}
             size="small"
             status={status}
-            strokeColor={status === 'exception' ? designTokens.colors.error.main : status === 'active' ? designTokens.colors.warning.main : designTokens.colors.success.main}
+            strokeColor={
+              status === 'exception'
+                ? designTokens.colors.error.main
+                : status === 'active'
+                  ? designTokens.colors.warning.main
+                  : designTokens.colors.success.main
+            }
           />
         );
-      }
+      },
     },
     {
       title: '供应商',
       dataIndex: 'supplier',
       key: 'supplier',
       width: 120,
-      render: (value) => (
-        <span style={{ color: designTokens.colors.text.secondary }}>
-          {value || '-'}
-        </span>
-      )
-    }
+      render: value => (
+        <span style={{ color: designTokens.colors.text.secondary }}>{value || '-'}</span>
+      ),
+    },
   ];
 
   const recentColumns = [
@@ -346,41 +372,41 @@ function ConsumableStatistics() {
       dataIndex: 'createdAt',
       key: 'createdAt',
       width: 170,
-      render: (date) => (
+      render: date => (
         <span style={{ color: designTokens.colors.text.secondary }}>
           {dayjs(date).format('YYYY-MM-DD HH:mm')}
         </span>
-      )
+      ),
     },
     {
       title: '耗材名称',
       dataIndex: ['Consumable', 'name'],
       key: 'consumableName',
       width: 140,
-      render: (text) => (
-        <span style={{ fontWeight: '500' }}>
-          {text}
-        </span>
-      )
+      render: text => <span style={{ fontWeight: '500' }}>{text}</span>,
     },
     {
       title: '类型',
       dataIndex: 'type',
       key: 'type',
       width: 90,
-      render: (type) => (
+      render: type => (
         <Tag
           style={{
             border: 'none',
             borderRadius: designTokens.borderRadius.small,
-            background: type === 'in' ? `${designTokens.colors.success.main}15` : `${designTokens.colors.error.main}15`,
-            color: type === 'in' ? designTokens.colors.success.main : designTokens.colors.error.main,
-            fontWeight: '500'
+            background:
+              type === 'in'
+                ? `${designTokens.colors.success.main}15`
+                : `${designTokens.colors.error.main}15`,
+            color:
+              type === 'in' ? designTokens.colors.success.main : designTokens.colors.error.main,
+            fontWeight: '500',
           }}
         >
           {type === 'in' ? '入库' : '出库'}
         </Tag>
-      )
+      ),
     },
     {
       title: '数量',
@@ -388,36 +414,38 @@ function ConsumableStatistics() {
       key: 'quantity',
       width: 100,
       render: (value, record) => (
-        <span style={{
-          color: record.type === 'in' ? designTokens.colors.success.main : designTokens.colors.error.main,
-          fontWeight: '600'
-        }}>
-          {record.type === 'in' ? '+' : '-'}{value}
+        <span
+          style={{
+            color:
+              record.type === 'in'
+                ? designTokens.colors.success.main
+                : designTokens.colors.error.main,
+            fontWeight: '600',
+          }}
+        >
+          {record.type === 'in' ? '+' : '-'}
+          {value}
         </span>
-      )
+      ),
     },
     {
       title: '操作人',
       dataIndex: 'operator',
       key: 'operator',
       width: 100,
-      render: (value) => (
-        <span style={{ color: designTokens.colors.text.secondary }}>
-          {value || '-'}
-        </span>
-      )
+      render: value => (
+        <span style={{ color: designTokens.colors.text.secondary }}>{value || '-'}</span>
+      ),
     },
     {
       title: '原因',
       dataIndex: 'reason',
       key: 'reason',
       width: 150,
-      render: (value) => (
-        <span style={{ color: designTokens.colors.text.secondary }}>
-          {value || '-'}
-        </span>
-      )
-    }
+      render: value => (
+        <span style={{ color: designTokens.colors.text.secondary }}>{value || '-'}</span>
+      ),
+    },
   ];
 
   const categories = summary.byCategory?.map(item => item.category) || [];
@@ -441,7 +469,9 @@ function ConsumableStatistics() {
               onChange={setCategoryFilter}
             >
               {categories.map(cat => (
-                <Option key={cat} value={cat}>{cat}</Option>
+                <Option key={cat} value={cat}>
+                  {cat}
+                </Option>
               ))}
             </Select>
             <RangePicker
@@ -468,7 +498,9 @@ function ConsumableStatistics() {
             </div>
           </div>
 
-          <div style={{ ...statCardStyle, borderLeft: `4px solid ${designTokens.colors.error.main}` }}>
+          <div
+            style={{ ...statCardStyle, borderLeft: `4px solid ${designTokens.colors.error.main}` }}
+          >
             <div style={{ display: 'flex', alignItems: 'center', gap: designTokens.spacing.md }}>
               <div style={statCardIconStyle(designTokens.colors.error.main)}>
                 <WarningOutlined />
@@ -482,7 +514,12 @@ function ConsumableStatistics() {
             </div>
           </div>
 
-          <div style={{ ...statCardStyle, borderLeft: `4px solid ${designTokens.colors.success.main}` }}>
+          <div
+            style={{
+              ...statCardStyle,
+              borderLeft: `4px solid ${designTokens.colors.success.main}`,
+            }}
+          >
             <div style={{ display: 'flex', alignItems: 'center', gap: designTokens.spacing.md }}>
               <div style={statCardIconStyle(designTokens.colors.success.main)}>
                 <DollarOutlined />
@@ -496,15 +533,35 @@ function ConsumableStatistics() {
             </div>
           </div>
 
-          <div style={{ ...statCardStyle, borderLeft: `4px solid ${netQuantity >= 0 ? designTokens.colors.success.main : designTokens.colors.error.main}` }}>
+          <div
+            style={{
+              ...statCardStyle,
+              borderLeft: `4px solid ${netQuantity >= 0 ? designTokens.colors.success.main : designTokens.colors.error.main}`,
+            }}
+          >
             <div style={{ display: 'flex', alignItems: 'center', gap: designTokens.spacing.md }}>
-              <div style={statCardIconStyle(netQuantity >= 0 ? designTokens.colors.success.main : designTokens.colors.error.main)}>
+              <div
+                style={statCardIconStyle(
+                  netQuantity >= 0
+                    ? designTokens.colors.success.main
+                    : designTokens.colors.error.main
+                )}
+              >
                 <InboxOutlined />
               </div>
               <div>
                 <div style={statCardTextStyle}>净入库量</div>
-                <div style={{ ...statCardValueStyle, color: netQuantity >= 0 ? designTokens.colors.success.main : designTokens.colors.error.main }}>
-                  {netQuantity >= 0 ? '+' : ''}{netQuantity}
+                <div
+                  style={{
+                    ...statCardValueStyle,
+                    color:
+                      netQuantity >= 0
+                        ? designTokens.colors.success.main
+                        : designTokens.colors.error.main,
+                  }}
+                >
+                  {netQuantity >= 0 ? '+' : ''}
+                  {netQuantity}
                 </div>
               </div>
             </div>
@@ -525,39 +582,81 @@ function ConsumableStatistics() {
             <div style={{ padding: designTokens.spacing.lg }}>
               <Row gutter={designTokens.spacing.md}>
                 <Col span={12}>
-                  <div style={{
-                    background: `${designTokens.colors.success.main}08`,
-                    borderRadius: designTokens.borderRadius.medium,
-                    padding: designTokens.spacing.lg,
-                    textAlign: 'center',
-                    border: `1px solid ${designTokens.colors.success.main}30`
-                  }}>
-                    <div style={{ fontSize: '13px', color: designTokens.colors.text.secondary, marginBottom: designTokens.spacing.sm }}>
+                  <div
+                    style={{
+                      background: `${designTokens.colors.success.main}08`,
+                      borderRadius: designTokens.borderRadius.medium,
+                      padding: designTokens.spacing.lg,
+                      textAlign: 'center',
+                      border: `1px solid ${designTokens.colors.success.main}30`,
+                    }}
+                  >
+                    <div
+                      style={{
+                        fontSize: '13px',
+                        color: designTokens.colors.text.secondary,
+                        marginBottom: designTokens.spacing.sm,
+                      }}
+                    >
                       入库次数
                     </div>
-                    <div style={{ fontSize: '32px', fontWeight: '600', color: designTokens.colors.success.main }}>
+                    <div
+                      style={{
+                        fontSize: '32px',
+                        fontWeight: '600',
+                        color: designTokens.colors.success.main,
+                      }}
+                    >
                       {stats.inCount}
                     </div>
-                    <div style={{ fontSize: '20px', fontWeight: '500', color: designTokens.colors.success.main, marginTop: designTokens.spacing.xs }}>
+                    <div
+                      style={{
+                        fontSize: '20px',
+                        fontWeight: '500',
+                        color: designTokens.colors.success.main,
+                        marginTop: designTokens.spacing.xs,
+                      }}
+                    >
                       +{stats.inQuantity}
                     </div>
                   </div>
                 </Col>
                 <Col span={12}>
-                  <div style={{
-                    background: `${designTokens.colors.error.main}08`,
-                    borderRadius: designTokens.borderRadius.medium,
-                    padding: designTokens.spacing.lg,
-                    textAlign: 'center',
-                    border: `1px solid ${designTokens.colors.error.main}30`
-                  }}>
-                    <div style={{ fontSize: '13px', color: designTokens.colors.text.secondary, marginBottom: designTokens.spacing.sm }}>
+                  <div
+                    style={{
+                      background: `${designTokens.colors.error.main}08`,
+                      borderRadius: designTokens.borderRadius.medium,
+                      padding: designTokens.spacing.lg,
+                      textAlign: 'center',
+                      border: `1px solid ${designTokens.colors.error.main}30`,
+                    }}
+                  >
+                    <div
+                      style={{
+                        fontSize: '13px',
+                        color: designTokens.colors.text.secondary,
+                        marginBottom: designTokens.spacing.sm,
+                      }}
+                    >
                       出库次数
                     </div>
-                    <div style={{ fontSize: '32px', fontWeight: '600', color: designTokens.colors.error.main }}>
+                    <div
+                      style={{
+                        fontSize: '32px',
+                        fontWeight: '600',
+                        color: designTokens.colors.error.main,
+                      }}
+                    >
                       {stats.outCount}
                     </div>
-                    <div style={{ fontSize: '20px', fontWeight: '500', color: designTokens.colors.error.main, marginTop: designTokens.spacing.xs }}>
+                    <div
+                      style={{
+                        fontSize: '20px',
+                        fontWeight: '500',
+                        color: designTokens.colors.error.main,
+                        marginTop: designTokens.spacing.xs,
+                      }}
+                    >
                       -{stats.outQuantity}
                     </div>
                   </div>
@@ -579,7 +678,14 @@ function ConsumableStatistics() {
             <div style={{ padding: designTokens.spacing.lg }}>
               <div style={{ display: 'flex', flexWrap: 'wrap', gap: designTokens.spacing.sm }}>
                 {summary.byCategory?.map((item, index) => {
-                  const colors = [designTokens.colors.primary.main, designTokens.colors.success.main, designTokens.colors.warning.main, '#8b5cf6', '#06b6d4', '#ec4899'];
+                  const colors = [
+                    designTokens.colors.primary.main,
+                    designTokens.colors.success.main,
+                    designTokens.colors.warning.main,
+                    '#8b5cf6',
+                    '#06b6d4',
+                    '#ec4899',
+                  ];
                   const color = colors[index % colors.length];
                   return (
                     <div
@@ -591,15 +697,17 @@ function ConsumableStatistics() {
                         border: `1px solid ${color}30`,
                         display: 'flex',
                         alignItems: 'center',
-                        gap: designTokens.spacing.sm
+                        gap: designTokens.spacing.sm,
                       }}
                     >
-                      <div style={{
-                        width: '8px',
-                        height: '8px',
-                        borderRadius: '50%',
-                        background: color
-                      }} />
+                      <div
+                        style={{
+                          width: '8px',
+                          height: '8px',
+                          borderRadius: '50%',
+                          background: color,
+                        }}
+                      />
                       <span style={{ color: designTokens.colors.text.secondary, fontSize: '13px' }}>
                         {item.category}
                       </span>
@@ -610,7 +718,12 @@ function ConsumableStatistics() {
                   );
                 })}
                 {(!summary.byCategory || summary.byCategory.length === 0) && (
-                  <div style={{ color: designTokens.colors.text.tertiary, padding: designTokens.spacing.lg }}>
+                  <div
+                    style={{
+                      color: designTokens.colors.text.tertiary,
+                      padding: designTokens.spacing.lg,
+                    }}
+                  >
                     暂无分类数据
                   </div>
                 )}
@@ -628,13 +741,15 @@ function ConsumableStatistics() {
                 <ExclamationCircleOutlined style={{ color: designTokens.colors.error.main }} />
                 低库存预警
               </div>
-              <Tag style={{
-                border: 'none',
-                borderRadius: designTokens.borderRadius.small,
-                background: `${designTokens.colors.error.main}15`,
-                color: designTokens.colors.error.main,
-                fontWeight: '500'
-              }}>
+              <Tag
+                style={{
+                  border: 'none',
+                  borderRadius: designTokens.borderRadius.small,
+                  background: `${designTokens.colors.error.main}15`,
+                  color: designTokens.colors.error.main,
+                  fontWeight: '500',
+                }}
+              >
                 {lowStockItems.length}项
               </Tag>
             </div>
diff --git a/frontend/src/pages/Dashboard.jsx b/frontend/src/pages/Dashboard.jsx
index 315fd16..c28c6b2 100644
--- a/frontend/src/pages/Dashboard.jsx
+++ b/frontend/src/pages/Dashboard.jsx
@@ -16,7 +16,7 @@ import {
   TeamOutlined,
   ThunderboltOutlined,
   AppstoreOutlined,
-  BarChartOutlined
+  BarChartOutlined,
 } from '@ant-design/icons';
 import api from '../api';
 
@@ -29,66 +29,66 @@ const designTokens = {
       light: '#40a9ff',
       dark: '#096dd9',
       gradient: 'linear-gradient(135deg, #1890ff 0%, #096dd9 100%)',
-      bgGradient: 'linear-gradient(135deg, #1890ff15 0%, #096dd908 100%)'
+      bgGradient: 'linear-gradient(135deg, #1890ff15 0%, #096dd908 100%)',
     },
     success: {
       main: '#52c41a',
       light: '#73d13d',
       dark: '#389e0d',
       gradient: 'linear-gradient(135deg, #52c41a 0%, #389e0d 100%)',
-      bgGradient: 'linear-gradient(135deg, #52c41a15 0%, #389e0d08 100%)'
+      bgGradient: 'linear-gradient(135deg, #52c41a15 0%, #389e0d08 100%)',
     },
     warning: {
       main: '#faad14',
       light: '#ffc53d',
       dark: '#d48806',
       gradient: 'linear-gradient(135deg, #faad14 0%, #d48806 100%)',
-      bgGradient: 'linear-gradient(135deg, #faad1415 0%, #d4880608 100%)'
+      bgGradient: 'linear-gradient(135deg, #faad1415 0%, #d4880608 100%)',
     },
     error: {
       main: '#ff4d4f',
       light: '#ff7875',
       dark: '#cf1322',
       gradient: 'linear-gradient(135deg, #ff4d4f 0%, #cf1322 100%)',
-      bgGradient: 'linear-gradient(135deg, #ff4d4f15 0%, #cf132208 100%)'
+      bgGradient: 'linear-gradient(135deg, #ff4d4f15 0%, #cf132208 100%)',
     },
     purple: {
       main: '#722ed1',
       light: '#9254de',
       dark: '#531dab',
       gradient: 'linear-gradient(135deg, #722ed1 0%, #531dab 100%)',
-      bgGradient: 'linear-gradient(135deg, #722ed115 0%, #531dab08 100%)'
+      bgGradient: 'linear-gradient(135deg, #722ed115 0%, #531dab08 100%)',
     },
     cyan: {
       main: '#13c2c2',
       light: '#36cfc9',
       dark: '#08979c',
       gradient: 'linear-gradient(135deg, #13c2c2 0%, #08979c 100%)',
-      bgGradient: 'linear-gradient(135deg, #13c2c215 0%, #08979c08 100%)'
+      bgGradient: 'linear-gradient(135deg, #13c2c215 0%, #08979c08 100%)',
     },
     text: {
       primary: '#262626',
       secondary: '#8c8c8c',
-      tertiary: '#bfbfbf'
-    }
+      tertiary: '#bfbfbf',
+    },
   },
   shadows: {
     small: '0 2px 8px rgba(0, 0, 0, 0.06)',
     medium: '0 4px 16px rgba(0, 0, 0, 0.08)',
     large: '0 8px 24px rgba(0, 0, 0, 0.12)',
-    hover: '0 12px 32px rgba(0, 0, 0, 0.15)'
+    hover: '0 12px 32px rgba(0, 0, 0, 0.15)',
   },
   borderRadius: {
     small: '8px',
     medium: '12px',
     large: '16px',
-    xl: '20px'
+    xl: '20px',
   },
   transitions: {
     fast: '0.15s ease',
     normal: '0.3s cubic-bezier(0.4, 0, 0.2, 1)',
-    slow: '0.5s cubic-bezier(0.4, 0, 0.2, 1)'
-  }
+    slow: '0.5s cubic-bezier(0.4, 0, 0.2, 1)',
+  },
 };
 
 const responsiveConfig = {
@@ -97,13 +97,13 @@ const responsiveConfig = {
   md: { span: 8 },
   lg: { span: 6 },
   xl: { span: 5 },
-  xxl: { span: 4 }
+  xxl: { span: 4 },
 };
 
 const containerStyle = {
   minHeight: '100vh',
   background: 'linear-gradient(180deg, #f5f7fa 0%, #e8ecf1 100%)',
-  padding: 'clamp(12px, 3vw, 20px)'
+  padding: 'clamp(12px, 3vw, 20px)',
 };
 
 const headerStyle = {
@@ -114,7 +114,7 @@ const headerStyle = {
   borderRadius: 'clamp(12px, 3vw, 20px)',
   color: '#fff',
   boxShadow: '0 8px 32px rgba(102, 126, 234, 0.3)',
-  animation: 'fadeInDown 0.6s ease-out'
+  animation: 'fadeInDown 0.6s ease-out',
 };
 
 const titleStyle = {
@@ -127,14 +127,14 @@ const titleStyle = {
   justifyContent: 'center',
   gap: 'clamp(8px, 2vw, 16px)',
   flexWrap: 'wrap',
-  textAlign: 'center'
+  textAlign: 'center',
 };
 
 const subtitleStyle = {
   fontSize: 'clamp(0.85rem, 2.5vw, 1.1rem)',
   color: 'rgba(255, 255, 255, 0.85)',
   margin: '0',
-  textAlign: 'center'
+  textAlign: 'center',
 };
 
 const progressCardStyle = {
@@ -143,21 +143,21 @@ const progressCardStyle = {
   boxShadow: designTokens.shadows.medium,
   background: '#fff',
   height: '100%',
-  animation: 'fadeInUp 0.6s ease-out 0.3s backwards'
+  animation: 'fadeInUp 0.6s ease-out 0.3s backwards',
 };
 
 const chartContainerStyle = {
   padding: '20px',
   borderRadius: designTokens.borderRadius.medium,
   background: 'linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%)',
-  border: '1px solid #f0f0f0'
+  border: '1px solid #f0f0f0',
 };
 
 const PIE_CHART_COLORS = {
   success: designTokens.colors.success.main,
   warning: designTokens.colors.warning.main,
   error: designTokens.colors.error.main,
-  primary: designTokens.colors.primary.main
+  primary: designTokens.colors.primary.main,
 };
 
 const pieChartStyle = {
@@ -173,7 +173,7 @@ const pieChartStyle = {
   position: 'relative',
   display: 'flex',
   alignItems: 'center',
-  justifyContent: 'center'
+  justifyContent: 'center',
 };
 
 const pieChartInner = {
@@ -184,7 +184,7 @@ const pieChartInner = {
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-  flexDirection: 'column'
+  flexDirection: 'column',
 };
 
 const trendItemStyle = {
@@ -192,7 +192,7 @@ const trendItemStyle = {
   alignItems: 'center',
   justifyContent: 'space-between',
   padding: '12px 0',
-  borderBottom: '1px solid #f0f0f0'
+  borderBottom: '1px solid #f0f0f0',
 };
 
 const STAT_CARD_BASE_STYLE = {
@@ -205,7 +205,7 @@ const STAT_CARD_BASE_STYLE = {
   cursor: 'pointer',
   height: '100%',
   animation: 'fadeInUp 0.6s ease-out backwards',
-  borderLeft: '4px solid transparent'
+  borderLeft: '4px solid transparent',
 };
 
 const STAT_ICON_CONTAINER_BASE = {
@@ -217,7 +217,7 @@ const STAT_ICON_CONTAINER_BASE = {
   justifyContent: 'center',
   fontSize: 'clamp(20px, 4vw, 32px)',
   transition: `all ${designTokens.transitions.normal}`,
-  flexShrink: 0
+  flexShrink: 0,
 };
 
 const NAV_BUTTON_BASE = {
@@ -233,7 +233,7 @@ const NAV_BUTTON_BASE = {
   gap: 'clamp(8px, 2vw, 12px)',
   cursor: 'pointer',
   boxShadow: designTokens.shadows.small,
-  minWidth: '0'
+  minWidth: '0',
 };
 
 const NAV_ICON_CONTAINER_BASE = {
@@ -245,27 +245,27 @@ const NAV_ICON_CONTAINER_BASE = {
   justifyContent: 'center',
   fontSize: 'clamp(20px, 5vw, 28px)',
   transition: `all ${designTokens.transitions.normal}`,
-  flexShrink: 0
+  flexShrink: 0,
 };
 
-const createStatCardStyle = (color) => ({
+const createStatCardStyle = color => ({
   ...STAT_CARD_BASE_STYLE,
-  borderLeftColor: color
+  borderLeftColor: color,
 });
 
-const createStatIconContainer = (color) => ({
+const createStatIconContainer = color => ({
   ...STAT_ICON_CONTAINER_BASE,
-  background: `linear-gradient(135deg, ${color}20 0%, ${color}10 100%)`
+  background: `linear-gradient(135deg, ${color}20 0%, ${color}10 100%)`,
 });
 
-const createNavButtonStyle = (color) => ({
+const createNavButtonStyle = color => ({
   ...NAV_BUTTON_BASE,
-  borderColor: color
+  borderColor: color,
 });
 
-const createNavIconContainer = (color) => ({
+const createNavIconContainer = color => ({
   ...NAV_ICON_CONTAINER_BASE,
-  background: `linear-gradient(135deg, ${color}20 0%, ${color}10 100%)`
+  background: `linear-gradient(135deg, ${color}20 0%, ${color}10 100%)`,
 });
 
 const overviewCardStyle = {
@@ -273,17 +273,17 @@ const overviewCardStyle = {
   border: 'none',
   boxShadow: designTokens.shadows.medium,
   background: '#fff',
-  animation: 'fadeInUp 0.6s ease-out 0.2s backwards'
+  animation: 'fadeInUp 0.6s ease-out 0.2s backwards',
 };
 
 const navigationGridStyle = {
   display: 'grid',
   gridTemplateColumns: 'repeat(auto-fit, minmax(100px, 1fr))',
   gap: 'clamp(8px, 2vw, 16px)',
-  marginBottom: '24px'
+  marginBottom: '24px',
 };
 
-const navButtonStyle = (color) => ({
+const navButtonStyle = color => ({
   height: 'auto',
   padding: '24px 20px',
   borderRadius: designTokens.borderRadius.medium,
@@ -295,10 +295,10 @@ const navButtonStyle = (color) => ({
   alignItems: 'center',
   gap: '12px',
   cursor: 'pointer',
-  boxShadow: designTokens.shadows.small
+  boxShadow: designTokens.shadows.small,
 });
 
-const navIconContainer = (color) => ({
+const navIconContainer = color => ({
   width: '60px',
   height: '60px',
   borderRadius: designTokens.borderRadius.medium,
@@ -307,7 +307,7 @@ const navIconContainer = (color) => ({
   justifyContent: 'center',
   background: `linear-gradient(135deg, ${color}20 0%, ${color}10 100%)`,
   fontSize: '28px',
-  transition: `all ${designTokens.transitions.normal}`
+  transition: `all ${designTokens.transitions.normal}`,
 });
 
 const navTextStyle = {
@@ -318,21 +318,21 @@ const navTextStyle = {
   whiteSpace: 'nowrap',
   overflow: 'hidden',
   textOverflow: 'ellipsis',
-  maxWidth: '100%'
+  maxWidth: '100%',
 };
 
 const systemInfoStyle = {
   background: 'linear-gradient(135deg, #f0f7ff 0%, #e6f7ff 100%)',
   borderRadius: designTokens.borderRadius.medium,
   padding: '20px',
-  border: '1px solid #91d5ff'
+  border: '1px solid #91d5ff',
 };
 
 const quickStatsStyle = {
   display: 'grid',
   gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
   gap: '16px',
-  marginBottom: '24px'
+  marginBottom: '24px',
 };
 
 const quickStatItemStyle = {
@@ -343,7 +343,7 @@ const quickStatItemStyle = {
   alignItems: 'center',
   gap: '16px',
   border: '1px solid #f0f0f0',
-  boxShadow: designTokens.shadows.small
+  boxShadow: designTokens.shadows.small,
 };
 
 const AnimatedCounter = ({ value, duration = 1500 }) => {
@@ -352,7 +352,7 @@ const AnimatedCounter = ({ value, duration = 1500 }) => {
   const startTimeRef = useRef(null);
 
   useEffect(() => {
-    const animate = (currentTime) => {
+    const animate = currentTime => {
       if (!startTimeRef.current) {
         startTimeRef.current = currentTime;
       }
@@ -408,18 +408,22 @@ const CircularProgress = ({ percentage, size = 120, strokeWidth = 10, color, lab
           strokeLinecap="round"
           style={{
             transition: 'stroke-dashoffset 1s ease-out',
-            filter: `drop-shadow(0 0 6px ${color}40)`
+            filter: `drop-shadow(0 0 6px ${color}40)`,
           }}
         />
       </svg>
-      <div style={{
-        position: 'absolute',
-        top: '50%',
-        left: '50%',
-        transform: 'translate(-50%, -50%)',
-        textAlign: 'center'
-      }}>
-        <div style={{ fontSize: '1.5rem', fontWeight: '700', color: designTokens.colors.text.primary }}>
+      <div
+        style={{
+          position: 'absolute',
+          top: '50%',
+          left: '50%',
+          transform: 'translate(-50%, -50%)',
+          textAlign: 'center',
+        }}
+      >
+        <div
+          style={{ fontSize: '1.5rem', fontWeight: '700', color: designTokens.colors.text.primary }}
+        >
           {percentage}%
         </div>
         <div style={{ fontSize: '0.75rem', color: designTokens.colors.text.secondary }}>
@@ -448,28 +452,34 @@ const PowerGauge = ({ value, maxValue }) => {
           {percentage.toFixed(1)}%
         </Text>
       </div>
-      <div style={{
-        height: '8px',
-        borderRadius: '4px',
-        background: '#f0f0f0',
-        overflow: 'hidden'
-      }}>
-        <div style={{
-          height: '100%',
+      <div
+        style={{
+          height: '8px',
           borderRadius: '4px',
-          background: `linear-gradient(90deg, ${getColor()}, ${getColor()}80)`,
-          width: `${percentage}%`,
-          transition: 'width 0.8s ease-out',
-          boxShadow: `0 0 8px ${getColor()}40`
-        }} />
+          background: '#f0f0f0',
+          overflow: 'hidden',
+        }}
+      >
+        <div
+          style={{
+            height: '100%',
+            borderRadius: '4px',
+            background: `linear-gradient(90deg, ${getColor()}, ${getColor()}80)`,
+            width: `${percentage}%`,
+            transition: 'width 0.8s ease-out',
+            boxShadow: `0 0 8px ${getColor()}40`,
+          }}
+        />
       </div>
-      <div style={{
-        display: 'flex',
-        justifyContent: 'space-between',
-        marginTop: '4px',
-        fontSize: '0.75rem',
-        color: designTokens.colors.text.tertiary
-      }}>
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          marginTop: '4px',
+          fontSize: '0.75rem',
+          color: designTokens.colors.text.tertiary,
+        }}
+      >
         <span>{value}W</span>
         <span>{maxValue}W</span>
       </div>
@@ -483,31 +493,40 @@ const DeviceTrendChart = ({ data }) => {
 
   return (
     <div style={{ marginTop: '16px' }}>
-      <div style={{
-        display: 'flex',
-        alignItems: 'flex-end',
-        justifyContent: 'space-between',
-        height: chartHeight,
-        gap: '8px',
-        padding: '0 8px'
-      }}>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'flex-end',
+          justifyContent: 'space-between',
+          height: chartHeight,
+          gap: '8px',
+          padding: '0 8px',
+        }}
+      >
         {data.map((item, index) => (
-          <div key={index} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
-            <div style={{
-              width: '100%',
-              maxWidth: '40px',
-              height: `${(item.value / maxValue) * chartHeight}px`,
-              borderRadius: '4px 4px 0 0',
-              background: `linear-gradient(180deg, ${item.color} 0%, ${item.color}80 100%)`,
-              transition: `height ${designTokens.transitions.slow}`,
-              boxShadow: `0 -2px 8px ${item.color}30`
-            }} />
-            <span style={{
-              fontSize: '0.7rem',
-              color: designTokens.colors.text.tertiary,
-              marginTop: '4px',
-              whiteSpace: 'nowrap'
-            }}>
+          <div
+            key={index}
+            style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center' }}
+          >
+            <div
+              style={{
+                width: '100%',
+                maxWidth: '40px',
+                height: `${(item.value / maxValue) * chartHeight}px`,
+                borderRadius: '4px 4px 0 0',
+                background: `linear-gradient(180deg, ${item.color} 0%, ${item.color}80 100%)`,
+                transition: `height ${designTokens.transitions.slow}`,
+                boxShadow: `0 -2px 8px ${item.color}30`,
+              }}
+            />
+            <span
+              style={{
+                fontSize: '0.7rem',
+                color: designTokens.colors.text.tertiary,
+                marginTop: '4px',
+                whiteSpace: 'nowrap',
+              }}
+            >
               {item.label}
             </span>
           </div>
@@ -522,32 +541,43 @@ const StatusLegend = () => {
     { color: designTokens.colors.success.main, label: '运行中', percent: 60 },
     { color: designTokens.colors.warning.main, label: '维护中', percent: 20 },
     { color: designTokens.colors.error.main, label: '故障', percent: 10 },
-    { color: designTokens.colors.primary.main, label: '离线', percent: 10 }
+    { color: designTokens.colors.primary.main, label: '离线', percent: 10 },
   ];
 
   return (
     <div style={{ marginTop: '16px' }}>
       {legends.map((item, index) => (
-        <div key={index} style={{
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-          padding: '8px 0',
-          borderBottom: index < legends.length - 1 ? '1px solid #f5f5f5' : 'none'
-        }}>
+        <div
+          key={index}
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            padding: '8px 0',
+            borderBottom: index < legends.length - 1 ? '1px solid #f5f5f5' : 'none',
+          }}
+        >
           <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-            <div style={{
-              width: '12px',
-              height: '12px',
-              borderRadius: '3px',
-              background: item.color,
-              boxShadow: `0 0 6px ${item.color}40`
-            }} />
+            <div
+              style={{
+                width: '12px',
+                height: '12px',
+                borderRadius: '3px',
+                background: item.color,
+                boxShadow: `0 0 6px ${item.color}40`,
+              }}
+            />
             <Text style={{ fontSize: '0.85rem', color: designTokens.colors.text.secondary }}>
               {item.label}
             </Text>
           </div>
-          <Text style={{ fontSize: '0.85rem', fontWeight: '600', color: designTokens.colors.text.primary }}>
+          <Text
+            style={{
+              fontSize: '0.85rem',
+              fontWeight: '600',
+              color: designTokens.colors.text.primary,
+            }}
+          >
             {item.percent}%
           </Text>
         </div>
@@ -557,12 +587,48 @@ const StatusLegend = () => {
 };
 
 const navButtonsData = [
-  { key: 'devices', icon: CloudServerOutlined, text: '设备管理', path: '/devices', color: designTokens.colors.primary.main },
-  { key: 'racks', icon: DatabaseOutlined, text: '资源规划', path: '/racks', color: designTokens.colors.purple.main },
-  { key: 'faults', icon: WarningOutlined, text: '故障监控', path: '/faults', color: designTokens.colors.warning.main },
-  { key: 'tickets', icon: BarChartOutlined, text: '工单管理', path: '/tickets', color: designTokens.colors.cyan.main },
-  { key: 'consumables', icon: AppstoreOutlined, text: '耗材管理', path: '/consumables', color: '#fa8c16' },
-  { key: 'settings', icon: SettingOutlined, text: '系统配置', path: '/settings', color: designTokens.colors.success.main }
+  {
+    key: 'devices',
+    icon: CloudServerOutlined,
+    text: '设备管理',
+    path: '/devices',
+    color: designTokens.colors.primary.main,
+  },
+  {
+    key: 'racks',
+    icon: DatabaseOutlined,
+    text: '资源规划',
+    path: '/racks',
+    color: designTokens.colors.purple.main,
+  },
+  {
+    key: 'faults',
+    icon: WarningOutlined,
+    text: '故障监控',
+    path: '/faults',
+    color: designTokens.colors.warning.main,
+  },
+  {
+    key: 'tickets',
+    icon: BarChartOutlined,
+    text: '工单管理',
+    path: '/tickets',
+    color: designTokens.colors.cyan.main,
+  },
+  {
+    key: 'consumables',
+    icon: AppstoreOutlined,
+    text: '耗材管理',
+    path: '/consumables',
+    color: '#fa8c16',
+  },
+  {
+    key: 'settings',
+    icon: SettingOutlined,
+    text: '系统配置',
+    path: '/settings',
+    color: designTokens.colors.success.main,
+  },
 ];
 
 function Dashboard() {
@@ -576,7 +642,7 @@ function Dashboard() {
     onlineRate: 98.5,
     powerUsage: 0,
     totalUsers: 0,
-    activeTickets: 0
+    activeTickets: 0,
   });
   const [loading, setLoading] = useState(true);
   const [hoveredCard, setHoveredCard] = useState(null);
@@ -592,7 +658,7 @@ function Dashboard() {
         api.get('/racks', { params: { pageSize: 1 } }),
         api.get('/rooms'),
         api.get('/users', { params: { pageSize: 1 } }),
-        api.get('/tickets', { params: { pageSize: 1, status: 'open' } })
+        api.get('/tickets', { params: { pageSize: 1, status: 'open' } }),
       ]);
 
       const totalDevices = devicesRes.total || 0;
@@ -606,7 +672,7 @@ function Dashboard() {
       if (totalDevices > 0) {
         try {
           const faultRes = await api.get('/devices', {
-            params: { status: 'fault', pageSize: 1 }
+            params: { status: 'fault', pageSize: 1 },
           });
           faultDevices = faultRes.total || 0;
         } catch (error) {
@@ -625,8 +691,11 @@ function Dashboard() {
         faultDevices,
         deviceGrowth: 2.5,
         faultTrend: -12.3,
-        onlineRate: totalDevices > 0 ? ((totalDevices - faultDevices) / totalDevices * 100).toFixed(1) : 100,
-        powerUsage: Math.floor(Math.random() * 5000) + 2000
+        onlineRate:
+          totalDevices > 0
+            ? (((totalDevices - faultDevices) / totalDevices) * 100).toFixed(1)
+            : 100,
+        powerUsage: Math.floor(Math.random() * 5000) + 2000,
       });
 
       setAnimatedKey(prev => prev + 1);
@@ -655,241 +724,390 @@ function Dashboard() {
     fetchStats();
   }, [fetchStats]);
 
-  const statCards = useMemo(() => [
-    {
-      key: 'devices',
-      xs: 12, sm: 12, md: 8, lg: 6, xl: 4,
-      icon: CloudServerOutlined,
-      color: designTokens.colors.primary.main,
-      statKey: 'totalDevices',
-      title: '总设备数',
-      trend: stats.deviceGrowth,
-      tagColor: 'blue',
-      delay: 0
-    },
-    {
-      key: 'racks',
-      xs: 12, sm: 12, md: 8, lg: 6, xl: 4,
-      icon: DatabaseOutlined,
-      color: designTokens.colors.purple.main,
-      statKey: 'totalRacks',
-      title: '总机柜数',
-      trend: 0,
-      tagColor: 'green',
-      customStatus: true,
-      delay: 1
-    },
-    {
-      key: 'rooms',
-      xs: 12, sm: 12, md: 8, lg: 6, xl: 4,
-      icon: HomeOutlined,
-      color: designTokens.colors.success.main,
-      statKey: 'totalRooms',
-      title: '总机房数',
-      trend: 0,
-      tagColor: 'green',
-      customStatus: true,
-      delay: 2
-    },
-    {
-      key: 'faults',
-      xs: 12, sm: 12, md: 8, lg: 6, xl: 4,
-      icon: WarningOutlined,
-      color: designTokens.colors.error.main,
-      statKey: 'faultDevices',
-      title: '故障设备',
-      trend: stats.faultTrend,
-      tagColor: 'red',
-      delay: 3
-    },
-    {
-      key: 'users',
-      xs: 12, sm: 12, md: 8, lg: 6, xl: 4,
-      icon: TeamOutlined,
-      color: designTokens.colors.cyan.main,
-      statKey: 'totalUsers',
-      title: '用户总数',
-      trend: 5.2,
-      tagColor: 'cyan',
-      delay: 4
-    },
-    {
-      key: 'tickets',
-      xs: 12, sm: 12, md: 8, lg: 6, xl: 4,
-      icon: BarChartOutlined,
-      color: '#fa8c16',
-      statKey: 'activeTickets',
-      title: '待处理工单',
-      trend: -8.5,
-      tagColor: 'orange',
-      delay: 5
-    }
-  ], [stats.deviceGrowth, stats.faultTrend]);
+  const statCards = useMemo(
+    () => [
+      {
+        key: 'devices',
+        xs: 12,
+        sm: 12,
+        md: 8,
+        lg: 6,
+        xl: 4,
+        icon: CloudServerOutlined,
+        color: designTokens.colors.primary.main,
+        statKey: 'totalDevices',
+        title: '总设备数',
+        trend: stats.deviceGrowth,
+        tagColor: 'blue',
+        delay: 0,
+      },
+      {
+        key: 'racks',
+        xs: 12,
+        sm: 12,
+        md: 8,
+        lg: 6,
+        xl: 4,
+        icon: DatabaseOutlined,
+        color: designTokens.colors.purple.main,
+        statKey: 'totalRacks',
+        title: '总机柜数',
+        trend: 0,
+        tagColor: 'green',
+        customStatus: true,
+        delay: 1,
+      },
+      {
+        key: 'rooms',
+        xs: 12,
+        sm: 12,
+        md: 8,
+        lg: 6,
+        xl: 4,
+        icon: HomeOutlined,
+        color: designTokens.colors.success.main,
+        statKey: 'totalRooms',
+        title: '总机房数',
+        trend: 0,
+        tagColor: 'green',
+        customStatus: true,
+        delay: 2,
+      },
+      {
+        key: 'faults',
+        xs: 12,
+        sm: 12,
+        md: 8,
+        lg: 6,
+        xl: 4,
+        icon: WarningOutlined,
+        color: designTokens.colors.error.main,
+        statKey: 'faultDevices',
+        title: '故障设备',
+        trend: stats.faultTrend,
+        tagColor: 'red',
+        delay: 3,
+      },
+      {
+        key: 'users',
+        xs: 12,
+        sm: 12,
+        md: 8,
+        lg: 6,
+        xl: 4,
+        icon: TeamOutlined,
+        color: designTokens.colors.cyan.main,
+        statKey: 'totalUsers',
+        title: '用户总数',
+        trend: 5.2,
+        tagColor: 'cyan',
+        delay: 4,
+      },
+      {
+        key: 'tickets',
+        xs: 12,
+        sm: 12,
+        md: 8,
+        lg: 6,
+        xl: 4,
+        icon: BarChartOutlined,
+        color: '#fa8c16',
+        statKey: 'activeTickets',
+        title: '待处理工单',
+        trend: -8.5,
+        tagColor: 'orange',
+        delay: 5,
+      },
+    ],
+    [stats.deviceGrowth, stats.faultTrend]
+  );
 
-  const renderStatCard = useCallback((config) => {
-    const { icon: Icon, color, statKey, title, trend, tagColor, customStatus, xs, sm, lg, xl, delay } = config;
-    const colProps = { xs, sm, lg, xl };
-    const cardStyle = {
-      ...createStatCardStyle(color),
-      ...(hoveredCard === statKey ? { transform: 'translateY(-6px)', boxShadow: designTokens.shadows.hover } : {}),
-      animationDelay: `${delay * 0.1}s`
-    };
+  const renderStatCard = useCallback(
+    config => {
+      const {
+        icon: Icon,
+        color,
+        statKey,
+        title,
+        trend,
+        tagColor,
+        customStatus,
+        xs,
+        sm,
+        lg,
+        xl,
+        delay,
+      } = config;
+      const colProps = { xs, sm, lg, xl };
+      const cardStyle = {
+        ...createStatCardStyle(color),
+        ...(hoveredCard === statKey
+          ? { transform: 'translateY(-6px)', boxShadow: designTokens.shadows.hover }
+          : {}),
+        animationDelay: `${delay * 0.1}s`,
+      };
 
-    return (
-      <Col key={statKey} {...colProps}>
-        <Card
-          style={cardStyle}
-          onMouseEnter={() => setHoveredCard(statKey)}
-          onMouseLeave={() => setHoveredCard(null)}
-          styles={{ body: { padding: 'clamp(16px, 3vw, 24px)' } }}
-        >
-          <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
-            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '8px' }}>
-              <span style={{
-                fontSize: 'clamp(0.75rem, 2vw, 0.9rem)',
-                fontWeight: '600',
-                color: designTokens.colors.text.secondary,
-                whiteSpace: 'nowrap',
-                overflow: 'hidden',
-                textOverflow: 'ellipsis',
-                flex: 1
-              }}>
-                {title}
-              </span>
-              <div style={createStatIconContainer(color)}>
-                <Icon style={{ color }} />
+      return (
+        <Col key={statKey} {...colProps}>
+          <Card
+            style={cardStyle}
+            onMouseEnter={() => setHoveredCard(statKey)}
+            onMouseLeave={() => setHoveredCard(null)}
+            styles={{ body: { padding: 'clamp(16px, 3vw, 24px)' } }}
+          >
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+              <div
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
+                  gap: '8px',
+                }}
+              >
+                <span
+                  style={{
+                    fontSize: 'clamp(0.75rem, 2vw, 0.9rem)',
+                    fontWeight: '600',
+                    color: designTokens.colors.text.secondary,
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    flex: 1,
+                  }}
+                >
+                  {title}
+                </span>
+                <div style={createStatIconContainer(color)}>
+                  <Icon style={{ color }} />
+                </div>
               </div>
-            </div>
-            <div className="stat-value" style={{
-              fontSize: 'clamp(1.6rem, 4vw, 2.2rem)',
-              fontWeight: '700',
-              color: color,
-              lineHeight: 1,
-              whiteSpace: 'nowrap'
-            }}>
-              {loading ? (
-                <Spin size="small" />
+              <div
+                className="stat-value"
+                style={{
+                  fontSize: 'clamp(1.6rem, 4vw, 2.2rem)',
+                  fontWeight: '700',
+                  color: color,
+                  lineHeight: 1,
+                  whiteSpace: 'nowrap',
+                }}
+              >
+                {loading ? (
+                  <Spin size="small" />
+                ) : (
+                  <AnimatedCounter key={`${animatedKey}-${statKey}`} value={stats[statKey]} />
+                )}
+              </div>
+              {customStatus ? (
+                statKey === 'totalRacks' ? (
+                  <div
+                    style={{
+                      display: 'flex',
+                      alignItems: 'center',
+                      fontSize: 'clamp(0.7rem, 1.8vw, 0.85rem)',
+                      color: designTokens.colors.success.main,
+                      whiteSpace: 'nowrap',
+                    }}
+                  >
+                    <span
+                      style={{
+                        width: '6px',
+                        height: '6px',
+                        background: designTokens.colors.success.main,
+                        borderRadius: '50%',
+                        marginRight: '6px',
+                        boxShadow: '0 0 6px rgba(82, 196, 26, 0.5)',
+                        flexShrink: 0,
+                      }}
+                    />
+                    <span>正常运行中</span>
+                  </div>
+                ) : (
+                  <div
+                    style={{
+                      display: 'flex',
+                      alignItems: 'center',
+                      fontSize: 'clamp(0.7rem, 1.8vw, 0.85rem)',
+                      color: designTokens.colors.success.main,
+                      whiteSpace: 'nowrap',
+                    }}
+                  >
+                    <span
+                      style={{
+                        width: '6px',
+                        height: '6px',
+                        background: designTokens.colors.success.main,
+                        borderRadius: '50%',
+                        marginRight: '6px',
+                        boxShadow: '0 0 6px rgba(82, 196, 26, 0.5)',
+                        flexShrink: 0,
+                      }}
+                    />
+                    <span>全部在线</span>
+                  </div>
+                )
               ) : (
-                <AnimatedCounter key={`${animatedKey}-${statKey}`} value={stats[statKey]} />
+                <div
+                  style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    fontSize: 'clamp(0.7rem, 1.8vw, 0.875rem)',
+                    fontWeight: '500',
+                    color:
+                      trend > 0 ? designTokens.colors.success.main : designTokens.colors.error.main,
+                    flexWrap: 'wrap',
+                    gap: '4px',
+                  }}
+                >
+                  {trend > 0 ? (
+                    <ArrowUpOutlined style={{ fontSize: '0.75rem' }} />
+                  ) : (
+                    <ArrowDownOutlined style={{ fontSize: '0.75rem' }} />
+                  )}
+                  <span>{Math.abs(trend)}%</span>
+                  <Tag
+                    color={tagColor}
+                    style={{
+                      fontSize: 'clamp(0.6rem, 1.5vw, 0.75rem)',
+                      borderRadius: '4px',
+                      margin: 0,
+                      padding: '0 4px',
+                      lineHeight: '1.4',
+                    }}
+                  >
+                    环比
+                  </Tag>
+                </div>
               )}
             </div>
-            {customStatus ? (
-              statKey === 'totalRacks' ? (
-                <div style={{ display: 'flex', alignItems: 'center', fontSize: 'clamp(0.7rem, 1.8vw, 0.85rem)', color: designTokens.colors.success.main, whiteSpace: 'nowrap' }}>
-                  <span style={{
-                    width: '6px',
-                    height: '6px',
-                    background: designTokens.colors.success.main,
-                    borderRadius: '50%',
-                    marginRight: '6px',
-                    boxShadow: '0 0 6px rgba(82, 196, 26, 0.5)',
-                    flexShrink: 0
-                  }} />
-                  <span>正常运行中</span>
-                </div>
-              ) : (
-                <div style={{ display: 'flex', alignItems: 'center', fontSize: 'clamp(0.7rem, 1.8vw, 0.85rem)', color: designTokens.colors.success.main, whiteSpace: 'nowrap' }}>
-                  <span style={{
-                    width: '6px',
-                    height: '6px',
-                    background: designTokens.colors.success.main,
-                    borderRadius: '50%',
-                    marginRight: '6px',
-                    boxShadow: '0 0 6px rgba(82, 196, 26, 0.5)',
-                    flexShrink: 0
-                  }} />
-                  <span>全部在线</span>
-                </div>
-              )
-            ) : (
-              <div style={{
-                display: 'flex',
-                alignItems: 'center',
-                fontSize: 'clamp(0.7rem, 1.8vw, 0.875rem)',
-                fontWeight: '500',
-                color: trend > 0 ? designTokens.colors.success.main : designTokens.colors.error.main,
-                flexWrap: 'wrap',
-                gap: '4px'
-              }}>
-                {trend > 0 ? <ArrowUpOutlined style={{ fontSize: '0.75rem' }} /> : <ArrowDownOutlined style={{ fontSize: '0.75rem' }} />}
-                <span>{Math.abs(trend)}%</span>
-                <Tag color={tagColor} style={{ fontSize: 'clamp(0.6rem, 1.5vw, 0.75rem)', borderRadius: '4px', margin: 0, padding: '0 4px', lineHeight: '1.4' }}>环比</Tag>
-              </div>
-            )}
-          </div>
-        </Card>
-      </Col>
-    );
-  }, [stats, loading, hoveredCard, animatedKey]);
+          </Card>
+        </Col>
+      );
+    },
+    [stats, loading, hoveredCard, animatedKey]
+  );
 
-  const navButtons = useMemo(() => navButtonsData.map(({ key, icon: Icon, text, color }) => (
-    <div
-      key={key}
-      className="nav-button"
-      style={{
-        ...createNavButtonStyle(color),
-        ...(hoveredCard === `nav-${key}` ? {
-          transform: 'translateY(-4px)',
-          boxShadow: designTokens.shadows.large,
-          borderColor: color
-        } : {}),
-        animationDelay: `${navButtonsData.findIndex(b => b.key === key) * 0.1}s`
-      }}
-      onMouseEnter={(e) => handleNavHover(e, true, `nav-${key}`)}
-      onMouseLeave={(e) => handleNavHover(e, false, `nav-${key}`)}
-    >
-      <div className="nav-icon" style={createNavIconContainer(color)}>
-        <Icon style={{ color, fontSize: 'clamp(20px, 5vw, 28px)' }} />
-      </div>
-      <span className="nav-text" style={navTextStyle}>{text}</span>
-    </div>
-  )), [hoveredCard]);
-
-  const quickStats = useMemo(() => [
-    { icon: LineChartOutlined, label: '在线率', value: `${stats.onlineRate}%`, color: designTokens.colors.success.main },
-    { icon: SafetyOutlined, label: '安全等级', value: 'A级', color: designTokens.colors.primary.main },
-    { icon: ThunderboltOutlined, label: '功率使用', value: `${stats.powerUsage}W`, color: designTokens.colors.warning.main }
-  ], [stats.onlineRate, stats.powerUsage]);
-
-  const deviceTrendData = useMemo(() => [
-    { label: '周一', value: 45, color: designTokens.colors.primary.main },
-    { label: '周二', value: 52, color: designTokens.colors.primary.main },
-    { label: '周三', value: 48, color: designTokens.colors.primary.main },
-    { label: '周四', value: 60, color: designTokens.colors.success.main },
-    { label: '周五', value: 55, color: designTokens.colors.success.main },
-    { label: '周六', value: 42, color: designTokens.colors.warning.main },
-    { label: '周日', value: 58, color: designTokens.colors.primary.main }
-  ], []);
-
-  const systemInfo = useMemo(() => (
-    <div style={systemInfoStyle}>
-      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: '16px' }}>
-        <div>
-          <p style={{ margin: '0', fontSize: '0.9rem', color: designTokens.colors.text.primary, fontWeight: '600' }}>
-            <strong>系统版本：</strong> v1.0.0
-          </p>
-          <p style={{ margin: '4px 0 0 0', fontSize: '0.85rem', color: designTokens.colors.text.secondary }}>
-            <strong>最后更新：</strong>{new Date().toLocaleDateString()}
-          </p>
-        </div>
-        <Button
-          type="primary"
-          icon={<ReloadOutlined spin={isRefreshing} />}
-          size="small"
-          onClick={handleRefresh}
-          loading={isRefreshing}
+  const navButtons = useMemo(
+    () =>
+      navButtonsData.map(({ key, icon: Icon, text, color }) => (
+        <div
+          key={key}
+          className="nav-button"
           style={{
-            background: designTokens.colors.primary.gradient,
-            border: 'none',
-            borderRadius: '8px',
-            boxShadow: '0 4px 12px rgba(24, 144, 255, 0.3)'
+            ...createNavButtonStyle(color),
+            ...(hoveredCard === `nav-${key}`
+              ? {
+                  transform: 'translateY(-4px)',
+                  boxShadow: designTokens.shadows.large,
+                  borderColor: color,
+                }
+              : {}),
+            animationDelay: `${navButtonsData.findIndex(b => b.key === key) * 0.1}s`,
+          }}
+          onMouseEnter={e => handleNavHover(e, true, `nav-${key}`)}
+          onMouseLeave={e => handleNavHover(e, false, `nav-${key}`)}
+        >
+          <div className="nav-icon" style={createNavIconContainer(color)}>
+            <Icon style={{ color, fontSize: 'clamp(20px, 5vw, 28px)' }} />
+          </div>
+          <span className="nav-text" style={navTextStyle}>
+            {text}
+          </span>
+        </div>
+      )),
+    [hoveredCard]
+  );
+
+  const quickStats = useMemo(
+    () => [
+      {
+        icon: LineChartOutlined,
+        label: '在线率',
+        value: `${stats.onlineRate}%`,
+        color: designTokens.colors.success.main,
+      },
+      {
+        icon: SafetyOutlined,
+        label: '安全等级',
+        value: 'A级',
+        color: designTokens.colors.primary.main,
+      },
+      {
+        icon: ThunderboltOutlined,
+        label: '功率使用',
+        value: `${stats.powerUsage}W`,
+        color: designTokens.colors.warning.main,
+      },
+    ],
+    [stats.onlineRate, stats.powerUsage]
+  );
+
+  const deviceTrendData = useMemo(
+    () => [
+      { label: '周一', value: 45, color: designTokens.colors.primary.main },
+      { label: '周二', value: 52, color: designTokens.colors.primary.main },
+      { label: '周三', value: 48, color: designTokens.colors.primary.main },
+      { label: '周四', value: 60, color: designTokens.colors.success.main },
+      { label: '周五', value: 55, color: designTokens.colors.success.main },
+      { label: '周六', value: 42, color: designTokens.colors.warning.main },
+      { label: '周日', value: 58, color: designTokens.colors.primary.main },
+    ],
+    []
+  );
+
+  const systemInfo = useMemo(
+    () => (
+      <div style={systemInfoStyle}>
+        <div
+          style={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            flexWrap: 'wrap',
+            gap: '16px',
           }}
         >
-          刷新数据
-        </Button>
+          <div>
+            <p
+              style={{
+                margin: '0',
+                fontSize: '0.9rem',
+                color: designTokens.colors.text.primary,
+                fontWeight: '600',
+              }}
+            >
+              <strong>系统版本：</strong> v1.0.0
+            </p>
+            <p
+              style={{
+                margin: '4px 0 0 0',
+                fontSize: '0.85rem',
+                color: designTokens.colors.text.secondary,
+              }}
+            >
+              <strong>最后更新：</strong>
+              {new Date().toLocaleDateString()}
+            </p>
+          </div>
+          <Button
+            type="primary"
+            icon={<ReloadOutlined spin={isRefreshing} />}
+            size="small"
+            onClick={handleRefresh}
+            loading={isRefreshing}
+            style={{
+              background: designTokens.colors.primary.gradient,
+              border: 'none',
+              borderRadius: '8px',
+              boxShadow: '0 4px 12px rgba(24, 144, 255, 0.3)',
+            }}
+          >
+            刷新数据
+          </Button>
+        </div>
       </div>
-    </div>
-  ), [handleRefresh, isRefreshing]);
+    ),
+    [handleRefresh, isRefreshing]
+  );
 
   const styles = `
     @keyframes fadeInDown {
@@ -923,7 +1141,9 @@ function Dashboard() {
             <DashboardOutlined />
             IDC设备管理系统
           </h1>
-          <p style={subtitleStyle} className="dashboard-subtitle">实时监控 · 智能管理 · 高效运维</p>
+          <p style={subtitleStyle} className="dashboard-subtitle">
+            实时监控 · 智能管理 · 高效运维
+          </p>
         </div>
 
         <Row gutter={[24, 24]} style={{ marginBottom: '32px' }}>
@@ -934,16 +1154,27 @@ function Dashboard() {
           <Col xs={24} md={8}>
             <Card style={progressCardStyle}>
               <div style={{ padding: '20px' }}>
-                <Title level={5} style={{ margin: '0 0 20px 0', color: designTokens.colors.text.primary }}>
+                <Title
+                  level={5}
+                  style={{ margin: '0 0 20px 0', color: designTokens.colors.text.primary }}
+                >
                   设备状态分布
                 </Title>
                 <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                   <div style={pieChartStyle}>
                     <div style={pieChartInner}>
-                      <span style={{ fontSize: '1.5rem', fontWeight: '700', color: designTokens.colors.text.primary }}>
+                      <span
+                        style={{
+                          fontSize: '1.5rem',
+                          fontWeight: '700',
+                          color: designTokens.colors.text.primary,
+                        }}
+                      >
                         {stats.totalDevices}
                       </span>
-                      <span style={{ fontSize: '0.75rem', color: designTokens.colors.text.secondary }}>
+                      <span
+                        style={{ fontSize: '0.75rem', color: designTokens.colors.text.secondary }}
+                      >
                         设备总数
                       </span>
                     </div>
@@ -957,10 +1188,20 @@ function Dashboard() {
           <Col xs={24} md={8}>
             <Card style={progressCardStyle}>
               <div style={{ padding: '20px' }}>
-                <Title level={5} style={{ margin: '0 0 20px 0', color: designTokens.colors.text.primary }}>
+                <Title
+                  level={5}
+                  style={{ margin: '0 0 20px 0', color: designTokens.colors.text.primary }}
+                >
                   系统健康指标
                 </Title>
-                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '24px' }}>
+                <div
+                  style={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    gap: '24px',
+                  }}
+                >
                   <CircularProgress
                     percentage={parseFloat(stats.onlineRate)}
                     size={140}
@@ -977,13 +1218,23 @@ function Dashboard() {
           <Col xs={24} md={8}>
             <Card style={progressCardStyle}>
               <div style={{ padding: '20px' }}>
-                <Title level={5} style={{ margin: '0 0 20px 0', color: designTokens.colors.text.primary }}>
+                <Title
+                  level={5}
+                  style={{ margin: '0 0 20px 0', color: designTokens.colors.text.primary }}
+                >
                   周设备趋势
                 </Title>
                 <div style={chartContainerStyle}>
                   <DeviceTrendChart data={deviceTrendData} />
                 </div>
-                <div style={{ marginTop: '16px', display: 'flex', justifyContent: 'center', gap: '16px' }}>
+                <div
+                  style={{
+                    marginTop: '16px',
+                    display: 'flex',
+                    justifyContent: 'center',
+                    gap: '16px',
+                  }}
+                >
                   <Text style={{ fontSize: '0.75rem', color: designTokens.colors.text.tertiary }}>
                     周一 至 周日 设备变化趋势
                   </Text>
@@ -998,52 +1249,82 @@ function Dashboard() {
             <div style={{ padding: '24px' }}>
               <Row gutter={[24, 24]}>
                 <Col xs={24} md={16}>
-                  <div className="welcome-banner" style={{
-                    background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
-                    borderRadius: designTokens.borderRadius.medium,
-                    padding: '28px',
-                    color: '#fff',
-                    marginBottom: '24px',
-                    animation: 'fadeInUp 0.6s ease-out 0.4s backwards'
-                  }}>
-                    <h2 style={{
-                      fontSize: '1.4rem',
-                      fontWeight: '600',
-                      margin: '0 0 8px 0',
-                      color: '#fff'
-                    }}>
+                  <div
+                    className="welcome-banner"
+                    style={{
+                      background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+                      borderRadius: designTokens.borderRadius.medium,
+                      padding: '28px',
+                      color: '#fff',
+                      marginBottom: '24px',
+                      animation: 'fadeInUp 0.6s ease-out 0.4s backwards',
+                    }}
+                  >
+                    <h2
+                      style={{
+                        fontSize: '1.4rem',
+                        fontWeight: '600',
+                        margin: '0 0 8px 0',
+                        color: '#fff',
+                      }}
+                    >
                       欢迎使用IDC设备管理系统
                     </h2>
-                    <p style={{
-                      fontSize: '1rem',
-                      margin: '0',
-                      opacity: '0.9',
-                      color: '#fff'
-                    }}>
+                    <p
+                      style={{
+                        fontSize: '1rem',
+                        margin: '0',
+                        opacity: '0.9',
+                        color: '#fff',
+                      }}
+                    >
                       专业的机房设备管理解决方案，提供全方位的设备监控和管理能力
                     </p>
                   </div>
 
-                  <div style={{ ...quickStatsStyle, marginBottom: '0', animation: 'fadeInUp 0.6s ease-out 0.5s backwards' }}>
+                  <div
+                    style={{
+                      ...quickStatsStyle,
+                      marginBottom: '0',
+                      animation: 'fadeInUp 0.6s ease-out 0.5s backwards',
+                    }}
+                  >
                     {quickStats.map((stat, index) => (
                       <div key={index} style={quickStatItemStyle}>
-                        <div style={{
-                          width: '48px',
-                          height: '48px',
-                          borderRadius: designTokens.borderRadius.medium,
-                          background: `linear-gradient(135deg, ${stat.color}20 0%, ${stat.color}10 100%)`,
-                          display: 'flex',
-                          alignItems: 'center',
-                          justifyContent: 'center',
-                          fontSize: '24px',
-                          color: stat.color,
-                          boxShadow: `0 4px 12px ${stat.color}20`
-                        }}>
+                        <div
+                          style={{
+                            width: '48px',
+                            height: '48px',
+                            borderRadius: designTokens.borderRadius.medium,
+                            background: `linear-gradient(135deg, ${stat.color}20 0%, ${stat.color}10 100%)`,
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            fontSize: '24px',
+                            color: stat.color,
+                            boxShadow: `0 4px 12px ${stat.color}20`,
+                          }}
+                        >
                           <stat.icon />
                         </div>
                         <div>
-                          <Text style={{ color: designTokens.colors.text.secondary, fontSize: '0.85rem' }}>{stat.label}</Text>
-                          <div style={{ fontSize: '1.2rem', fontWeight: '700', color: designTokens.colors.text.primary }}>{stat.value}</div>
+                          <Text
+                            style={{
+                              color: designTokens.colors.text.secondary,
+                              fontSize: '0.85rem',
+                            }}
+                          >
+                            {stat.label}
+                          </Text>
+                          <div
+                            style={{
+                              fontSize: '1.2rem',
+                              fontWeight: '700',
+                              color: designTokens.colors.text.primary,
+                            }}
+                          >
+                            {stat.value}
+                          </div>
                         </div>
                       </div>
                     ))}
@@ -1057,7 +1338,13 @@ function Dashboard() {
                 </Col>
               </Row>
 
-              <div className="nav-grid" style={{ ...navigationGridStyle, animation: 'fadeInUp 0.6s ease-out 0.6s backwards' }}>
+              <div
+                className="nav-grid"
+                style={{
+                  ...navigationGridStyle,
+                  animation: 'fadeInUp 0.6s ease-out 0.6s backwards',
+                }}
+              >
                 {navButtons}
               </div>
             </div>
diff --git a/frontend/src/pages/DeviceFieldManagement.jsx b/frontend/src/pages/DeviceFieldManagement.jsx
index 676a65b..987ea68 100644
--- a/frontend/src/pages/DeviceFieldManagement.jsx
+++ b/frontend/src/pages/DeviceFieldManagement.jsx
@@ -1,6 +1,32 @@
 import React, { useState, useEffect, useMemo } from 'react';
-import { Table, Button, Modal, Form, Input, Select, message, Card, Space, InputNumber, Switch, Tag, Statistic, Tooltip } from 'antd';
-import { PlusOutlined, EditOutlined, DeleteOutlined, AppstoreOutlined, FontSizeOutlined, NumberOutlined, CheckCircleOutlined, CalendarOutlined, FileTextOutlined, LockOutlined } from '@ant-design/icons';
+import {
+  Table,
+  Button,
+  Modal,
+  Form,
+  Input,
+  Select,
+  message,
+  Card,
+  Space,
+  InputNumber,
+  Switch,
+  Tag,
+  Statistic,
+  Tooltip,
+} from 'antd';
+import {
+  PlusOutlined,
+  EditOutlined,
+  DeleteOutlined,
+  AppstoreOutlined,
+  FontSizeOutlined,
+  NumberOutlined,
+  CheckCircleOutlined,
+  CalendarOutlined,
+  FileTextOutlined,
+  LockOutlined,
+} from '@ant-design/icons';
 import axios from 'axios';
 
 const { Option = Select.Option } = Select;
@@ -11,35 +37,35 @@ const designTokens = {
       main: '#667eea',
       gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
       light: '#8b9ff0',
-      dark: '#4f5db8'
+      dark: '#4f5db8',
     },
     success: {
       main: '#10b981',
-      gradient: 'linear-gradient(135deg, #10b981 0%, #059669 100%)'
+      gradient: 'linear-gradient(135deg, #10b981 0%, #059669 100%)',
     },
     warning: {
       main: '#f59e0b',
-      gradient: 'linear-gradient(135deg, #f59e0b 0%, #d97706 100%)'
+      gradient: 'linear-gradient(135deg, #f59e0b 0%, #d97706 100%)',
     },
     error: {
       main: '#ef4444',
-      gradient: 'linear-gradient(135deg, #ef4444 0%, #dc2626 100%)'
+      gradient: 'linear-gradient(135deg, #ef4444 0%, #dc2626 100%)',
     },
     text: {
       primary: '#1e293b',
       secondary: '#64748b',
       tertiary: '#94a3b8',
-      inverse: '#ffffff'
+      inverse: '#ffffff',
     },
     background: {
       primary: '#ffffff',
       secondary: '#f8fafc',
-      tertiary: '#f1f5f9'
+      tertiary: '#f1f5f9',
     },
     border: {
       light: '#e2e8f0',
       medium: '#cbd5e1',
-      dark: '#94a3b8'
+      dark: '#94a3b8',
     },
     fieldType: {
       string: '#3b82f6',
@@ -47,44 +73,44 @@ const designTokens = {
       boolean: '#f59e0b',
       select: '#8b5cf6',
       date: '#06b6d4',
-      textarea: '#64748b'
-    }
+      textarea: '#64748b',
+    },
   },
   shadows: {
     small: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
     medium: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)',
     large: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)',
-    glow: '0 0 20px rgba(102, 126, 234, 0.15)'
+    glow: '0 0 20px rgba(102, 126, 234, 0.15)',
   },
   borderRadius: {
     small: '6px',
     medium: '10px',
-    large: '16px'
+    large: '16px',
   },
   transitions: {
     fast: '150ms cubic-bezier(0.4, 0, 0.2, 1)',
-    normal: '300ms cubic-bezier(0.4, 0, 0.2, 1)'
+    normal: '300ms cubic-bezier(0.4, 0, 0.2, 1)',
   },
   spacing: {
     xs: '4px',
     sm: '8px',
     md: '16px',
     lg: '24px',
-    xl: '32px'
-  }
+    xl: '32px',
+  },
 };
 
 const pageContainerStyle = {
   minHeight: '100vh',
   background: designTokens.colors.background.secondary,
-  padding: designTokens.spacing.lg
+  padding: designTokens.spacing.lg,
 };
 
 const titleRowStyle = {
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'space-between',
-  marginBottom: designTokens.spacing.lg
+  marginBottom: designTokens.spacing.lg,
 };
 
 const titleStyle = {
@@ -93,7 +119,7 @@ const titleStyle = {
   gap: designTokens.spacing.sm,
   fontSize: '20px',
   fontWeight: '600',
-  color: designTokens.colors.text.primary
+  color: designTokens.colors.text.primary,
 };
 
 const actionButtonStyle = {
@@ -103,7 +129,7 @@ const actionButtonStyle = {
   fontSize: '13px',
   display: 'flex',
   alignItems: 'center',
-  gap: designTokens.spacing.xs
+  gap: designTokens.spacing.xs,
 };
 
 const primaryActionStyle = {
@@ -111,7 +137,7 @@ const primaryActionStyle = {
   background: designTokens.colors.primary.gradient,
   border: 'none',
   color: '#ffffff',
-  boxShadow: designTokens.shadows.small
+  boxShadow: designTokens.shadows.small,
 };
 
 const tableCardStyle = {
@@ -119,34 +145,34 @@ const tableCardStyle = {
   borderRadius: designTokens.borderRadius.large,
   boxShadow: designTokens.shadows.small,
   border: `1px solid ${designTokens.colors.border.light}`,
-  overflow: 'hidden'
+  overflow: 'hidden',
 };
 
 const tableStyle = {
-  background: designTokens.colors.background.primary
+  background: designTokens.colors.background.primary,
 };
 
 const titleIconStyle = {
-  color: designTokens.colors.primary.main
+  color: designTokens.colors.primary.main,
 };
 
 const modalTitleStyle = {
-  fontWeight: '600'
+  fontWeight: '600',
 };
 
 const formLabelStyle = {
-  fontWeight: '500'
+  fontWeight: '500',
 };
 
 const tableCellStyle = {
   fontWeight: '500',
-  color: designTokens.colors.text.primary
+  color: designTokens.colors.text.primary,
 };
 
 const typeTagStyle = {
   border: 'none',
   borderRadius: designTokens.borderRadius.small,
-  fontWeight: '500'
+  fontWeight: '500',
 };
 
 const orderBadgeStyle = {
@@ -154,44 +180,44 @@ const orderBadgeStyle = {
   padding: '2px 8px',
   borderRadius: designTokens.borderRadius.small,
   fontSize: '12px',
-  fontWeight: '500'
+  fontWeight: '500',
 };
 
 const editButtonStyle = {
   color: designTokens.colors.primary.main,
   height: '28px',
-  padding: '0 8px'
+  padding: '0 8px',
 };
 
 const deleteButtonStyle = {
   height: '28px',
-  padding: '0 8px'
+  padding: '0 8px',
 };
 
 const formRowStyle = {
   display: 'flex',
-  gap: designTokens.spacing.md
+  gap: designTokens.spacing.md,
 };
 
 const formItemFlexStyle = {
-  flex: 1
+  flex: 1,
 };
 
 const textAreaStyle = {
-  fontFamily: 'monospace'
+  fontFamily: 'monospace',
 };
 
 const modalBodyStyle = {
-  padding: designTokens.spacing.lg
+  padding: designTokens.spacing.lg,
 };
 
 const formActionsStyle = {
   marginBottom: 0,
-  textAlign: 'right'
+  textAlign: 'right',
 };
 
 const modalStyle = {
-  borderRadius: designTokens.borderRadius.large
+  borderRadius: designTokens.borderRadius.large,
 };
 
 const FIELD_TYPE_MAP = {
@@ -200,7 +226,7 @@ const FIELD_TYPE_MAP = {
   boolean: { text: '布尔值', color: designTokens.colors.fieldType.boolean },
   select: { text: '下拉选择', color: designTokens.colors.fieldType.select },
   date: { text: '日期', color: designTokens.colors.fieldType.date },
-  textarea: { text: '多行文本', color: designTokens.colors.fieldType.textarea }
+  textarea: { text: '多行文本', color: designTokens.colors.fieldType.textarea },
 };
 
 const FIELD_TYPE_OPTIONS = [
@@ -209,7 +235,7 @@ const FIELD_TYPE_OPTIONS = [
   { value: 'boolean', label: '布尔值' },
   { value: 'select', label: '下拉选择' },
   { value: 'date', label: '日期' },
-  { value: 'textarea', label: '多行文本' }
+  { value: 'textarea', label: '多行文本' },
 ];
 
 function DeviceFieldManagement() {
@@ -224,7 +250,7 @@ function DeviceFieldManagement() {
     pageSizeOptions: ['10', '20', '50', '100'],
     showSizeChanger: true,
     showQuickJumper: true,
-    showTotal: (total, range) => `第 ${range[0]}-${range[1]} 条 / 共 ${total} 条`
+    showTotal: (total, range) => `第 ${range[0]}-${range[1]} 条 / 共 ${total} 条`,
   });
 
   const fetchFields = async () => {
@@ -249,7 +275,7 @@ function DeviceFieldManagement() {
     if (field) {
       const fieldData = {
         ...field,
-        options: field.options ? JSON.stringify(field.options, null, 2) : ''
+        options: field.options ? JSON.stringify(field.options, null, 2) : '',
       };
       form.setFieldsValue(fieldData);
     } else {
@@ -263,11 +289,11 @@ function DeviceFieldManagement() {
     setEditingField(null);
   };
 
-  const handleSubmit = async (values) => {
+  const handleSubmit = async values => {
     try {
       const fieldData = {
         ...values,
-        options: values.options ? JSON.parse(values.options) : null
+        options: values.options ? JSON.parse(values.options) : null,
       };
 
       if (editingField) {
@@ -287,7 +313,7 @@ function DeviceFieldManagement() {
     }
   };
 
-  const handleDelete = async (fieldId) => {
+  const handleDelete = async fieldId => {
     Modal.confirm({
       title: '确认删除',
       content: '确定要删除这个字段吗？',
@@ -303,126 +329,149 @@ function DeviceFieldManagement() {
           message.error('字段删除失败');
           console.error('字段删除失败:', error);
         }
-      }
+      },
     });
   };
 
-  const getFieldTypeIcon = (type) => {
+  const getFieldTypeIcon = type => {
     const iconMap = {
       string: <FontSizeOutlined />,
       number: <NumberOutlined />,
       boolean: <CheckCircleOutlined />,
       select: <AppstoreOutlined />,
       date: <CalendarOutlined />,
-      textarea: <FileTextOutlined />
+      textarea: <FileTextOutlined />,
     };
     return iconMap[type] || <FontSizeOutlined />;
   };
 
-  const columns = useMemo(() => [
-    {
-      title: '字段名称',
-      dataIndex: 'fieldName',
-      key: 'fieldName',
-      width: 150,
-      render: (text, record) => (
-        <Space>
-          <span style={tableCellStyle}>{text}</span>
-          {record.isSystem && (
-            <Tooltip title="系统字段，不可删除">
-              <LockOutlined style={{ color: '#f59e0b', fontSize: '14px' }} />
-            </Tooltip>
-          )}
-        </Space>
-      )
-    },
-    {
-      title: '显示名称',
-      dataIndex: 'displayName',
-      key: 'displayName',
-      width: 120,
-    },
-    {
-      title: '字段类型',
-      dataIndex: 'fieldType',
-      key: 'fieldType',
-      width: 110,
-      render: (type) => {
-        const config = FIELD_TYPE_MAP[type] || { text: type, color: designTokens.colors.text.tertiary };
-        return (
-          <Tag style={{ ...typeTagStyle, background: `${config.color}15`, color: config.color }}>
-            {getFieldTypeIcon(type)}
-            <span style={{ marginLeft: '4px' }}>{config.text}</span>
-          </Tag>
-        );
-      }
-    },
-    {
-      title: '必填',
-      dataIndex: 'required',
-      key: 'required',
-      width: 80,
-      render: (required) => (
-        <span style={{
-          color: required ? designTokens.colors.success.main : designTokens.colors.text.tertiary,
-          ...tableCellStyle
-        }}>
-          {required ? '是' : '否'}
-        </span>
-      )
-    },
-    {
-      title: '可见',
-      dataIndex: 'visible',
-      key: 'visible',
-      width: 80,
-      render: (visible) => (
-        <span style={{
-          color: visible ? designTokens.colors.primary.main : designTokens.colors.text.tertiary,
-          ...tableCellStyle
-        }}>
-          {visible ? '是' : '否'}
-        </span>
-      )
-    },
-    {
-      title: '顺序',
-      dataIndex: 'order',
-      key: 'order',
-      width: 80,
-      render: (order) => <span style={orderBadgeStyle}>{order}</span>
-    },
-    {
-      title: '操作',
-      key: 'action',
-      width: 160,
-      fixed: 'right',
-      render: (_, record) => (
-        <Space size="small">
-          <Button type="text" icon={<EditOutlined />} onClick={() => showModal(record)} style={editButtonStyle}>
-            编辑
-          </Button>
-          {record.isSystem ? (
-            <Tooltip title="系统字段不可删除">
-              <Button 
-                type="text" 
-                danger 
-                icon={<DeleteOutlined />} 
-                disabled
-                style={{ ...deleteButtonStyle, opacity: 0.3, cursor: 'not-allowed' }}
+  const columns = useMemo(
+    () => [
+      {
+        title: '字段名称',
+        dataIndex: 'fieldName',
+        key: 'fieldName',
+        width: 150,
+        render: (text, record) => (
+          <Space>
+            <span style={tableCellStyle}>{text}</span>
+            {record.isSystem && (
+              <Tooltip title="系统字段，不可删除">
+                <LockOutlined style={{ color: '#f59e0b', fontSize: '14px' }} />
+              </Tooltip>
+            )}
+          </Space>
+        ),
+      },
+      {
+        title: '显示名称',
+        dataIndex: 'displayName',
+        key: 'displayName',
+        width: 120,
+      },
+      {
+        title: '字段类型',
+        dataIndex: 'fieldType',
+        key: 'fieldType',
+        width: 110,
+        render: type => {
+          const config = FIELD_TYPE_MAP[type] || {
+            text: type,
+            color: designTokens.colors.text.tertiary,
+          };
+          return (
+            <Tag style={{ ...typeTagStyle, background: `${config.color}15`, color: config.color }}>
+              {getFieldTypeIcon(type)}
+              <span style={{ marginLeft: '4px' }}>{config.text}</span>
+            </Tag>
+          );
+        },
+      },
+      {
+        title: '必填',
+        dataIndex: 'required',
+        key: 'required',
+        width: 80,
+        render: required => (
+          <span
+            style={{
+              color: required
+                ? designTokens.colors.success.main
+                : designTokens.colors.text.tertiary,
+              ...tableCellStyle,
+            }}
+          >
+            {required ? '是' : '否'}
+          </span>
+        ),
+      },
+      {
+        title: '可见',
+        dataIndex: 'visible',
+        key: 'visible',
+        width: 80,
+        render: visible => (
+          <span
+            style={{
+              color: visible ? designTokens.colors.primary.main : designTokens.colors.text.tertiary,
+              ...tableCellStyle,
+            }}
+          >
+            {visible ? '是' : '否'}
+          </span>
+        ),
+      },
+      {
+        title: '顺序',
+        dataIndex: 'order',
+        key: 'order',
+        width: 80,
+        render: order => <span style={orderBadgeStyle}>{order}</span>,
+      },
+      {
+        title: '操作',
+        key: 'action',
+        width: 160,
+        fixed: 'right',
+        render: (_, record) => (
+          <Space size="small">
+            <Button
+              type="text"
+              icon={<EditOutlined />}
+              onClick={() => showModal(record)}
+              style={editButtonStyle}
+            >
+              编辑
+            </Button>
+            {record.isSystem ? (
+              <Tooltip title="系统字段不可删除">
+                <Button
+                  type="text"
+                  danger
+                  icon={<DeleteOutlined />}
+                  disabled
+                  style={{ ...deleteButtonStyle, opacity: 0.3, cursor: 'not-allowed' }}
+                >
+                  删除
+                </Button>
+              </Tooltip>
+            ) : (
+              <Button
+                type="text"
+                danger
+                icon={<DeleteOutlined />}
+                onClick={() => handleDelete(record.fieldId)}
+                style={deleteButtonStyle}
               >
                 删除
               </Button>
-            </Tooltip>
-          ) : (
-            <Button type="text" danger icon={<DeleteOutlined />} onClick={() => handleDelete(record.fieldId)} style={deleteButtonStyle}>
-              删除
-            </Button>
-          )}
-        </Space>
-      ),
-    },
-  ], []);
+            )}
+          </Space>
+        ),
+      },
+    ],
+    []
+  );
 
   return (
     <div style={pageContainerStyle}>
@@ -431,7 +480,12 @@ function DeviceFieldManagement() {
           <AppstoreOutlined style={titleIconStyle} />
           设备字段管理
         </div>
-        <Button type="primary" icon={<PlusOutlined />} onClick={() => showModal()} style={primaryActionStyle}>
+        <Button
+          type="primary"
+          icon={<PlusOutlined />}
+          onClick={() => showModal()}
+          style={primaryActionStyle}
+        >
           添加字段
         </Button>
       </div>
@@ -443,11 +497,11 @@ function DeviceFieldManagement() {
           rowKey="fieldId"
           loading={loading}
           pagination={pagination}
-          onChange={(newPagination) => {
+          onChange={newPagination => {
             setPagination({
               ...pagination,
               current: newPagination.current,
-              pageSize: newPagination.pageSize
+              pageSize: newPagination.pageSize,
             });
           }}
           scroll={{ x: 900 }}
@@ -488,7 +542,9 @@ function DeviceFieldManagement() {
           >
             <Select placeholder="请选择字段类型">
               {FIELD_TYPE_OPTIONS.map(opt => (
-                <Option key={opt.value} value={opt.value}>{opt.label}</Option>
+                <Option key={opt.value} value={opt.value}>
+                  {opt.label}
+                </Option>
               ))}
             </Select>
           </Form.Item>
@@ -526,13 +582,19 @@ function DeviceFieldManagement() {
             label={<span style={formLabelStyle}>选项配置（JSON格式）</span>}
             tooltip="格式示例：[{value: 'option1', label: '选项1'}]，仅下拉选择类型需要配置"
           >
-            <Input.TextArea rows={3} placeholder="请输入JSON格式的选项配置，使用单引号" style={textAreaStyle} />
+            <Input.TextArea
+              rows={3}
+              placeholder="请输入JSON格式的选项配置，使用单引号"
+              style={textAreaStyle}
+            />
           </Form.Item>
 
           <Form.Item style={formActionsStyle}>
             <Space>
               <Button onClick={handleCancel}>取消</Button>
-              <Button type="primary" htmlType="submit">确定</Button>
+              <Button type="primary" htmlType="submit">
+                确定
+              </Button>
             </Space>
           </Form.Item>
         </Form>
diff --git a/frontend/src/pages/DeviceManagement.jsx b/frontend/src/pages/DeviceManagement.jsx
index c8b07c8..fc096e4 100644
--- a/frontend/src/pages/DeviceManagement.jsx
+++ b/frontend/src/pages/DeviceManagement.jsx
@@ -1,6 +1,43 @@
 import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
-import { Table, Button, Modal, Form, Input, Select, DatePicker, message, Card, Space, InputNumber, Switch, Upload, Progress, Checkbox, Spin, Dropdown, Tooltip } from 'antd';
-import { PlusOutlined, EditOutlined, DeleteOutlined, SearchOutlined, UploadOutlined, DownloadOutlined, SettingOutlined, UndoOutlined, CloudServerOutlined, SafetyOutlined, DatabaseOutlined, AppstoreOutlined, MoreOutlined, ReloadOutlined, ExportOutlined, FileExcelOutlined, SwapOutlined } from '@ant-design/icons';
+import {
+  Table,
+  Button,
+  Modal,
+  Form,
+  Input,
+  Select,
+  DatePicker,
+  message,
+  Card,
+  Space,
+  InputNumber,
+  Switch,
+  Upload,
+  Progress,
+  Checkbox,
+  Spin,
+  Dropdown,
+  Tooltip,
+} from 'antd';
+import {
+  PlusOutlined,
+  EditOutlined,
+  DeleteOutlined,
+  SearchOutlined,
+  UploadOutlined,
+  DownloadOutlined,
+  SettingOutlined,
+  UndoOutlined,
+  CloudServerOutlined,
+  SafetyOutlined,
+  DatabaseOutlined,
+  AppstoreOutlined,
+  MoreOutlined,
+  ReloadOutlined,
+  ExportOutlined,
+  FileExcelOutlined,
+  SwapOutlined,
+} from '@ant-design/icons';
 import axios from 'axios';
 import dayjs from 'dayjs';
 import { designTokens } from '../config/theme';
@@ -18,7 +55,7 @@ import {
   DEVICE_TYPE_OPTIONS,
   DEVICE_STATUS_OPTIONS,
   COLUMN_WIDTH_CONFIG,
-  EMPTY_STATE_CONFIG
+  EMPTY_STATE_CONFIG,
 } from '../constants/deviceManagementConstants';
 import {
   pageContainerStyle,
@@ -50,7 +87,7 @@ import {
   importModalStyles,
   detailModalStyles,
   exportModalStyles,
-  generateGlobalStyles
+  generateGlobalStyles,
 } from '../styles/deviceManagementStyles';
 
 const { Option } = Select;
@@ -59,49 +96,49 @@ const { RangePicker } = DatePicker;
 // 防抖 Hook
 function useDebounce(value, delay = DEBOUNCE_DELAY) {
   const [debouncedValue, setDebouncedValue] = useState(value);
-  
+
   useEffect(() => {
     const handler = setTimeout(() => {
       setDebouncedValue(value);
     }, delay);
-    
+
     return () => {
       clearTimeout(handler);
     };
   }, [value, delay]);
-  
+
   return debouncedValue;
 }
 
 // 工具函数提取到组件外部，避免每次渲染重复创建
-const getStatusConfig = (status) => {
+const getStatusConfig = status => {
   const statusMap = {
     running: { text: '运行中', color: 'green' },
     maintenance: { text: '维护中', color: 'orange' },
     offline: { text: '离线', color: 'gray' },
-    fault: { text: '故障', color: 'red' }
+    fault: { text: '故障', color: 'red' },
   };
   return statusMap[status] || { text: status, color: 'black' };
 };
 
-const getTypeLabel = (type) => {
+const getTypeLabel = type => {
   const typeMap = {
     server: '服务器',
     switch: '交换机',
     router: '路由器',
     storage: '存储设备',
-    other: '其他设备'
+    other: '其他设备',
   };
   return typeMap[type] || type;
 };
 
-const getDeviceTypeIcon = (type) => {
+const getDeviceTypeIcon = type => {
   const iconMap = {
     server: <CloudServerOutlined style={{ color: '#1890ff' }} />,
     switch: <SwapOutlined style={{ color: '#52c41a' }} />,
     router: <SafetyOutlined style={{ color: '#faad14' }} />,
     storage: <DatabaseOutlined style={{ color: '#722ed1' }} />,
-    other: <AppstoreOutlined style={{ color: '#8c8c8c' }} />
+    other: <AppstoreOutlined style={{ color: '#8c8c8c' }} />,
   };
   return iconMap[type] || <AppstoreOutlined style={{ color: '#8c8c8c' }} />;
 };
@@ -109,89 +146,95 @@ const getDeviceTypeIcon = (type) => {
 // 格式化日期
 const formatDate = (date, fieldName) => {
   if (!date) return '';
-  
+
   const dateObj = new Date(date);
   const formattedDate = dateObj.toLocaleDateString('zh-CN');
-  
+
   if (fieldName === 'warrantyExpiry') {
     const today = new Date();
     today.setHours(0, 0, 0, 0);
     dateObj.setHours(0, 0, 0, 0);
-    
+
     if (dateObj < today) {
       return <span style={{ color: '#d93025', fontWeight: 'bold' }}>{formattedDate}</span>;
     }
   }
-  
+
   return formattedDate;
 };
 
 // 使用从常量文件导入的默认设备字段配置
 const defaultDeviceFields = DEFAULT_DEVICE_FIELDS;
-  
-  // 简单的可调整列宽的表头组件
-  const ResizableTitle = (props) => {
-    const { children, onResize, width, ...restProps } = props;
-    
-    const handleMouseDown = (e) => {
-      if (!onResize) return;
-      
-      e.preventDefault();
-      e.stopPropagation();
-      
-      const th = e.currentTarget.closest('th');
-      if (!th) return;
-      
-      const startWidth = th.offsetWidth;
-      const startX = e.clientX;
-      
-      const handleMouseMove = (moveEvent) => {
-        const diff = moveEvent.clientX - startX;
-        const newWidth = Math.max(50, startWidth + diff);
-        onResize(newWidth);
-      };
-      
-      const handleMouseUp = () => {
-        document.removeEventListener('mousemove', handleMouseMove);
-        document.removeEventListener('mouseup', handleMouseUp);
-      };
-      
-      document.addEventListener('mousemove', handleMouseMove);
-      document.addEventListener('mouseup', handleMouseUp);
+
+// 简单的可调整列宽的表头组件
+const ResizableTitle = props => {
+  const { children, onResize, width, ...restProps } = props;
+
+  const handleMouseDown = e => {
+    if (!onResize) return;
+
+    e.preventDefault();
+    e.stopPropagation();
+
+    const th = e.currentTarget.closest('th');
+    if (!th) return;
+
+    const startWidth = th.offsetWidth;
+    const startX = e.clientX;
+
+    const handleMouseMove = moveEvent => {
+      const diff = moveEvent.clientX - startX;
+      const newWidth = Math.max(50, startWidth + diff);
+      onResize(newWidth);
     };
-    
-    return (
-      <th {...restProps} style={{ position: 'relative' }}>
-        <div style={{ 
-          display: 'flex', 
-          alignItems: 'center', 
+
+    const handleMouseUp = () => {
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+    };
+
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+  };
+
+  return (
+    <th {...restProps} style={{ position: 'relative' }}>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
           justifyContent: 'space-between',
-          width: '100%'
-        }}>
-          <span style={{ 
+          width: '100%',
+        }}
+      >
+        <span
+          style={{
             flex: 1,
             overflow: 'hidden',
             textOverflow: 'ellipsis',
-            whiteSpace: 'nowrap'
-          }}>{children}</span>
-          {onResize && (
-            <div
-              onMouseDown={handleMouseDown}
-              style={{
-                width: '8px',
-                height: '20px',
-                backgroundColor: '#e0e0e0',
-                borderRadius: '4px',
-                cursor: 'col-resize',
-                marginLeft: '8px',
-                flexShrink: 0
-              }}
-            />
-          )}
-        </div>
-      </th>
-    );
-  };
+            whiteSpace: 'nowrap',
+          }}
+        >
+          {children}
+        </span>
+        {onResize && (
+          <div
+            onMouseDown={handleMouseDown}
+            style={{
+              width: '8px',
+              height: '20px',
+              backgroundColor: '#e0e0e0',
+              borderRadius: '4px',
+              cursor: 'col-resize',
+              marginLeft: '8px',
+              flexShrink: 0,
+            }}
+          />
+        )}
+      </div>
+    </th>
+  );
+};
 
 function DeviceManagement() {
   const [devices, setDevices] = useState([]);
@@ -208,15 +251,15 @@ function DeviceManagement() {
   const [type, setType] = useState('all');
   const [searchForm] = Form.useForm();
   // 分页状态 - 使用常量配置
-  const [pagination, setPagination] = useState({ 
-    current: 1, 
-    pageSize: PAGINATION_CONFIG.defaultPageSize, 
+  const [pagination, setPagination] = useState({
+    current: 1,
+    pageSize: PAGINATION_CONFIG.defaultPageSize,
     total: 0,
     pageSizeOptions: PAGINATION_CONFIG.pageSizeOptions,
     showSizeChanger: PAGINATION_CONFIG.showSizeChanger,
-    showTotal: PAGINATION_CONFIG.showTotal
+    showTotal: PAGINATION_CONFIG.showTotal,
   });
-  
+
   // 设备字段配置
   const [deviceFields, setDeviceFields] = useState([]);
   const [loadingFields, setLoadingFields] = useState(true);
@@ -236,12 +279,12 @@ function DeviceManagement() {
 
   // 字段配置模态框
   const [fieldConfigModalVisible, setFieldConfigModalVisible] = useState(false);
-  
+
   // 批量状态变更模态框
   const [batchStatusModalVisible, setBatchStatusModalVisible] = useState(false);
   const [batchStatusLoading, setBatchStatusLoading] = useState(false);
   const [batchStatusForm] = Form.useForm();
-  
+
   // 导出选项模态框
   const [exportModalVisible, setExportModalVisible] = useState(false);
   const [exportFormat, setExportFormat] = useState('csv');
@@ -249,10 +292,10 @@ function DeviceManagement() {
   const [exportFields, setExportFields] = useState([]);
   const [exportLoading, setExportLoading] = useState(false);
   const [currentPageDevices, setCurrentPageDevices] = useState([]);
-  
+
   // 全选状态
   const [selectAll, setSelectAll] = useState(false);
-  
+
   // 列宽状态
   const [columnWidths, setColumnWidths] = useState({});
 
@@ -265,42 +308,45 @@ function DeviceManagement() {
   }, [allDevices]);
 
   // 获取所有设备（支持搜索、筛选和分页）
-  const fetchDevices = useCallback(async (page = 1, pageSize = 10, forceRefresh = false) => {
-    try {
-      setLoading(true);
-      
-      // 使用后端分页加载
-      const params = {
-        page,
-        pageSize,
-        keyword: debouncedKeyword || undefined,
-        status: status !== 'all' ? status : undefined,
-        type: type !== 'all' ? type : undefined
-      };
-      
-      const response = await axios.get('/api/devices', { params });
-      const { devices, total } = response.data;
-      
-      // 处理设备数据，展开自定义字段
-      const processedDevices = devices.map(device => {
-        const deviceWithFields = { ...device };
-        if (device.customFields && typeof device.customFields === 'object') {
-          Object.entries(device.customFields).forEach(([fieldName, value]) => {
-            deviceWithFields[fieldName] = value;
-          });
-        }
-        return deviceWithFields;
-      });
-      
-      setAllDevices(processedDevices);
-      setPagination(prev => ({ ...prev, current: page, pageSize, total }));
-    } catch (error) {
-      message.error('获取设备列表失败');
-      console.error('获取设备列表失败:', error);
-    } finally {
-      setLoading(false);
-    }
-  }, [debouncedKeyword, status, type]);
+  const fetchDevices = useCallback(
+    async (page = 1, pageSize = 10, forceRefresh = false) => {
+      try {
+        setLoading(true);
+
+        // 使用后端分页加载
+        const params = {
+          page,
+          pageSize,
+          keyword: debouncedKeyword || undefined,
+          status: status !== 'all' ? status : undefined,
+          type: type !== 'all' ? type : undefined,
+        };
+
+        const response = await axios.get('/api/devices', { params });
+        const { devices, total } = response.data;
+
+        // 处理设备数据，展开自定义字段
+        const processedDevices = devices.map(device => {
+          const deviceWithFields = { ...device };
+          if (device.customFields && typeof device.customFields === 'object') {
+            Object.entries(device.customFields).forEach(([fieldName, value]) => {
+              deviceWithFields[fieldName] = value;
+            });
+          }
+          return deviceWithFields;
+        });
+
+        setAllDevices(processedDevices);
+        setPagination(prev => ({ ...prev, current: page, pageSize, total }));
+      } catch (error) {
+        message.error('获取设备列表失败');
+        console.error('获取设备列表失败:', error);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [debouncedKeyword, status, type]
+  );
 
   // 获取设备字段配置
   const fetchDeviceFields = async () => {
@@ -322,25 +368,133 @@ function DeviceManagement() {
 
   // 默认设备字段配置
   const defaultDeviceFields = [
-    { fieldName: 'deviceId', displayName: '设备ID', fieldType: 'string', required: true, order: 1, visible: true },
-    { fieldName: 'name', displayName: '设备名称', fieldType: 'string', required: true, order: 2, visible: true },
-    { fieldName: 'type', displayName: '设备类型', fieldType: 'select', required: true, order: 3, visible: true, 
-      options: [{ value: 'server', label: '服务器' }, { value: 'switch', label: '交换机' }, { value: 'router', label: '路由器' }, { value: 'storage', label: '存储设备' }, { value: 'other', label: '其他设备' }] },
-    { fieldName: 'model', displayName: '型号', fieldType: 'string', required: true, order: 4, visible: true },
-    { fieldName: 'serialNumber', displayName: '序列号', fieldType: 'string', required: true, order: 5, visible: true },
-    { fieldName: 'rackId', displayName: '所在机柜', fieldType: 'select', required: true, order: 6, visible: true },
-    { fieldName: 'position', displayName: '位置(U)', fieldType: 'number', required: true, order: 7, visible: true },
-    { fieldName: 'height', displayName: '高度(U)', fieldType: 'number', required: true, order: 8, visible: true },
-    { fieldName: 'powerConsumption', displayName: '功率(W)', fieldType: 'number', required: true, order: 9, visible: true },
-    { fieldName: 'status', displayName: '状态', fieldType: 'select', required: true, order: 10, visible: true, 
-      options: [{ value: 'running', label: '运行中' }, { value: 'maintenance', label: '维护中' }, { value: 'offline', label: '离线' }, { value: 'fault', label: '故障' }] },
-    { fieldName: 'purchaseDate', displayName: '购买日期', fieldType: 'date', required: true, order: 11, visible: true },
-    { fieldName: 'warrantyExpiry', displayName: '保修到期', fieldType: 'date', required: true, order: 12, visible: true },
-    { fieldName: 'ipAddress', displayName: 'IP地址', fieldType: 'string', required: false, order: 13, visible: true },
-    { fieldName: 'description', displayName: '描述', fieldType: 'textarea', required: false, order: 14, visible: true }
+    {
+      fieldName: 'deviceId',
+      displayName: '设备ID',
+      fieldType: 'string',
+      required: true,
+      order: 1,
+      visible: true,
+    },
+    {
+      fieldName: 'name',
+      displayName: '设备名称',
+      fieldType: 'string',
+      required: true,
+      order: 2,
+      visible: true,
+    },
+    {
+      fieldName: 'type',
+      displayName: '设备类型',
+      fieldType: 'select',
+      required: true,
+      order: 3,
+      visible: true,
+      options: [
+        { value: 'server', label: '服务器' },
+        { value: 'switch', label: '交换机' },
+        { value: 'router', label: '路由器' },
+        { value: 'storage', label: '存储设备' },
+        { value: 'other', label: '其他设备' },
+      ],
+    },
+    {
+      fieldName: 'model',
+      displayName: '型号',
+      fieldType: 'string',
+      required: true,
+      order: 4,
+      visible: true,
+    },
+    {
+      fieldName: 'serialNumber',
+      displayName: '序列号',
+      fieldType: 'string',
+      required: true,
+      order: 5,
+      visible: true,
+    },
+    {
+      fieldName: 'rackId',
+      displayName: '所在机柜',
+      fieldType: 'select',
+      required: true,
+      order: 6,
+      visible: true,
+    },
+    {
+      fieldName: 'position',
+      displayName: '位置(U)',
+      fieldType: 'number',
+      required: true,
+      order: 7,
+      visible: true,
+    },
+    {
+      fieldName: 'height',
+      displayName: '高度(U)',
+      fieldType: 'number',
+      required: true,
+      order: 8,
+      visible: true,
+    },
+    {
+      fieldName: 'powerConsumption',
+      displayName: '功率(W)',
+      fieldType: 'number',
+      required: true,
+      order: 9,
+      visible: true,
+    },
+    {
+      fieldName: 'status',
+      displayName: '状态',
+      fieldType: 'select',
+      required: true,
+      order: 10,
+      visible: true,
+      options: [
+        { value: 'running', label: '运行中' },
+        { value: 'maintenance', label: '维护中' },
+        { value: 'offline', label: '离线' },
+        { value: 'fault', label: '故障' },
+      ],
+    },
+    {
+      fieldName: 'purchaseDate',
+      displayName: '购买日期',
+      fieldType: 'date',
+      required: true,
+      order: 11,
+      visible: true,
+    },
+    {
+      fieldName: 'warrantyExpiry',
+      displayName: '保修到期',
+      fieldType: 'date',
+      required: true,
+      order: 12,
+      visible: true,
+    },
+    {
+      fieldName: 'ipAddress',
+      displayName: 'IP地址',
+      fieldType: 'string',
+      required: false,
+      order: 13,
+      visible: true,
+    },
+    {
+      fieldName: 'description',
+      displayName: '描述',
+      fieldType: 'textarea',
+      required: false,
+      order: 14,
+      visible: true,
+    },
   ];
 
-
   // 获取所有机柜
   const fetchRacks = async () => {
     try {
@@ -379,46 +533,59 @@ function DeviceManagement() {
       const deviceData = { ...device };
       if (deviceData.purchaseDate) deviceData.purchaseDate = dayjs(deviceData.purchaseDate);
       if (deviceData.warrantyExpiry) deviceData.warrantyExpiry = dayjs(deviceData.warrantyExpiry);
-      
+
       // 定义设备模型的固定字段
       const fixedFields = [
-        'deviceId', 'name', 'type', 'model', 'serialNumber', 'rackId',
-        'position', 'height', 'powerConsumption', 'status', 'purchaseDate',
-        'warrantyExpiry', 'ipAddress', 'description'
+        'deviceId',
+        'name',
+        'type',
+        'model',
+        'serialNumber',
+        'rackId',
+        'position',
+        'height',
+        'powerConsumption',
+        'status',
+        'purchaseDate',
+        'warrantyExpiry',
+        'ipAddress',
+        'description',
       ];
-      
+
       // 定义需要排除的系统字段
       const systemFields = ['createdAt', 'updatedAt', 'Rack', 'Room', 'customFields'];
-      
+
       // 创建一个干净的设备数据对象
       const cleanDeviceData = {};
-      
+
       // 复制固定字段
       fixedFields.forEach(field => {
         if (deviceData[field] !== undefined) {
           cleanDeviceData[field] = deviceData[field];
         }
       });
-      
+
       // 将自定义字段直接添加到表单数据中（不在customFields对象内）
       Object.entries(deviceData).forEach(([key, value]) => {
         // 排除固定字段、系统字段和非基本类型的值
-        if (!fixedFields.includes(key) && 
-            !systemFields.includes(key) && 
-            key !== 'deviceId' &&
-            typeof value !== 'object' &&
-            value !== null) {
+        if (
+          !fixedFields.includes(key) &&
+          !systemFields.includes(key) &&
+          key !== 'deviceId' &&
+          typeof value !== 'object' &&
+          value !== null
+        ) {
           cleanDeviceData[key] = value;
         }
       });
-      
+
       // 如果有原始customFields对象，将其字段也添加到表单数据中
       if (deviceData.customFields && typeof deviceData.customFields === 'object') {
         Object.entries(deviceData.customFields).forEach(([key, value]) => {
           cleanDeviceData[key] = value;
         });
       }
-      
+
       form.setFieldsValue(cleanDeviceData);
     } else {
       form.resetFields();
@@ -433,23 +600,34 @@ function DeviceManagement() {
   };
 
   // 提交表单
-  const handleSubmit = async (values) => {
+  const handleSubmit = async values => {
     try {
       // 定义设备模型的固定字段
       const fixedFields = [
-        'deviceId', 'name', 'type', 'model', 'serialNumber', 'rackId',
-        'position', 'height', 'powerConsumption', 'status', 'purchaseDate',
-        'warrantyExpiry', 'ipAddress', 'description'
+        'deviceId',
+        'name',
+        'type',
+        'model',
+        'serialNumber',
+        'rackId',
+        'position',
+        'height',
+        'powerConsumption',
+        'status',
+        'purchaseDate',
+        'warrantyExpiry',
+        'ipAddress',
+        'description',
       ];
-      
+
       // 构建最终的设备数据，包含固定字段和自定义字段
       const deviceData = {
         ...values,
         purchaseDate: values.purchaseDate ? values.purchaseDate.format('YYYY-MM-DD') : null,
         warrantyExpiry: values.warrantyExpiry ? values.warrantyExpiry.format('YYYY-MM-DD') : null,
-        customFields: {} // 用于存储自定义字段
+        customFields: {}, // 用于存储自定义字段
       };
-      
+
       // 分离固定字段和自定义字段
       Object.keys(deviceData).forEach(key => {
         if (!fixedFields.includes(key) && key !== 'customFields') {
@@ -479,16 +657,16 @@ function DeviceManagement() {
   };
 
   // 搜索处理函数
-  const handleSearch = (values) => {
+  const handleSearch = values => {
     setSearching(true);
-    
+
     setKeyword(values.keyword || '');
     setStatus(values.status || 'all');
     setType(values.type || 'all');
-    
+
     // 筛选后的数据会通过useMemo自动更新，这里只需更新分页
     setPagination(prev => ({ ...prev, current: 1 }));
-    
+
     // 短暂延迟后移除搜索状态，提供视觉反馈
     setTimeout(() => setSearching(false), 300);
   };
@@ -496,25 +674,25 @@ function DeviceManagement() {
   // 重置筛选条件
   const handleReset = () => {
     setSearching(true);
-    
+
     setKeyword('');
     setStatus('all');
     setType('all');
     searchForm.resetFields();
-    
+
     // 短暂延迟后移除搜索状态
     setTimeout(() => setSearching(false), 300);
   };
 
   // 表格分页变化处理
-  const handleTableChange = (newPagination) => {
+  const handleTableChange = newPagination => {
     setPagination(newPagination);
-    
+
     const start = (newPagination.current - 1) * newPagination.pageSize;
     const end = start + newPagination.pageSize;
     const currentPageData = filteredDevicesMemo.slice(start, end);
     setCurrentPageDevices(currentPageData);
-    
+
     fetchDevices(newPagination.current, newPagination.pageSize);
   };
 
@@ -529,7 +707,7 @@ function DeviceManagement() {
       onOk: async () => {
         try {
           const response = await axios.delete('/api/devices/batch-delete', {
-            data: { deviceIds: selectedDevices }
+            data: { deviceIds: selectedDevices },
           });
           message.success(response.data.message || '批量删除成功');
           setSelectedDevices([]);
@@ -539,7 +717,7 @@ function DeviceManagement() {
           message.error('批量删除失败');
           console.error('批量删除设备失败:', error);
         }
-      }
+      },
     });
   };
 
@@ -547,7 +725,8 @@ function DeviceManagement() {
   const handleDeleteAll = async () => {
     Modal.confirm({
       title: '危险操作确认',
-      content: '确定要删除所有设备吗？此操作将清空所有设备数据，包括相关的接线、网卡、端口等信息，且不可恢复！',
+      content:
+        '确定要删除所有设备吗？此操作将清空所有设备数据，包括相关的接线、网卡、端口等信息，且不可恢复！',
       okText: '确认删除所有',
       okType: 'danger',
       cancelText: '取消',
@@ -562,12 +741,12 @@ function DeviceManagement() {
           message.error('删除所有设备失败');
           console.error('删除所有设备失败:', error);
         }
-      }
+      },
     });
   };
 
   // 删除设备
-  const handleDelete = async (deviceId) => {
+  const handleDelete = async deviceId => {
     Modal.confirm({
       title: '确认删除',
       content: '确定要删除这个设备吗？',
@@ -583,12 +762,12 @@ function DeviceManagement() {
           message.error('设备删除失败');
           console.error('设备删除失败:', error);
         }
-      }
+      },
     });
   };
 
   // 显示设备详情
-  const handleShowDetail = (device) => {
+  const handleShowDetail = device => {
     setSelectedDevice(device);
     setDetailModalVisible(true);
   };
@@ -608,12 +787,12 @@ function DeviceManagement() {
     try {
       const values = await batchStatusForm.validateFields();
       setBatchStatusLoading(true);
-      
+
       const response = await axios.put('/api/devices/batch-status', {
         deviceIds: selectedDevices,
-        status: values.status
+        status: values.status,
       });
-      
+
       message.success(response.data.message || '批量状态变更成功');
       setBatchStatusModalVisible(false);
       setSelectedDevices([]);
@@ -637,7 +816,9 @@ function DeviceManagement() {
       return;
     }
     setExportFormat('csv');
-    setExportFields(deviceFields.filter(f => f.visible && f.fieldName !== 'rackId').map(f => f.fieldName));
+    setExportFields(
+      deviceFields.filter(f => f.visible && f.fieldName !== 'rackId').map(f => f.fieldName)
+    );
     setExportModalVisible(true);
   };
 
@@ -645,12 +826,12 @@ function DeviceManagement() {
   const handleEnhancedExport = async () => {
     try {
       setExportLoading(true);
-      
+
       const fieldLabels = {};
       deviceFields.forEach(field => {
         fieldLabels[field.fieldName] = field.displayName;
       });
-      
+
       let deviceIds = [];
       if (exportScope === 'selected') {
         deviceIds = selectedDevices;
@@ -659,21 +840,23 @@ function DeviceManagement() {
       } else if (exportScope === 'all') {
         deviceIds = allDevices.map(device => device.deviceId);
       }
-      
+
       if (deviceIds.length === 0) {
         message.warning('没有可导出的设备');
         setExportLoading(false);
         return;
       }
-      
+
       const params = new URLSearchParams();
       deviceIds.forEach(id => params.append('deviceIds', id));
       params.append('format', exportFormat);
       params.append('fields', JSON.stringify(exportFields));
       params.append('fieldLabels', JSON.stringify(fieldLabels));
-      
-      const response = await axios.get(`/api/devices/enhanced-export?${params.toString()}`, { responseType: 'blob' });
-      
+
+      const response = await axios.get(`/api/devices/enhanced-export?${params.toString()}`, {
+        responseType: 'blob',
+      });
+
       const contentType = exportFormat === 'csv' ? 'text/csv; charset=gbk' : 'application/json';
       const blob = new Blob([response.data], { type: contentType });
       const url = window.URL.createObjectURL(blob);
@@ -684,7 +867,7 @@ function DeviceManagement() {
       link.click();
       document.body.removeChild(link);
       window.URL.revokeObjectURL(url);
-      
+
       message.success(`成功导出 ${deviceIds.length} 个设备`);
       setExportModalVisible(false);
     } catch (error) {
@@ -706,15 +889,17 @@ function DeviceManagement() {
       setSelectAll(true);
     }
   };
-  
+
   // 处理选择变化
-  const handleSelectionChange = (selectedRowKeys) => {
+  const handleSelectionChange = selectedRowKeys => {
     setSelectedDevices(selectedRowKeys);
-    setSelectAll(selectedRowKeys.length === filteredDevicesMemo.length && filteredDevicesMemo.length > 0);
+    setSelectAll(
+      selectedRowKeys.length === filteredDevicesMemo.length && filteredDevicesMemo.length > 0
+    );
   };
-  
+
   // 全选复选框的处理函数
-  const handleSelectAllCheckbox = (e) => {
+  const handleSelectAllCheckbox = e => {
     const checked = e.target.checked;
     if (checked) {
       const allIds = filteredDevicesMemo.map(device => device.deviceId);
@@ -725,76 +910,81 @@ function DeviceManagement() {
       setSelectAll(false);
     }
   };
-  const handleImport = async (file) => {
+  const handleImport = async file => {
     try {
       setIsImporting(true);
       setImportProgress(0);
       setImportPhase('正在上传文件...');
       setImportResult(null);
-      
+
       const formData = new FormData();
       formData.append('csvFile', file);
-      
+
       const response = await axios.post('/api/devices/import', formData, {
         headers: {
-          'Content-Type': 'multipart/form-data'
+          'Content-Type': 'multipart/form-data',
         },
-        onUploadProgress: (progressEvent) => {
+        onUploadProgress: progressEvent => {
           const progress = Math.round((progressEvent.loaded * 50) / progressEvent.total);
           setImportProgress(Math.min(progress, 50));
           setImportPhase('正在上传文件...');
-        }
+        },
       });
-      
+
       setImportProgress(60);
       setImportPhase('正在处理数据...');
-      
+
       setTimeout(() => {
         setImportProgress(80);
         setImportPhase('正在验证数据...');
       }, 200);
-      
+
       setTimeout(() => {
         setImportProgress(90);
         setImportPhase('正在保存数据...');
       }, 400);
-      
+
       setImportResult(response.data);
       setImportProgress(100);
       setImportPhase('导入完成');
       setIsImporting(false);
-      
+
       const { success, failed } = response.data.statistics;
       if (failed > 0) {
         message.warning(`导入完成，但有 ${failed} 条记录导入失败`);
       } else {
         message.success('所有记录导入成功');
       }
-      
+
       setTimeout(() => {
         fetchDevices();
       }, 1000);
-      
     } catch (error) {
       setIsImporting(false);
       setImportProgress(0);
-      
+
       let errorMessage = '导入失败';
       let errorDetails = [];
-      
+
       if (error.response) {
         const { data, status } = error.response;
-        
-        if (status === 500 && data && data.errors && Array.isArray(data.errors) && data.errors.length > 0) {
-          errorDetails = data.errors.map((err) => ({
+
+        if (
+          status === 500 &&
+          data &&
+          data.errors &&
+          Array.isArray(data.errors) &&
+          data.errors.length > 0
+        ) {
+          errorDetails = data.errors.map(err => ({
             row: err.row || 0,
-            error: err.error || err.message || '服务器内部错误'
+            error: err.error || err.message || '服务器内部错误',
           }));
           errorMessage = `导入失败：${errorDetails[0].error}`;
         } else if (data && data.errors && Array.isArray(data.errors)) {
           errorDetails = data.errors.map((err, index) => ({
             row: err.row || index + 1,
-            error: err.error || err.message || '未知错误'
+            error: err.error || err.message || '未知错误',
           }));
           errorMessage = `导入失败，共发现 ${errorDetails.length} 处数据错误`;
         } else if (data && (data.message || data.error)) {
@@ -803,7 +993,7 @@ function DeviceManagement() {
       } else if (error.message) {
         errorMessage = error.message;
       }
-      
+
       setImportResult({
         success: false,
         statistics: {
@@ -811,14 +1001,14 @@ function DeviceManagement() {
           success: 0,
           failed: errorDetails.length > 0 ? errorDetails.length : 1,
           errors: errorDetails.length > 0 ? errorDetails : [{ row: 0, error: errorMessage }],
-          message: errorMessage
-        }
+          message: errorMessage,
+        },
       });
-      
+
       message.error(errorMessage);
       console.error('导入设备失败:', error);
     }
-    
+
     return false;
   };
 
@@ -827,7 +1017,7 @@ function DeviceManagement() {
     running: { text: '运行中', color: 'green' },
     maintenance: { text: '维护中', color: 'orange' },
     offline: { text: '离线', color: 'gray' },
-    fault: { text: '故障', color: 'red' }
+    fault: { text: '故障', color: 'red' },
   };
 
   // 设备类型映射
@@ -836,17 +1026,17 @@ function DeviceManagement() {
     switch: '交换机',
     router: '路由器',
     storage: '存储设备',
-    other: '其他设备'
+    other: '其他设备',
   };
 
   // 获取设备类型图标
-  const getDeviceTypeIcon = (type) => {
+  const getDeviceTypeIcon = type => {
     const iconMap = {
       server: <CloudServerOutlined style={{ color: '#1890ff' }} />,
       switch: <SwapOutlined style={{ color: '#52c41a' }} />,
       router: <SafetyOutlined style={{ color: '#faad14' }} />,
       storage: <DatabaseOutlined style={{ color: '#722ed1' }} />,
-      other: <AppstoreOutlined style={{ color: '#8c8c8c' }} />
+      other: <AppstoreOutlined style={{ color: '#8c8c8c' }} />,
     };
     return iconMap[type] || <AppstoreOutlined style={{ color: '#8c8c8c' }} />;
   };
@@ -855,31 +1045,30 @@ function DeviceManagement() {
   const handleColumnResize = (key, width) => {
     setColumnWidths(prev => ({ ...prev, [key]: width }));
   };
-  
+
   // 重置列宽到默认值
   const resetColumnWidths = () => {
     setColumnWidths({});
     message.success('列宽已重置为默认值');
   };
-  
+
   // 处理表头单元格拖拽 - 自定义实现
-  const handleHeaderCellResize = (key) => (column) => ({
+  const handleHeaderCellResize = key => column => ({
     width: column.width,
-    onResize: (width) => {
+    onResize: width => {
       setColumnWidths(prev => ({ ...prev, [key]: width }));
     },
   });
-  
 
   // 动态生成表格列配置
   const columns = React.useMemo(() => {
     const generatedColumns = [];
-    
+
     // 根据字段配置动态生成列，只显示visible为true的字段
     deviceFields.forEach(field => {
       // 只处理可见字段
       if (!field.visible) return;
-      
+
       // 特殊处理机柜字段
       if (field.fieldName === 'rackId') {
         // 添加机房信息列
@@ -898,7 +1087,7 @@ function DeviceManagement() {
           width: columnWidths[field.fieldName] || 120,
           onHeaderCell: handleHeaderCellResize(field.fieldName),
         });
-      } 
+      }
       // 特殊处理设备类型
       else if (field.fieldName === 'type') {
         generatedColumns.push({
@@ -907,7 +1096,7 @@ function DeviceManagement() {
           key: field.fieldName,
           width: columnWidths[field.fieldName] || 100,
           onHeaderCell: handleHeaderCellResize(field.fieldName),
-          render: (type) => {
+          render: type => {
             return (
               <Space>
                 {getDeviceTypeIcon(type)}
@@ -925,7 +1114,7 @@ function DeviceManagement() {
           key: field.fieldName,
           width: columnWidths[field.fieldName] || 100,
           onHeaderCell: handleHeaderCellResize(field.fieldName),
-          render: (status) => {
+          render: status => {
             if (Array.isArray(status)) {
               return (
                 <Space>
@@ -953,25 +1142,27 @@ function DeviceManagement() {
           key: field.fieldName,
           width: columnWidths[field.fieldName] || 120,
           onHeaderCell: handleHeaderCellResize(field.fieldName),
-          render: (date) => {
+          render: date => {
             if (!date) return '';
-            
+
             const dateObj = new Date(date);
             const formattedDate = dateObj.toLocaleDateString('zh-CN');
-            
+
             // 检查是否是保修到期字段
             if (field.fieldName === 'warrantyExpiry') {
               const today = new Date();
               // 设置时间为同一天的00:00:00，确保只比较日期部分
               today.setHours(0, 0, 0, 0);
               dateObj.setHours(0, 0, 0, 0);
-              
+
               // 如果保修日期已过期，显示为红色
               if (dateObj < today) {
-                return <span style={{ color: '#d93025', fontWeight: 'bold' }}>{formattedDate}</span>;
+                return (
+                  <span style={{ color: '#d93025', fontWeight: 'bold' }}>{formattedDate}</span>
+                );
               }
             }
-            
+
             return formattedDate;
           },
         });
@@ -989,7 +1180,7 @@ function DeviceManagement() {
         } else if (field.fieldType === 'textarea') {
           defaultWidth = 180;
         }
-        
+
         // 为设备名称和ID列添加点击查看详情功能
         const columnConfig = {
           title: field.displayName,
@@ -1001,14 +1192,14 @@ function DeviceManagement() {
           onHeaderCell: handleHeaderCellResize(field.fieldName),
           ellipsis: field.fieldType !== 'textarea',
         };
-        
+
         // 设备名称和ID列添加点击效果
         if (field.fieldName === 'deviceId' || field.fieldName === 'name') {
           columnConfig.render = (value, record) => (
-            <a 
+            <a
               onClick={() => handleShowDetail(record)}
-              style={{ 
-                color: '#1890ff', 
+              style={{
+                color: '#1890ff',
                 textDecoration: 'none',
                 cursor: 'pointer',
                 display: 'block',
@@ -1016,18 +1207,18 @@ function DeviceManagement() {
                 textOverflow: 'ellipsis',
                 whiteSpace: 'nowrap',
               }}
-              onMouseEnter={(e) => e.target.style.textDecoration = 'underline'}
-              onMouseLeave={(e) => e.target.style.textDecoration = 'none'}
+              onMouseEnter={e => (e.target.style.textDecoration = 'underline')}
+              onMouseLeave={e => (e.target.style.textDecoration = 'none')}
             >
               {value || '-'}
             </a>
           );
         }
-        
+
         generatedColumns.push(columnConfig);
       }
     });
-    
+
     // 添加操作列
     generatedColumns.push({
       title: '操作',
@@ -1060,22 +1251,22 @@ function DeviceManagement() {
         </div>
       ),
     });
-    
+
     return generatedColumns;
   }, [deviceFields, columnWidths]);
 
   // 保存字段配置
-  const handleSaveFieldConfig = async (values) => {
+  const handleSaveFieldConfig = async values => {
     try {
       // 更新设备字段配置的可见性
       const updatedFields = deviceFields.map(field => ({
         ...field,
-        visible: values[field.fieldName]
+        visible: values[field.fieldName],
       }));
-      
+
       // 保存到后端
       await axios.post('/api/deviceFields/config', updatedFields);
-      
+
       // 更新本地状态
       setDeviceFields(updatedFields);
       message.success('字段配置保存成功');
@@ -1098,7 +1289,7 @@ function DeviceManagement() {
   return (
     <div style={pageContainerStyle}>
       <style>{generateGlobalStyles(designTokens)}</style>
-      
+
       <div style={headerStyle}>
         <div style={titleRowStyle}>
           <div style={titleSectionStyle}>
@@ -1110,13 +1301,13 @@ function DeviceManagement() {
               <p style={pageSubtitleStyle}>管理您的IT设备资产</p>
             </div>
           </div>
-          
+
           <div style={{ display: 'flex', gap: designTokens.spacing.sm, flexWrap: 'wrap' }}>
             <Button
               style={{
                 ...secondaryActionStyle,
                 color: designTokens.colors.primary.main,
-                borderColor: designTokens.colors.primary.main
+                borderColor: designTokens.colors.primary.main,
               }}
               icon={<PlusOutlined />}
               onClick={() => showModal()}
@@ -1127,7 +1318,7 @@ function DeviceManagement() {
               style={{
                 ...secondaryActionStyle,
                 color: designTokens.colors.primary.main,
-                borderColor: designTokens.colors.primary.main
+                borderColor: designTokens.colors.primary.main,
               }}
               icon={<UploadOutlined />}
               onClick={() => setImportModalVisible(true)}
@@ -1138,7 +1329,7 @@ function DeviceManagement() {
               style={{
                 ...secondaryActionStyle,
                 color: designTokens.colors.primary.main,
-                borderColor: designTokens.colors.primary.main
+                borderColor: designTokens.colors.primary.main,
               }}
               icon={<ExportOutlined />}
               onClick={showExportModal}
@@ -1149,7 +1340,7 @@ function DeviceManagement() {
               style={{
                 ...secondaryActionStyle,
                 color: designTokens.colors.primary.main,
-                borderColor: designTokens.colors.primary.main
+                borderColor: designTokens.colors.primary.main,
               }}
               icon={<SettingOutlined />}
               onClick={() => setFieldConfigModalVisible(true)}
@@ -1160,7 +1351,7 @@ function DeviceManagement() {
               style={{
                 ...secondaryActionStyle,
                 color: designTokens.colors.primary.main,
-                borderColor: designTokens.colors.primary.main
+                borderColor: designTokens.colors.primary.main,
               }}
               icon={<ReloadOutlined />}
               disabled={selectedDevices.length === 0}
@@ -1172,7 +1363,7 @@ function DeviceManagement() {
               style={{
                 ...secondaryActionStyle,
                 color: designTokens.colors.primary.main,
-                borderColor: designTokens.colors.primary.main
+                borderColor: designTokens.colors.primary.main,
               }}
               icon={<DeleteOutlined />}
               disabled={selectedDevices.length === 0}
@@ -1191,7 +1382,7 @@ function DeviceManagement() {
                 gap: '6px',
                 background: designTokens.colors.error.main,
                 border: 'none',
-                color: '#ffffff'
+                color: '#ffffff',
               }}
               icon={<DeleteOutlined />}
               onClick={handleDeleteAll}
@@ -1202,7 +1393,19 @@ function DeviceManagement() {
         </div>
       </div>
 
-      <Card size="small" style={filterCardStyle} styles={{ body: { padding: `${designTokens.spacing.md}px ${designTokens.spacing.lg}px`, display: 'flex', alignItems: 'center', gap: designTokens.spacing.md, flexWrap: 'wrap' } }}>
+      <Card
+        size="small"
+        style={filterCardStyle}
+        styles={{
+          body: {
+            padding: `${designTokens.spacing.md}px ${designTokens.spacing.lg}px`,
+            display: 'flex',
+            alignItems: 'center',
+            gap: designTokens.spacing.md,
+            flexWrap: 'wrap',
+          },
+        }}
+      >
         <Form
           form={searchForm}
           layout="inline"
@@ -1214,17 +1417,17 @@ function DeviceManagement() {
             <Input
               placeholder="搜索设备..."
               prefix={<SearchOutlined style={{ color: designTokens.colors.primary.main }} />}
-              style={{ 
+              style={{
                 width: '280px',
                 borderRadius: designTokens.borderRadius.medium,
                 border: `1px solid ${designTokens.colors.border.light}`,
-                transition: `all ${designTokens.transitions.fast}`
+                transition: `all ${designTokens.transitions.fast}`,
               }}
               value={keyword}
-              onChange={(e) => setKeyword(e.target.value)}
+              onChange={e => setKeyword(e.target.value)}
             />
           </Form.Item>
-          
+
           <Form.Item name="status" style={{ margin: 0 }}>
             <Select
               value={status}
@@ -1239,7 +1442,7 @@ function DeviceManagement() {
               <Option value="fault">故障</Option>
             </Select>
           </Form.Item>
-          
+
           <Form.Item name="type" style={{ margin: 0 }}>
             <Select
               value={type}
@@ -1255,7 +1458,7 @@ function DeviceManagement() {
               <Option value="other">其他设备</Option>
             </Select>
           </Form.Item>
-          
+
           <Form.Item style={{ margin: 0 }}>
             <Space>
               <Button
@@ -1265,7 +1468,7 @@ function DeviceManagement() {
                   borderRadius: designTokens.borderRadius.medium,
                   background: designTokens.colors.primary.gradient,
                   border: 'none',
-                  boxShadow: designTokens.shadows.small
+                  boxShadow: designTokens.shadows.small,
                 }}
                 icon={<SearchOutlined />}
                 htmlType="submit"
@@ -1277,7 +1480,7 @@ function DeviceManagement() {
                 style={{
                   height: '36px',
                   borderRadius: designTokens.borderRadius.medium,
-                  border: `1px solid ${designTokens.colors.border.light}`
+                  border: `1px solid ${designTokens.colors.border.light}`,
                 }}
                 onClick={handleReset}
               >
@@ -1286,7 +1489,7 @@ function DeviceManagement() {
             </Space>
           </Form.Item>
         </Form>
-        
+
         <div style={{ display: 'flex', alignItems: 'center', gap: designTokens.spacing.sm }}>
           <Button
             icon={<ReloadOutlined />}
@@ -1294,7 +1497,7 @@ function DeviceManagement() {
             style={{
               borderRadius: designTokens.borderRadius.medium,
               border: `1px solid ${designTokens.colors.border.light}`,
-              height: '36px'
+              height: '36px',
             }}
           >
             刷新
@@ -1303,93 +1506,121 @@ function DeviceManagement() {
       </Card>
 
       <Card style={cardStyle}>
-        {(!loading && filteredDevicesMemo.length === 0 && !searching) && (
-          <div style={{ 
-            textAlign: 'center', 
-            padding: '60px 20px', 
-            color: designTokens.colors.text.secondary,
-            fontSize: '15px'
-          }}>
-            <SearchOutlined style={{ fontSize: '48px', marginBottom: '16px', color: designTokens.colors.border.light }} />
+        {!loading && filteredDevicesMemo.length === 0 && !searching && (
+          <div
+            style={{
+              textAlign: 'center',
+              padding: '60px 20px',
+              color: designTokens.colors.text.secondary,
+              fontSize: '15px',
+            }}
+          >
+            <SearchOutlined
+              style={{
+                fontSize: '48px',
+                marginBottom: '16px',
+                color: designTokens.colors.border.light,
+              }}
+            />
             <p>暂无设备数据</p>
           </div>
         )}
         {filteredDevicesMemo.length > 0 && (
-          <div className="device-table-wrapper" style={{ 
-            borderRadius: designTokens.borderRadius.medium,
-            overflow: 'hidden'
-          }}>
+          <div
+            className="device-table-wrapper"
+            style={{
+              borderRadius: designTokens.borderRadius.medium,
+              overflow: 'hidden',
+            }}
+          >
             <Table
-            columns={columns}
-            dataSource={filteredDevicesMemo}
-            rowKey="deviceId"
-            loading={loading || searching}
-            pagination={{
-              ...pagination,
-              showSizeChanger: true,
-              showQuickJumper: true,
-              pageSizeOptions: ['10', '20', '30', '50', '100'],
-              showTotal: (total) => `共 ${total} 条记录`,
-              style: { marginTop: '16px' }
-            }}
-            onChange={handleTableChange}
-            scroll={{ y: 'calc(100vh - 380px)', scrollToFirstRowOnChange: true }}
-            virtual
-            components={{
-              header: {
-                cell: ResizableTitle,
-              },
-            }}
-            style={{ width: '100%', maxWidth: '100%' }}
-            size="middle"
-            showHeader={filteredDevicesMemo.length > 0}
-            rowSelection={{
-              selectedRowKeys: selectedDevices,
-              onChange: handleSelectionChange,
-              columnWidth: 48,
-              fixed: 'left',
-              type: 'checkbox',
-              crossPageSelect: true,
-              selections: [
-                { key: 'all', text: '全选', onSelect: () => {
-                  const allIds = filteredDevicesMemo.map(device => device.deviceId);
-                  setSelectedDevices(allIds);
-                  setSelectAll(true);
-                }},
-                { key: 'invert', text: '反选', onSelect: () => {
-                  const visibleIds = filteredDevicesMemo.map(device => device.deviceId);
-                  const newSelected = visibleIds.filter(id => !selectedDevices.includes(id));
-                  setSelectedDevices(newSelected);
-                  setSelectAll(newSelected.length === filteredDevicesMemo.length);
-                }},
-                { key: 'none', text: '清除选择', onSelect: () => {
-                  setSelectedDevices([]);
-                  setSelectAll(false);
-                }},
-              ],
-            }}
-            onRow={(record) => ({
-              onClick: () => handleSelectionChange(
-                selectedDevices.includes(record.deviceId)
-                  ? selectedDevices.filter(id => id !== record.deviceId)
-                  : [...selectedDevices, record.deviceId]
-              ),
-            })}
-            rowClassName={(record, index) => {
-              if (selectedDevices.includes(record.deviceId)) {
-                return 'ant-table-row-selected';
-              }
-              return index % 2 === 0 ? 'ant-table-row-even' : 'ant-table-row-odd';
-            }}
-          />
-        </div>
+              columns={columns}
+              dataSource={filteredDevicesMemo}
+              rowKey="deviceId"
+              loading={loading || searching}
+              pagination={{
+                ...pagination,
+                showSizeChanger: true,
+                showQuickJumper: true,
+                pageSizeOptions: ['10', '20', '30', '50', '100'],
+                showTotal: total => `共 ${total} 条记录`,
+                style: { marginTop: '16px' },
+              }}
+              onChange={handleTableChange}
+              scroll={{ y: 'calc(100vh - 380px)', scrollToFirstRowOnChange: true }}
+              virtual
+              components={{
+                header: {
+                  cell: ResizableTitle,
+                },
+              }}
+              style={{ width: '100%', maxWidth: '100%' }}
+              size="middle"
+              showHeader={filteredDevicesMemo.length > 0}
+              rowSelection={{
+                selectedRowKeys: selectedDevices,
+                onChange: handleSelectionChange,
+                columnWidth: 48,
+                fixed: 'left',
+                type: 'checkbox',
+                crossPageSelect: true,
+                selections: [
+                  {
+                    key: 'all',
+                    text: '全选',
+                    onSelect: () => {
+                      const allIds = filteredDevicesMemo.map(device => device.deviceId);
+                      setSelectedDevices(allIds);
+                      setSelectAll(true);
+                    },
+                  },
+                  {
+                    key: 'invert',
+                    text: '反选',
+                    onSelect: () => {
+                      const visibleIds = filteredDevicesMemo.map(device => device.deviceId);
+                      const newSelected = visibleIds.filter(id => !selectedDevices.includes(id));
+                      setSelectedDevices(newSelected);
+                      setSelectAll(newSelected.length === filteredDevicesMemo.length);
+                    },
+                  },
+                  {
+                    key: 'none',
+                    text: '清除选择',
+                    onSelect: () => {
+                      setSelectedDevices([]);
+                      setSelectAll(false);
+                    },
+                  },
+                ],
+              }}
+              onRow={record => ({
+                onClick: () =>
+                  handleSelectionChange(
+                    selectedDevices.includes(record.deviceId)
+                      ? selectedDevices.filter(id => id !== record.deviceId)
+                      : [...selectedDevices, record.deviceId]
+                  ),
+              })}
+              rowClassName={(record, index) => {
+                if (selectedDevices.includes(record.deviceId)) {
+                  return 'ant-table-row-selected';
+                }
+                return index % 2 === 0 ? 'ant-table-row-even' : 'ant-table-row-odd';
+              }}
+            />
+          </div>
         )}
       </Card>
 
       <Modal
         title={
           <div style={modalHeaderStyle}>
-            {editingDevice ? <EditOutlined style={{ color: '#667eea' }} /> : <PlusOutlined style={{ color: '#667eea' }} />}
+            {editingDevice ? (
+              <EditOutlined style={{ color: '#667eea' }} />
+            ) : (
+              <PlusOutlined style={{ color: '#667eea' }} />
+            )}
             {editingDevice ? '编辑设备' : '添加设备'}
           </div>
         }
@@ -1398,77 +1629,135 @@ function DeviceManagement() {
         footer={null}
         width={700}
         style={{ borderRadius: '16px' }}
-        styles={{ header: { borderBottom: '1px solid #f0f0f0', padding: '16px 50px 16px 24px' }, body: { padding: '24px' } }}
+        styles={{
+          header: { borderBottom: '1px solid #f0f0f0', padding: '16px 50px 16px 24px' },
+          body: { padding: '24px' },
+        }}
         className="device-modal"
       >
-        <Form
-          form={form}
-          layout="vertical"
-          onFinish={handleSubmit}
-        >
-          {deviceFields.filter(field => field.fieldName !== 'deviceId').map(field => {
-            let control = null;
-            
-            switch (field.fieldType) {
-              case 'text':
-              case 'string':
-                control = <Input placeholder={`请输入${field.displayName}`} style={{ borderRadius: '8px' }} />;
-                break;
-              case 'number':
-                control = <InputNumber placeholder={`请输入${field.displayName}`} min={0} style={{ width: '100%', borderRadius: '8px' }} />;
-                break;
-              case 'boolean':
-                control = <Switch />;
-                break;
-              case 'date':
-                control = <DatePicker style={{ width: '100%', borderRadius: '8px' }} placeholder={`请选择${field.displayName}`} />;
-                break;
-              case 'textarea':
-                control = <Input.TextArea placeholder={`请输入${field.displayName}`} rows={3} style={{ borderRadius: '8px' }} />;
-                break;
-              case 'select':
-                if (field.fieldName === 'rackId') {
-                  control = (
-                    <Select placeholder={`请选择${field.displayName}`} style={{ borderRadius: '8px' }}>
-                      {racks.map(rack => (
-                        <Option key={rack.rackId} value={rack.rackId}>
-                          {rack.name} ({rack.rackId})
-                        </Option>
-                      ))}
-                    </Select>
-                  );
-                } else {
-                  control = (
-                    <Select placeholder={`请选择${field.displayName}`} style={{ borderRadius: '8px' }}>
-                      {field.options && field.options.map(option => (
-                        <Option key={option.value} value={option.value}>
-                          {option.label}
-                        </Option>
-                      ))}
-                    </Select>
-                  );
-                }
-                break;
-              default:
-                control = <Input placeholder={`请输入${field.displayName}`} style={{ borderRadius: '8px' }} />;
-            }
+        <Form form={form} layout="vertical" onFinish={handleSubmit}>
+          {deviceFields
+            .filter(field => field.fieldName !== 'deviceId')
+            .map(field => {
+              let control = null;
 
-            return (
-              <Form.Item
-                key={field.fieldName}
-                name={field.fieldName}
-                label={field.displayName}
-                rules={field.required && field.fieldName !== 'deviceId' ? [{ required: true, message: `请输入${field.displayName}` }] : []}
-              >
-                {control}
-              </Form.Item>
-            );
-          })}
+              switch (field.fieldType) {
+                case 'text':
+                case 'string':
+                  control = (
+                    <Input
+                      placeholder={`请输入${field.displayName}`}
+                      style={{ borderRadius: '8px' }}
+                    />
+                  );
+                  break;
+                case 'number':
+                  control = (
+                    <InputNumber
+                      placeholder={`请输入${field.displayName}`}
+                      min={0}
+                      style={{ width: '100%', borderRadius: '8px' }}
+                    />
+                  );
+                  break;
+                case 'boolean':
+                  control = <Switch />;
+                  break;
+                case 'date':
+                  control = (
+                    <DatePicker
+                      style={{ width: '100%', borderRadius: '8px' }}
+                      placeholder={`请选择${field.displayName}`}
+                    />
+                  );
+                  break;
+                case 'textarea':
+                  control = (
+                    <Input.TextArea
+                      placeholder={`请输入${field.displayName}`}
+                      rows={3}
+                      style={{ borderRadius: '8px' }}
+                    />
+                  );
+                  break;
+                case 'select':
+                  if (field.fieldName === 'rackId') {
+                    control = (
+                      <Select
+                        placeholder={`请选择${field.displayName}`}
+                        style={{ borderRadius: '8px' }}
+                      >
+                        {racks.map(rack => (
+                          <Option key={rack.rackId} value={rack.rackId}>
+                            {rack.name} ({rack.rackId})
+                          </Option>
+                        ))}
+                      </Select>
+                    );
+                  } else {
+                    control = (
+                      <Select
+                        placeholder={`请选择${field.displayName}`}
+                        style={{ borderRadius: '8px' }}
+                      >
+                        {field.options &&
+                          field.options.map(option => (
+                            <Option key={option.value} value={option.value}>
+                              {option.label}
+                            </Option>
+                          ))}
+                      </Select>
+                    );
+                  }
+                  break;
+                default:
+                  control = (
+                    <Input
+                      placeholder={`请输入${field.displayName}`}
+                      style={{ borderRadius: '8px' }}
+                    />
+                  );
+              }
+
+              return (
+                <Form.Item
+                  key={field.fieldName}
+                  name={field.fieldName}
+                  label={field.displayName}
+                  rules={
+                    field.required && field.fieldName !== 'deviceId'
+                      ? [{ required: true, message: `请输入${field.displayName}` }]
+                      : []
+                  }
+                >
+                  {control}
+                </Form.Item>
+              );
+            })}
 
           <Form.Item style={{ textAlign: 'right', marginTop: '24px' }}>
             <Space>
-              <Button onClick={handleCancel} style={secondaryActionStyle}>取消</Button>
-              <Button type="primary" htmlType="submit" style={{ height: '40px', borderRadius: designTokens.borderRadius.small, background: designTokens.colors.primary.gradient, border: 'none', color: '#ffffff', boxShadow: designTokens.shadows.small, fontWeight: '500', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>确定</Button>
+              <Button onClick={handleCancel} style={secondaryActionStyle}>
+                取消
+              </Button>
+              <Button
+                type="primary"
+                htmlType="submit"
+                style={{
+                  height: '40px',
+                  borderRadius: designTokens.borderRadius.small,
+                  background: designTokens.colors.primary.gradient,
+                  border: 'none',
+                  color: '#ffffff',
+                  boxShadow: designTokens.shadows.small,
+                  fontWeight: '500',
+                  display: 'inline-flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                }}
+              >
+                确定
+              </Button>
             </Space>
           </Form.Item>
         </Form>
@@ -1485,38 +1774,68 @@ function DeviceManagement() {
         onCancel={() => setFieldConfigModalVisible(false)}
         footer={null}
         width={600}
-        styles={{ header: { borderBottom: '1px solid #f0f0f0', padding: '16px 24px' }, body: { padding: '24px' } }}
+        styles={{
+          header: { borderBottom: '1px solid #f0f0f0', padding: '16px 24px' },
+          body: { padding: '24px' },
+        }}
       >
         <Form
           layout="vertical"
           onFinish={handleSaveFieldConfig}
-          initialValues={deviceFields.reduce((acc, field) => ({
-            ...acc,
-            [field.fieldName]: field.visible
-          }), {})}
+          initialValues={deviceFields.reduce(
+            (acc, field) => ({
+              ...acc,
+              [field.fieldName]: field.visible,
+            }),
+            {}
+          )}
         >
           <div style={{ maxHeight: 400, overflowY: 'auto' }}>
             <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '12px' }}>
-              {deviceFields.filter(field => field.fieldName !== 'deviceId').map(field => (
-                <Form.Item
-                  key={field.fieldName}
-                  name={field.fieldName}
-                  valuePropName="checked"
-                  noStyle
-                >
-                  <Checkbox style={{ marginBottom: '8px' }}>
-                    {field.displayName}
-                  </Checkbox>
-                </Form.Item>
-              ))}
+              {deviceFields
+                .filter(field => field.fieldName !== 'deviceId')
+                .map(field => (
+                  <Form.Item
+                    key={field.fieldName}
+                    name={field.fieldName}
+                    valuePropName="checked"
+                    noStyle
+                  >
+                    <Checkbox style={{ marginBottom: '8px' }}>{field.displayName}</Checkbox>
+                  </Form.Item>
+                ))}
             </div>
           </div>
-          
+
           <Form.Item style={{ textAlign: 'right', marginTop: '20px' }}>
             <Space>
-              <Button onClick={() => setFieldConfigModalVisible(false)} style={secondaryActionStyle}>取消</Button>
-              <Button onClick={handleResetFieldConfig} style={secondaryActionStyle}>重置默认</Button>
-              <Button type="primary" htmlType="submit" style={{ height: '40px', borderRadius: designTokens.borderRadius.small, background: designTokens.colors.primary.gradient, border: 'none', color: '#ffffff', boxShadow: designTokens.shadows.small, fontWeight: '500', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>保存</Button>
+              <Button
+                onClick={() => setFieldConfigModalVisible(false)}
+                style={secondaryActionStyle}
+              >
+                取消
+              </Button>
+              <Button onClick={handleResetFieldConfig} style={secondaryActionStyle}>
+                重置默认
+              </Button>
+              <Button
+                type="primary"
+                htmlType="submit"
+                style={{
+                  height: '40px',
+                  borderRadius: designTokens.borderRadius.small,
+                  background: designTokens.colors.primary.gradient,
+                  border: 'none',
+                  color: '#ffffff',
+                  boxShadow: designTokens.shadows.small,
+                  fontWeight: '500',
+                  display: 'inline-flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                }}
+              >
+                保存
+              </Button>
             </Space>
           </Form.Item>
         </Form>
@@ -1540,22 +1859,37 @@ function DeviceManagement() {
         footer={null}
         width={650}
         destroyOnHidden
-        styles={{ header: { borderBottom: '1px solid #f0f0f0', padding: '16px 24px' }, body: { padding: '24px' } }}
+        styles={{
+          header: { borderBottom: '1px solid #f0f0f0', padding: '16px 24px' },
+          body: { padding: '24px' },
+        }}
       >
         {!isImporting && !importResult ? (
           <div>
             <p style={{ color: '#666', marginBottom: '8px' }}>请上传CSV格式的设备数据文件</p>
-            <p style={{ color: '#999', fontSize: '12px', marginBottom: '20px' }}>支持的编码格式：GBK</p>
-            
-            <div style={{ marginBottom: '20px', padding: '16px', background: 'linear-gradient(180deg, #fafafa 0%, #ffffff 100%)', borderRadius: '12px', border: '1px solid #f0f0f0' }}>
-              <p style={{ fontWeight: '600', marginBottom: '8px', color: '#333' }}>CSV文件格式要求：</p>
+            <p style={{ color: '#999', fontSize: '12px', marginBottom: '20px' }}>
+              支持的编码格式：GBK
+            </p>
+
+            <div
+              style={{
+                marginBottom: '20px',
+                padding: '16px',
+                background: 'linear-gradient(180deg, #fafafa 0%, #ffffff 100%)',
+                borderRadius: '12px',
+                border: '1px solid #f0f0f0',
+              }}
+            >
+              <p style={{ fontWeight: '600', marginBottom: '8px', color: '#333' }}>
+                CSV文件格式要求：
+              </p>
               <div style={{ maxHeight: '200px', overflowY: 'auto' }}>
                 {(() => {
                   // 获取必填字段
                   const requiredFields = deviceFields.filter(f => f.visible && f.required);
                   // 获取可选字段
                   const optionalFields = deviceFields.filter(f => f.visible && !f.required);
-                  
+
                   return (
                     <>
                       {requiredFields.length > 0 && (
@@ -1577,23 +1911,35 @@ function DeviceManagement() {
                     </>
                   );
                 })()}
-                <ul style={{ paddingLeft: '20px', marginBottom: '10px', color: '#666', fontSize: '13px', marginTop: '12px' }}>
-                  <li>设备类型：server(服务器)、switch(交换机)、router(路由器)、storage(存储设备)、other(其他)</li>
+                <ul
+                  style={{
+                    paddingLeft: '20px',
+                    marginBottom: '10px',
+                    color: '#666',
+                    fontSize: '13px',
+                    marginTop: '12px',
+                  }}
+                >
+                  <li>
+                    设备类型：server(服务器)、switch(交换机)、router(路由器)、storage(存储设备)、other(其他)
+                  </li>
                   <li>状态值：running(运行中)、maintenance(维护中)、offline(离线)、fault(故障)</li>
                   <li>日期格式：YYYY-MM-DD (例如：2023-01-01)</li>
                 </ul>
               </div>
             </div>
-            
+
             <div style={{ marginBottom: '20px' }}>
               <a href="/api/devices/import-template" download="设备导入模板.csv">
                 <Button icon={<DownloadOutlined />} style={secondaryActionStyle}>
                   下载导入模板
                 </Button>
               </a>
-              <span style={{ color: '#999', fontSize: '12px', marginLeft: '10px' }}>包含示例数据的CSV模板文件（根据当前字段配置生成）</span>
+              <span style={{ color: '#999', fontSize: '12px', marginLeft: '10px' }}>
+                包含示例数据的CSV模板文件（根据当前字段配置生成）
+              </span>
             </div>
-            
+
             <Upload
               name="csvFile"
               accept=".csv"
@@ -1601,7 +1947,23 @@ function DeviceManagement() {
               beforeUpload={handleImport}
               maxCount={1}
             >
-              <Button type="primary" icon={<UploadOutlined />} block style={{ height: '40px', borderRadius: designTokens.borderRadius.small, background: designTokens.colors.primary.gradient, border: 'none', color: '#ffffff', boxShadow: designTokens.shadows.small, fontWeight: '500', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
+              <Button
+                type="primary"
+                icon={<UploadOutlined />}
+                block
+                style={{
+                  height: '40px',
+                  borderRadius: designTokens.borderRadius.small,
+                  background: designTokens.colors.primary.gradient,
+                  border: 'none',
+                  color: '#ffffff',
+                  boxShadow: designTokens.shadows.small,
+                  fontWeight: '500',
+                  display: 'inline-flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                }}
+              >
                 选择CSV文件
               </Button>
             </Upload>
@@ -1609,94 +1971,207 @@ function DeviceManagement() {
         ) : isImporting ? (
           <div>
             <div style={{ display: 'flex', alignItems: 'center', marginBottom: '16px' }}>
-              <div style={{ 
-                width: '48px', 
-                height: '48px', 
-                borderRadius: '50%', 
-                background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
-                display: 'flex', 
-                alignItems: 'center', 
-                justifyContent: 'center',
-                marginRight: '16px',
-                color: '#fff',
-                fontSize: '20px'
-              }}>
+              <div
+                style={{
+                  width: '48px',
+                  height: '48px',
+                  borderRadius: '50%',
+                  background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  marginRight: '16px',
+                  color: '#fff',
+                  fontSize: '20px',
+                }}
+              >
                 <UploadOutlined spin />
               </div>
               <div>
-                <p style={{ margin: '0 0 4px 0', fontWeight: '600', color: '#333', fontSize: '16px' }}>正在导入设备数据</p>
+                <p
+                  style={{
+                    margin: '0 0 4px 0',
+                    fontWeight: '600',
+                    color: '#333',
+                    fontSize: '16px',
+                  }}
+                >
+                  正在导入设备数据
+                </p>
                 <p style={{ margin: 0, color: '#667eea', fontSize: '14px' }}>{importPhase}</p>
               </div>
             </div>
-            <Progress 
-              percent={importProgress} 
-              status="active" 
+            <Progress
+              percent={importProgress}
+              status="active"
               strokeColor={{ '0%': '#667eea', '100%': '#764ba2' }}
               format={() => `${importProgress}%`}
             />
           </div>
         ) : importResult?.statistics ? (
-              <div>
-                <p style={{ marginBottom: '10px', fontWeight: '600' }}>导入完成：</p>
-                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '12px', marginBottom: '16px' }}>
-                  <div style={{ padding: '12px', background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', borderRadius: '8px', color: '#fff', textAlign: 'center' }}>
-                    <div style={{ fontSize: '24px', fontWeight: '700' }}>{importResult.statistics.total || 0}</div>
-                    <div style={{ fontSize: '12px', opacity: 0.9 }}>总记录数</div>
-                  </div>
-                  <div style={{ padding: '12px', background: 'linear-gradient(135deg, #52c41a 0%, #389e0d 100%)', borderRadius: '8px', color: '#fff', textAlign: 'center' }}>
-                    <div style={{ fontSize: '24px', fontWeight: '700' }}>{importResult.statistics.success || 0}</div>
-                    <div style={{ fontSize: '12px', opacity: 0.9 }}>成功</div>
-                  </div>
-                  <div style={{ padding: '12px', background: 'linear-gradient(135deg, #ff4d4f 0%, #cf1322 100%)', borderRadius: '8px', color: '#fff', textAlign: 'center' }}>
-                    <div style={{ fontSize: '24px', fontWeight: '700' }}>{importResult.statistics.failed || 0}</div>
-                    <div style={{ fontSize: '12px', opacity: 0.9 }}>失败</div>
-                  </div>
+          <div>
+            <p style={{ marginBottom: '10px', fontWeight: '600' }}>导入完成：</p>
+            <div
+              style={{
+                display: 'grid',
+                gridTemplateColumns: 'repeat(3, 1fr)',
+                gap: '12px',
+                marginBottom: '16px',
+              }}
+            >
+              <div
+                style={{
+                  padding: '12px',
+                  background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+                  borderRadius: '8px',
+                  color: '#fff',
+                  textAlign: 'center',
+                }}
+              >
+                <div style={{ fontSize: '24px', fontWeight: '700' }}>
+                  {importResult.statistics.total || 0}
                 </div>
-                {(() => {
-                  const errors = importResult.statistics?.errors;
-                  const hasErrors = Array.isArray(errors) && errors.length > 0;
-                  const hasFailedRecords = importResult.statistics?.failed > 0;
-                  
-                  return (hasErrors || hasFailedRecords) && (
-                    <div style={{ marginTop: '20px', maxHeight: 400, overflowY: 'auto', border: '1px solid #ffcccc', borderRadius: '8px', padding: '12px', backgroundColor: '#fff7f7' }}>
-                      <h4 style={{ color: '#d93025', marginBottom: '12px', fontWeight: '600' }}>失败记录详情：</h4>
-                      
-                      {hasErrors ? (
-                        <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: '13px' }}>
-                          <thead>
-                            <tr style={{ backgroundColor: '#ffeeee' }}>
-                              <th style={{ border: '1px solid #ffcccc', padding: '8px', textAlign: 'left', width: '80px' }}>行号</th>
-                              <th style={{ border: '1px solid #ffcccc', padding: '8px', textAlign: 'left' }}>失败原因</th>
-                            </tr>
-                          </thead>
-                          <tbody>
-                            {errors.map((item, index) => (
-                              <tr key={index} style={{ borderBottom: '1px solid #ffcccc' }}>
-                                <td style={{ border: '1px solid #ffcccc', padding: '8px', fontWeight: 'bold' }}>{item.row || index + 1}</td>
-                                <td style={{ border: '1px solid #ffcccc', padding: '8px', color: '#d93025' }}>{item.error || '未知错误'}</td>
-                              </tr>
-                            ))}
-                          </tbody>
-                        </table>
-                      ) : (
-                        <div style={{ color: '#d93025', padding: '20px', textAlign: 'center' }}>
-                          检测到 {importResult.statistics.failed} 条导入失败记录，但未提供详细错误信息
-                        </div>
-                      )}
-                    </div>
-                  );
-                })()}
-                <Button type="primary" onClick={() => {
-                  setImportModalVisible(false);
-                  setImportProgress(0);
-                  setImportResult(null);
-                  setIsImporting(false);
-                  fetchDevices();
-                }} style={{ marginTop: '20px', height: '40px', borderRadius: designTokens.borderRadius.small, background: designTokens.colors.primary.gradient, border: 'none', color: '#ffffff', boxShadow: designTokens.shadows.small, fontWeight: '500', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
-                  确定
-                </Button>
+                <div style={{ fontSize: '12px', opacity: 0.9 }}>总记录数</div>
               </div>
-            ) : null}
+              <div
+                style={{
+                  padding: '12px',
+                  background: 'linear-gradient(135deg, #52c41a 0%, #389e0d 100%)',
+                  borderRadius: '8px',
+                  color: '#fff',
+                  textAlign: 'center',
+                }}
+              >
+                <div style={{ fontSize: '24px', fontWeight: '700' }}>
+                  {importResult.statistics.success || 0}
+                </div>
+                <div style={{ fontSize: '12px', opacity: 0.9 }}>成功</div>
+              </div>
+              <div
+                style={{
+                  padding: '12px',
+                  background: 'linear-gradient(135deg, #ff4d4f 0%, #cf1322 100%)',
+                  borderRadius: '8px',
+                  color: '#fff',
+                  textAlign: 'center',
+                }}
+              >
+                <div style={{ fontSize: '24px', fontWeight: '700' }}>
+                  {importResult.statistics.failed || 0}
+                </div>
+                <div style={{ fontSize: '12px', opacity: 0.9 }}>失败</div>
+              </div>
+            </div>
+            {(() => {
+              const errors = importResult.statistics?.errors;
+              const hasErrors = Array.isArray(errors) && errors.length > 0;
+              const hasFailedRecords = importResult.statistics?.failed > 0;
+
+              return (
+                (hasErrors || hasFailedRecords) && (
+                  <div
+                    style={{
+                      marginTop: '20px',
+                      maxHeight: 400,
+                      overflowY: 'auto',
+                      border: '1px solid #ffcccc',
+                      borderRadius: '8px',
+                      padding: '12px',
+                      backgroundColor: '#fff7f7',
+                    }}
+                  >
+                    <h4 style={{ color: '#d93025', marginBottom: '12px', fontWeight: '600' }}>
+                      失败记录详情：
+                    </h4>
+
+                    {hasErrors ? (
+                      <table
+                        style={{ width: '100%', borderCollapse: 'collapse', fontSize: '13px' }}
+                      >
+                        <thead>
+                          <tr style={{ backgroundColor: '#ffeeee' }}>
+                            <th
+                              style={{
+                                border: '1px solid #ffcccc',
+                                padding: '8px',
+                                textAlign: 'left',
+                                width: '80px',
+                              }}
+                            >
+                              行号
+                            </th>
+                            <th
+                              style={{
+                                border: '1px solid #ffcccc',
+                                padding: '8px',
+                                textAlign: 'left',
+                              }}
+                            >
+                              失败原因
+                            </th>
+                          </tr>
+                        </thead>
+                        <tbody>
+                          {errors.map((item, index) => (
+                            <tr key={index} style={{ borderBottom: '1px solid #ffcccc' }}>
+                              <td
+                                style={{
+                                  border: '1px solid #ffcccc',
+                                  padding: '8px',
+                                  fontWeight: 'bold',
+                                }}
+                              >
+                                {item.row || index + 1}
+                              </td>
+                              <td
+                                style={{
+                                  border: '1px solid #ffcccc',
+                                  padding: '8px',
+                                  color: '#d93025',
+                                }}
+                              >
+                                {item.error || '未知错误'}
+                              </td>
+                            </tr>
+                          ))}
+                        </tbody>
+                      </table>
+                    ) : (
+                      <div style={{ color: '#d93025', padding: '20px', textAlign: 'center' }}>
+                        检测到 {importResult.statistics.failed} 条导入失败记录，但未提供详细错误信息
+                      </div>
+                    )}
+                  </div>
+                )
+              );
+            })()}
+            <Button
+              type="primary"
+              onClick={() => {
+                setImportModalVisible(false);
+                setImportProgress(0);
+                setImportResult(null);
+                setIsImporting(false);
+                fetchDevices();
+              }}
+              style={{
+                marginTop: '20px',
+                height: '40px',
+                borderRadius: designTokens.borderRadius.small,
+                background: designTokens.colors.primary.gradient,
+                border: 'none',
+                color: '#ffffff',
+                boxShadow: designTokens.shadows.small,
+                fontWeight: '500',
+                display: 'inline-flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}
+            >
+              确定
+            </Button>
+          </div>
+        ) : null}
       </Modal>
 
       <Modal
@@ -1712,27 +2187,50 @@ function DeviceManagement() {
           setSelectedDevice(null);
         }}
         footer={[
-          <Button key="close" onClick={() => {
-            setDetailModalVisible(false);
-            setSelectedDevice(null);
-          }} style={secondaryActionStyle}>
+          <Button
+            key="close"
+            onClick={() => {
+              setDetailModalVisible(false);
+              setSelectedDevice(null);
+            }}
+            style={secondaryActionStyle}
+          >
             关闭
           </Button>,
-          <Button key="edit" type="primary" onClick={() => {
-            setDetailModalVisible(false);
-            showModal(selectedDevice);
-          }} style={{ height: '40px', borderRadius: designTokens.borderRadius.small, background: designTokens.colors.primary.gradient, border: 'none', color: '#ffffff', boxShadow: designTokens.shadows.small, fontWeight: '500', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
+          <Button
+            key="edit"
+            type="primary"
+            onClick={() => {
+              setDetailModalVisible(false);
+              showModal(selectedDevice);
+            }}
+            style={{
+              height: '40px',
+              borderRadius: designTokens.borderRadius.small,
+              background: designTokens.colors.primary.gradient,
+              border: 'none',
+              color: '#ffffff',
+              boxShadow: designTokens.shadows.small,
+              fontWeight: '500',
+              display: 'inline-flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
             编辑
-          </Button>
+          </Button>,
         ]}
         width={800}
         destroyOnHidden
-        styles={{ header: { borderBottom: '1px solid #f0f0f0', padding: '16px 24px' }, body: { padding: '24px' } }}
+        styles={{
+          header: { borderBottom: '1px solid #f0f0f0', padding: '16px 24px' },
+          body: { padding: '24px' },
+        }}
       >
         {selectedDevice && (
           <div>
-            <Card 
-              size="small" 
+            <Card
+              size="small"
               title={
                 <span style={{ fontWeight: '600' }}>
                   <CloudServerOutlined style={{ marginRight: '8px', color: '#667eea' }} />
@@ -1744,7 +2242,9 @@ function DeviceManagement() {
               <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '16px' }}>
                 <div>
                   <label style={{ fontWeight: '500', color: '#666' }}>设备ID：</label>
-                  <span style={{ marginLeft: 8, color: '#333' }}>{selectedDevice.deviceId || '-'}</span>
+                  <span style={{ marginLeft: 8, color: '#333' }}>
+                    {selectedDevice.deviceId || '-'}
+                  </span>
                 </div>
                 <div>
                   <label style={{ fontWeight: '500', color: '#666' }}>设备名称：</label>
@@ -1758,72 +2258,118 @@ function DeviceManagement() {
                         {getDeviceTypeIcon(selectedDevice.type)}
                         <span>{typeMap[selectedDevice.type] || selectedDevice.type}</span>
                       </Space>
-                    ) : '-'}
+                    ) : (
+                      '-'
+                    )}
                   </span>
                 </div>
                 <div>
                   <label style={{ fontWeight: '500', color: '#666' }}>型号：</label>
-                  <span style={{ marginLeft: 8, color: '#333' }}>{selectedDevice.model || '-'}</span>
+                  <span style={{ marginLeft: 8, color: '#333' }}>
+                    {selectedDevice.model || '-'}
+                  </span>
                 </div>
                 <div>
                   <label style={{ fontWeight: '500', color: '#666' }}>序列号：</label>
-                  <span style={{ marginLeft: 8, color: '#333' }}>{selectedDevice.serialNumber || '-'}</span>
+                  <span style={{ marginLeft: 8, color: '#333' }}>
+                    {selectedDevice.serialNumber || '-'}
+                  </span>
                 </div>
                 <div>
                   <label style={{ fontWeight: '500', color: '#666' }}>IP地址：</label>
-                  <span style={{ marginLeft: 8, color: '#333' }}>{selectedDevice.ipAddress || '-'}</span>
+                  <span style={{ marginLeft: 8, color: '#333' }}>
+                    {selectedDevice.ipAddress || '-'}
+                  </span>
                 </div>
                 <div>
                   <label style={{ fontWeight: '500', color: '#666' }}>所在机房：</label>
-                  <span style={{ marginLeft: 8, color: '#333' }}>{selectedDevice.Rack?.Room?.name || '-'}</span>
+                  <span style={{ marginLeft: 8, color: '#333' }}>
+                    {selectedDevice.Rack?.Room?.name || '-'}
+                  </span>
                 </div>
                 <div>
                   <label style={{ fontWeight: '500', color: '#666' }}>所在机柜：</label>
-                  <span style={{ marginLeft: 8, color: '#333' }}>{selectedDevice.Rack?.name || '-'}</span>
+                  <span style={{ marginLeft: 8, color: '#333' }}>
+                    {selectedDevice.Rack?.name || '-'}
+                  </span>
                 </div>
                 <div>
                   <label style={{ fontWeight: '500', color: '#666' }}>位置：</label>
-                  <span style={{ marginLeft: 8, color: '#333' }}>{selectedDevice.position || '-'}</span>
+                  <span style={{ marginLeft: 8, color: '#333' }}>
+                    {selectedDevice.position || '-'}
+                  </span>
                 </div>
                 <div>
                   <label style={{ fontWeight: '500', color: '#666' }}>高度(U)：</label>
-                  <span style={{ marginLeft: 8, color: '#333' }}>{selectedDevice.height || '-'}</span>
+                  <span style={{ marginLeft: 8, color: '#333' }}>
+                    {selectedDevice.height || '-'}
+                  </span>
                 </div>
                 <div>
                   <label style={{ fontWeight: '500', color: '#666' }}>功率(W)：</label>
-                  <span style={{ marginLeft: 8, color: '#333' }}>{selectedDevice.power || '-'}</span>
+                  <span style={{ marginLeft: 8, color: '#333' }}>
+                    {selectedDevice.power || '-'}
+                  </span>
                 </div>
                 <div>
                   <label style={{ fontWeight: '500', color: '#666' }}>状态：</label>
-                  <span style={{ 
-                    marginLeft: 8, 
-                    color: selectedDevice.status ? statusMap[selectedDevice.status]?.color : '#666',
-                    fontWeight: '600'
-                  }}>
-                    {selectedDevice.status ? statusMap[selectedDevice.status]?.text || selectedDevice.status : '-'}
+                  <span
+                    style={{
+                      marginLeft: 8,
+                      color: selectedDevice.status
+                        ? statusMap[selectedDevice.status]?.color
+                        : '#666',
+                      fontWeight: '600',
+                    }}
+                  >
+                    {selectedDevice.status
+                      ? statusMap[selectedDevice.status]?.text || selectedDevice.status
+                      : '-'}
                   </span>
                 </div>
                 <div>
                   <label style={{ fontWeight: '500', color: '#666' }}>购买日期：</label>
                   <span style={{ marginLeft: 8, color: '#333' }}>
-                    {selectedDevice.purchaseDate ? new Date(selectedDevice.purchaseDate).toLocaleDateString('zh-CN') : '-'}
+                    {selectedDevice.purchaseDate
+                      ? new Date(selectedDevice.purchaseDate).toLocaleDateString('zh-CN')
+                      : '-'}
                   </span>
                 </div>
                 <div>
                   <label style={{ fontWeight: '500', color: '#666' }}>保修到期：</label>
-                  <span style={{ 
-                    marginLeft: 8, 
-                    color: selectedDevice.warrantyExpiry && new Date(selectedDevice.warrantyExpiry) < new Date() ? '#d93025' : '#333',
-                    fontWeight: selectedDevice.warrantyExpiry && new Date(selectedDevice.warrantyExpiry) < new Date() ? '600' : 'normal'
-                  }}>
-                    {selectedDevice.warrantyExpiry ? new Date(selectedDevice.warrantyExpiry).toLocaleDateString('zh-CN') : '-'}
+                  <span
+                    style={{
+                      marginLeft: 8,
+                      color:
+                        selectedDevice.warrantyExpiry &&
+                        new Date(selectedDevice.warrantyExpiry) < new Date()
+                          ? '#d93025'
+                          : '#333',
+                      fontWeight:
+                        selectedDevice.warrantyExpiry &&
+                        new Date(selectedDevice.warrantyExpiry) < new Date()
+                          ? '600'
+                          : 'normal',
+                    }}
+                  >
+                    {selectedDevice.warrantyExpiry
+                      ? new Date(selectedDevice.warrantyExpiry).toLocaleDateString('zh-CN')
+                      : '-'}
                   </span>
                 </div>
               </div>
               {selectedDevice.description && (
                 <div style={{ marginTop: '16px' }}>
                   <label style={{ fontWeight: '500', color: '#666' }}>描述：</label>
-                  <div style={{ marginTop: '8px', padding: '12px', backgroundColor: '#fafafa', borderRadius: '8px', color: '#333' }}>
+                  <div
+                    style={{
+                      marginTop: '8px',
+                      padding: '12px',
+                      backgroundColor: '#fafafa',
+                      borderRadius: '8px',
+                      color: '#333',
+                    }}
+                  >
                     {selectedDevice.description}
                   </div>
                 </div>
@@ -1843,15 +2389,39 @@ function DeviceManagement() {
         open={batchStatusModalVisible}
         onCancel={() => setBatchStatusModalVisible(false)}
         footer={[
-          <Button key="cancel" onClick={() => setBatchStatusModalVisible(false)} style={secondaryActionStyle}>
+          <Button
+            key="cancel"
+            onClick={() => setBatchStatusModalVisible(false)}
+            style={secondaryActionStyle}
+          >
             取消
           </Button>,
-          <Button key="submit" type="primary" loading={batchStatusLoading} onClick={handleBatchStatusChange} style={{ height: '40px', borderRadius: designTokens.borderRadius.small, background: designTokens.colors.primary.gradient, border: 'none', color: '#ffffff', boxShadow: designTokens.shadows.small, fontWeight: '500', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
+          <Button
+            key="submit"
+            type="primary"
+            loading={batchStatusLoading}
+            onClick={handleBatchStatusChange}
+            style={{
+              height: '40px',
+              borderRadius: designTokens.borderRadius.small,
+              background: designTokens.colors.primary.gradient,
+              border: 'none',
+              color: '#ffffff',
+              boxShadow: designTokens.shadows.small,
+              fontWeight: '500',
+              display: 'inline-flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
             确定
-          </Button>
+          </Button>,
         ]}
         destroyOnHidden
-        styles={{ header: { borderBottom: '1px solid #f0f0f0', padding: '16px 24px' }, body: { padding: '24px' } }}
+        styles={{
+          header: { borderBottom: '1px solid #f0f0f0', padding: '16px 24px' },
+          body: { padding: '24px' },
+        }}
       >
         <Form form={batchStatusForm} layout="vertical">
           <Form.Item
@@ -1867,7 +2437,9 @@ function DeviceManagement() {
             </Select>
           </Form.Item>
           <div style={{ color: '#666', fontSize: '13px' }}>
-            已选择 <span style={{ color: '#1890ff', fontWeight: 600 }}>{selectedDevices.length}</span> 个设备
+            已选择{' '}
+            <span style={{ color: '#1890ff', fontWeight: 600 }}>{selectedDevices.length}</span>{' '}
+            个设备
           </div>
         </Form>
       </Modal>
@@ -1882,15 +2454,39 @@ function DeviceManagement() {
         open={exportModalVisible}
         onCancel={() => setExportModalVisible(false)}
         footer={[
-          <Button key="cancel" onClick={() => setExportModalVisible(false)} style={secondaryActionStyle}>
+          <Button
+            key="cancel"
+            onClick={() => setExportModalVisible(false)}
+            style={secondaryActionStyle}
+          >
             取消
           </Button>,
-          <Button key="submit" type="primary" loading={exportLoading} onClick={handleEnhancedExport} style={{ height: '40px', borderRadius: designTokens.borderRadius.small, background: designTokens.colors.primary.gradient, border: 'none', color: '#ffffff', boxShadow: designTokens.shadows.small, fontWeight: '500', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
+          <Button
+            key="submit"
+            type="primary"
+            loading={exportLoading}
+            onClick={handleEnhancedExport}
+            style={{
+              height: '40px',
+              borderRadius: designTokens.borderRadius.small,
+              background: designTokens.colors.primary.gradient,
+              border: 'none',
+              color: '#ffffff',
+              boxShadow: designTokens.shadows.small,
+              fontWeight: '500',
+              display: 'inline-flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
             导出
-          </Button>
+          </Button>,
         ]}
         destroyOnHidden
-        styles={{ header: { borderBottom: '1px solid #f0f0f0', padding: '16px 24px' }, body: { padding: '24px' } }}
+        styles={{
+          header: { borderBottom: '1px solid #f0f0f0', padding: '16px 24px' },
+          body: { padding: '24px' },
+        }}
         width={600}
       >
         <Form layout="vertical">
@@ -1908,28 +2504,40 @@ function DeviceManagement() {
             </Select>
           </Form.Item>
           <Form.Item label="选择导出字段">
-            <div style={{ maxHeight: '300px', overflow: 'auto', border: '1px solid #f0f0f0', borderRadius: '8px', padding: '12px' }}>
-              {deviceFields.filter(f => f.visible && f.fieldName !== 'rackId').map(field => (
-                <div key={field.fieldName} style={{ marginBottom: '8px' }}>
-                  <Checkbox
-                    checked={exportFields.includes(field.fieldName)}
-                    onChange={(e) => {
-                      if (e.target.checked) {
-                        setExportFields([...exportFields, field.fieldName]);
-                      } else {
-                        setExportFields(exportFields.filter(f => f !== field.fieldName));
-                      }
-                    }}
-                  >
-                    {field.displayName}
-                  </Checkbox>
-                </div>
-              ))}
+            <div
+              style={{
+                maxHeight: '300px',
+                overflow: 'auto',
+                border: '1px solid #f0f0f0',
+                borderRadius: '8px',
+                padding: '12px',
+              }}
+            >
+              {deviceFields
+                .filter(f => f.visible && f.fieldName !== 'rackId')
+                .map(field => (
+                  <div key={field.fieldName} style={{ marginBottom: '8px' }}>
+                    <Checkbox
+                      checked={exportFields.includes(field.fieldName)}
+                      onChange={e => {
+                        if (e.target.checked) {
+                          setExportFields([...exportFields, field.fieldName]);
+                        } else {
+                          setExportFields(exportFields.filter(f => f !== field.fieldName));
+                        }
+                      }}
+                    >
+                      {field.displayName}
+                    </Checkbox>
+                  </div>
+                ))}
             </div>
           </Form.Item>
           <div style={{ color: '#666', fontSize: '13px' }}>
-            已选择 <span style={{ color: '#1890ff', fontWeight: 600 }}>{selectedDevices.length}</span> 个设备，
-            将导出 <span style={{ color: '#52c41a', fontWeight: 600 }}>{exportFields.length}</span> 个字段
+            已选择{' '}
+            <span style={{ color: '#1890ff', fontWeight: 600 }}>{selectedDevices.length}</span>{' '}
+            个设备， 将导出{' '}
+            <span style={{ color: '#52c41a', fontWeight: 600 }}>{exportFields.length}</span> 个字段
           </div>
         </Form>
       </Modal>
@@ -1937,4 +2545,4 @@ function DeviceManagement() {
   );
 }
 
-export default DeviceManagement;
\ No newline at end of file
+export default DeviceManagement;
diff --git a/frontend/src/pages/Login.jsx b/frontend/src/pages/Login.jsx
index 9856237..979f31b 100644
--- a/frontend/src/pages/Login.jsx
+++ b/frontend/src/pages/Login.jsx
@@ -6,7 +6,7 @@ import {
   MailOutlined,
   PhoneOutlined,
   SafetyCertificateOutlined,
-  RobotOutlined
+  RobotOutlined,
 } from '@ant-design/icons';
 import { useNavigate } from 'react-router-dom';
 import { useAuth } from '../context/AuthContext';
@@ -40,7 +40,7 @@ const Login = () => {
     }
   };
 
-  const onFinishLogin = async (values) => {
+  const onFinishLogin = async values => {
     setLoading(true);
     try {
       const result = await login(values.username, values.password);
@@ -61,7 +61,7 @@ const Login = () => {
     }
   };
 
-  const onFinishUnlock = async (values) => {
+  const onFinishUnlock = async values => {
     setLoading(true);
     try {
       const response = await authAPI.unlock(values);
@@ -78,7 +78,7 @@ const Login = () => {
     }
   };
 
-  const onFinishRegister = async (values) => {
+  const onFinishRegister = async values => {
     if (values.password !== values.confirmPassword) {
       message.error('两次输入的密码不一致');
       return;
@@ -91,7 +91,7 @@ const Login = () => {
         password: values.password,
         email: values.email,
         phone: values.phone,
-        realName: values.realName
+        realName: values.realName,
       });
 
       if (result.success) {
@@ -123,14 +123,14 @@ const Login = () => {
     background: 'linear-gradient(135deg, #667eea 0%, #764ba2 50%, #6B8DD6 100%)',
     padding: '24px',
     position: 'relative',
-    overflow: 'hidden'
+    overflow: 'hidden',
   };
 
   const backgroundDecorationStyle = {
     position: 'absolute',
     borderRadius: '50%',
     filter: 'blur(80px)',
-    opacity: '0.3'
+    opacity: '0.3',
   };
 
   const cardStyle = {
@@ -140,13 +140,13 @@ const Login = () => {
     boxShadow: '0 20px 60px rgba(0,0,0,0.25), 0 8px 20px rgba(0,0,0,0.15)',
     background: 'rgba(255, 255, 255, 0.95)',
     backdropFilter: 'blur(20px)',
-    border: '1px solid rgba(255, 255, 255, 0.3)'
+    border: '1px solid rgba(255, 255, 255, 0.3)',
   };
 
   const headerStyle = {
     textAlign: 'center',
     marginBottom: '32px',
-    paddingTop: '8px'
+    paddingTop: '8px',
   };
 
   const iconContainerStyle = {
@@ -158,7 +158,7 @@ const Login = () => {
     alignItems: 'center',
     justifyContent: 'center',
     margin: '0 auto 20px',
-    boxShadow: '0 8px 24px rgba(102, 126, 234, 0.4)'
+    boxShadow: '0 8px 24px rgba(102, 126, 234, 0.4)',
   };
 
   const titleStyle = {
@@ -167,22 +167,22 @@ const Login = () => {
     background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
     WebkitBackgroundClip: 'text',
     WebkitTextFillColor: 'transparent',
-    marginBottom: '8px'
+    marginBottom: '8px',
   };
 
   const subtitleStyle = {
     fontSize: '14px',
-    color: '#8c8c8c'
+    color: '#8c8c8c',
   };
 
   const formStyle = {
-    marginTop: '24px'
+    marginTop: '24px',
   };
 
   const inputStyle = {
     borderRadius: '8px',
     height: '48px',
-    border: '1px solid #e8e8e8'
+    border: '1px solid #e8e8e8',
   };
 
   const submitButtonStyle = {
@@ -194,13 +194,13 @@ const Login = () => {
     background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
     border: 'none',
     boxShadow: '0 4px 15px rgba(102, 126, 234, 0.4)',
-    transition: 'all 0.3s ease'
+    transition: 'all 0.3s ease',
   };
 
   const footerStyle = {
     textAlign: 'center',
     marginTop: '24px',
-    paddingBottom: '16px'
+    paddingBottom: '16px',
   };
 
   const toggleButtonStyle = {
@@ -208,32 +208,36 @@ const Login = () => {
     fontWeight: '500',
     padding: '4px 8px',
     borderRadius: '4px',
-    transition: 'all 0.3s ease'
+    transition: 'all 0.3s ease',
   };
 
   const inputPrefixStyle = {
     color: '#667eea',
-    fontSize: '18px'
+    fontSize: '18px',
   };
 
   return (
     <div style={containerStyle}>
-      <div style={{
-        ...backgroundDecorationStyle,
-        width: '400px',
-        height: '400px',
-        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
-        top: '-100px',
-        right: '-100px'
-      }} />
-      <div style={{
-        ...backgroundDecorationStyle,
-        width: '300px',
-        height: '300px',
-        background: 'linear-gradient(135deg, #764ba2 0%, #6B8DD6 100%)',
-        bottom: '-50px',
-        left: '-50px'
-      }} />
+      <div
+        style={{
+          ...backgroundDecorationStyle,
+          width: '400px',
+          height: '400px',
+          background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+          top: '-100px',
+          right: '-100px',
+        }}
+      />
+      <div
+        style={{
+          ...backgroundDecorationStyle,
+          width: '300px',
+          height: '300px',
+          background: 'linear-gradient(135deg, #764ba2 0%, #6B8DD6 100%)',
+          bottom: '-50px',
+          left: '-50px',
+        }}
+      />
 
       <Card style={cardStyle}>
         <div style={headerStyle}>
@@ -244,8 +248,11 @@ const Login = () => {
             {isFirstUser ? '创建管理员账户' : unlockMode ? '账户解锁' : 'IDC设备管理系统'}
           </Title>
           <Text style={subtitleStyle}>
-            {isFirstUser ? '首次使用，请创建系统管理员账户' : 
-             unlockMode ? '输入账户信息以解锁账户' : '安全登录您的账户'}
+            {isFirstUser
+              ? '首次使用，请创建系统管理员账户'
+              : unlockMode
+                ? '输入账户信息以解锁账户'
+                : '安全登录您的账户'}
           </Text>
         </div>
 
@@ -272,7 +279,7 @@ const Login = () => {
                 rules={[
                   { required: true, message: '请输入用户名' },
                   { min: 3, max: 20, message: '用户名长度必须在3-20个字符之间' },
-                  { pattern: /^[a-zA-Z0-9_]+$/, message: '用户名只能包含字母、数字和下划线' }
+                  { pattern: /^[a-zA-Z0-9_]+$/, message: '用户名只能包含字母、数字和下划线' },
                 ]}
               >
                 <Input
@@ -282,10 +289,7 @@ const Login = () => {
                 />
               </Form.Item>
 
-              <Form.Item
-                name="realName"
-                rules={[{ required: true, message: '请输入真实姓名' }]}
-              >
+              <Form.Item name="realName" rules={[{ required: true, message: '请输入真实姓名' }]}>
                 <Input
                   prefix={<SafetyCertificateOutlined style={inputPrefixStyle} />}
                   placeholder="真实姓名"
@@ -297,7 +301,7 @@ const Login = () => {
                 name="email"
                 rules={[
                   { required: true, message: '请输入邮箱' },
-                  { type: 'email', message: '请输入有效的邮箱地址' }
+                  { type: 'email', message: '请输入有效的邮箱地址' },
                 ]}
               >
                 <Input
@@ -307,9 +311,7 @@ const Login = () => {
                 />
               </Form.Item>
 
-              <Form.Item
-                name="phone"
-              >
+              <Form.Item name="phone">
                 <Input
                   prefix={<PhoneOutlined style={inputPrefixStyle} />}
                   placeholder="手机号（可选）"
@@ -321,7 +323,7 @@ const Login = () => {
                 name="password"
                 rules={[
                   { required: true, message: '请输入密码' },
-                  { min: 6, message: '密码长度不能少于6个字符' }
+                  { min: 6, message: '密码长度不能少于6个字符' },
                 ]}
               >
                 <Input.Password
@@ -362,11 +364,8 @@ const Login = () => {
                 showIcon
                 style={{ marginBottom: '24px', borderRadius: '8px' }}
               />
-              
-              <Form.Item
-                name="username"
-                rules={[{ required: true, message: '请输入用户名' }]}
-              >
+
+              <Form.Item name="username" rules={[{ required: true, message: '请输入用户名' }]}>
                 <Input
                   prefix={<UserOutlined style={inputPrefixStyle} />}
                   placeholder="用户名"
@@ -374,10 +373,7 @@ const Login = () => {
                 />
               </Form.Item>
 
-              <Form.Item
-                name="password"
-                rules={[{ required: true, message: '请输入密码' }]}
-              >
+              <Form.Item name="password" rules={[{ required: true, message: '请输入密码' }]}>
                 <Input.Password
                   prefix={<LockOutlined style={inputPrefixStyle} />}
                   placeholder="密码"
@@ -387,10 +383,7 @@ const Login = () => {
             </>
           ) : (
             <>
-              <Form.Item
-                name="username"
-                rules={[{ required: true, message: '请输入用户名' }]}
-              >
+              <Form.Item name="username" rules={[{ required: true, message: '请输入用户名' }]}>
                 <Input
                   prefix={<UserOutlined style={inputPrefixStyle} />}
                   placeholder="用户名"
@@ -398,10 +391,7 @@ const Login = () => {
                 />
               </Form.Item>
 
-              <Form.Item
-                name="password"
-                rules={[{ required: true, message: '请输入密码' }]}
-              >
+              <Form.Item name="password" rules={[{ required: true, message: '请输入密码' }]}>
                 <Input.Password
                   prefix={<LockOutlined style={inputPrefixStyle} />}
                   placeholder="密码"
@@ -412,12 +402,7 @@ const Login = () => {
           )}
 
           <Form.Item style={{ marginBottom: '16px', marginTop: '24px' }}>
-            <Button
-              type="primary"
-              htmlType="submit"
-              loading={loading}
-              style={submitButtonStyle}
-            >
+            <Button type="primary" htmlType="submit" loading={loading} style={submitButtonStyle}>
               {registerMode ? '立即注册' : unlockMode ? '解 锁' : '登 录'}
             </Button>
           </Form.Item>
@@ -435,10 +420,10 @@ const Login = () => {
                     type="link"
                     size="small"
                     style={toggleButtonStyle}
-                    onMouseEnter={(e) => {
+                    onMouseEnter={e => {
                       e.target.style.background = 'rgba(102, 126, 234, 0.1)';
                     }}
-                    onMouseLeave={(e) => {
+                    onMouseLeave={e => {
                       e.target.style.background = 'transparent';
                     }}
                     onClick={() => setUnlockMode(false)}
@@ -452,10 +437,10 @@ const Login = () => {
                     type="link"
                     size="small"
                     style={toggleButtonStyle}
-                    onMouseEnter={(e) => {
+                    onMouseEnter={e => {
                       e.target.style.background = 'rgba(102, 126, 234, 0.1)';
                     }}
-                    onMouseLeave={(e) => {
+                    onMouseLeave={e => {
                       e.target.style.background = 'transparent';
                     }}
                     onClick={() => setRegisterMode(!registerMode)}
@@ -466,10 +451,10 @@ const Login = () => {
                     type="link"
                     size="small"
                     style={toggleButtonStyle}
-                    onMouseEnter={(e) => {
+                    onMouseEnter={e => {
                       e.target.style.background = 'rgba(102, 126, 234, 0.1)';
                     }}
-                    onMouseLeave={(e) => {
+                    onMouseLeave={e => {
                       e.target.style.background = 'transparent';
                     }}
                     onClick={() => setUnlockMode(true)}
diff --git a/frontend/src/pages/PortManagement.jsx b/frontend/src/pages/PortManagement.jsx
index 4c62d13..989a5f0 100644
--- a/frontend/src/pages/PortManagement.jsx
+++ b/frontend/src/pages/PortManagement.jsx
@@ -1,6 +1,46 @@
 import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
-import { Table, Button, Modal, Form, Input, Select, message, Card, Space, Popconfirm, Tag, Tooltip, InputNumber, Collapse, Empty, Spin, Upload, Progress, Checkbox, Tabs, Badge, List, Typography } from 'antd';
-import { PlusOutlined, EditOutlined, DeleteOutlined, SearchOutlined, ReloadOutlined, ExportOutlined, ImportOutlined, DownloadOutlined, UploadOutlined as UploadIcon, AppstoreOutlined, UnorderedListOutlined, FilterOutlined, EyeOutlined, CompressOutlined, CloudServerOutlined } from '@ant-design/icons';
+import {
+  Table,
+  Button,
+  Modal,
+  Form,
+  Input,
+  Select,
+  message,
+  Card,
+  Space,
+  Popconfirm,
+  Tag,
+  Tooltip,
+  InputNumber,
+  Collapse,
+  Empty,
+  Spin,
+  Upload,
+  Progress,
+  Checkbox,
+  Tabs,
+  Badge,
+  List,
+  Typography,
+} from 'antd';
+import {
+  PlusOutlined,
+  EditOutlined,
+  DeleteOutlined,
+  SearchOutlined,
+  ReloadOutlined,
+  ExportOutlined,
+  ImportOutlined,
+  DownloadOutlined,
+  UploadOutlined as UploadIcon,
+  AppstoreOutlined,
+  UnorderedListOutlined,
+  FilterOutlined,
+  EyeOutlined,
+  CompressOutlined,
+  CloudServerOutlined,
+} from '@ant-design/icons';
 import axios from 'axios';
 import * as XLSX from 'xlsx';
 import Papa from 'papaparse';
@@ -19,35 +59,35 @@ const designTokens = {
       main: '#667eea',
       gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
       light: '#8b9ff0',
-      dark: '#4f5db8'
+      dark: '#4f5db8',
     },
     success: {
       main: '#10b981',
       gradient: 'linear-gradient(135deg, #10b981 0%, #059669 100%)',
       light: '#34d399',
-      dark: '#047857'
+      dark: '#047857',
     },
     warning: {
       main: '#f59e0b',
       gradient: 'linear-gradient(135deg, #f59e0b 0%, #d97706 100%)',
       light: '#fbbf24',
-      dark: '#b45309'
+      dark: '#b45309',
     },
     error: {
       main: '#ef4444',
       gradient: 'linear-gradient(135deg, #ef4444 0%, #dc2626 100%)',
       light: '#f87171',
-      dark: '#b91c1c'
-    }
+      dark: '#b91c1c',
+    },
   },
   borderRadius: {
     small: '6px',
     medium: '10px',
-    large: '16px'
+    large: '16px',
   },
   shadows: {
-    medium: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)'
-  }
+    medium: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)',
+  },
 };
 
 function PortManagement() {
@@ -60,7 +100,7 @@ function PortManagement() {
     deviceId: '',
     status: 'all',
     portType: 'all',
-    portSpeed: 'all'
+    portSpeed: 'all',
   });
   const [modalVisible, setModalVisible] = useState(false);
   const [editingPort, setEditingPort] = useState(null);
@@ -81,7 +121,7 @@ function PortManagement() {
   const [panelFilters, setPanelFilters] = useState({
     deviceType: 'all',
     searchText: '',
-    showOnlyOccupied: false
+    showOnlyOccupied: false,
   });
   const [visibleDeviceCount, setVisibleDeviceCount] = useState(10);
   const [expandedDevices, setExpandedDevices] = useState({});
@@ -96,14 +136,14 @@ function PortManagement() {
     try {
       setLoading(true);
       const params = {
-        pageSize: 1000 // 获取所有端口，不分页
+        pageSize: 1000, // 获取所有端口，不分页
       };
-      
+
       if (filters.deviceId) params.deviceId = filters.deviceId;
       if (filters.status !== 'all') params.status = filters.status;
       if (filters.portType !== 'all') params.portType = filters.portType;
       if (filters.portSpeed !== 'all') params.portSpeed = filters.portSpeed;
-      
+
       const response = await axios.get('/api/device-ports', { params });
       setPorts(response.data.ports || response.data || []);
     } catch (error) {
@@ -146,16 +186,16 @@ function PortManagement() {
       if (!grouped[deviceId]) {
         grouped[deviceId] = {
           device: devices.find(d => d.deviceId === deviceId),
-          ports: []
+          ports: [],
         };
       }
       grouped[deviceId].ports.push(port);
     });
-    
+
     // 对每个设备的端口按名称升序排序
     Object.keys(grouped).forEach(deviceId => {
       grouped[deviceId].ports.sort((a, b) => {
-        const extractNumbers = (str) => {
+        const extractNumbers = str => {
           const matches = str.match(/\d+/g);
           return matches ? matches.map(Number) : [];
         };
@@ -169,7 +209,7 @@ function PortManagement() {
         return a.portName.localeCompare(b.portName);
       });
     });
-    
+
     setGroupedPorts(grouped);
   }, [ports, devices]);
 
@@ -182,7 +222,7 @@ function PortManagement() {
       deviceId: '',
       status: 'all',
       portType: 'all',
-      portSpeed: 'all'
+      portSpeed: 'all',
     });
   };
 
@@ -192,24 +232,24 @@ function PortManagement() {
     setModalVisible(true);
   };
 
-  const handleAddPortForDevice = (device) => {
+  const handleAddPortForDevice = device => {
     setEditingPort(null);
     form.resetFields();
     // 自动选中当前设备
     form.setFieldsValue({
-      deviceId: device.deviceId
+      deviceId: device.deviceId,
     });
     setModalVisible(true);
   };
 
   // 打开网卡管理模态框
-  const handleManageNetworkCards = (device) => {
+  const handleManageNetworkCards = device => {
     setSelectedDeviceForNic(device);
     setNetworkCardModalVisible(true);
   };
 
   // 打开添加网卡模态框
-  const handleAddNetworkCard = (device) => {
+  const handleAddNetworkCard = device => {
     setSelectedDeviceForNic(device);
     setPortCreateModalVisible(true);
   };
@@ -227,7 +267,7 @@ function PortManagement() {
     fetchPorts();
   };
 
-  const handleEdit = (port) => {
+  const handleEdit = port => {
     setEditingPort(port);
     form.setFieldsValue({
       portId: port.portId,
@@ -237,12 +277,12 @@ function PortManagement() {
       portSpeed: port.portSpeed,
       status: port.status,
       vlanId: port.vlanId,
-      description: port.description
+      description: port.description,
     });
     setModalVisible(true);
   };
 
-  const handleDelete = async (portId) => {
+  const handleDelete = async portId => {
     try {
       await axios.delete(`/api/device-ports/${portId}`);
       message.success('删除成功');
@@ -254,14 +294,15 @@ function PortManagement() {
   };
 
   // 解析端口名称范围，例如 "1/0/1-1/0/48" -> ["1/0/1", "1/0/2", ..., "1/0/48"]
-  const parsePortRange = (portName) => {
+  const parsePortRange = portName => {
     const rangeMatch = portName.match(/^(.*?)\/(\d+)-\1\/(\d+)$/);
     if (rangeMatch) {
       const prefix = rangeMatch[1];
       const start = parseInt(rangeMatch[2]);
       const end = parseInt(rangeMatch[3]);
-      
-      if (start <= end && end - start < 100) { // 限制最多100个端口
+
+      if (start <= end && end - start < 100) {
+        // 限制最多100个端口
         return Array.from({ length: end - start + 1 }, (_, i) => `${prefix}/${start + i}`);
       }
     }
@@ -271,14 +312,14 @@ function PortManagement() {
   const handleSubmit = async () => {
     try {
       const values = await form.validateFields();
-      
+
       if (editingPort) {
         await axios.put(`/api/device-ports/${editingPort.portId}`, values);
         message.success('更新成功');
       } else {
         // 解析端口名称范围
         const portNames = parsePortRange(values.portName);
-        
+
         if (portNames.length > 1) {
           // 批量创建端口
           const portsData = portNames.map((name, index) => ({
@@ -289,12 +330,12 @@ function PortManagement() {
             portSpeed: values.portSpeed,
             status: values.status,
             vlanId: values.vlanId,
-            description: values.description
+            description: values.description,
           }));
-          
+
           const response = await axios.post('/api/device-ports/batch', { ports: portsData });
           const { success, failed } = response.data;
-          
+
           if (failed > 0) {
             message.warning(`批量创建完成！成功 ${success} 个，失败 ${failed} 个`);
           } else {
@@ -306,7 +347,7 @@ function PortManagement() {
           message.success('创建成功');
         }
       }
-      
+
       setModalVisible(false);
       form.resetFields();
       fetchPorts();
@@ -322,16 +363,16 @@ function PortManagement() {
     setImportProgress({ current: 0, total: 0 });
   };
 
-  const handleFileUpload = (info) => {
+  const handleFileUpload = info => {
     const { file } = info;
     setImportFileList([file]);
-    
+
     const reader = new FileReader();
-    reader.onload = async (e) => {
+    reader.onload = async e => {
       try {
         const data = e.target.result;
         let parsedData = [];
-        
+
         if (file.name.endsWith('.xlsx') || file.name.endsWith('.xls')) {
           const workbook = XLSX.read(data, { type: 'binary' });
           const sheetName = workbook.SheetNames[0];
@@ -341,15 +382,15 @@ function PortManagement() {
           Papa.parse(data, {
             header: true,
             skipEmptyLines: true,
-            complete: (results) => {
+            complete: results => {
               parsedData = results.data;
-            }
+            },
           });
         } else {
           message.error('不支持的文件格式，请上传 .xlsx 或 .csv 文件');
           return;
         }
-        
+
         const validatedData = await validateImportData(parsedData);
         setImportPreview(validatedData);
         setImportProgress({ current: 0, total: validatedData.length });
@@ -358,64 +399,64 @@ function PortManagement() {
         console.error('文件解析失败:', error);
       }
     };
-    
+
     reader.readAsBinaryString(file);
   };
 
-  const validateImportData = async (data) => {
+  const validateImportData = async data => {
     const validatedData = [];
     const errors = [];
-    
+
     for (let i = 0; i < data.length; i++) {
       const row = data[i];
       const error = await validatePortRow(row, i);
-      
+
       if (error) {
         errors.push(error);
       } else {
         validatedData.push(row);
       }
     }
-    
+
     if (errors.length > 0) {
       message.warning(`发现 ${errors.length} 条数据错误，已跳过`);
       console.log('导入错误:', errors);
     }
-    
+
     return validatedData;
   };
 
   const validatePortRow = async (row, index) => {
     const errors = [];
-    
+
     if (!row['设备ID'] || !row['端口名称']) {
       return { valid: false, error: `第 ${index + 1} 行：缺少必填字段（设备ID或端口名称）` };
     }
-    
+
     const device = devices.find(d => d.deviceId === row['设备ID']);
     if (!device) {
       return { valid: false, error: `第 ${index + 1} 行：设备不存在` };
     }
-    
+
     const validPortTypes = ['RJ45', 'SFP', 'SFP+', 'SFP28', 'QSFP', 'QSFP28'];
     if (!validPortTypes.includes(row['端口类型'])) {
       return { valid: false, error: `第 ${index + 1} 行：无效的端口类型` };
     }
-    
+
     const validPortSpeeds = ['100M', '1G', '10G', '25G', '40G', '100G'];
     if (!validPortSpeeds.includes(row['端口速率'])) {
       return { valid: false, error: `第 ${index + 1} 行：无效的端口速率` };
     }
-    
+
     const validStatuses = ['空闲', '占用', '故障'];
     if (!validStatuses.includes(row['状态'])) {
       return { valid: false, error: `第 ${index + 1} 行：无效的状态` };
     }
-    
+
     if (errors.length > 0) {
       return { valid: false, error: errors.join('; ') };
     }
-    
+
     return { valid: true };
   };
 
@@ -424,17 +465,17 @@ function PortManagement() {
       message.warning('请先选择要导入的数据');
       return;
     }
-    
+
     setImporting(true);
     setImportProgress({ current: 0, total: importPreview.length });
-    
+
     try {
       const statusMap = {
-        '空闲': 'free',
-        '占用': 'occupied',
-        '故障': 'fault'
+        空闲: 'free',
+        占用: 'occupied',
+        故障: 'fault',
       };
-      
+
       const portsData = importPreview.map((row, index) => ({
         portId: `PORT-${Date.now()}-${index}`,
         deviceId: row['设备ID'],
@@ -443,22 +484,22 @@ function PortManagement() {
         portSpeed: row['端口速率'],
         status: statusMap[row['状态']] || 'free',
         vlanId: row['VLAN ID'],
-        description: row['描述']
+        description: row['描述'],
       }));
-      
+
       const response = await axios.post('/api/device-ports/batch', { ports: portsData });
-      
+
       const { total, success, failed, errors } = response.data;
-      
+
       setImportProgress({ current: total, total: total });
-      
+
       if (failed > 0) {
         console.error('导入错误:', errors);
         message.warning(`导入完成！成功 ${success} 条，失败 ${failed} 条`);
       } else {
         message.success(`导入完成！成功 ${success} 条`);
       }
-      
+
       fetchPorts();
       setImportModalVisible(false);
       setImportPreview([]);
@@ -473,43 +514,43 @@ function PortManagement() {
   const handleDownloadTemplate = () => {
     const templateData = [
       {
-        '设备ID': 'DEV001',
-        '端口名称': 'eth0/1',
-        '端口类型': 'RJ45',
-        '端口速率': '1G',
-        '状态': '空闲',
+        设备ID: 'DEV001',
+        端口名称: 'eth0/1',
+        端口类型: 'RJ45',
+        端口速率: '1G',
+        状态: '空闲',
         'VLAN ID': '100',
-        '描述': '示例端口'
-      }
+        描述: '示例端口',
+      },
     ];
-    
+
     const worksheet = XLSX.utils.json_to_sheet(templateData);
     const workbook = XLSX.utils.book_new();
     XLSX.utils.book_append_sheet(workbook, worksheet, '端口数据');
     XLSX.writeFile(workbook, '端口导入模板.xlsx');
   };
 
-  const getStatusTag = (status) => {
+  const getStatusTag = status => {
     const statusMap = {
-      'free': { color: 'success', text: '空闲' },
-      'occupied': { color: 'processing', text: '占用' },
-      'fault': { color: 'error', text: '故障' },
-      '空闲': { color: 'success', text: '空闲' },
-      '占用': { color: 'processing', text: '占用' },
-      '故障': { color: 'error', text: '故障' }
+      free: { color: 'success', text: '空闲' },
+      occupied: { color: 'processing', text: '占用' },
+      fault: { color: 'error', text: '故障' },
+      空闲: { color: 'success', text: '空闲' },
+      占用: { color: 'processing', text: '占用' },
+      故障: { color: 'error', text: '故障' },
     };
     const config = statusMap[status] || { color: 'default', text: status };
     return <Tag color={config.color}>{config.text}</Tag>;
   };
 
-  const getPortTypeTag = (type) => {
+  const getPortTypeTag = type => {
     const typeMap = {
-      'RJ45': { color: 'blue', text: 'RJ45' },
-      'SFP': { color: 'green', text: 'SFP' },
+      RJ45: { color: 'blue', text: 'RJ45' },
+      SFP: { color: 'green', text: 'SFP' },
       'SFP+': { color: 'cyan', text: 'SFP+' },
-      'SFP28': { color: 'purple', text: 'SFP28' },
-      'QSFP': { color: 'orange', text: 'QSFP' },
-      'QSFP28': { color: 'red', text: 'QSFP28' }
+      SFP28: { color: 'purple', text: 'SFP28' },
+      QSFP: { color: 'orange', text: 'QSFP' },
+      QSFP28: { color: 'red', text: 'QSFP28' },
     };
     const config = typeMap[type] || { color: 'default', text: type };
     return <Tag color={config.color}>{config.text}</Tag>;
@@ -520,45 +561,45 @@ function PortManagement() {
       title: '端口名称',
       dataIndex: 'portName',
       key: 'portName',
-      width: 120
+      width: 120,
     },
     {
       title: '端口类型',
       dataIndex: 'portType',
       key: 'portType',
       width: 100,
-      render: (type) => getPortTypeTag(type)
+      render: type => getPortTypeTag(type),
     },
     {
       title: '端口速率',
       dataIndex: 'portSpeed',
       key: 'portSpeed',
-      width: 100
+      width: 100,
     },
     {
       title: '状态',
       dataIndex: 'status',
       key: 'status',
       width: 100,
-      render: (status) => getStatusTag(status)
+      render: status => getStatusTag(status),
     },
     {
       title: 'VLAN ID',
       dataIndex: 'vlanId',
       key: 'vlanId',
       width: 100,
-      render: (vlanId) => vlanId || '-'
+      render: vlanId => vlanId || '-',
     },
     {
       title: '描述',
       dataIndex: 'description',
       key: 'description',
       ellipsis: true,
-      render: (text) => (
+      render: text => (
         <Tooltip title={text}>
           <span>{text || '-'}</span>
         </Tooltip>
-      )
+      ),
     },
     {
       title: '操作',
@@ -581,27 +622,22 @@ function PortManagement() {
             okText="确定"
             cancelText="取消"
           >
-            <Button
-              type="link"
-              size="small"
-              danger
-              icon={<DeleteOutlined />}
-            >
+            <Button type="link" size="small" danger icon={<DeleteOutlined />}>
               删除
             </Button>
           </Popconfirm>
         </Space>
-      )
-    }
+      ),
+    },
   ];
 
   return (
     <div style={{ padding: '24px', background: '#f5f5f5', minHeight: '100vh' }}>
-      <Card 
-        style={{ 
+      <Card
+        style={{
           borderRadius: designTokens.borderRadius.large,
           boxShadow: designTokens.shadows.medium,
-          marginBottom: 16
+          marginBottom: 16,
         }}
       >
         <div style={{ marginBottom: 16 }}>
@@ -610,7 +646,7 @@ function PortManagement() {
               placeholder="选择设备"
               style={{ width: 200 }}
               value={filters.deviceId || undefined}
-              onChange={(value) => setFilters(prev => ({ ...prev, deviceId: value }))}
+              onChange={value => setFilters(prev => ({ ...prev, deviceId: value }))}
               allowClear
               showSearch
               filterOption={(input, option) => {
@@ -631,7 +667,7 @@ function PortManagement() {
               placeholder="端口类型"
               style={{ width: 120 }}
               value={filters.portType}
-              onChange={(value) => setFilters(prev => ({ ...prev, portType: value }))}
+              onChange={value => setFilters(prev => ({ ...prev, portType: value }))}
             >
               <Option value="all">全部</Option>
               <Option value="RJ45">RJ45</Option>
@@ -641,12 +677,12 @@ function PortManagement() {
               <Option value="QSFP">QSFP</Option>
               <Option value="QSFP28">QSFP28</Option>
             </Select>
-            
+
             <Select
               placeholder="端口速率"
               style={{ width: 120 }}
               value={filters.portSpeed}
-              onChange={(value) => setFilters(prev => ({ ...prev, portSpeed: value }))}
+              onChange={value => setFilters(prev => ({ ...prev, portSpeed: value }))}
             >
               <Option value="all">全部</Option>
               <Option value="100M">100M</Option>
@@ -656,35 +692,42 @@ function PortManagement() {
               <Option value="40G">40G</Option>
               <Option value="100G">100G</Option>
             </Select>
-            
+
             <Select
               placeholder="状态"
               style={{ width: 120 }}
               value={filters.status}
-              onChange={(value) => setFilters(prev => ({ ...prev, status: value }))}
+              onChange={value => setFilters(prev => ({ ...prev, status: value }))}
             >
               <Option value="all">全部</Option>
               <Option value="free">空闲</Option>
               <Option value="occupied">占用</Option>
               <Option value="fault">故障</Option>
             </Select>
-            
-            <Button 
-              type="primary" 
-              icon={<SearchOutlined />} 
+
+            <Button
+              type="primary"
+              icon={<SearchOutlined />}
               onClick={handleSearch}
               style={{ background: designTokens.colors.primary.gradient, border: 'none' }}
             >
               搜索
             </Button>
-            
+
             <Button icon={<ReloadOutlined />} onClick={handleReset}>
               重置
             </Button>
           </Space>
         </div>
-        
-        <div style={{ marginBottom: 16, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+
+        <div
+          style={{
+            marginBottom: 16,
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+          }}
+        >
           <Space>
             <Button
               type="primary"
@@ -704,9 +747,7 @@ function PortManagement() {
               批量导入
             </Button>
 
-            <Button icon={<ExportOutlined />}>
-              导出
-            </Button>
+            <Button icon={<ExportOutlined />}>导出</Button>
           </Space>
 
           <Space>
@@ -740,13 +781,15 @@ function PortManagement() {
         ) : viewMode === 'panel' ? (
           // 面板视图 - 使用虚拟滚动优化
           <VirtualDeviceList
-            devices={Object.values(groupedPorts).map(g => g.device).filter(Boolean)}
+            devices={Object.values(groupedPorts)
+              .map(g => g.device)
+              .filter(Boolean)}
             groupedPorts={groupedPorts}
             cables={cables}
             allDevices={devices}
-            onPortClick={(port) => handleEdit(port)}
-            onAddPort={(device) => handleAddPortForDevice(device)}
-            onManageNetworkCards={(device) => handleManageNetworkCards(device)}
+            onPortClick={port => handleEdit(port)}
+            onAddPort={device => handleAddPortForDevice(device)}
+            onManageNetworkCards={device => handleManageNetworkCards(device)}
             initialVisibleCount={5}
             loadMoreCount={5}
           />
@@ -767,22 +810,35 @@ function PortManagement() {
                 <Panel
                   key={deviceId}
                   header={
-                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%' }}>
+                    <div
+                      style={{
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'space-between',
+                        width: '100%',
+                      }}
+                    >
                       <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
-                        <div style={{
-                          width: '40px',
-                          height: '40px',
-                          borderRadius: designTokens.borderRadius.medium,
-                          background: designTokens.colors.primary.gradient,
-                          display: 'flex',
-                          alignItems: 'center',
-                          justifyContent: 'center',
-                          color: '#fff',
-                          fontSize: '18px'
-                        }}>
-                          {device?.type?.toLowerCase()?.includes('server') ? '🖥️' :
-                           device?.type?.toLowerCase()?.includes('switch') ? '🔀' :
-                           device?.type?.toLowerCase()?.includes('router') ? '🌐' : '📦'}
+                        <div
+                          style={{
+                            width: '40px',
+                            height: '40px',
+                            borderRadius: designTokens.borderRadius.medium,
+                            background: designTokens.colors.primary.gradient,
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            color: '#fff',
+                            fontSize: '18px',
+                          }}
+                        >
+                          {device?.type?.toLowerCase()?.includes('server')
+                            ? '🖥️'
+                            : device?.type?.toLowerCase()?.includes('switch')
+                              ? '🔀'
+                              : device?.type?.toLowerCase()?.includes('router')
+                                ? '🌐'
+                                : '📦'}
                         </div>
                         <div>
                           <div style={{ fontWeight: 600, fontSize: '16px', color: '#1e293b' }}>
@@ -804,11 +860,14 @@ function PortManagement() {
                             type="primary"
                             size="small"
                             icon={<CloudServerOutlined />}
-                            onClick={(e) => {
+                            onClick={e => {
                               e.stopPropagation();
                               handleManageNetworkCards(device);
                             }}
-                            style={{ background: designTokens.colors.primary.gradient, border: 'none' }}
+                            style={{
+                              background: designTokens.colors.primary.gradient,
+                              border: 'none',
+                            }}
                           >
                             网卡管理
                           </Button>
@@ -824,8 +883,8 @@ function PortManagement() {
                     pagination={{
                       pageSize: 10,
                       showSizeChanger: true,
-                      showTotal: (total) => `共 ${total} 个端口`,
-                      pageSizeOptions: ['10', '20', '50', '100']
+                      showTotal: total => `共 ${total} 个端口`,
+                      pageSizeOptions: ['10', '20', '50', '100'],
                     }}
                     size="small"
                     scroll={{ x: 1000 }}
@@ -836,7 +895,7 @@ function PortManagement() {
           </Collapse>
         )}
       </Card>
-      
+
       <Modal
         title={editingPort ? '编辑端口' : '新增端口'}
         open={modalVisible}
@@ -872,16 +931,16 @@ function PortManagement() {
               ))}
             </Select>
           </Form.Item>
-          
+
           <Form.Item
             name="portName"
             label="端口名称"
             rules={[{ required: true, message: '请输入端口名称' }]}
-            extra={!editingPort && "支持批量添加，例如: 1/0/1-1/0/48 将创建 48 个端口"}
+            extra={!editingPort && '支持批量添加，例如: 1/0/1-1/0/48 将创建 48 个端口'}
           >
             <Input placeholder="例如: eth0/1 或 1/0/1-1/0/48" />
           </Form.Item>
-          
+
           <Form.Item
             name="portType"
             label="端口类型"
@@ -897,7 +956,7 @@ function PortManagement() {
               <Option value="QSFP28">QSFP28</Option>
             </Select>
           </Form.Item>
-          
+
           <Form.Item
             name="portSpeed"
             label="端口速率"
@@ -913,7 +972,7 @@ function PortManagement() {
               <Option value="100G">100G</Option>
             </Select>
           </Form.Item>
-          
+
           <Form.Item
             name="status"
             label="状态"
@@ -926,23 +985,17 @@ function PortManagement() {
               <Option value="fault">故障</Option>
             </Select>
           </Form.Item>
-          
-          <Form.Item
-            name="vlanId"
-            label="VLAN ID"
-          >
+
+          <Form.Item name="vlanId" label="VLAN ID">
             <InputNumber placeholder="请输入VLAN ID" min={1} max={4094} />
           </Form.Item>
-          
-          <Form.Item
-            name="description"
-            label="描述"
-          >
+
+          <Form.Item name="description" label="描述">
             <Input.TextArea rows={3} placeholder="请输入描述" />
           </Form.Item>
         </Form>
       </Modal>
-      
+
       <Modal
         title="批量导入端口"
         open={importModalVisible}
@@ -956,24 +1009,20 @@ function PortManagement() {
           <Button key="cancel" onClick={() => setImportModalVisible(false)}>
             取消
           </Button>,
-          <Button 
-            key="download" 
-            icon={<DownloadOutlined />} 
-            onClick={handleDownloadTemplate}
-          >
+          <Button key="download" icon={<DownloadOutlined />} onClick={handleDownloadTemplate}>
             下载模板
           </Button>,
-          <Button 
-            key="import" 
-            type="primary" 
-            icon={<ImportOutlined />} 
+          <Button
+            key="import"
+            type="primary"
+            icon={<ImportOutlined />}
             onClick={handleBatchImport}
             loading={importing}
             disabled={importPreview.length === 0}
             style={{ background: designTokens.colors.primary.gradient, border: 'none' }}
           >
             开始导入
-          </Button>
+          </Button>,
         ]}
       >
         <div style={{ marginBottom: 16 }}>
@@ -993,26 +1042,29 @@ function PortManagement() {
               <p className="ant-upload-hint">支持 .xlsx, .xls, .csv 格式</p>
             </Upload.Dragger>
           </div>
-          
+
           <div style={{ display: 'flex', gap: '12px', marginBottom: 16 }}>
-            <Checkbox checked={skipExisting} onChange={(e) => setSkipExisting(e.target.checked)}>
+            <Checkbox checked={skipExisting} onChange={e => setSkipExisting(e.target.checked)}>
               跳过已存在的端口
             </Checkbox>
-            <Checkbox checked={updateExisting} onChange={(e) => setUpdateExisting(e.target.checked)}>
+            <Checkbox checked={updateExisting} onChange={e => setUpdateExisting(e.target.checked)}>
               更新已存在的端口
             </Checkbox>
           </div>
-          
+
           {importPreview.length > 0 && (
             <>
               <div style={{ marginBottom: 16 }}>
-                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
+                <div
+                  style={{
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    marginBottom: 8,
+                  }}
+                >
                   <Text strong>数据预览（前10条）</Text>
-                  <Button 
-                    size="small" 
-                    icon={<DownloadOutlined />} 
-                    onClick={handleDownloadTemplate}
-                  >
+                  <Button size="small" icon={<DownloadOutlined />} onClick={handleDownloadTemplate}>
                     下载模板
                   </Button>
                 </div>
@@ -1022,52 +1074,52 @@ function PortManagement() {
                       title: '设备ID',
                       dataIndex: '设备ID',
                       key: 'deviceId',
-                      width: 150
+                      width: 150,
                     },
                     {
                       title: '端口名称',
                       dataIndex: '端口名称',
                       key: 'portName',
-                      width: 120
+                      width: 120,
                     },
                     {
                       title: '端口类型',
                       dataIndex: '端口类型',
                       key: 'portType',
                       width: 100,
-                      render: (type) => getPortTypeTag(type)
+                      render: type => getPortTypeTag(type),
                     },
                     {
                       title: '端口速率',
                       dataIndex: '端口速率',
                       key: 'portSpeed',
-                      width: 100
+                      width: 100,
                     },
                     {
                       title: '状态',
                       dataIndex: '状态',
                       key: 'status',
                       width: 100,
-                      render: (status) => getStatusTag(status)
+                      render: status => getStatusTag(status),
                     },
                     {
                       title: 'VLAN ID',
                       dataIndex: 'VLAN ID',
                       key: 'vlanId',
                       width: 100,
-                      render: (vlanId) => vlanId || '-'
+                      render: vlanId => vlanId || '-',
                     },
                     {
                       title: '描述',
                       dataIndex: '描述',
                       key: 'description',
                       ellipsis: true,
-                      render: (text) => (
+                      render: text => (
                         <Tooltip title={text}>
                           <span>{text || '-'}</span>
                         </Tooltip>
-                      )
-                    }
+                      ),
+                    },
                   ]}
                   dataSource={importPreview.slice(0, 10)}
                   rowKey={(record, index) => index}
@@ -1076,7 +1128,7 @@ function PortManagement() {
                   scroll={{ x: 1000 }}
                 />
               </div>
-              
+
               {importPreview.length > 10 && (
                 <div style={{ textAlign: 'center', marginTop: 8 }}>
                   <Text type="secondary">仅显示前10条数据，共 {importPreview.length} 条</Text>
@@ -1084,7 +1136,7 @@ function PortManagement() {
               )}
             </>
           )}
-          
+
           {importing && (
             <div style={{ textAlign: 'center', padding: '24px' }}>
               <Spin size="large" tip="导入中..." />
@@ -1094,7 +1146,7 @@ function PortManagement() {
                   status="active"
                   strokeColor={{
                     '0%': designTokens.colors.primary.main,
-                    '100%': designTokens.colors.success.main
+                    '100%': designTokens.colors.success.main,
                   }}
                 />
                 <div style={{ marginTop: 8 }}>
@@ -1103,7 +1155,8 @@ function PortManagement() {
                   </Text>
                   {importProgress.current > 0 && (
                     <Text type="secondary">
-                      预计剩余时间：{Math.ceil((importProgress.total - importProgress.current) / 5)} 秒
+                      预计剩余时间：{Math.ceil((importProgress.total - importProgress.current) / 5)}{' '}
+                      秒
                     </Text>
                   )}
                 </div>
diff --git a/frontend/src/pages/Rack3DVisualization.jsx b/frontend/src/pages/Rack3DVisualization.jsx
index ed90afe..3513b63 100644
--- a/frontend/src/pages/Rack3DVisualization.jsx
+++ b/frontend/src/pages/Rack3DVisualization.jsx
@@ -1,6 +1,36 @@
 import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
-import { Layout, Select, Card, Spin, message, Typography, Descriptions, Tag, Button, Space, Empty, Modal, Form, Input, InputNumber, DatePicker, Checkbox, Switch } from 'antd';
-import { CloudServerOutlined, ReloadOutlined, ArrowLeftOutlined, InfoCircleOutlined, UpOutlined, DownOutlined, EditOutlined, SettingOutlined, FullscreenOutlined, EyeOutlined } from '@ant-design/icons';
+import {
+  Layout,
+  Select,
+  Card,
+  Spin,
+  message,
+  Typography,
+  Descriptions,
+  Tag,
+  Button,
+  Space,
+  Empty,
+  Modal,
+  Form,
+  Input,
+  InputNumber,
+  DatePicker,
+  Checkbox,
+  Switch,
+} from 'antd';
+import {
+  CloudServerOutlined,
+  ReloadOutlined,
+  ArrowLeftOutlined,
+  InfoCircleOutlined,
+  UpOutlined,
+  DownOutlined,
+  EditOutlined,
+  SettingOutlined,
+  FullscreenOutlined,
+  EyeOutlined,
+} from '@ant-design/icons';
 import { useNavigate } from 'react-router-dom';
 import axios from 'axios';
 import dayjs from 'dayjs';
@@ -40,11 +70,11 @@ const Rack3DVisualization = () => {
     loadingDevices,
     setLoadingDevices,
   } = useScene3D();
-  
+
   const [selectedRoom, setSelectedRoom] = useState(null);
   const [loading, setLoading] = useState(false);
   const [isRackInfoCollapsed, setIsRackInfoCollapsed] = useState(false); // Rack Info Card collapsed state
-  
+
   // Edit Modal State
   const [modalVisible, setModalVisible] = useState(false);
   const [editingDevice, setEditingDevice] = useState(null);
@@ -65,13 +95,14 @@ const Rack3DVisualization = () => {
 
   // 使用 ref 存储模态框状态，避免 handleDeviceHover 频繁重新创建
   const modalsOpenRef = useRef(false);
-  
+
   // 同步 ref 与 state
   useEffect(() => {
-    modalsOpenRef.current = modalVisible || nicModalVisible || portModalVisible || cableModalVisible;
+    modalsOpenRef.current =
+      modalVisible || nicModalVisible || portModalVisible || cableModalVisible;
   }, [modalVisible, nicModalVisible, portModalVisible, cableModalVisible]);
 
-  const fetchDeviceCables = useCallback(async (deviceId) => {
+  const fetchDeviceCables = useCallback(async deviceId => {
     if (!deviceId) return;
     try {
       const response = await axios.get(`/api/cables/device/${deviceId}`);
@@ -82,25 +113,25 @@ const Rack3DVisualization = () => {
     }
   }, []);
 
-  const handleAddNic = (device) => {
+  const handleAddNic = device => {
     setOperatingDevice(device);
     setNicModalVisible(true);
   };
 
-  const handleAddPort = (device) => {
+  const handleAddPort = device => {
     setOperatingDevice(device);
     setPortModalVisible(true);
   };
 
-  const handleAddCable = (device) => {
+  const handleAddCable = device => {
     setOperatingDevice(device);
     setCableModalVisible(true);
   };
 
   // Handle Edit Device Click
-  const handleEditDevice = (device) => {
-      setEditingDevice(device);
-      setModalVisible(true);
+  const handleEditDevice = device => {
+    setEditingDevice(device);
+    setModalVisible(true);
   };
 
   // 当 Modal 打开时，初始化表单数据
@@ -110,21 +141,32 @@ const Rack3DVisualization = () => {
       const deviceData = { ...editingDevice };
       if (deviceData.purchaseDate) deviceData.purchaseDate = dayjs(deviceData.purchaseDate);
       if (deviceData.warrantyExpiry) deviceData.warrantyExpiry = dayjs(deviceData.warrantyExpiry);
-      
+
       // Fixed fields
       const fixedFields = [
-        'deviceId', 'name', 'type', 'model', 'serialNumber', 'rackId',
-        'position', 'height', 'powerConsumption', 'status', 'purchaseDate',
-        'warrantyExpiry', 'ipAddress', 'description'
+        'deviceId',
+        'name',
+        'type',
+        'model',
+        'serialNumber',
+        'rackId',
+        'position',
+        'height',
+        'powerConsumption',
+        'status',
+        'purchaseDate',
+        'warrantyExpiry',
+        'ipAddress',
+        'description',
       ];
-      
+
       const cleanDeviceData = {};
       fixedFields.forEach(field => {
         if (deviceData[field] !== undefined) {
           cleanDeviceData[field] = deviceData[field];
         }
       });
-      
+
       // Custom fields if any (simplified for 3D view context)
       if (deviceData.customFields && typeof deviceData.customFields === 'object') {
         Object.entries(deviceData.customFields).forEach(([key, value]) => {
@@ -137,12 +179,12 @@ const Rack3DVisualization = () => {
   }, [modalVisible, editingDevice, form]);
 
   const handleModalCancel = () => {
-      setModalVisible(false);
-      setEditingDevice(null);
-      form.resetFields();
+    setModalVisible(false);
+    setEditingDevice(null);
+    form.resetFields();
   };
 
-  const handleModalSubmit = async (values) => {
+  const handleModalSubmit = async values => {
     try {
       const deviceData = {
         ...values,
@@ -153,10 +195,10 @@ const Rack3DVisualization = () => {
       if (editingDevice) {
         await axios.put(`/api/devices/${editingDevice.deviceId || editingDevice.id}`, deviceData);
         message.success('设备更新成功');
-        
+
         // Refresh devices
         if (selectedRack) {
-            fetchDevices(selectedRack.rackId);
+          fetchDevices(selectedRack.rackId);
         }
         setModalVisible(false);
         setEditingDevice(null);
@@ -182,8 +224,8 @@ const Rack3DVisualization = () => {
         const firstRack = validRacks[0];
         setSelectedRack(firstRack);
         if (firstRack?.Room) {
-            const roomKey = firstRack.Room.roomId || firstRack.Room.id || firstRack.Room.name;
-            setSelectedRoom(roomKey);
+          const roomKey = firstRack.Room.roomId || firstRack.Room.id || firstRack.Room.name;
+          setSelectedRoom(roomKey);
         }
       }
     } catch (error) {
@@ -195,12 +237,12 @@ const Rack3DVisualization = () => {
   }, []);
 
   // Fetch Devices for Rack
-  const fetchDevices = useCallback(async (rackId) => {
+  const fetchDevices = useCallback(async rackId => {
     if (!rackId) return;
     try {
       setLoadingDevices(true);
       const response = await axios.get(`/api/devices?rackId=${rackId}`);
-      
+
       let devicesData = [];
       if (Array.isArray(response.data)) {
         devicesData = response.data;
@@ -213,7 +255,7 @@ const Rack3DVisualization = () => {
       // Process devices (ensure position/height are numbers)
       const validDevices = devicesData.filter(d => {
         if (!d.deviceId && !d.id) return false;
-        
+
         // Normalize deviceId
         if (!d.deviceId && d.id) d.deviceId = d.id;
 
@@ -221,11 +263,11 @@ const Rack3DVisualization = () => {
         let h = d.height || d.u_height || 1;
         if (typeof pos === 'string') pos = parseInt(pos, 10);
         if (typeof h === 'string') h = parseInt(h, 10);
-        
+
         // Mutate for consistency
         d.position = pos;
         d.height = h;
-        
+
         return typeof pos === 'number' && !isNaN(pos);
       });
 
@@ -245,7 +287,7 @@ const Rack3DVisualization = () => {
       setLoadingTooltipFields(true);
       const response = await axios.get('/api/deviceFields');
       const fields = response.data;
-      
+
       const newTooltipFields = {};
       if (fields && fields.length > 0) {
         fields.forEach(field => {
@@ -253,7 +295,7 @@ const Rack3DVisualization = () => {
             label: field.displayName,
             enabled: field.visible,
             field: field.fieldName,
-            fieldType: field.fieldType || 'text'
+            fieldType: field.fieldType || 'text',
           };
         });
       }
@@ -267,29 +309,29 @@ const Rack3DVisualization = () => {
   }, []);
 
   const saveTooltipConfig = async () => {
-      try {
-          setSavingTooltipConfig(true);
-          
-          // Transform object to array for backend API
-          const fieldConfigs = Object.values(tooltipFields).map(field => ({
-              fieldName: field.field,
-              visible: field.enabled,
-              displayName: field.label,
-              fieldType: field.fieldType
-          }));
+    try {
+      setSavingTooltipConfig(true);
 
-          await axios.post('/api/deviceFields/config', fieldConfigs);
-          message.success('字段配置保存成功');
-          setShowTooltipConfig(false);
-          
-          // Refresh fields to sync with DB
-          fetchTooltipDeviceFields();
-      } catch (error) {
-          console.error('Failed to save tooltip config:', error);
-          message.error('保存失败');
-      } finally {
-          setSavingTooltipConfig(false);
-      }
+      // Transform object to array for backend API
+      const fieldConfigs = Object.values(tooltipFields).map(field => ({
+        fieldName: field.field,
+        visible: field.enabled,
+        displayName: field.label,
+        fieldType: field.fieldType,
+      }));
+
+      await axios.post('/api/deviceFields/config', fieldConfigs);
+      message.success('字段配置保存成功');
+      setShowTooltipConfig(false);
+
+      // Refresh fields to sync with DB
+      fetchTooltipDeviceFields();
+    } catch (error) {
+      console.error('Failed to save tooltip config:', error);
+      message.error('保存失败');
+    } finally {
+      setSavingTooltipConfig(false);
+    }
   };
 
   useEffect(() => {
@@ -321,20 +363,23 @@ const Rack3DVisualization = () => {
   const racksInSelectedRoom = useMemo(() => {
     if (!selectedRoom) return [];
     return racks.filter(r => {
-        const rKey = r.Room?.roomId || r.Room?.id || r.Room?.name;
-        return rKey === selectedRoom;
+      const rKey = r.Room?.roomId || r.Room?.id || r.Room?.name;
+      return rKey === selectedRoom;
     });
   }, [selectedRoom, racks]);
 
   // 使用 useCallback 稳定回调函数引用，避免 DeviceModel 不必要的重渲染
-  const handleDeviceClick = useCallback((device) => {
-    setSelectedDevice(device);
-    if (device) {
+  const handleDeviceClick = useCallback(
+    device => {
+      setSelectedDevice(device);
+      if (device) {
         fetchDeviceCables(device.deviceId || device.id);
-    }
-  }, [fetchDeviceCables]);
+      }
+    },
+    [fetchDeviceCables]
+  );
 
-  const handleDeviceLeave = (device) => {
+  const handleDeviceLeave = device => {
     // 移除鼠标离开事件，避免抽屉意外关闭
     // setSelectedDevice((current) => {
     //     const deviceId = device.deviceId || device.id;
@@ -344,7 +389,7 @@ const Rack3DVisualization = () => {
   };
 
   // 优化 handleDeviceHover - 使用 ref 获取最新状态，减少依赖项
-  const handleDeviceHover = useCallback((device) => {
+  const handleDeviceHover = useCallback(device => {
     // 使用 ref 检查模态框状态，避免频繁重新创建回调
     if (modalsOpenRef.current) return;
     setHoveredDevice(device);
@@ -377,152 +422,201 @@ const Rack3DVisualization = () => {
     message.success('接线添加成功');
     setRefreshTrigger(prev => prev + 1);
     if (selectedDevice) {
-        fetchDeviceCables(selectedDevice.deviceId || selectedDevice.id);
+      fetchDeviceCables(selectedDevice.deviceId || selectedDevice.id);
     }
   }, [selectedDevice, fetchDeviceCables]);
 
-  const handleDeleteCable = useCallback(async (cableId) => {
-    try {
-      await axios.delete(`/api/cables/${cableId}`);
-      message.success('接线删除成功');
-      setRefreshTrigger(prev => prev + 1);
-      if (selectedDevice) {
-        fetchDeviceCables(selectedDevice.deviceId || selectedDevice.id);
+  const handleDeleteCable = useCallback(
+    async cableId => {
+      try {
+        await axios.delete(`/api/cables/${cableId}`);
+        message.success('接线删除成功');
+        setRefreshTrigger(prev => prev + 1);
+        if (selectedDevice) {
+          fetchDeviceCables(selectedDevice.deviceId || selectedDevice.id);
+        }
+      } catch (error) {
+        console.error('删除接线失败:', error);
+        message.error('删除接线失败');
       }
-    } catch (error) {
-      console.error('删除接线失败:', error);
-      message.error('删除接线失败');
-    }
-  }, [selectedDevice, fetchDeviceCables]);
+    },
+    [selectedDevice, fetchDeviceCables]
+  );
 
   return (
-    <Layout style={{ height: '100vh', overflow: 'hidden', background: '#000', position: 'relative' }}>
-      <Header style={{ 
-          display: 'flex', 
-          alignItems: 'center', 
-          justifyContent: 'space-between', 
-          padding: '0 24px', 
+    <Layout
+      style={{ height: '100vh', overflow: 'hidden', background: '#000', position: 'relative' }}
+    >
+      <Header
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          padding: '0 24px',
           background: 'rgba(15, 23, 42, 0.6)', // Deep blue-grey, semi-transparent
           backdropFilter: 'blur(20px)',
           position: 'absolute',
           width: '100%',
           zIndex: 100,
           borderBottom: '1px solid rgba(255, 255, 255, 0.08)',
-          height: '64px'
-      }}>
+          height: '64px',
+        }}
+      >
         <div style={{ display: 'flex', alignItems: 'center' }}>
-            <Button 
-                type="text" 
-                icon={<ArrowLeftOutlined style={{ color: 'rgba(255,255,255,0.8)' }} />} 
-                onClick={() => navigate('/')}
-                style={{ marginRight: 16 }}
-                className="hover-bright"
+          <Button
+            type="text"
+            icon={<ArrowLeftOutlined style={{ color: 'rgba(255,255,255,0.8)' }} />}
+            onClick={() => navigate('/')}
+            style={{ marginRight: 16 }}
+            className="hover-bright"
+          />
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              background: 'rgba(255,255,255,0.05)',
+              padding: '6px 12px',
+              borderRadius: '8px',
+              border: '1px solid rgba(255,255,255,0.05)',
+            }}
+          >
+            <CloudServerOutlined
+              style={{ fontSize: '20px', color: '#3b82f6', marginRight: '10px' }}
             />
-            <div style={{ 
-                display: 'flex', 
-                alignItems: 'center', 
-                background: 'rgba(255,255,255,0.05)', 
-                padding: '6px 12px', 
-                borderRadius: '8px',
-                border: '1px solid rgba(255,255,255,0.05)'
-            }}>
-                <CloudServerOutlined style={{ fontSize: '20px', color: '#3b82f6', marginRight: '10px' }} />
-                <span style={{ 
-                    fontSize: '16px', 
-                    fontWeight: 600, 
-                    color: '#f8fafc', 
-                    letterSpacing: '0.5px',
-                    textShadow: '0 2px 4px rgba(0,0,0,0.2)'
-                }}>3D 机柜可视化</span>
-            </div>
+            <span
+              style={{
+                fontSize: '16px',
+                fontWeight: 600,
+                color: '#f8fafc',
+                letterSpacing: '0.5px',
+                textShadow: '0 2px 4px rgba(0,0,0,0.2)',
+              }}
+            >
+              3D 机柜可视化
+            </span>
+          </div>
         </div>
         <Space size="middle">
-            <Select
-                placeholder="选择机房"
-                style={{ width: 180 }}
-                value={selectedRoom}
-                onChange={(val) => {
-                    setSelectedRoom(val);
-                    const roomRacks = racks.filter(r => (r.Room?.roomId || r.Room?.id || r.Room?.name) === val);
-                    if (roomRacks.length > 0) setSelectedRack(roomRacks[0]);
-                    else setSelectedRack(null);
-                }}
-                variant="borderless"
-                popupMatchSelectWidth={false}
-                className="glass-select"
+          <Select
+            placeholder="选择机房"
+            style={{ width: 180 }}
+            value={selectedRoom}
+            onChange={val => {
+              setSelectedRoom(val);
+              const roomRacks = racks.filter(
+                r => (r.Room?.roomId || r.Room?.id || r.Room?.name) === val
+              );
+              if (roomRacks.length > 0) setSelectedRack(roomRacks[0]);
+              else setSelectedRack(null);
+            }}
+            variant="borderless"
+            popupMatchSelectWidth={false}
+            className="glass-select"
+          >
+            {rooms.map(room => (
+              <Option key={room.key} value={room.key}>
+                {room.name}
+              </Option>
+            ))}
+          </Select>
+          <Select
+            placeholder="选择机柜"
+            style={{ width: 180 }}
+            value={selectedRack?.rackId}
+            onChange={val => setSelectedRack(racks.find(r => r.rackId === val))}
+            disabled={!selectedRoom}
+            variant="borderless"
+            className="glass-select"
+          >
+            {racksInSelectedRoom.map(rack => (
+              <Option key={rack.rackId} value={rack.rackId}>
+                {rack.name}
+              </Option>
+            ))}
+          </Select>
+          <Button
+            type="primary"
+            ghost
+            icon={<ReloadOutlined />}
+            onClick={() => {
+              fetchRacks();
+              if (selectedRack) fetchDevices(selectedRack.rackId);
+            }}
+            style={{
+              borderRadius: '6px',
+              borderColor: 'rgba(255,255,255,0.3)',
+              color: 'rgba(255,255,255,0.9)',
+            }}
+            className="hover-bright"
+          >
+            刷新
+          </Button>
+          <Button
+            type="primary"
+            ghost
+            icon={<EyeOutlined />}
+            onClick={() => {
+              if (sceneRef.current) sceneRef.current.resetView();
+            }}
+            style={{
+              borderRadius: '6px',
+              borderColor: 'rgba(255,255,255,0.3)',
+              color: 'rgba(255,255,255,0.9)',
+            }}
+            className="hover-bright"
+          >
+            重置视角
+          </Button>
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              background: 'rgba(255,255,255,0.05)',
+              padding: '4px 12px',
+              borderRadius: '6px',
+              border: '1px solid rgba(255,255,255,0.05)',
+            }}
+          >
+            <FullscreenOutlined
+              style={{
+                color: deviceSlideEnabled ? '#22c55e' : 'rgba(255,255,255,0.4)',
+                marginRight: 8,
+              }}
+            />
+            <span
+              style={{
+                fontSize: '13px',
+                color: deviceSlideEnabled ? 'rgba(255,255,255,0.9)' : 'rgba(255,255,255,0.5)',
+                marginRight: 8,
+              }}
             >
-                {rooms.map(room => (
-                    <Option key={room.key} value={room.key}>{room.name}</Option>
-                ))}
-            </Select>
-            <Select
-                placeholder="选择机柜"
-                style={{ width: 180 }}
-                value={selectedRack?.rackId}
-                onChange={(val) => setSelectedRack(racks.find(r => r.rackId === val))}
-                disabled={!selectedRoom}
-                variant="borderless"
-                className="glass-select"
-            >
-                {racksInSelectedRoom.map(rack => (
-                    <Option key={rack.rackId} value={rack.rackId}>{rack.name}</Option>
-                ))}
-            </Select>
-            <Button
-                type="primary"
-                ghost
-                icon={<ReloadOutlined />}
-                onClick={() => { fetchRacks(); if(selectedRack) fetchDevices(selectedRack.rackId); }}
-                style={{ borderRadius: '6px', borderColor: 'rgba(255,255,255,0.3)', color: 'rgba(255,255,255,0.9)' }}
-                className="hover-bright"
-            >
-                刷新
-            </Button>
-            <Button
-                type="primary"
-                ghost
-                icon={<EyeOutlined />}
-                onClick={() => { if(sceneRef.current) sceneRef.current.resetView(); }}
-                style={{ borderRadius: '6px', borderColor: 'rgba(255,255,255,0.3)', color: 'rgba(255,255,255,0.9)' }}
-                className="hover-bright"
-            >
-                重置视角
-            </Button>
-            <div style={{ 
-                display: 'flex', 
-                alignItems: 'center', 
-                background: 'rgba(255,255,255,0.05)', 
-                padding: '4px 12px', 
-                borderRadius: '6px',
-                border: '1px solid rgba(255,255,255,0.05)'
-            }}>
-                <FullscreenOutlined style={{ color: deviceSlideEnabled ? '#22c55e' : 'rgba(255,255,255,0.4)', marginRight: 8 }} />
-                <span style={{ 
-                    fontSize: '13px', 
-                    color: deviceSlideEnabled ? 'rgba(255,255,255,0.9)' : 'rgba(255,255,255,0.5)',
-                    marginRight: 8
-                }}>设备弹出</span>
-                <Switch 
-                    size="small" 
-                    checked={deviceSlideEnabled} 
-                    onChange={setDeviceSlideEnabled}
-                    checkedChildren="开"
-                    unCheckedChildren="关"
-                />
-            </div>
-            <Button
-                type="primary"
-                ghost
-                icon={<SettingOutlined />}
-                onClick={() => setShowTooltipConfig(true)}
-                style={{ borderRadius: '6px', borderColor: 'rgba(255,255,255,0.3)', color: 'rgba(255,255,255,0.9)' }}
-                className="hover-bright"
-            >
-                显示配置
-            </Button>
+              设备弹出
+            </span>
+            <Switch
+              size="small"
+              checked={deviceSlideEnabled}
+              onChange={setDeviceSlideEnabled}
+              checkedChildren="开"
+              unCheckedChildren="关"
+            />
+          </div>
+          <Button
+            type="primary"
+            ghost
+            icon={<SettingOutlined />}
+            onClick={() => setShowTooltipConfig(true)}
+            style={{
+              borderRadius: '6px',
+              borderColor: 'rgba(255,255,255,0.3)',
+              color: 'rgba(255,255,255,0.9)',
+            }}
+            className="hover-bright"
+          >
+            显示配置
+          </Button>
         </Space>
       </Header>
-      
+
       {/* Inject custom styles for glass selects */}
       <style>{`
         .glass-select .ant-select-selector {
@@ -549,312 +643,421 @@ const Rack3DVisualization = () => {
             background: rgba(255,255,255,0.1) !important;
         }
       `}</style>
-      
+
       <Layout>
         <Content style={{ position: 'relative', background: '#ffffff' }}>
           {loading ? (
-             <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', height: '100%' }}>
-                 <Spin size="large" />
-                 <div style={{ marginTop: 16, color: '#1890ff' }}>加载资源中...</div>
-             </div>
+            <div
+              style={{
+                display: 'flex',
+                flexDirection: 'column',
+                justifyContent: 'center',
+                alignItems: 'center',
+                height: '100%',
+              }}
+            >
+              <Spin size="large" />
+              <div style={{ marginTop: 16, color: '#1890ff' }}>加载资源中...</div>
+            </div>
           ) : selectedRack ? (
-             <>
-                <Scene
-                    ref={sceneRef}
-                    rack={selectedRack}
-                    devices={devices}
-                    selectedDeviceId={selectedDevice?.deviceId || selectedDevice?.id}
-                    onDeviceClick={handleDeviceClick}
-                    onDeviceLeave={handleDeviceLeave}
-                    onDeviceHover={handleDeviceHover}
-                    tooltipFields={tooltipFields}
-                    deviceSlideEnabled={deviceSlideEnabled}
-                />
-                
-                {/* Rack Info Overlay (New) */}
-                {selectedRack && (
-                    <div style={{
-                        position: 'absolute',
-                        top: 88, // Moved down to avoid header overlap
-                        left: 24,
-                        background: 'rgba(255, 255, 255, 0.85)', // Slightly more transparent
-                        backdropFilter: 'blur(12px)',
-                        padding: isRackInfoCollapsed ? '12px 16px' : '20px',
-                        borderRadius: '16px',
-                        boxShadow: '0 8px 32px rgba(0, 0, 0, 0.08)', // Softer, deeper shadow
-                        width: isRackInfoCollapsed ? 'auto' : '280px',
-                        zIndex: 5,
-                        border: '1px solid rgba(255, 255, 255, 0.6)',
-                        transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
-                        overflow: 'hidden',
-                        cursor: isRackInfoCollapsed ? 'pointer' : 'default'
+            <>
+              <Scene
+                ref={sceneRef}
+                rack={selectedRack}
+                devices={devices}
+                selectedDeviceId={selectedDevice?.deviceId || selectedDevice?.id}
+                onDeviceClick={handleDeviceClick}
+                onDeviceLeave={handleDeviceLeave}
+                onDeviceHover={handleDeviceHover}
+                tooltipFields={tooltipFields}
+                deviceSlideEnabled={deviceSlideEnabled}
+              />
+
+              {/* Rack Info Overlay (New) */}
+              {selectedRack && (
+                <div
+                  style={{
+                    position: 'absolute',
+                    top: 88, // Moved down to avoid header overlap
+                    left: 24,
+                    background: 'rgba(255, 255, 255, 0.85)', // Slightly more transparent
+                    backdropFilter: 'blur(12px)',
+                    padding: isRackInfoCollapsed ? '12px 16px' : '20px',
+                    borderRadius: '16px',
+                    boxShadow: '0 8px 32px rgba(0, 0, 0, 0.08)', // Softer, deeper shadow
+                    width: isRackInfoCollapsed ? 'auto' : '280px',
+                    zIndex: 5,
+                    border: '1px solid rgba(255, 255, 255, 0.6)',
+                    transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+                    overflow: 'hidden',
+                    cursor: isRackInfoCollapsed ? 'pointer' : 'default',
+                  }}
+                  onClick={() => isRackInfoCollapsed && setIsRackInfoCollapsed(false)}
+                >
+                  {/* Header */}
+                  <div
+                    style={{
+                      display: 'flex',
+                      alignItems: 'center',
+                      marginBottom: isRackInfoCollapsed ? 0 : 16,
+                      justifyContent: 'space-between',
                     }}
-                    onClick={() => isRackInfoCollapsed && setIsRackInfoCollapsed(false)}
+                  >
+                    <div style={{ display: 'flex', alignItems: 'center' }}>
+                      <div
+                        style={{
+                          width: 36,
+                          height: 36,
+                          background: 'linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)',
+                          borderRadius: '10px',
+                          display: 'flex',
+                          alignItems: 'center',
+                          justifyContent: 'center',
+                          marginRight: 12,
+                          boxShadow: '0 4px 12px rgba(59, 130, 246, 0.3)',
+                          flexShrink: 0,
+                        }}
+                      >
+                        <CloudServerOutlined style={{ color: 'white', fontSize: 18 }} />
+                      </div>
+                      <div
+                        style={{
+                          opacity: isRackInfoCollapsed ? 0 : 1,
+                          width: isRackInfoCollapsed ? 0 : 'auto',
+                          transition: 'opacity 0.2s',
+                          whiteSpace: 'nowrap',
+                          overflow: 'hidden',
+                        }}
+                      >
+                        <div
+                          style={{
+                            fontSize: '16px',
+                            fontWeight: 700,
+                            color: '#1e293b',
+                            lineHeight: 1.2,
+                          }}
+                        >
+                          {selectedRack.name}
+                        </div>
+                        <div style={{ fontSize: '12px', color: '#64748b', marginTop: 2 }}>
+                          ID: {selectedRack.rackId}
+                        </div>
+                      </div>
+                    </div>
+
+                    <Button
+                      type="text"
+                      size="small"
+                      icon={isRackInfoCollapsed ? <DownOutlined /> : <UpOutlined />}
+                      onClick={e => {
+                        e.stopPropagation();
+                        setIsRackInfoCollapsed(!isRackInfoCollapsed);
+                      }}
+                      style={{ color: '#94a3b8', marginLeft: isRackInfoCollapsed ? 8 : 0 }}
+                    />
+                  </div>
+
+                  {/* Content Area - Collapsible */}
+                  <div
+                    style={{
+                      maxHeight: isRackInfoCollapsed ? 0 : '500px',
+                      opacity: isRackInfoCollapsed ? 0 : 1,
+                      transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+                      overflow: 'hidden',
+                    }}
+                  >
+                    {/* Stats Grid */}
+                    <div
+                      style={{
+                        display: 'grid',
+                        gridTemplateColumns: '1fr 1fr',
+                        gap: 12,
+                        marginBottom: 16,
+                      }}
                     >
-                        {/* Header */}
-                        <div style={{ display: 'flex', alignItems: 'center', marginBottom: isRackInfoCollapsed ? 0 : 16, justifyContent: 'space-between' }}>
-                            <div style={{ display: 'flex', alignItems: 'center' }}>
-                                <div style={{ 
-                                    width: 36, height: 36, 
-                                    background: 'linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)',
-                                    borderRadius: '10px',
-                                    display: 'flex', alignItems: 'center', justifyContent: 'center',
-                                    marginRight: 12,
-                                    boxShadow: '0 4px 12px rgba(59, 130, 246, 0.3)',
-                                    flexShrink: 0
-                                }}>
-                                    <CloudServerOutlined style={{ color: 'white', fontSize: 18 }} />
-                                </div>
-                                <div style={{ opacity: isRackInfoCollapsed ? 0 : 1, width: isRackInfoCollapsed ? 0 : 'auto', transition: 'opacity 0.2s', whiteSpace: 'nowrap', overflow: 'hidden' }}>
-                                    <div style={{ fontSize: '16px', fontWeight: 700, color: '#1e293b', lineHeight: 1.2 }}>
-                                        {selectedRack.name}
-                                    </div>
-                                    <div style={{ fontSize: '12px', color: '#64748b', marginTop: 2 }}>
-                                        ID: {selectedRack.rackId}
-                                    </div>
-                                </div>
-                            </div>
-                            
-                            <Button 
-                                type="text" 
-                                size="small"
-                                icon={isRackInfoCollapsed ? <DownOutlined /> : <UpOutlined />} 
-                                onClick={(e) => {
-                                    e.stopPropagation();
-                                    setIsRackInfoCollapsed(!isRackInfoCollapsed);
-                                }}
-                                style={{ color: '#94a3b8', marginLeft: isRackInfoCollapsed ? 8 : 0 }}
-                            />
+                      <div
+                        style={{
+                          background: 'rgba(241, 245, 249, 0.6)',
+                          padding: '10px',
+                          borderRadius: '10px',
+                        }}
+                      >
+                        <div style={{ fontSize: '12px', color: '#64748b', marginBottom: 2 }}>
+                          总高度
                         </div>
-
-                        {/* Content Area - Collapsible */}
-                        <div style={{ 
-                            maxHeight: isRackInfoCollapsed ? 0 : '500px', 
-                            opacity: isRackInfoCollapsed ? 0 : 1,
-                            transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
-                            overflow: 'hidden'
-                        }}>
-                            {/* Stats Grid */}
-                            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginBottom: 16 }}>
-                                <div style={{ background: 'rgba(241, 245, 249, 0.6)', padding: '10px', borderRadius: '10px' }}>
-                                    <div style={{ fontSize: '12px', color: '#64748b', marginBottom: 2 }}>总高度</div>
-                                    <div style={{ fontSize: '18px', fontWeight: 600, color: '#0f172a' }}>
-                                        {selectedRack.height}<span style={{ fontSize: '12px', fontWeight: 400, marginLeft: 2 }}>U</span>
-                                    </div>
-                                </div>
-                                <div style={{ background: 'rgba(241, 245, 249, 0.6)', padding: '10px', borderRadius: '10px' }}>
-                                    <div style={{ fontSize: '12px', color: '#64748b', marginBottom: 2 }}>设备数</div>
-                                    <div style={{ fontSize: '18px', fontWeight: 600, color: '#3b82f6' }}>
-                                        {devices.length}<span style={{ fontSize: '12px', fontWeight: 400, marginLeft: 2 }}>台</span>
-                                    </div>
-                                </div>
-                            </div>
-
-                            {/* Guide Section */}
-                            <div style={{ 
-                                marginTop: 16, 
-                                paddingTop: 16, 
-                                borderTop: '1px solid rgba(0,0,0,0.06)',
-                            }}>
-                                <div style={{ 
-                                    fontSize: '12px', 
-                                    fontWeight: 600, 
-                                    color: '#94a3b8', 
-                                    marginBottom: 8,
-                                    display: 'flex', alignItems: 'center'
-                                }}>
-                                    <InfoCircleOutlined style={{ marginRight: 6 }} /> 操作指南
-                                </div>
-                                <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
-                                    {[
-                                        { icon: '🖱️', text: '左键旋转视图' },
-                                        { icon: '🔍', text: '滚轮缩放视图' },
-                                        { icon: '👆', text: '点击设备查看详情' }
-                                    ].map((item, i) => (
-                                        <div key={i} style={{ 
-                                            fontSize: '12px', 
-                                            color: '#475569', 
-                                            display: 'flex', 
-                                            alignItems: 'center',
-                                            background: 'rgba(255,255,255,0.5)',
-                                            padding: '4px 8px',
-                                            borderRadius: '6px'
-                                        }}>
-                                            <span style={{ marginRight: 8, opacity: 0.8 }}>{item.icon}</span>
-                                            {item.text}
-                                        </div>
-                                    ))}
-                                </div>
-                            </div>
+                        <div style={{ fontSize: '18px', fontWeight: 600, color: '#0f172a' }}>
+                          {selectedRack.height}
+                          <span style={{ fontSize: '12px', fontWeight: 400, marginLeft: 2 }}>
+                            U
+                          </span>
                         </div>
+                      </div>
+                      <div
+                        style={{
+                          background: 'rgba(241, 245, 249, 0.6)',
+                          padding: '10px',
+                          borderRadius: '10px',
+                        }}
+                      >
+                        <div style={{ fontSize: '12px', color: '#64748b', marginBottom: 2 }}>
+                          设备数
+                        </div>
+                        <div style={{ fontSize: '18px', fontWeight: 600, color: '#3b82f6' }}>
+                          {devices.length}
+                          <span style={{ fontSize: '12px', fontWeight: 400, marginLeft: 2 }}>
+                            台
+                          </span>
+                        </div>
+                      </div>
                     </div>
-                )}
 
-                {/* Overlay Info for Hovered Device */}
-                {hoveredDevice && !selectedDevice && (
-                    <div style={{
-                        position: 'absolute',
-                        top: 88, // Moved down to avoid header overlap
-                        right: 24,
-                        background: 'rgba(0, 0, 0, 0.7)',
-                        padding: '12px',
-                        borderRadius: '8px',
-                        color: 'white',
-                        pointerEvents: 'none',
-                        maxWidth: '300px',
-                        backdropFilter: 'blur(4px)',
-                        border: '1px solid rgba(255,255,255,0.1)',
-                        zIndex: 10
-                    }}>
-                        <div style={{ fontWeight: 'bold', marginBottom: 4 }}>{hoveredDevice.name}</div>
-                        <div style={{ fontSize: '12px', opacity: 0.8 }}>
-                            <div>位置: U{hoveredDevice.position}</div>
-                            <div>高度: {hoveredDevice.height}U</div>
-                            <div>状态: {hoveredDevice.status}</div>
-                        </div>
+                    {/* Guide Section */}
+                    <div
+                      style={{
+                        marginTop: 16,
+                        paddingTop: 16,
+                        borderTop: '1px solid rgba(0,0,0,0.06)',
+                      }}
+                    >
+                      <div
+                        style={{
+                          fontSize: '12px',
+                          fontWeight: 600,
+                          color: '#94a3b8',
+                          marginBottom: 8,
+                          display: 'flex',
+                          alignItems: 'center',
+                        }}
+                      >
+                        <InfoCircleOutlined style={{ marginRight: 6 }} /> 操作指南
+                      </div>
+                      <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+                        {[
+                          { icon: '🖱️', text: '左键旋转视图' },
+                          { icon: '🔍', text: '滚轮缩放视图' },
+                          { icon: '👆', text: '点击设备查看详情' },
+                        ].map((item, i) => (
+                          <div
+                            key={i}
+                            style={{
+                              fontSize: '12px',
+                              color: '#475569',
+                              display: 'flex',
+                              alignItems: 'center',
+                              background: 'rgba(255,255,255,0.5)',
+                              padding: '4px 8px',
+                              borderRadius: '6px',
+                            }}
+                          >
+                            <span style={{ marginRight: 8, opacity: 0.8 }}>{item.icon}</span>
+                            {item.text}
+                          </div>
+                        ))}
+                      </div>
                     </div>
-                )}
+                  </div>
+                </div>
+              )}
 
-                {/* Device Detail Floating Popup - Removed, now handled in DeviceModel */}
-             </>
+              {/* Overlay Info for Hovered Device */}
+              {hoveredDevice && !selectedDevice && (
+                <div
+                  style={{
+                    position: 'absolute',
+                    top: 88, // Moved down to avoid header overlap
+                    right: 24,
+                    background: 'rgba(0, 0, 0, 0.7)',
+                    padding: '12px',
+                    borderRadius: '8px',
+                    color: 'white',
+                    pointerEvents: 'none',
+                    maxWidth: '300px',
+                    backdropFilter: 'blur(4px)',
+                    border: '1px solid rgba(255,255,255,0.1)',
+                    zIndex: 10,
+                  }}
+                >
+                  <div style={{ fontWeight: 'bold', marginBottom: 4 }}>{hoveredDevice.name}</div>
+                  <div style={{ fontSize: '12px', opacity: 0.8 }}>
+                    <div>位置: U{hoveredDevice.position}</div>
+                    <div>高度: {hoveredDevice.height}U</div>
+                    <div>状态: {hoveredDevice.status}</div>
+                  </div>
+                </div>
+              )}
+
+              {/* Device Detail Floating Popup - Removed, now handled in DeviceModel */}
+            </>
           ) : (
-            <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}>
-                <Empty description={<span style={{ color: 'rgba(0, 0, 0, 0.45)' }}>请选择一个机柜以查看 3D 视图</span>} />
+            <div
+              style={{
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                height: '100%',
+              }}
+            >
+              <Empty
+                description={
+                  <span style={{ color: 'rgba(0, 0, 0, 0.45)' }}>请选择一个机柜以查看 3D 视图</span>
+                }
+              />
             </div>
           )}
-          
+
           <Modal
             title={
-                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-                    <EditOutlined style={{ color: '#667eea' }} />
-                    <span>编辑设备信息</span>
-                </div>
+              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                <EditOutlined style={{ color: '#667eea' }} />
+                <span>编辑设备信息</span>
+              </div>
             }
             open={modalVisible}
             onCancel={handleModalCancel}
             footer={null}
             width={700}
           >
-            <Form
-                form={form}
-                layout="vertical"
-                onFinish={handleModalSubmit}
-            >
-                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
-                    <Form.Item name="name" label="设备名称" rules={[{ required: true }]}>
-                        <Input />
-                    </Form.Item>
-                    <Form.Item name="type" label="设备类型" rules={[{ required: true }]}>
-                        <Select>
-                            <Option value="server">服务器</Option>
-                            <Option value="switch">交换机</Option>
-                            <Option value="router">路由器</Option>
-                            <Option value="storage">存储设备</Option>
-                            <Option value="firewall">防火墙</Option>
-                            <Option value="other">其他设备</Option>
-                        </Select>
-                    </Form.Item>
-                    <Form.Item name="model" label="型号" rules={[{ required: true }]}>
-                        <Input />
-                    </Form.Item>
-                    <Form.Item name="serialNumber" label="序列号" rules={[{ required: true }]}>
-                        <Input />
-                    </Form.Item>
-                    <Form.Item name="position" label="位置(U)" rules={[{ required: true }]}>
-                        <InputNumber min={1} max={selectedRack?.height || 45} style={{ width: '100%' }} />
-                    </Form.Item>
-                    <Form.Item name="height" label="高度(U)" rules={[{ required: true }]}>
-                        <InputNumber min={1} max={10} style={{ width: '100%' }} />
-                    </Form.Item>
-                    <Form.Item name="status" label="状态" rules={[{ required: true }]}>
-                        <Select>
-                            <Option value="running">运行中</Option>
-                            <Option value="maintenance">维护中</Option>
-                            <Option value="offline">离线</Option>
-                            <Option value="fault">故障</Option>
-                        </Select>
-                    </Form.Item>
-                    <Form.Item name="powerConsumption" label="功率(W)" rules={[{ required: true }]}>
-                        <InputNumber min={0} style={{ width: '100%' }} />
-                    </Form.Item>
-                    <Form.Item name="ipAddress" label="IP地址">
-                        <Input />
-                    </Form.Item>
-                    <Form.Item name="purchaseDate" label="购买日期">
-                        <DatePicker style={{ width: '100%' }} />
-                    </Form.Item>
-                    <Form.Item name="warrantyExpiry" label="保修到期">
-                        <DatePicker style={{ width: '100%' }} />
-                    </Form.Item>
-                </div>
-                <Form.Item name="description" label="描述">
-                    <Input.TextArea rows={3} />
+            <Form form={form} layout="vertical" onFinish={handleModalSubmit}>
+              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
+                <Form.Item name="name" label="设备名称" rules={[{ required: true }]}>
+                  <Input />
                 </Form.Item>
-                
-                <div style={{ textAlign: 'right', marginTop: 16 }}>
-                    <Space>
-                        <Button onClick={handleModalCancel}>取消</Button>
-                        <Button type="primary" htmlType="submit">保存</Button>
-                    </Space>
-                </div>
+                <Form.Item name="type" label="设备类型" rules={[{ required: true }]}>
+                  <Select>
+                    <Option value="server">服务器</Option>
+                    <Option value="switch">交换机</Option>
+                    <Option value="router">路由器</Option>
+                    <Option value="storage">存储设备</Option>
+                    <Option value="firewall">防火墙</Option>
+                    <Option value="other">其他设备</Option>
+                  </Select>
+                </Form.Item>
+                <Form.Item name="model" label="型号" rules={[{ required: true }]}>
+                  <Input />
+                </Form.Item>
+                <Form.Item name="serialNumber" label="序列号" rules={[{ required: true }]}>
+                  <Input />
+                </Form.Item>
+                <Form.Item name="position" label="位置(U)" rules={[{ required: true }]}>
+                  <InputNumber min={1} max={selectedRack?.height || 45} style={{ width: '100%' }} />
+                </Form.Item>
+                <Form.Item name="height" label="高度(U)" rules={[{ required: true }]}>
+                  <InputNumber min={1} max={10} style={{ width: '100%' }} />
+                </Form.Item>
+                <Form.Item name="status" label="状态" rules={[{ required: true }]}>
+                  <Select>
+                    <Option value="running">运行中</Option>
+                    <Option value="maintenance">维护中</Option>
+                    <Option value="offline">离线</Option>
+                    <Option value="fault">故障</Option>
+                  </Select>
+                </Form.Item>
+                <Form.Item name="powerConsumption" label="功率(W)" rules={[{ required: true }]}>
+                  <InputNumber min={0} style={{ width: '100%' }} />
+                </Form.Item>
+                <Form.Item name="ipAddress" label="IP地址">
+                  <Input />
+                </Form.Item>
+                <Form.Item name="purchaseDate" label="购买日期">
+                  <DatePicker style={{ width: '100%' }} />
+                </Form.Item>
+                <Form.Item name="warrantyExpiry" label="保修到期">
+                  <DatePicker style={{ width: '100%' }} />
+                </Form.Item>
+              </div>
+              <Form.Item name="description" label="描述">
+                <Input.TextArea rows={3} />
+              </Form.Item>
+
+              <div style={{ textAlign: 'right', marginTop: 16 }}>
+                <Space>
+                  <Button onClick={handleModalCancel}>取消</Button>
+                  <Button type="primary" htmlType="submit">
+                    保存
+                  </Button>
+                </Space>
+              </div>
             </Form>
           </Modal>
 
           {/* Field Configuration Modal */}
           <Modal
             title={
-                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-                    <SettingOutlined style={{ color: '#1890ff' }} />
-                    <span>设备详情字段配置</span>
-                </div>
+              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                <SettingOutlined style={{ color: '#1890ff' }} />
+                <span>设备详情字段配置</span>
+              </div>
             }
             open={showTooltipConfig}
             onCancel={() => setShowTooltipConfig(false)}
             footer={null}
             width={520}
           >
-             {loadingTooltipFields ? (
-                <div style={{ textAlign: 'center', padding: '20px' }}>
-                    <Spin />
-                    <div style={{ marginTop: 8 }}>加载配置中...</div>
+            {loadingTooltipFields ? (
+              <div style={{ textAlign: 'center', padding: '20px' }}>
+                <Spin />
+                <div style={{ marginTop: 8 }}>加载配置中...</div>
+              </div>
+            ) : (
+              <div>
+                <div style={{ marginBottom: 16, color: '#666' }}>
+                  选择要在设备详情卡片中显示的字段：
                 </div>
-             ) : (
-                <div>
-                    <div style={{ marginBottom: 16, color: '#666' }}>选择要在设备详情卡片中显示的字段：</div>
-                    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, maxHeight: '400px', overflowY: 'auto' }}>
-                        {Object.entries(tooltipFields).map(([key, field]) => (
-                            <div 
-                                key={key}
-                                style={{
-                                    padding: '8px 12px',
-                                    border: field.enabled ? '1px solid #1890ff' : '1px solid #d9d9d9',
-                                    background: field.enabled ? '#e6f7ff' : '#fff',
-                                    borderRadius: '6px',
-                                    cursor: 'pointer',
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    transition: 'all 0.3s'
-                                }}
-                                onClick={() => {
-                                    setTooltipFields(prev => ({
-                                        ...prev,
-                                        [key]: { ...prev[key], enabled: !prev[key].enabled }
-                                    }));
-                                }}
-                            >
-                                <Checkbox checked={field.enabled} style={{ marginRight: 8 }} />
-                                <span>{field.label}</span>
-                            </div>
-                        ))}
-                    </div>
-                    <div style={{ marginTop: 24, textAlign: 'right', borderTop: '1px solid #f0f0f0', paddingTop: 16 }}>
-                        <Space>
-                            <Button onClick={() => setShowTooltipConfig(false)}>取消</Button>
-                            <Button type="primary" onClick={saveTooltipConfig} loading={savingTooltipConfig}>保存配置</Button>
-                        </Space>
+                <div
+                  style={{
+                    display: 'grid',
+                    gridTemplateColumns: '1fr 1fr',
+                    gap: 12,
+                    maxHeight: '400px',
+                    overflowY: 'auto',
+                  }}
+                >
+                  {Object.entries(tooltipFields).map(([key, field]) => (
+                    <div
+                      key={key}
+                      style={{
+                        padding: '8px 12px',
+                        border: field.enabled ? '1px solid #1890ff' : '1px solid #d9d9d9',
+                        background: field.enabled ? '#e6f7ff' : '#fff',
+                        borderRadius: '6px',
+                        cursor: 'pointer',
+                        display: 'flex',
+                        alignItems: 'center',
+                        transition: 'all 0.3s',
+                      }}
+                      onClick={() => {
+                        setTooltipFields(prev => ({
+                          ...prev,
+                          [key]: { ...prev[key], enabled: !prev[key].enabled },
+                        }));
+                      }}
+                    >
+                      <Checkbox checked={field.enabled} style={{ marginRight: 8 }} />
+                      <span>{field.label}</span>
                     </div>
+                  ))}
                 </div>
-             )}
+                <div
+                  style={{
+                    marginTop: 24,
+                    textAlign: 'right',
+                    borderTop: '1px solid #f0f0f0',
+                    paddingTop: 16,
+                  }}
+                >
+                  <Space>
+                    <Button onClick={() => setShowTooltipConfig(false)}>取消</Button>
+                    <Button
+                      type="primary"
+                      onClick={saveTooltipConfig}
+                      loading={savingTooltipConfig}
+                    >
+                      保存配置
+                    </Button>
+                  </Space>
+                </div>
+              </div>
+            )}
           </Modal>
 
           <NetworkCardCreateModal
@@ -888,11 +1091,12 @@ const Rack3DVisualization = () => {
             onAddCable={handleAddCable}
             tooltipFields={tooltipFields}
             cables={deviceCables}
-            onRefreshCables={() => selectedDevice && fetchDeviceCables(selectedDevice.deviceId || selectedDevice.id)}
+            onRefreshCables={() =>
+              selectedDevice && fetchDeviceCables(selectedDevice.deviceId || selectedDevice.id)
+            }
             onDeleteCable={handleDeleteCable}
             refreshTrigger={refreshTrigger}
           />
-
         </Content>
       </Layout>
     </Layout>
diff --git a/frontend/src/pages/RackManagement.jsx b/frontend/src/pages/RackManagement.jsx
index ef81eba..d102bc6 100644
--- a/frontend/src/pages/RackManagement.jsx
+++ b/frontend/src/pages/RackManagement.jsx
@@ -1,16 +1,51 @@
 import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
 import {
-  Table, Button, Modal, Form, Input, Select, message, Card, Space,
-  InputNumber, Progress, Drawer, Tag, Tooltip, Row, Col, Typography,
-  Empty, Badge, Checkbox, Dropdown, Statistic, Upload, Spin
+  Table,
+  Button,
+  Modal,
+  Form,
+  Input,
+  Select,
+  message,
+  Card,
+  Space,
+  InputNumber,
+  Progress,
+  Drawer,
+  Tag,
+  Tooltip,
+  Row,
+  Col,
+  Typography,
+  Empty,
+  Badge,
+  Checkbox,
+  Dropdown,
+  Statistic,
+  Upload,
+  Spin,
 } from 'antd';
 import {
-  PlusOutlined, EditOutlined, DeleteOutlined, UploadOutlined,
-  DownloadOutlined, SearchOutlined, ReloadOutlined, EyeOutlined,
-  DatabaseOutlined, HomeOutlined, ThunderboltOutlined,
-  ExpandOutlined, CompressOutlined, MoreOutlined,
-  CheckCircleOutlined, WarningOutlined, SyncOutlined,
-  LineChartOutlined, FilterOutlined, DeleteFilled
+  PlusOutlined,
+  EditOutlined,
+  DeleteOutlined,
+  UploadOutlined,
+  DownloadOutlined,
+  SearchOutlined,
+  ReloadOutlined,
+  EyeOutlined,
+  DatabaseOutlined,
+  HomeOutlined,
+  ThunderboltOutlined,
+  ExpandOutlined,
+  CompressOutlined,
+  MoreOutlined,
+  CheckCircleOutlined,
+  WarningOutlined,
+  SyncOutlined,
+  LineChartOutlined,
+  FilterOutlined,
+  DeleteFilled,
 } from '@ant-design/icons';
 import axios from 'axios';
 
@@ -22,49 +57,49 @@ const designTokens = {
     primary: {
       main: '#1890ff',
       gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
-      bgGradient: 'linear-gradient(135deg, #667eea15 0%, #764ba208 100%)'
+      bgGradient: 'linear-gradient(135deg, #667eea15 0%, #764ba208 100%)',
     },
     success: {
       main: '#52c41a',
-      gradient: 'linear-gradient(135deg, #52c41a 0%, #389e0d 100%)'
+      gradient: 'linear-gradient(135deg, #52c41a 0%, #389e0d 100%)',
     },
     warning: {
       main: '#faad14',
-      gradient: 'linear-gradient(135deg, #faad14 0%, #d48806 100%)'
+      gradient: 'linear-gradient(135deg, #faad14 0%, #d48806 100%)',
     },
     error: {
       main: '#ff4d4f',
-      gradient: 'linear-gradient(135deg, #ff4d4f 0%, #cf1322 100%)'
+      gradient: 'linear-gradient(135deg, #ff4d4f 0%, #cf1322 100%)',
     },
     purple: {
       main: '#722ed1',
-      gradient: 'linear-gradient(135deg, #722ed1 0%, #531dab 100%)'
+      gradient: 'linear-gradient(135deg, #722ed1 0%, #531dab 100%)',
     },
     text: {
       primary: '#262626',
       secondary: '#8c8c8c',
-      tertiary: '#bfbfbf'
-    }
+      tertiary: '#bfbfbf',
+    },
   },
   shadows: {
     small: '0 2px 8px rgba(0, 0, 0, 0.06)',
     medium: '0 4px 16px rgba(0, 0, 0, 0.08)',
-    large: '0 8px 24px rgba(0, 0, 0, 0.12)'
+    large: '0 8px 24px rgba(0, 0, 0, 0.12)',
   },
   borderRadius: {
     small: '8px',
     medium: '12px',
-    large: '16px'
+    large: '16px',
   },
   transitions: {
-    normal: '0.3s cubic-bezier(0.4, 0, 0.2, 1)'
-  }
+    normal: '0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+  },
 };
 
 const containerStyle = {
   minHeight: '100vh',
   background: 'linear-gradient(180deg, #f5f7fa 0%, #e8ecf1 100%)',
-  padding: '24px'
+  padding: '24px',
 };
 
 const headerStyle = {
@@ -73,7 +108,7 @@ const headerStyle = {
   background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
   borderRadius: '20px',
   color: '#fff',
-  boxShadow: '0 8px 32px rgba(102, 126, 234, 0.3)'
+  boxShadow: '0 8px 32px rgba(102, 126, 234, 0.3)',
 };
 
 const statCardStyle = {
@@ -81,7 +116,7 @@ const statCardStyle = {
   borderRadius: designTokens.borderRadius.medium,
   padding: '16px',
   border: '1px solid rgba(255, 255, 255, 0.2)',
-  backdropFilter: 'blur(10px)'
+  backdropFilter: 'blur(10px)',
 };
 
 const cardStyle = {
@@ -89,13 +124,13 @@ const cardStyle = {
   border: 'none',
   boxShadow: designTokens.shadows.medium,
   background: '#fff',
-  overflow: 'hidden'
+  overflow: 'hidden',
 };
 
 const cardHeadStyle = {
   borderBottom: '1px solid #f0f0f0',
   padding: '16px 24px',
-  background: 'linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%)'
+  background: 'linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%)',
 };
 
 const primaryButtonStyle = {
@@ -104,25 +139,25 @@ const primaryButtonStyle = {
   background: designTokens.colors.primary.gradient,
   border: 'none',
   boxShadow: '0 4px 16px rgba(102, 126, 234, 0.35)',
-  fontWeight: '500'
+  fontWeight: '500',
 };
 
 const actionButtonStyle = {
   height: '36px',
   borderRadius: '8px',
-  border: '1px solid #e8e8e8'
+  border: '1px solid #e8e8e8',
 };
 
 const searchInputStyle = {
   borderRadius: '10px',
   height: '42px',
-  border: '1px solid #e8e8e8'
+  border: '1px solid #e8e8e8',
 };
 
 const statusConfig = {
   active: { text: '在用', color: 'success', icon: <CheckCircleOutlined /> },
   maintenance: { text: '维护中', color: 'warning', icon: <SyncOutlined spin /> },
-  inactive: { text: '停用', color: 'default', icon: <WarningOutlined /> }
+  inactive: { text: '停用', color: 'default', icon: <WarningOutlined /> },
 };
 
 const PowerGauge = ({ current, max }) => {
@@ -169,21 +204,32 @@ const RackCard = ({ rack, onEdit, onDelete, onView, selected, onSelect }) => {
         border: selected ? `2px solid ${designTokens.colors.primary.main}` : '1px solid #f0f0f0',
         boxShadow: designTokens.shadows.small,
         transition: `all ${designTokens.transitions.normal}`,
-        cursor: 'pointer'
+        cursor: 'pointer',
       }}
       onClick={() => onSelect(rack.rackId)}
       onDoubleClick={() => onView(rack)}
       styles={{ body: { padding: '20px' } }}
     >
-      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '16px' }}>
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'flex-start',
+          marginBottom: '16px',
+        }}
+      >
         <div>
           <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '4px' }}>
-            <DatabaseOutlined style={{ fontSize: '20px', color: designTokens.colors.purple.main }} />
+            <DatabaseOutlined
+              style={{ fontSize: '20px', color: designTokens.colors.purple.main }}
+            />
             <Text strong style={{ fontSize: '16px', color: designTokens.colors.text.primary }}>
               {rack.name}
             </Text>
           </div>
-          <Text type="secondary" style={{ fontSize: '13px' }}>{rack.rackId}</Text>
+          <Text type="secondary" style={{ fontSize: '13px' }}>
+            {rack.rackId}
+          </Text>
         </div>
         <Tag color={statusInfo.color} icon={statusInfo.icon} style={{ borderRadius: '20px' }}>
           {statusInfo.text}
@@ -197,16 +243,38 @@ const RackCard = ({ rack, onEdit, onDelete, onView, selected, onSelect }) => {
         </Text>
       </div>
 
-      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px', marginBottom: '16px' }}>
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: '1fr 1fr',
+          gap: '12px',
+          marginBottom: '16px',
+        }}
+      >
         <div style={{ padding: '12px', background: '#fafafa', borderRadius: '8px' }}>
-          <Text type="secondary" style={{ fontSize: '11px' }}>高度/已用U位</Text>
-          <div style={{ fontSize: '14px', fontWeight: '600', color: designTokens.colors.text.primary }}>
+          <Text type="secondary" style={{ fontSize: '11px' }}>
+            高度/已用U位
+          </Text>
+          <div
+            style={{ fontSize: '14px', fontWeight: '600', color: designTokens.colors.text.primary }}
+          >
             {rack.height}U / {deviceCount}
           </div>
         </div>
         <div style={{ padding: '12px', background: '#fafafa', borderRadius: '8px' }}>
-          <Text type="secondary" style={{ fontSize: '11px' }}>功率使用</Text>
-          <div style={{ fontSize: '14px', fontWeight: '600', color: powerUsage >= 80 ? designTokens.colors.error.main : designTokens.colors.text.primary }}>
+          <Text type="secondary" style={{ fontSize: '11px' }}>
+            功率使用
+          </Text>
+          <div
+            style={{
+              fontSize: '14px',
+              fontWeight: '600',
+              color:
+                powerUsage >= 80
+                  ? designTokens.colors.error.main
+                  : designTokens.colors.text.primary,
+            }}
+          >
             {powerUsage.toFixed(1)}%
           </div>
         </div>
@@ -225,7 +293,10 @@ const RackCard = ({ rack, onEdit, onDelete, onView, selected, onSelect }) => {
             <Button
               type="text"
               icon={<EyeOutlined />}
-              onClick={(e) => { e.stopPropagation(); onView(rack); }}
+              onClick={e => {
+                e.stopPropagation();
+                onView(rack);
+              }}
               style={{ color: designTokens.colors.text.secondary }}
             />
           </Tooltip>
@@ -233,7 +304,10 @@ const RackCard = ({ rack, onEdit, onDelete, onView, selected, onSelect }) => {
             <Button
               type="text"
               icon={<EditOutlined />}
-              onClick={(e) => { e.stopPropagation(); onEdit(rack); }}
+              onClick={e => {
+                e.stopPropagation();
+                onEdit(rack);
+              }}
               style={{ color: designTokens.colors.primary.main }}
             />
           </Tooltip>
@@ -242,7 +316,10 @@ const RackCard = ({ rack, onEdit, onDelete, onView, selected, onSelect }) => {
               type="text"
               icon={<DeleteOutlined />}
               danger
-              onClick={(e) => { e.stopPropagation(); onDelete(rack.rackId); }}
+              onClick={e => {
+                e.stopPropagation();
+                onDelete(rack.rackId);
+              }}
             />
           </Tooltip>
         </Space>
@@ -271,7 +348,7 @@ function RackManagement() {
     total: 0,
     pageSizeOptions: ['10', '20', '30', '50', '100'],
     showSizeChanger: true,
-    showTotal: (total) => `共 ${total} 条记录`
+    showTotal: total => `共 ${total} 条记录`,
   });
   const [form] = Form.useForm();
   const [importProgress, setImportProgress] = useState(0);
@@ -279,28 +356,31 @@ function RackManagement() {
   const [isImporting, setIsImporting] = useState(false);
   const [importResult, setImportResult] = useState(null);
 
-  const fetchRacks = useCallback(async (page = 1, pageSize = 10) => {
-    try {
-      setLoading(true);
-      const response = await axios.get('/api/racks', {
-        params: {
-          page,
-          pageSize,
-          roomId: roomFilter,
-          status: statusFilter,
-          keyword: searchKeyword || undefined
-        }
-      });
-      const { racks: data, total } = response.data;
-      setRacks(data);
-      setPagination(prev => ({ ...prev, current: page, pageSize, total }));
-    } catch (error) {
-      message.error('获取机柜列表失败');
-      console.error('获取机柜列表失败:', error);
-    } finally {
-      setLoading(false);
-    }
-  }, [roomFilter, statusFilter, searchKeyword]);
+  const fetchRacks = useCallback(
+    async (page = 1, pageSize = 10) => {
+      try {
+        setLoading(true);
+        const response = await axios.get('/api/racks', {
+          params: {
+            page,
+            pageSize,
+            roomId: roomFilter,
+            status: statusFilter,
+            keyword: searchKeyword || undefined,
+          },
+        });
+        const { racks: data, total } = response.data;
+        setRacks(data);
+        setPagination(prev => ({ ...prev, current: page, pageSize, total }));
+      } catch (error) {
+        message.error('获取机柜列表失败');
+        console.error('获取机柜列表失败:', error);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [roomFilter, statusFilter, searchKeyword]
+  );
 
   const fetchRooms = useCallback(async () => {
     try {
@@ -323,9 +403,12 @@ function RackManagement() {
     fetchRacks(1, pagination.pageSize);
   }, [roomFilter, statusFilter, searchKeyword]);
 
-  const handleTableChange = useCallback((pagination) => {
-    fetchRacks(pagination.current, pagination.pageSize);
-  }, [fetchRacks]);
+  const handleTableChange = useCallback(
+    pagination => {
+      fetchRacks(pagination.current, pagination.pageSize);
+    },
+    [fetchRacks]
+  );
 
   const showModal = (rack = null) => {
     setEditingRack(rack);
@@ -342,7 +425,7 @@ function RackManagement() {
     setEditingRack(null);
   };
 
-  const handleSubmit = async (values) => {
+  const handleSubmit = async values => {
     try {
       if (editingRack) {
         await axios.put(`/api/racks/${editingRack.rackId}`, values);
@@ -360,7 +443,7 @@ function RackManagement() {
     }
   };
 
-  const handleDelete = async (rackId) => {
+  const handleDelete = async rackId => {
     Modal.confirm({
       title: '确认删除',
       content: '确定要删除这个机柜吗？删除后无法恢复。',
@@ -376,7 +459,7 @@ function RackManagement() {
           message.error('机柜删除失败');
           console.error('机柜删除失败:', error);
         }
-      }
+      },
     });
   };
 
@@ -402,11 +485,11 @@ function RackManagement() {
           message.error('批量删除失败');
           console.error('批量删除失败:', error);
         }
-      }
+      },
     });
   };
 
-  const handleView = (rack) => {
+  const handleView = rack => {
     setViewingRack(rack);
     setDrawerVisible(true);
   };
@@ -420,19 +503,19 @@ function RackManagement() {
   const handleExport = useCallback(async () => {
     try {
       message.loading('正在导出租机柜数据...', 0);
-      
+
       const response = await axios.get('/api/racks/export', {
-        responseType: 'blob'
+        responseType: 'blob',
       });
-      
+
       // 创建下载链接
-      const blob = new Blob([response.data], { 
-        type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' 
+      const blob = new Blob([response.data], {
+        type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
       });
       const url = window.URL.createObjectURL(blob);
       const link = document.createElement('a');
       link.href = url;
-      
+
       // 从响应头获取文件名，或使用默认文件名
       const contentDisposition = response.headers['content-disposition'];
       let fileName = '机柜导出.xlsx';
@@ -442,13 +525,13 @@ function RackManagement() {
           fileName = decodeURIComponent(match[1].replace(/['"]/g, ''));
         }
       }
-      
+
       link.setAttribute('download', fileName);
       document.body.appendChild(link);
       link.click();
       document.body.removeChild(link);
       window.URL.revokeObjectURL(url);
-      
+
       message.destroy();
       message.success('机柜导出成功');
     } catch (error) {
@@ -458,52 +541,58 @@ function RackManagement() {
     }
   }, []);
 
-  const handleImport = useCallback(async (file) => {
-    try {
-      setIsImporting(true);
-      setImportProgress(0);
-      setImportPhase('正在上传文件...');
-      setImportResult(null);
+  const handleImport = useCallback(
+    async file => {
+      try {
+        setIsImporting(true);
+        setImportProgress(0);
+        setImportPhase('正在上传文件...');
+        setImportResult(null);
 
-      const formData = new FormData();
-      formData.append('file', file);
+        const formData = new FormData();
+        formData.append('file', file);
 
-      const response = await axios.post('/api/racks/import', formData, {
-        headers: { 'Content-Type': 'multipart/form-data' }
-      });
+        const response = await axios.post('/api/racks/import', formData, {
+          headers: { 'Content-Type': 'multipart/form-data' },
+        });
 
-      setImportProgress(100);
-      setImportPhase('导入完成');
-      setImportResult(response.data);
-      setIsImporting(false);
+        setImportProgress(100);
+        setImportPhase('导入完成');
+        setImportResult(response.data);
+        setIsImporting(false);
 
-      if (response.data.success) {
-        message.success('机柜导入成功');
-      } else {
-        message.warning(response.data.message || '部分记录导入失败');
+        if (response.data.success) {
+          message.success('机柜导入成功');
+        } else {
+          message.warning(response.data.message || '部分记录导入失败');
+        }
+
+        fetchRacks();
+        return false;
+      } catch (error) {
+        setIsImporting(false);
+        setImportProgress(0);
+        message.error('机柜导入失败');
+        console.error('机柜导入失败:', error);
+        return false;
       }
-
-      fetchRacks();
-      return false;
-    } catch (error) {
-      setIsImporting(false);
-      setImportProgress(0);
-      message.error('机柜导入失败');
-      console.error('机柜导入失败:', error);
-      return false;
-    }
-  }, [fetchRacks]);
+    },
+    [fetchRacks]
+  );
 
   // 后端已过滤，直接使用 racks 数据
   const filteredRacks = racks;
 
-  const stats = useMemo(() => ({
-    total: racks.length,
-    active: racks.filter(r => r.status === 'active').length,
-    maintenance: racks.filter(r => r.status === 'maintenance').length,
-    totalPower: racks.reduce((sum, r) => sum + (r.currentPower || 0), 0),
-    totalDevices: racks.reduce((sum, r) => sum + (r.Devices?.length || 0), 0)
-  }), [racks]);
+  const stats = useMemo(
+    () => ({
+      total: racks.length,
+      active: racks.filter(r => r.status === 'active').length,
+      maintenance: racks.filter(r => r.status === 'maintenance').length,
+      totalPower: racks.reduce((sum, r) => sum + (r.currentPower || 0), 0),
+      totalDevices: racks.reduce((sum, r) => sum + (r.Devices?.length || 0), 0),
+    }),
+    [racks]
+  );
 
   const tableColumns = [
     {
@@ -511,16 +600,20 @@ function RackManagement() {
       key: 'rackInfo',
       render: (_, record) => (
         <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
-          <div style={{
-            width: '44px',
-            height: '44px',
-            borderRadius: '10px',
-            background: 'linear-gradient(135deg, #722ed115 0%, #722ed108 100%)',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center'
-          }}>
-            <DatabaseOutlined style={{ fontSize: '22px', color: designTokens.colors.purple.main }} />
+          <div
+            style={{
+              width: '44px',
+              height: '44px',
+              borderRadius: '10px',
+              background: 'linear-gradient(135deg, #722ed115 0%, #722ed108 100%)',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            <DatabaseOutlined
+              style={{ fontSize: '22px', color: designTokens.colors.purple.main }}
+            />
           </div>
           <div>
             <div style={{ fontWeight: '600', color: designTokens.colors.text.primary }}>
@@ -531,7 +624,7 @@ function RackManagement() {
             </div>
           </div>
         </div>
-      )
+      ),
     },
     {
       title: '所属机房',
@@ -542,7 +635,7 @@ function RackManagement() {
           <HomeOutlined style={{ color: designTokens.colors.text.tertiary }} />
           <span>{name || '未分配'}</span>
         </div>
-      )
+      ),
     },
     {
       title: '高度/已用U位',
@@ -556,7 +649,9 @@ function RackManagement() {
             <Progress
               percent={percentage}
               size="small"
-              strokeColor={percentage >= 90 ? designTokens.colors.error.main : designTokens.colors.success.main}
+              strokeColor={
+                percentage >= 90 ? designTokens.colors.error.main : designTokens.colors.success.main
+              }
               trailColor="#f0f0f0"
               style={{ marginTop: '4px', marginBottom: 0 }}
             />
@@ -566,7 +661,7 @@ function RackManagement() {
           </div>
         );
       },
-      sorter: (a, b) => (a.Devices?.length || 0) - (b.Devices?.length || 0)
+      sorter: (a, b) => (a.Devices?.length || 0) - (b.Devices?.length || 0),
     },
     {
       title: '功率使用',
@@ -576,13 +671,13 @@ function RackManagement() {
           <PowerGauge current={record.currentPower} max={record.maxPower} />
         </div>
       ),
-      sorter: (a, b) => (a.currentPower || 0) - (b.currentPower || 0)
+      sorter: (a, b) => (a.currentPower || 0) - (b.currentPower || 0),
     },
     {
       title: '状态',
       dataIndex: 'status',
       key: 'status',
-      render: (status) => {
+      render: status => {
         const config = statusConfig[status];
         return (
           <Tag color={config.color} icon={config.icon} style={{ borderRadius: '20px' }}>
@@ -593,9 +688,9 @@ function RackManagement() {
       filters: [
         { text: '在用', value: 'active' },
         { text: '维护中', value: 'maintenance' },
-        { text: '停用', value: 'inactive' }
+        { text: '停用', value: 'inactive' },
       ],
-      onFilter: (value, record) => record.status === value
+      onFilter: (value, record) => record.status === value,
     },
     {
       title: '设备数',
@@ -603,14 +698,14 @@ function RackManagement() {
       render: (_, record) => (
         <Badge count={record.Devices?.length || 0} style={{ backgroundColor: '#52c41a' }} />
       ),
-      sorter: (a, b) => (a.Devices?.length || 0) - (b.Devices?.length || 0)
+      sorter: (a, b) => (a.Devices?.length || 0) - (b.Devices?.length || 0),
     },
     {
       title: '创建时间',
       dataIndex: 'createdAt',
       key: 'createdAt',
-      render: (date) => date ? new Date(date).toLocaleString() : '-',
-      sorter: (a, b) => new Date(a.createdAt || 0) - new Date(b.createdAt || 0)
+      render: date => (date ? new Date(date).toLocaleString() : '-'),
+      sorter: (a, b) => new Date(a.createdAt || 0) - new Date(b.createdAt || 0),
     },
     {
       title: '操作',
@@ -644,29 +739,44 @@ function RackManagement() {
             />
           </Tooltip>
         </Space>
-      )
-    }
+      ),
+    },
   ];
 
   const rowSelection = {
     selectedRowKeys: selectedRackIds,
-    onChange: (selectedRowKeys) => {
+    onChange: selectedRowKeys => {
       setSelectedRackIds(selectedRowKeys);
-    }
+    },
   };
 
   return (
     <div style={containerStyle}>
       <div style={headerStyle}>
-        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: '16px' }}>
+        <div
+          style={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            flexWrap: 'wrap',
+            gap: '16px',
+          }}
+        >
           <div>
-            <h1 style={{ fontSize: '24px', fontWeight: '700', margin: '0 0 4px 0', display: 'flex', alignItems: 'center', gap: '12px' }}>
+            <h1
+              style={{
+                fontSize: '24px',
+                fontWeight: '700',
+                margin: '0 0 4px 0',
+                display: 'flex',
+                alignItems: 'center',
+                gap: '12px',
+              }}
+            >
               <DatabaseOutlined />
               机柜管理
             </h1>
-            <p style={{ margin: 0, opacity: 0.9, fontSize: '14px' }}>
-              管理和监控所有机柜设备
-            </p>
+            <p style={{ margin: 0, opacity: 0.9, fontSize: '14px' }}>管理和监控所有机柜设备</p>
           </div>
           <div style={{ display: 'flex', gap: '12px' }}>
             <div style={statCardStyle}>
@@ -675,7 +785,9 @@ function RackManagement() {
             </div>
             <div style={statCardStyle}>
               <Text style={{ color: 'rgba(255,255,255,0.8)', fontSize: '12px' }}>在用机柜</Text>
-              <div style={{ fontSize: '24px', fontWeight: '700', color: '#52c41a' }}>{stats.active}</div>
+              <div style={{ fontSize: '24px', fontWeight: '700', color: '#52c41a' }}>
+                {stats.active}
+              </div>
             </div>
             <div style={statCardStyle}>
               <Text style={{ color: 'rgba(255,255,255,0.8)', fontSize: '12px' }}>设备总数</Text>
@@ -683,20 +795,31 @@ function RackManagement() {
             </div>
             <div style={statCardStyle}>
               <Text style={{ color: 'rgba(255,255,255,0.8)', fontSize: '12px' }}>总功率</Text>
-              <div style={{ fontSize: '24px', fontWeight: '700' }}>{(stats.totalPower / 1000).toFixed(1)}kW</div>
+              <div style={{ fontSize: '24px', fontWeight: '700' }}>
+                {(stats.totalPower / 1000).toFixed(1)}kW
+              </div>
             </div>
           </div>
         </div>
       </div>
 
       <Card style={cardStyle} styles={{ header: cardHeadStyle, body: { padding: '20px 24px' } }}>
-        <div style={{ marginBottom: '20px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: '16px' }}>
+        <div
+          style={{
+            marginBottom: '20px',
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            flexWrap: 'wrap',
+            gap: '16px',
+          }}
+        >
           <div style={{ display: 'flex', gap: '12px', flex: 1, maxWidth: '800px' }}>
             <Input
               placeholder="搜索机柜名称、ID..."
               prefix={<SearchOutlined style={{ color: '#bfbfbf' }} />}
               value={searchKeyword}
-              onChange={(e) => setSearchKeyword(e.target.value)}
+              onChange={e => setSearchKeyword(e.target.value)}
               style={searchInputStyle}
               allowClear
             />
@@ -717,7 +840,9 @@ function RackManagement() {
             >
               <Option value="all">全部机房</Option>
               {rooms.map(room => (
-                <Option key={room.roomId} value={room.roomId}>{room.name}</Option>
+                <Option key={room.roomId} value={room.roomId}>
+                  {room.name}
+                </Option>
               ))}
             </Select>
           </div>
@@ -747,11 +872,7 @@ function RackManagement() {
             >
               导入
             </Button>
-            <Button
-              icon={<DownloadOutlined />}
-              onClick={handleExport}
-              style={actionButtonStyle}
-            >
+            <Button icon={<DownloadOutlined />} onClick={handleExport} style={actionButtonStyle}>
               导出
             </Button>
             <Button
@@ -807,7 +928,7 @@ function RackManagement() {
                     onDelete={handleDelete}
                     onView={handleView}
                     selected={selectedRackIds.includes(rack.rackId)}
-                    onSelect={(id) => {
+                    onSelect={id => {
                       if (selectedRackIds.includes(id)) {
                         setSelectedRackIds(selectedRackIds.filter(rid => rid !== id));
                       } else {
@@ -829,12 +950,14 @@ function RackManagement() {
       <Modal
         title={
           <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
-            <div style={{
-              width: '4px',
-              height: '20px',
-              background: designTokens.colors.primary.gradient,
-              borderRadius: '2px'
-            }} />
+            <div
+              style={{
+                width: '4px',
+                height: '20px',
+                background: designTokens.colors.primary.gradient,
+                borderRadius: '2px',
+              }}
+            />
             {editingRack ? '编辑机柜' : '添加机柜'}
           </div>
         }
@@ -845,17 +968,14 @@ function RackManagement() {
         destroyOnHidden
         styles={{
           body: { padding: '24px' },
-          header: { borderBottom: '1px solid #f0f0f0', padding: '16px 50px 16px 24px' }
+          header: { borderBottom: '1px solid #f0f0f0', padding: '16px 50px 16px 24px' },
         }}
         style={{ borderRadius: '16px' }}
       >
         <Form form={form} layout="vertical" onFinish={handleSubmit}>
           <Row gutter={16}>
             <Col span={12}>
-              <Form.Item
-                name="rackId"
-                label="机柜ID（留空自动生成）"
-              >
+              <Form.Item name="rackId" label="机柜ID（留空自动生成）">
                 <Input placeholder="如：RACK001，留空则自动生成" style={{ borderRadius: '8px' }} />
               </Form.Item>
             </Col>
@@ -891,7 +1011,12 @@ function RackManagement() {
                 label="高度(U)"
                 rules={[{ required: true, message: '请输入机柜高度' }]}
               >
-                <InputNumber placeholder="请输入机柜高度" min={1} max={50} style={{ width: '100%', borderRadius: '8px' }} />
+                <InputNumber
+                  placeholder="请输入机柜高度"
+                  min={1}
+                  max={50}
+                  style={{ width: '100%', borderRadius: '8px' }}
+                />
               </Form.Item>
             </Col>
             <Col span={12}>
@@ -900,16 +1025,16 @@ function RackManagement() {
                 label="最大功率(W)"
                 rules={[{ required: true, message: '请输入最大功率' }]}
               >
-                <InputNumber placeholder="请输入最大功率" min={0} style={{ width: '100%', borderRadius: '8px' }} />
+                <InputNumber
+                  placeholder="请输入最大功率"
+                  min={0}
+                  style={{ width: '100%', borderRadius: '8px' }}
+                />
               </Form.Item>
             </Col>
           </Row>
 
-          <Form.Item
-            name="status"
-            label="状态"
-            rules={[{ required: true, message: '请选择状态' }]}
-          >
+          <Form.Item name="status" label="状态" rules={[{ required: true, message: '请选择状态' }]}>
             <Select placeholder="请选择状态" style={{ borderRadius: '8px' }}>
               <Option value="active">在用</Option>
               <Option value="maintenance">维护中</Option>
@@ -917,7 +1042,9 @@ function RackManagement() {
             </Select>
           </Form.Item>
 
-          <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '12px', marginTop: '24px' }}>
+          <div
+            style={{ display: 'flex', justifyContent: 'flex-end', gap: '12px', marginTop: '24px' }}
+          >
             <Button onClick={handleCancel} style={{ borderRadius: '8px', height: '42px' }}>
               取消
             </Button>
@@ -931,7 +1058,9 @@ function RackManagement() {
       <Drawer
         title={
           <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
-            <DatabaseOutlined style={{ fontSize: '20px', color: designTokens.colors.purple.main }} />
+            <DatabaseOutlined
+              style={{ fontSize: '20px', color: designTokens.colors.purple.main }}
+            />
             机柜详情 - {viewingRack?.name}
           </div>
         }
@@ -940,21 +1069,33 @@ function RackManagement() {
         width={520}
         styles={{
           header: { borderBottom: '1px solid #f0f0f0' },
-          body: { padding: '24px' }
+          body: { padding: '24px' },
         }}
       >
         {viewingRack && (
           <div>
-            <div style={{
-              padding: '20px',
-              background: 'linear-gradient(135deg, #722ed115 0%, #722ed108 100%)',
-              borderRadius: designTokens.borderRadius.medium,
-              marginBottom: '20px'
-            }}>
-              <div style={{ display: 'flex', alignItems: 'center', gap: '12px', marginBottom: '16px' }}>
-                <DatabaseOutlined style={{ fontSize: '32px', color: designTokens.colors.purple.main }} />
+            <div
+              style={{
+                padding: '20px',
+                background: 'linear-gradient(135deg, #722ed115 0%, #722ed108 100%)',
+                borderRadius: designTokens.borderRadius.medium,
+                marginBottom: '20px',
+              }}
+            >
+              <div
+                style={{ display: 'flex', alignItems: 'center', gap: '12px', marginBottom: '16px' }}
+              >
+                <DatabaseOutlined
+                  style={{ fontSize: '32px', color: designTokens.colors.purple.main }}
+                />
                 <div>
-                  <div style={{ fontSize: '18px', fontWeight: '600', color: designTokens.colors.text.primary }}>
+                  <div
+                    style={{
+                      fontSize: '18px',
+                      fontWeight: '600',
+                      color: designTokens.colors.text.primary,
+                    }}
+                  >
                     {viewingRack.name}
                   </div>
                   <div style={{ fontSize: '13px', color: designTokens.colors.text.secondary }}>
@@ -970,7 +1111,9 @@ function RackManagement() {
             <Row gutter={16} style={{ marginBottom: '20px' }}>
               <Col span={12}>
                 <div style={{ padding: '16px', background: '#fafafa', borderRadius: '10px' }}>
-                  <Text type="secondary" style={{ fontSize: '12px' }}>所属机房</Text>
+                  <Text type="secondary" style={{ fontSize: '12px' }}>
+                    所属机房
+                  </Text>
                   <div style={{ fontSize: '15px', fontWeight: '500', marginTop: '4px' }}>
                     {viewingRack.Room?.name || '未分配'}
                   </div>
@@ -978,8 +1121,16 @@ function RackManagement() {
               </Col>
               <Col span={12}>
                 <div style={{ padding: '16px', background: '#fafafa', borderRadius: '10px' }}>
-                  <Text type="secondary" style={{ fontSize: '12px' }}>设备数量</Text>
-                  <div style={{ fontSize: '20px', fontWeight: '600', color: designTokens.colors.primary.main }}>
+                  <Text type="secondary" style={{ fontSize: '12px' }}>
+                    设备数量
+                  </Text>
+                  <div
+                    style={{
+                      fontSize: '20px',
+                      fontWeight: '600',
+                      color: designTokens.colors.primary.main,
+                    }}
+                  >
                     {viewingRack.Devices?.length || 0}
                   </div>
                 </div>
@@ -989,16 +1140,32 @@ function RackManagement() {
             <Row gutter={16} style={{ marginBottom: '20px' }}>
               <Col span={12}>
                 <div style={{ padding: '16px', background: '#fafafa', borderRadius: '10px' }}>
-                  <Text type="secondary" style={{ fontSize: '12px' }}>机柜高度</Text>
-                  <div style={{ fontSize: '20px', fontWeight: '600', color: designTokens.colors.text.primary }}>
+                  <Text type="secondary" style={{ fontSize: '12px' }}>
+                    机柜高度
+                  </Text>
+                  <div
+                    style={{
+                      fontSize: '20px',
+                      fontWeight: '600',
+                      color: designTokens.colors.text.primary,
+                    }}
+                  >
                     {viewingRack.height}U
                   </div>
                 </div>
               </Col>
               <Col span={12}>
                 <div style={{ padding: '16px', background: '#fafafa', borderRadius: '10px' }}>
-                  <Text type="secondary" style={{ fontSize: '12px' }}>可用U位</Text>
-                  <div style={{ fontSize: '20px', fontWeight: '600', color: designTokens.colors.success.main }}>
+                  <Text type="secondary" style={{ fontSize: '12px' }}>
+                    可用U位
+                  </Text>
+                  <div
+                    style={{
+                      fontSize: '20px',
+                      fontWeight: '600',
+                      color: designTokens.colors.success.main,
+                    }}
+                  >
                     {viewingRack.height - (viewingRack.Devices?.length || 0)}U
                   </div>
                 </div>
@@ -1006,7 +1173,9 @@ function RackManagement() {
             </Row>
 
             <div style={{ marginBottom: '20px' }}>
-              <Text type="secondary" style={{ fontSize: '13px' }}>功率使用情况</Text>
+              <Text type="secondary" style={{ fontSize: '13px' }}>
+                功率使用情况
+              </Text>
               <div style={{ marginTop: '12px' }}>
                 <PowerGauge current={viewingRack.currentPower} max={viewingRack.maxPower} />
               </div>
@@ -1043,12 +1212,14 @@ function RackManagement() {
       <Modal
         title={
           <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
-            <div style={{
-              width: '4px',
-              height: '20px',
-              background: designTokens.colors.primary.gradient,
-              borderRadius: '2px'
-            }} />
+            <div
+              style={{
+                width: '4px',
+                height: '20px',
+                background: designTokens.colors.primary.gradient,
+                borderRadius: '2px',
+              }}
+            />
             导入机柜
           </div>
         }
@@ -1065,52 +1236,56 @@ function RackManagement() {
         destroyOnHidden
         styles={{
           body: { padding: '24px' },
-          header: { borderBottom: '1px solid #f0f0f0', padding: '16px 24px' }
+          header: { borderBottom: '1px solid #f0f0f0', padding: '16px 24px' },
         }}
         style={{ borderRadius: '16px' }}
       >
         {!isImporting && !importResult ? (
           <div>
-            <div style={{
-              padding: '16px',
-              background: designTokens.colors.primary.bgGradient,
-              borderRadius: '12px',
-              marginBottom: '20px',
-              border: '1px solid #e8e8e8'
-            }}>
+            <div
+              style={{
+                padding: '16px',
+                background: designTokens.colors.primary.bgGradient,
+                borderRadius: '12px',
+                marginBottom: '20px',
+                border: '1px solid #e8e8e8',
+              }}
+            >
               <p style={{ margin: '0 0 12px 0', fontWeight: '600', color: '#262626' }}>
                 请上传XLSX格式的机柜数据文件
               </p>
-              <p style={{ margin: 0, color: '#8c8c8c', fontSize: '12px' }}>
-                支持的编码格式：UTF-8
-              </p>
+              <p style={{ margin: 0, color: '#8c8c8c', fontSize: '12px' }}>支持的编码格式：UTF-8</p>
             </div>
 
             <div style={{ marginBottom: '24px' }}>
               <p style={{ fontWeight: '600', marginBottom: '12px', color: '#262626' }}>
                 Excel文件格式要求：
               </p>
-              <ul style={{
-                paddingLeft: '20px',
-                marginBottom: '10px',
-                color: '#595959',
-                lineHeight: '1.8'
-              }}>
+              <ul
+                style={{
+                  paddingLeft: '20px',
+                  marginBottom: '10px',
+                  color: '#595959',
+                  lineHeight: '1.8',
+                }}
+              >
                 <li>必填字段：机柜ID、机柜名称、所属机房名称、高度(U)、最大功率(W)、状态</li>
                 <li>状态值：active(在用)、maintenance(维护中)、inactive(停用)</li>
                 <li>高度和功率必须是数字格式</li>
               </ul>
             </div>
 
-            <div style={{
-              padding: '16px',
-              background: '#f6f6f6',
-              borderRadius: '8px',
-              marginBottom: '20px',
-              display: 'flex',
-              alignItems: 'center',
-              gap: '12px'
-            }}>
+            <div
+              style={{
+                padding: '16px',
+                background: '#f6f6f6',
+                borderRadius: '8px',
+                marginBottom: '20px',
+                display: 'flex',
+                alignItems: 'center',
+                gap: '12px',
+              }}
+            >
               <Button
                 icon={<DownloadOutlined />}
                 onClick={handleDownloadTemplate}
@@ -1118,9 +1293,7 @@ function RackManagement() {
               >
                 下载导入模板
               </Button>
-              <span style={{ color: '#8c8c8c', fontSize: '12px' }}>
-                包含示例数据的XLSX模板文件
-              </span>
+              <span style={{ color: '#8c8c8c', fontSize: '12px' }}>包含示例数据的XLSX模板文件</span>
             </div>
 
             <Upload
@@ -1137,7 +1310,7 @@ function RackManagement() {
                 style={{
                   ...primaryButtonStyle,
                   height: '48px',
-                  fontSize: '16px'
+                  fontSize: '16px',
                 }}
               >
                 选择Excel文件
@@ -1147,23 +1320,36 @@ function RackManagement() {
         ) : isImporting ? (
           <div>
             <div style={{ display: 'flex', alignItems: 'center', marginBottom: '16px' }}>
-              <div style={{
-                width: '48px',
-                height: '48px',
-                borderRadius: '50%',
-                background: designTokens.colors.primary.gradient,
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                marginRight: '16px',
-                color: '#fff',
-                fontSize: '20px'
-              }}>
+              <div
+                style={{
+                  width: '48px',
+                  height: '48px',
+                  borderRadius: '50%',
+                  background: designTokens.colors.primary.gradient,
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  marginRight: '16px',
+                  color: '#fff',
+                  fontSize: '20px',
+                }}
+              >
                 <UploadOutlined spin />
               </div>
               <div>
-                <p style={{ margin: '0 0 4px 0', fontWeight: '600', color: '#333', fontSize: '16px' }}>正在导入机柜数据</p>
-                <p style={{ margin: 0, color: designTokens.colors.primary.main, fontSize: '14px' }}>{importPhase}</p>
+                <p
+                  style={{
+                    margin: '0 0 4px 0',
+                    fontWeight: '600',
+                    color: '#333',
+                    fontSize: '16px',
+                  }}
+                >
+                  正在导入机柜数据
+                </p>
+                <p style={{ margin: 0, color: designTokens.colors.primary.main, fontSize: '14px' }}>
+                  {importPhase}
+                </p>
               </div>
             </div>
             <Progress
@@ -1171,68 +1357,73 @@ function RackManagement() {
               status="active"
               strokeColor={{
                 '0%': '#667eea',
-                '100%': '#764ba2'
+                '100%': '#764ba2',
               }}
               format={() => `${importProgress}%`}
             />
           </div>
-        ) : importResult && (
-          <div>
-            <div style={{
-              padding: '20px',
-              background: '#f6f6f6',
-              borderRadius: '12px',
-              marginBottom: '20px'
-            }}>
-              <p style={{ marginBottom: '12px', fontWeight: '600' }}>
-                导入结果：
-              </p>
-              <p style={{ margin: '8px 0', color: '#52c41a' }}>
-                ✓ 总记录数：{importResult.total || 0}
-              </p>
-              <p style={{ margin: '8px 0', color: '#52c41a' }}>
-                ✓ 成功导入：{importResult.successCount || 0}
-              </p>
-              {importResult.failedCount > 0 && (
-                <p style={{ margin: '8px 0', color: '#ff4d4f' }}>
-                  ✗ 导入失败：{importResult.failedCount}
+        ) : (
+          importResult && (
+            <div>
+              <div
+                style={{
+                  padding: '20px',
+                  background: '#f6f6f6',
+                  borderRadius: '12px',
+                  marginBottom: '20px',
+                }}
+              >
+                <p style={{ marginBottom: '12px', fontWeight: '600' }}>导入结果：</p>
+                <p style={{ margin: '8px 0', color: '#52c41a' }}>
+                  ✓ 总记录数：{importResult.total || 0}
                 </p>
-              )}
-            </div>
-            {importResult.errors && importResult.errors.length > 0 && (
-              <div style={{ marginBottom: '20px' }}>
-                <p style={{ fontWeight: '600', marginBottom: '8px' }}>错误详情：</p>
-                {importResult.errors.slice(0, 5).map((err, idx) => (
-                  <div key={idx} style={{
-                    padding: '8px 12px',
-                    background: '#fff2f0',
-                    borderRadius: '6px',
-                    marginBottom: '8px',
-                    fontSize: '13px',
-                    color: '#cf1322'
-                  }}>
-                    第{err.row || idx + 1}行：{err.error}
-                  </div>
-                ))}
-                {importResult.errors.length > 5 && (
-                  <p style={{ color: '#8c8c8c', fontSize: '12px' }}>
-                    还有 {importResult.errors.length - 5} 处错误...
+                <p style={{ margin: '8px 0', color: '#52c41a' }}>
+                  ✓ 成功导入：{importResult.successCount || 0}
+                </p>
+                {importResult.failedCount > 0 && (
+                  <p style={{ margin: '8px 0', color: '#ff4d4f' }}>
+                    ✗ 导入失败：{importResult.failedCount}
                   </p>
                 )}
               </div>
-            )}
-            <Button
-              type="primary"
-              onClick={() => {
-                setImportModalVisible(false);
-                setImportResult(null);
-                fetchRacks();
-              }}
-              style={primaryButtonStyle}
-            >
-              完成
-            </Button>
-          </div>
+              {importResult.errors && importResult.errors.length > 0 && (
+                <div style={{ marginBottom: '20px' }}>
+                  <p style={{ fontWeight: '600', marginBottom: '8px' }}>错误详情：</p>
+                  {importResult.errors.slice(0, 5).map((err, idx) => (
+                    <div
+                      key={idx}
+                      style={{
+                        padding: '8px 12px',
+                        background: '#fff2f0',
+                        borderRadius: '6px',
+                        marginBottom: '8px',
+                        fontSize: '13px',
+                        color: '#cf1322',
+                      }}
+                    >
+                      第{err.row || idx + 1}行：{err.error}
+                    </div>
+                  ))}
+                  {importResult.errors.length > 5 && (
+                    <p style={{ color: '#8c8c8c', fontSize: '12px' }}>
+                      还有 {importResult.errors.length - 5} 处错误...
+                    </p>
+                  )}
+                </div>
+              )}
+              <Button
+                type="primary"
+                onClick={() => {
+                  setImportModalVisible(false);
+                  setImportResult(null);
+                  fetchRacks();
+                }}
+                style={primaryButtonStyle}
+              >
+                完成
+              </Button>
+            </div>
+          )
         )}
       </Modal>
     </div>
diff --git a/frontend/src/pages/RoomManagement.jsx b/frontend/src/pages/RoomManagement.jsx
index bfe8bff..5eea3b1 100644
--- a/frontend/src/pages/RoomManagement.jsx
+++ b/frontend/src/pages/RoomManagement.jsx
@@ -1,15 +1,48 @@
 import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
 import {
-  Table, Button, Modal, Form, Input, Select, message, Card, Space,
-  InputNumber, Progress, Drawer, Tag, Tooltip, Dropdown, Badge,
-  Row, Col, Statistic, Typography, Empty, Spin, Alert, Checkbox
+  Table,
+  Button,
+  Modal,
+  Form,
+  Input,
+  Select,
+  message,
+  Card,
+  Space,
+  InputNumber,
+  Progress,
+  Drawer,
+  Tag,
+  Tooltip,
+  Dropdown,
+  Badge,
+  Row,
+  Col,
+  Statistic,
+  Typography,
+  Empty,
+  Spin,
+  Alert,
+  Checkbox,
 } from 'antd';
 import {
-  PlusOutlined, EditOutlined, DeleteOutlined, ReloadOutlined,
-  SearchOutlined, FilterOutlined, MoreOutlined, EyeOutlined,
-  CloudOutlined, EnvironmentOutlined, DashboardOutlined,
-  ExpandOutlined, CompressOutlined, CheckCircleOutlined,
-  WarningOutlined, SyncOutlined, DeleteFilled
+  PlusOutlined,
+  EditOutlined,
+  DeleteOutlined,
+  ReloadOutlined,
+  SearchOutlined,
+  FilterOutlined,
+  MoreOutlined,
+  EyeOutlined,
+  CloudOutlined,
+  EnvironmentOutlined,
+  DashboardOutlined,
+  ExpandOutlined,
+  CompressOutlined,
+  CheckCircleOutlined,
+  WarningOutlined,
+  SyncOutlined,
+  DeleteFilled,
 } from '@ant-design/icons';
 import axios from 'axios';
 
@@ -21,45 +54,45 @@ const designTokens = {
     primary: {
       main: '#1890ff',
       gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
-      bgGradient: 'linear-gradient(135deg, #667eea15 0%, #764ba208 100%)'
+      bgGradient: 'linear-gradient(135deg, #667eea15 0%, #764ba208 100%)',
     },
     success: {
       main: '#52c41a',
-      gradient: 'linear-gradient(135deg, #52c41a 0%, #389e0d 100%)'
+      gradient: 'linear-gradient(135deg, #52c41a 0%, #389e0d 100%)',
     },
     warning: {
       main: '#faad14',
-      gradient: 'linear-gradient(135deg, #faad14 0%, #d48806 100%)'
+      gradient: 'linear-gradient(135deg, #faad14 0%, #d48806 100%)',
     },
     error: {
       main: '#ff4d4f',
-      gradient: 'linear-gradient(135deg, #ff4d4f 0%, #cf1322 100%)'
+      gradient: 'linear-gradient(135deg, #ff4d4f 0%, #cf1322 100%)',
     },
     text: {
       primary: '#262626',
       secondary: '#8c8c8c',
-      tertiary: '#bfbfbf'
-    }
+      tertiary: '#bfbfbf',
+    },
   },
   shadows: {
     small: '0 2px 8px rgba(0, 0, 0, 0.06)',
     medium: '0 4px 16px rgba(0, 0, 0, 0.08)',
-    large: '0 8px 24px rgba(0, 0, 0, 0.12)'
+    large: '0 8px 24px rgba(0, 0, 0, 0.12)',
   },
   borderRadius: {
     small: '8px',
     medium: '12px',
-    large: '16px'
+    large: '16px',
   },
   transitions: {
-    normal: '0.3s cubic-bezier(0.4, 0, 0.2, 1)'
-  }
+    normal: '0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+  },
 };
 
 const containerStyle = {
   minHeight: '100vh',
   background: 'linear-gradient(180deg, #f5f7fa 0%, #e8ecf1 100%)',
-  padding: '24px'
+  padding: '24px',
 };
 
 const headerStyle = {
@@ -68,15 +101,15 @@ const headerStyle = {
   background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
   borderRadius: '20px',
   color: '#fff',
-  boxShadow: '0 8px 32px rgba(102, 126, 234, 0.3)'
+  boxShadow: '0 8px 32px rgba(102, 126, 234, 0.3)',
 };
 
-const statCardStyle = (color) => ({
+const statCardStyle = color => ({
   background: 'rgba(255, 255, 255, 0.15)',
   borderRadius: designTokens.borderRadius.medium,
   padding: '16px',
   border: '1px solid rgba(255, 255, 255, 0.2)',
-  backdropFilter: 'blur(10px)'
+  backdropFilter: 'blur(10px)',
 });
 
 const cardStyle = {
@@ -84,13 +117,13 @@ const cardStyle = {
   border: 'none',
   boxShadow: designTokens.shadows.medium,
   background: '#fff',
-  overflow: 'hidden'
+  overflow: 'hidden',
 };
 
 const cardHeadStyle = {
   borderBottom: '1px solid #f0f0f0',
   padding: '16px 24px',
-  background: 'linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%)'
+  background: 'linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%)',
 };
 
 const primaryButtonStyle = {
@@ -99,25 +132,25 @@ const primaryButtonStyle = {
   background: designTokens.colors.primary.gradient,
   border: 'none',
   boxShadow: '0 4px 16px rgba(102, 126, 234, 0.35)',
-  fontWeight: '500'
+  fontWeight: '500',
 };
 
 const actionButtonStyle = {
   height: '36px',
   borderRadius: '8px',
-  border: '1px solid #e8e8e8'
+  border: '1px solid #e8e8e8',
 };
 
 const searchInputStyle = {
   borderRadius: '10px',
   height: '42px',
-  border: '1px solid #e8e8e8'
+  border: '1px solid #e8e8e8',
 };
 
 const statusConfig = {
   active: { text: '在用', color: 'success', icon: <CheckCircleOutlined /> },
   maintenance: { text: '维护中', color: 'warning', icon: <SyncOutlined spin /> },
-  inactive: { text: '停用', color: 'default', icon: <WarningOutlined /> }
+  inactive: { text: '停用', color: 'default', icon: <WarningOutlined /> },
 };
 
 const CapacityProgress = ({ used, capacity, color }) => {
@@ -130,9 +163,7 @@ const CapacityProgress = ({ used, capacity, color }) => {
         <Text style={{ fontSize: '13px', color: designTokens.colors.text.secondary }}>
           {used} / {capacity}
         </Text>
-        <Text style={{ fontSize: '13px', fontWeight: '600', color }}>
-          {percentage.toFixed(1)}%
-        </Text>
+        <Text style={{ fontSize: '13px', fontWeight: '600', color }}>{percentage.toFixed(1)}%</Text>
       </div>
       <Progress
         percent={percentage}
@@ -159,13 +190,20 @@ const RoomCard = ({ room, onEdit, onDelete, onView, selected, onSelect }) => {
         border: selected ? `2px solid ${designTokens.colors.primary.main}` : '1px solid #f0f0f0',
         boxShadow: designTokens.shadows.small,
         transition: `all ${designTokens.transitions.normal}`,
-        cursor: 'pointer'
+        cursor: 'pointer',
       }}
       onClick={() => onSelect(room.roomId)}
       onDoubleClick={() => onView(room)}
       styles={{ body: { padding: '20px' } }}
     >
-      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '16px' }}>
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'flex-start',
+          marginBottom: '16px',
+        }}
+      >
         <div>
           <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '4px' }}>
             <CloudOutlined style={{ fontSize: '20px', color: designTokens.colors.primary.main }} />
@@ -173,7 +211,9 @@ const RoomCard = ({ room, onEdit, onDelete, onView, selected, onSelect }) => {
               {room.name}
             </Text>
           </div>
-          <Text type="secondary" style={{ fontSize: '13px' }}>{room.roomId}</Text>
+          <Text type="secondary" style={{ fontSize: '13px' }}>
+            {room.roomId}
+          </Text>
         </div>
         <Tag color={statusInfo.color} icon={statusInfo.icon} style={{ borderRadius: '20px' }}>
           {statusInfo.text}
@@ -191,21 +231,43 @@ const RoomCard = ({ room, onEdit, onDelete, onView, selected, onSelect }) => {
         <CapacityProgress
           used={rackCount}
           capacity={room.capacity}
-          color={capacityUsage >= 90 ? designTokens.colors.error.main : capacityUsage >= 70 ? designTokens.colors.warning.main : designTokens.colors.success.main}
+          color={
+            capacityUsage >= 90
+              ? designTokens.colors.error.main
+              : capacityUsage >= 70
+                ? designTokens.colors.warning.main
+                : designTokens.colors.success.main
+          }
         />
       </div>
 
       <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
         <div style={{ display: 'flex', gap: '16px' }}>
           <div>
-            <Text type="secondary" style={{ fontSize: '12px' }}>面积</Text>
-            <div style={{ fontSize: '14px', fontWeight: '600', color: designTokens.colors.text.primary }}>
+            <Text type="secondary" style={{ fontSize: '12px' }}>
+              面积
+            </Text>
+            <div
+              style={{
+                fontSize: '14px',
+                fontWeight: '600',
+                color: designTokens.colors.text.primary,
+              }}
+            >
               {room.area} ㎡
             </div>
           </div>
           <div>
-            <Text type="secondary" style={{ fontSize: '12px' }}>机柜</Text>
-            <div style={{ fontSize: '14px', fontWeight: '600', color: designTokens.colors.text.primary }}>
+            <Text type="secondary" style={{ fontSize: '12px' }}>
+              机柜
+            </Text>
+            <div
+              style={{
+                fontSize: '14px',
+                fontWeight: '600',
+                color: designTokens.colors.text.primary,
+              }}
+            >
               {rackCount}
             </div>
           </div>
@@ -215,7 +277,10 @@ const RoomCard = ({ room, onEdit, onDelete, onView, selected, onSelect }) => {
             <Button
               type="text"
               icon={<EyeOutlined />}
-              onClick={(e) => { e.stopPropagation(); onView(room); }}
+              onClick={e => {
+                e.stopPropagation();
+                onView(room);
+              }}
               style={{ color: designTokens.colors.text.secondary }}
             />
           </Tooltip>
@@ -223,7 +288,10 @@ const RoomCard = ({ room, onEdit, onDelete, onView, selected, onSelect }) => {
             <Button
               type="text"
               icon={<EditOutlined />}
-              onClick={(e) => { e.stopPropagation(); onEdit(room); }}
+              onClick={e => {
+                e.stopPropagation();
+                onEdit(room);
+              }}
               style={{ color: designTokens.colors.primary.main }}
             />
           </Tooltip>
@@ -232,7 +300,10 @@ const RoomCard = ({ room, onEdit, onDelete, onView, selected, onSelect }) => {
               type="text"
               icon={<DeleteOutlined />}
               danger
-              onClick={(e) => { e.stopPropagation(); onDelete(room.roomId); }}
+              onClick={e => {
+                e.stopPropagation();
+                onDelete(room.roomId);
+              }}
             />
           </Tooltip>
         </Space>
@@ -286,7 +357,7 @@ function RoomManagement() {
     setEditingRoom(null);
   };
 
-  const handleSubmit = async (values) => {
+  const handleSubmit = async values => {
     try {
       if (editingRoom) {
         await axios.put(`/api/rooms/${editingRoom.roomId}`, values);
@@ -304,7 +375,7 @@ function RoomManagement() {
     }
   };
 
-  const handleDelete = async (roomId) => {
+  const handleDelete = async roomId => {
     Modal.confirm({
       title: '确认删除',
       content: '确定要删除这个机房吗？删除后无法恢复。',
@@ -320,7 +391,7 @@ function RoomManagement() {
           message.error('机房删除失败');
           console.error('机房删除失败:', error);
         }
-      }
+      },
     });
   };
 
@@ -346,18 +417,19 @@ function RoomManagement() {
           message.error('批量删除失败');
           console.error('批量删除失败:', error);
         }
-      }
+      },
     });
   };
 
-  const handleView = (room) => {
+  const handleView = room => {
     setViewingRoom(room);
     setDrawerVisible(true);
   };
 
   const filteredRooms = useMemo(() => {
     return rooms.filter(room => {
-      const matchKeyword = !searchKeyword ||
+      const matchKeyword =
+        !searchKeyword ||
         room.name?.toLowerCase().includes(searchKeyword.toLowerCase()) ||
         room.roomId?.toLowerCase().includes(searchKeyword.toLowerCase()) ||
         room.location?.toLowerCase().includes(searchKeyword.toLowerCase());
@@ -368,14 +440,17 @@ function RoomManagement() {
     });
   }, [rooms, searchKeyword, statusFilter]);
 
-  const stats = useMemo(() => ({
-    total: rooms.length,
-    active: rooms.filter(r => r.status === 'active').length,
-    maintenance: rooms.filter(r => r.status === 'maintenance').length,
-    inactive: rooms.filter(r => r.status === 'inactive').length,
-    totalRacks: rooms.reduce((sum, r) => sum + (r.Racks?.length || 0), 0),
-    totalCapacity: rooms.reduce((sum, r) => sum + (r.capacity || 0), 0)
-  }), [rooms]);
+  const stats = useMemo(
+    () => ({
+      total: rooms.length,
+      active: rooms.filter(r => r.status === 'active').length,
+      maintenance: rooms.filter(r => r.status === 'maintenance').length,
+      inactive: rooms.filter(r => r.status === 'inactive').length,
+      totalRacks: rooms.reduce((sum, r) => sum + (r.Racks?.length || 0), 0),
+      totalCapacity: rooms.reduce((sum, r) => sum + (r.capacity || 0), 0),
+    }),
+    [rooms]
+  );
 
   const tableColumns = [
     {
@@ -383,15 +458,17 @@ function RoomManagement() {
       key: 'roomInfo',
       render: (_, record) => (
         <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
-          <div style={{
-            width: '44px',
-            height: '44px',
-            borderRadius: '10px',
-            background: designTokens.colors.primary.bgGradient,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center'
-          }}>
+          <div
+            style={{
+              width: '44px',
+              height: '44px',
+              borderRadius: '10px',
+              background: designTokens.colors.primary.bgGradient,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
             <CloudOutlined style={{ fontSize: '22px', color: designTokens.colors.primary.main }} />
           </div>
           <div>
@@ -403,18 +480,18 @@ function RoomManagement() {
             </div>
           </div>
         </div>
-      )
+      ),
     },
     {
       title: '位置',
       dataIndex: 'location',
       key: 'location',
-      render: (location) => (
+      render: location => (
         <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
           <EnvironmentOutlined style={{ color: designTokens.colors.text.tertiary }} />
           <span>{location}</span>
         </div>
-      )
+      ),
     },
     {
       title: '面积/容量',
@@ -430,13 +507,13 @@ function RoomManagement() {
             />
           </div>
         </div>
-      )
+      ),
     },
     {
       title: '状态',
       dataIndex: 'status',
       key: 'status',
-      render: (status) => {
+      render: status => {
         const config = statusConfig[status];
         return (
           <Tag color={config.color} icon={config.icon} style={{ borderRadius: '20px' }}>
@@ -447,9 +524,9 @@ function RoomManagement() {
       filters: [
         { text: '在用', value: 'active' },
         { text: '维护中', value: 'maintenance' },
-        { text: '停用', value: 'inactive' }
+        { text: '停用', value: 'inactive' },
       ],
-      onFilter: (value, record) => record.status === value
+      onFilter: (value, record) => record.status === value,
     },
     {
       title: '机柜数',
@@ -460,14 +537,14 @@ function RoomManagement() {
           <span>{record.Racks?.length || 0}</span>
         </div>
       ),
-      sorter: (a, b) => (a.Racks?.length || 0) - (b.Racks?.length || 0)
+      sorter: (a, b) => (a.Racks?.length || 0) - (b.Racks?.length || 0),
     },
     {
       title: '创建时间',
       dataIndex: 'createdAt',
       key: 'createdAt',
-      render: (date) => date ? new Date(date).toLocaleString() : '-',
-      sorter: (a, b) => new Date(a.createdAt || 0) - new Date(b.createdAt || 0)
+      render: date => (date ? new Date(date).toLocaleString() : '-'),
+      sorter: (a, b) => new Date(a.createdAt || 0) - new Date(b.createdAt || 0),
     },
     {
       title: '操作',
@@ -501,29 +578,44 @@ function RoomManagement() {
             />
           </Tooltip>
         </Space>
-      )
-    }
+      ),
+    },
   ];
 
   const rowSelection = {
     selectedRowKeys: selectedRoomIds,
-    onChange: (selectedRowKeys) => {
+    onChange: selectedRowKeys => {
       setSelectedRoomIds(selectedRowKeys);
-    }
+    },
   };
 
   return (
     <div style={containerStyle}>
       <div style={headerStyle}>
-        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: '16px' }}>
+        <div
+          style={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            flexWrap: 'wrap',
+            gap: '16px',
+          }}
+        >
           <div>
-            <h1 style={{ fontSize: '24px', fontWeight: '700', margin: '0 0 4px 0', display: 'flex', alignItems: 'center', gap: '12px' }}>
+            <h1
+              style={{
+                fontSize: '24px',
+                fontWeight: '700',
+                margin: '0 0 4px 0',
+                display: 'flex',
+                alignItems: 'center',
+                gap: '12px',
+              }}
+            >
               <CloudOutlined />
               机房管理
             </h1>
-            <p style={{ margin: 0, opacity: 0.9, fontSize: '14px' }}>
-              管理和监控所有机房设施
-            </p>
+            <p style={{ margin: 0, opacity: 0.9, fontSize: '14px' }}>管理和监控所有机房设施</p>
           </div>
           <div style={{ display: 'flex', gap: '12px' }}>
             <div style={statCardStyle()}>
@@ -532,7 +624,9 @@ function RoomManagement() {
             </div>
             <div style={statCardStyle()}>
               <Text style={{ color: 'rgba(255,255,255,0.8)', fontSize: '12px' }}>在用机房</Text>
-              <div style={{ fontSize: '24px', fontWeight: '700', color: '#52c41a' }}>{stats.active}</div>
+              <div style={{ fontSize: '24px', fontWeight: '700', color: '#52c41a' }}>
+                {stats.active}
+              </div>
             </div>
             <div style={statCardStyle()}>
               <Text style={{ color: 'rgba(255,255,255,0.8)', fontSize: '12px' }}>总机柜</Text>
@@ -543,13 +637,22 @@ function RoomManagement() {
       </div>
 
       <Card style={cardStyle} styles={{ header: cardHeadStyle, body: { padding: '20px 24px' } }}>
-        <div style={{ marginBottom: '20px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: '16px' }}>
+        <div
+          style={{
+            marginBottom: '20px',
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            flexWrap: 'wrap',
+            gap: '16px',
+          }}
+        >
           <div style={{ display: 'flex', gap: '12px', flex: 1, maxWidth: '600px' }}>
             <Input
               placeholder="搜索机房名称、ID、位置..."
               prefix={<SearchOutlined style={{ color: '#bfbfbf' }} />}
               value={searchKeyword}
-              onChange={(e) => setSearchKeyword(e.target.value)}
+              onChange={e => setSearchKeyword(e.target.value)}
               style={searchInputStyle}
               allowClear
             />
@@ -625,7 +728,7 @@ function RoomManagement() {
               pageSize: 10,
               showSizeChanger: true,
               showQuickJumper: true,
-              showTotal: (total) => `共 ${total} 条记录`
+              showTotal: total => `共 ${total} 条记录`,
             }}
             scroll={{ x: 1000 }}
             rowClassName={() => 'table-row'}
@@ -641,7 +744,7 @@ function RoomManagement() {
                     onDelete={handleDelete}
                     onView={handleView}
                     selected={selectedRoomIds.includes(room.roomId)}
-                    onSelect={(id) => {
+                    onSelect={id => {
                       if (selectedRoomIds.includes(id)) {
                         setSelectedRoomIds(selectedRoomIds.filter(rid => rid !== id));
                       } else {
@@ -663,12 +766,14 @@ function RoomManagement() {
       <Modal
         title={
           <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
-            <div style={{
-              width: '4px',
-              height: '20px',
-              background: designTokens.colors.primary.gradient,
-              borderRadius: '2px'
-            }} />
+            <div
+              style={{
+                width: '4px',
+                height: '20px',
+                background: designTokens.colors.primary.gradient,
+                borderRadius: '2px',
+              }}
+            />
             {editingRoom ? '编辑机房' : '添加机房'}
           </div>
         }
@@ -679,7 +784,7 @@ function RoomManagement() {
         destroyOnHidden
         styles={{
           body: { padding: '24px' },
-          header: { borderBottom: '1px solid #f0f0f0', padding: '16px 24px' }
+          header: { borderBottom: '1px solid #f0f0f0', padding: '16px 24px' },
         }}
         style={{ borderRadius: '16px' }}
       >
@@ -710,7 +815,11 @@ function RoomManagement() {
             label="位置"
             rules={[{ required: true, message: '请输入机房位置' }]}
           >
-            <Input prefix={<EnvironmentOutlined />} placeholder="请输入机房位置" style={{ borderRadius: '8px' }} />
+            <Input
+              prefix={<EnvironmentOutlined />}
+              placeholder="请输入机房位置"
+              style={{ borderRadius: '8px' }}
+            />
           </Form.Item>
 
           <Row gutter={16}>
@@ -720,7 +829,12 @@ function RoomManagement() {
                 label="面积(㎡)"
                 rules={[{ required: true, message: '请输入机房面积' }]}
               >
-                <InputNumber placeholder="请输入机房面积" min={0} step={0.1} style={{ width: '100%', borderRadius: '8px' }} />
+                <InputNumber
+                  placeholder="请输入机房面积"
+                  min={0}
+                  step={0.1}
+                  style={{ width: '100%', borderRadius: '8px' }}
+                />
               </Form.Item>
             </Col>
             <Col span={12}>
@@ -729,16 +843,16 @@ function RoomManagement() {
                 label="容量(机柜数)"
                 rules={[{ required: true, message: '请输入机柜容量' }]}
               >
-                <InputNumber placeholder="请输入机柜容量" min={0} style={{ width: '100%', borderRadius: '8px' }} />
+                <InputNumber
+                  placeholder="请输入机柜容量"
+                  min={0}
+                  style={{ width: '100%', borderRadius: '8px' }}
+                />
               </Form.Item>
             </Col>
           </Row>
 
-          <Form.Item
-            name="status"
-            label="状态"
-            rules={[{ required: true, message: '请选择状态' }]}
-          >
+          <Form.Item name="status" label="状态" rules={[{ required: true, message: '请选择状态' }]}>
             <Select placeholder="请选择状态" style={{ borderRadius: '8px' }}>
               <Option value="active">在用</Option>
               <Option value="maintenance">维护中</Option>
@@ -750,7 +864,9 @@ function RoomManagement() {
             <Input.TextArea placeholder="请输入机房描述" rows={3} style={{ borderRadius: '8px' }} />
           </Form.Item>
 
-          <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '12px', marginTop: '24px' }}>
+          <div
+            style={{ display: 'flex', justifyContent: 'flex-end', gap: '12px', marginTop: '24px' }}
+          >
             <Button onClick={handleCancel} style={{ borderRadius: '8px', height: '42px' }}>
               取消
             </Button>
@@ -773,21 +889,33 @@ function RoomManagement() {
         width={480}
         styles={{
           header: { borderBottom: '1px solid #f0f0f0' },
-          body: { padding: '24px' }
+          body: { padding: '24px' },
         }}
       >
         {viewingRoom && (
           <div>
-            <div style={{
-              padding: '20px',
-              background: designTokens.colors.primary.bgGradient,
-              borderRadius: designTokens.borderRadius.medium,
-              marginBottom: '20px'
-            }}>
-              <div style={{ display: 'flex', alignItems: 'center', gap: '12px', marginBottom: '16px' }}>
-                <CloudOutlined style={{ fontSize: '32px', color: designTokens.colors.primary.main }} />
+            <div
+              style={{
+                padding: '20px',
+                background: designTokens.colors.primary.bgGradient,
+                borderRadius: designTokens.borderRadius.medium,
+                marginBottom: '20px',
+              }}
+            >
+              <div
+                style={{ display: 'flex', alignItems: 'center', gap: '12px', marginBottom: '16px' }}
+              >
+                <CloudOutlined
+                  style={{ fontSize: '32px', color: designTokens.colors.primary.main }}
+                />
                 <div>
-                  <div style={{ fontSize: '18px', fontWeight: '600', color: designTokens.colors.text.primary }}>
+                  <div
+                    style={{
+                      fontSize: '18px',
+                      fontWeight: '600',
+                      color: designTokens.colors.text.primary,
+                    }}
+                  >
                     {viewingRoom.name}
                   </div>
                   <div style={{ fontSize: '13px', color: designTokens.colors.text.secondary }}>
@@ -801,7 +929,9 @@ function RoomManagement() {
             </div>
 
             <div style={{ marginBottom: '20px' }}>
-              <Text type="secondary" style={{ fontSize: '13px' }}>位置</Text>
+              <Text type="secondary" style={{ fontSize: '13px' }}>
+                位置
+              </Text>
               <div style={{ fontSize: '15px', fontWeight: '500', marginTop: '4px' }}>
                 <EnvironmentOutlined style={{ marginRight: '8px' }} />
                 {viewingRoom.location}
@@ -811,16 +941,32 @@ function RoomManagement() {
             <Row gutter={16} style={{ marginBottom: '20px' }}>
               <Col span={12}>
                 <div style={{ padding: '16px', background: '#fafafa', borderRadius: '10px' }}>
-                  <Text type="secondary" style={{ fontSize: '12px' }}>面积</Text>
-                  <div style={{ fontSize: '20px', fontWeight: '600', color: designTokens.colors.text.primary }}>
+                  <Text type="secondary" style={{ fontSize: '12px' }}>
+                    面积
+                  </Text>
+                  <div
+                    style={{
+                      fontSize: '20px',
+                      fontWeight: '600',
+                      color: designTokens.colors.text.primary,
+                    }}
+                  >
                     {viewingRoom.area} ㎡
                   </div>
                 </div>
               </Col>
               <Col span={12}>
                 <div style={{ padding: '16px', background: '#fafafa', borderRadius: '10px' }}>
-                  <Text type="secondary" style={{ fontSize: '12px' }}>容量</Text>
-                  <div style={{ fontSize: '20px', fontWeight: '600', color: designTokens.colors.text.primary }}>
+                  <Text type="secondary" style={{ fontSize: '12px' }}>
+                    容量
+                  </Text>
+                  <div
+                    style={{
+                      fontSize: '20px',
+                      fontWeight: '600',
+                      color: designTokens.colors.text.primary,
+                    }}
+                  >
                     {viewingRoom.capacity} 机柜
                   </div>
                 </div>
@@ -828,7 +974,9 @@ function RoomManagement() {
             </Row>
 
             <div style={{ marginBottom: '20px' }}>
-              <Text type="secondary" style={{ fontSize: '13px' }}>机柜使用情况</Text>
+              <Text type="secondary" style={{ fontSize: '13px' }}>
+                机柜使用情况
+              </Text>
               <div style={{ marginTop: '12px' }}>
                 <CapacityProgress
                   used={viewingRoom.Racks?.length || 0}
@@ -840,8 +988,17 @@ function RoomManagement() {
 
             {viewingRoom.description && (
               <div style={{ marginBottom: '20px' }}>
-                <Text type="secondary" style={{ fontSize: '13px' }}>描述</Text>
-                <div style={{ marginTop: '8px', padding: '12px', background: '#fafafa', borderRadius: '8px' }}>
+                <Text type="secondary" style={{ fontSize: '13px' }}>
+                  描述
+                </Text>
+                <div
+                  style={{
+                    marginTop: '8px',
+                    padding: '12px',
+                    background: '#fafafa',
+                    borderRadius: '8px',
+                  }}
+                >
                   {viewingRoom.description}
                 </div>
               </div>
diff --git a/frontend/src/pages/SystemSettings.jsx b/frontend/src/pages/SystemSettings.jsx
index 5973daa..9e43a4c 100644
--- a/frontend/src/pages/SystemSettings.jsx
+++ b/frontend/src/pages/SystemSettings.jsx
@@ -1,6 +1,28 @@
 import React, { useState, useEffect } from 'react';
-import { Tabs, Form, Input, Switch, Select, Button, Card, Space, message, Modal, Tag, Divider, Descriptions, Alert } from 'antd';
-import { SettingOutlined, GlobalOutlined, BgColorsOutlined, InfoCircleOutlined, CheckCircleOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
+import {
+  Tabs,
+  Form,
+  Input,
+  Switch,
+  Select,
+  Button,
+  Card,
+  Space,
+  message,
+  Modal,
+  Tag,
+  Divider,
+  Descriptions,
+  Alert,
+} from 'antd';
+import {
+  SettingOutlined,
+  GlobalOutlined,
+  BgColorsOutlined,
+  InfoCircleOutlined,
+  CheckCircleOutlined,
+  ExclamationCircleOutlined,
+} from '@ant-design/icons';
 import axios from 'axios';
 import { useConfig } from '../context/ConfigContext';
 
@@ -26,7 +48,7 @@ const SystemSettings = () => {
     try {
       const response = await axios.get('/api/system-settings');
       setSettings(response.data);
-      
+
       const formValues = {};
       Object.entries(response.data).forEach(([key, data]) => {
         formValues[key] = data.value;
@@ -48,7 +70,7 @@ const SystemSettings = () => {
     }
   };
 
-  const handleSaveSettings = async (values) => {
+  const handleSaveSettings = async values => {
     setSaving(true);
     try {
       const updates = {};
@@ -76,7 +98,10 @@ const SystemSettings = () => {
               title: '前端端口已修改（生产环境）',
               content: (
                 <div>
-                  <p>前端端口已从 <strong>{settings.frontend_port?.value}</strong> 更改为 <strong>{updates.frontend_port}</strong></p>
+                  <p>
+                    前端端口已从 <strong>{settings.frontend_port?.value}</strong> 更改为{' '}
+                    <strong>{updates.frontend_port}</strong>
+                  </p>
                   <Alert
                     message="请手动更新服务器配置"
                     description={
@@ -93,7 +118,7 @@ const SystemSettings = () => {
                   />
                 </div>
               ),
-              okText: '知道了'
+              okText: '知道了',
             });
           } else {
             // 开发环境：显示确认对话框并自动重启
@@ -102,7 +127,10 @@ const SystemSettings = () => {
               icon: <ExclamationCircleOutlined />,
               content: (
                 <div>
-                  <p>前端端口已从 <strong>{settings.frontend_port?.value}</strong> 更改为 <strong>{updates.frontend_port}</strong></p>
+                  <p>
+                    前端端口已从 <strong>{settings.frontend_port?.value}</strong> 更改为{' '}
+                    <strong>{updates.frontend_port}</strong>
+                  </p>
                   <p>是否立即重启前端服务以应用新端口？</p>
                   <Alert
                     message="注意"
@@ -125,9 +153,13 @@ const SystemSettings = () => {
                   title: '正在重启前端服务',
                   content: (
                     <div>
-                      <p>前端服务正在重启，新端口：<strong>{newPort}</strong></p>
+                      <p>
+                        前端服务正在重启，新端口：<strong>{newPort}</strong>
+                      </p>
                       <p>页面将在3秒后自动跳转到新地址...</p>
-                      <p>如果跳转失败，请手动访问：<a href={newUrl}>{newUrl}</a></p>
+                      <p>
+                        如果跳转失败，请手动访问：<a href={newUrl}>{newUrl}</a>
+                      </p>
                     </div>
                   ),
                   okText: '立即跳转',
@@ -135,14 +167,18 @@ const SystemSettings = () => {
                   maskClosable: false,
                   onOk: () => {
                     window.location.href = newUrl;
-                  }
+                  },
                 });
 
                 // 延迟调用重启API，让用户看到提示
                 setTimeout(async () => {
                   try {
                     // 调用重启API（这个请求可能会因为服务重启而失败）
-                    await axios.post('/api/system-settings/frontend/restart', {}, { timeout: 5000 });
+                    await axios.post(
+                      '/api/system-settings/frontend/restart',
+                      {},
+                      { timeout: 5000 }
+                    );
                   } catch (error) {
                     // 忽略错误，因为服务重启会导致连接中断
                     console.log('重启请求已发送，服务正在重启...');
@@ -153,7 +189,7 @@ const SystemSettings = () => {
                 setTimeout(() => {
                   window.location.href = newUrl;
                 }, 3000);
-              }
+              },
             });
           }
         } catch (syncError) {
@@ -174,7 +210,7 @@ const SystemSettings = () => {
     }
   };
 
-  const handleResetSetting = (key) => {
+  const handleResetSetting = key => {
     Modal.confirm({
       title: '确认重置',
       icon: <ExclamationCircleOutlined />,
@@ -189,18 +225,14 @@ const SystemSettings = () => {
         } catch (error) {
           message.error('重置失败');
         }
-      }
+      },
     });
   };
 
   const renderFormItem = (key, data) => {
     if (!data.isEditable) {
       return (
-        <Form.Item
-          key={key}
-          label={data.description || key}
-          name={key}
-        >
+        <Form.Item key={key} label={data.description || key} name={key}>
           <Input disabled suffix={<LockOutlined />} />
         </Form.Item>
       );
@@ -209,12 +241,7 @@ const SystemSettings = () => {
     switch (data.type) {
       case 'boolean':
         return (
-          <Form.Item
-            key={key}
-            label={data.description || key}
-            name={key}
-            valuePropName="checked"
-          >
+          <Form.Item key={key} label={data.description || key} name={key} valuePropName="checked">
             <Switch />
           </Form.Item>
         );
@@ -227,56 +254,63 @@ const SystemSettings = () => {
             name={key}
             rules={[
               { required: false, message: `请输入${data.description || key}` },
-              ...(isPortField ? [
-                { type: 'number', min: 1, max: 65535, message: '端口号必须在 1-65535 之间', transform: value => Number(value) }
-              ] : [])
+              ...(isPortField
+                ? [
+                    {
+                      type: 'number',
+                      min: 1,
+                      max: 65535,
+                      message: '端口号必须在 1-65535 之间',
+                      transform: value => Number(value),
+                    },
+                  ]
+                : []),
             ]}
           >
-            <Input type="number" style={{ width: '100%' }} min={isPortField ? 1 : undefined} max={isPortField ? 65535 : undefined} />
+            <Input
+              type="number"
+              style={{ width: '100%' }}
+              min={isPortField ? 1 : undefined}
+              max={isPortField ? 65535 : undefined}
+            />
           </Form.Item>
         );
       case 'select':
         const options = getSelectOptions(key);
         return (
-          <Form.Item
-            key={key}
-            label={data.description || key}
-            name={key}
-          >
+          <Form.Item key={key} label={data.description || key} name={key}>
             <Select>
               {options.map(opt => (
-                <Option key={opt.value} value={opt.value}>{opt.label}</Option>
+                <Option key={opt.value} value={opt.value}>
+                  {opt.label}
+                </Option>
               ))}
             </Select>
           </Form.Item>
         );
       default:
         return (
-          <Form.Item
-            key={key}
-            label={data.description || key}
-            name={key}
-          >
+          <Form.Item key={key} label={data.description || key} name={key}>
             <Input />
           </Form.Item>
         );
     }
   };
 
-  const getSelectOptions = (key) => {
+  const getSelectOptions = key => {
     const optionsMap = {
       timezone: [
         { value: 'Asia/Shanghai', label: '亚洲/上海 (UTC+8)' },
         { value: 'Asia/Beijing', label: '亚洲/北京 (UTC+8)' },
         { value: 'America/New_York', label: '美洲/纽约 (UTC-5)' },
         { value: 'Europe/London', label: '欧洲/伦敦 (UTC+0)' },
-        { value: 'UTC', label: 'UTC (UTC+0)' }
+        { value: 'UTC', label: 'UTC (UTC+0)' },
       ],
       date_format: [
         { value: 'YYYY-MM-DD', label: '2024-01-01' },
         { value: 'YYYY/MM/DD', label: '2024/01/01' },
         { value: 'DD/MM/YYYY', label: '01/01/2024' },
-        { value: 'MM/DD/YYYY', label: '01/01/2024' }
+        { value: 'MM/DD/YYYY', label: '01/01/2024' },
       ],
       primary_color: [
         { value: '#667eea', label: '蓝色 (#667eea)' },
@@ -288,7 +322,7 @@ const SystemSettings = () => {
         { value: '#fee140', label: '黄色 (#fee140)' },
         { value: '#00b4db', label: '青色 (#00b4db)' },
         { value: '#0083b0', label: '深蓝色 (#0083b0)' },
-        { value: '#fcb045', label: '橙色 (#fcb045)' }
+        { value: '#fcb045', label: '橙色 (#fcb045)' },
       ],
       secondary_color: [
         { value: '#764ba2', label: '紫色 (#764ba2)' },
@@ -300,36 +334,44 @@ const SystemSettings = () => {
         { value: '#00b4db', label: '青色 (#00b4db)' },
         { value: '#0083b0', label: '深蓝色 (#0083b0)' },
         { value: '#fcb045', label: '橙色 (#fcb045)' },
-        { value: '#f093fb', label: '粉色 (#f093fb)' }
+        { value: '#f093fb', label: '粉色 (#f093fb)' },
       ],
       table_row_height: [
         { value: 'small', label: '紧凑 (Small)' },
         { value: 'default', label: '默认 (Default)' },
         { value: 'middle', label: '中等 (Middle)' },
-        { value: 'large', label: '宽松 (Large)' }
+        { value: 'large', label: '宽松 (Large)' },
       ],
       dark_mode: [
         { value: 'false', label: '关闭' },
-        { value: 'true', label: '开启' }
+        { value: 'true', label: '开启' },
       ],
       compact_mode: [
         { value: 'false', label: '关闭' },
-        { value: 'true', label: '开启' }
+        { value: 'true', label: '开启' },
       ],
       animation_enabled: [
         { value: 'false', label: '关闭' },
-        { value: 'true', label: '开启' }
+        { value: 'true', label: '开启' },
       ],
       sidebar_collapsed: [
         { value: 'false', label: '展开' },
-        { value: 'true', label: '折叠' }
+        { value: 'true', label: '折叠' },
       ],
     };
     return optionsMap[key] || [];
   };
 
   const renderGeneralSettings = () => {
-    const generalKeys = ['site_name', 'site_logo', 'timezone', 'date_format', 'session_timeout', 'max_login_attempts', 'maintenance_mode'];
+    const generalKeys = [
+      'site_name',
+      'site_logo',
+      'timezone',
+      'date_format',
+      'session_timeout',
+      'max_login_attempts',
+      'maintenance_mode',
+    ];
     return (
       <Card title="全局配置" bordered={false}>
         <Form form={form} layout="vertical" onFinish={handleSaveSettings}>
@@ -343,7 +385,9 @@ const SystemSettings = () => {
           })}
           <Form.Item>
             <Space>
-              <Button type="primary" htmlType="submit" loading={saving}>保存设置</Button>
+              <Button type="primary" htmlType="submit" loading={saving}>
+                保存设置
+              </Button>
               <Button onClick={() => fetchSettings()}>重置表单</Button>
             </Space>
           </Form.Item>
@@ -353,7 +397,14 @@ const SystemSettings = () => {
   };
 
   const renderAppearanceSettings = () => {
-    const appearanceKeys = ['primary_color', 'secondary_color', 'compact_mode', 'sidebar_collapsed', 'table_row_height', 'animation_enabled'];
+    const appearanceKeys = [
+      'primary_color',
+      'secondary_color',
+      'compact_mode',
+      'sidebar_collapsed',
+      'table_row_height',
+      'animation_enabled',
+    ];
     return (
       <Card title="外观设置" bordered={false}>
         <Form form={form} layout="vertical" onFinish={handleSaveSettings}>
@@ -374,7 +425,9 @@ const SystemSettings = () => {
           })}
           <Form.Item>
             <Space>
-              <Button type="primary" htmlType="submit" loading={saving}>保存设置</Button>
+              <Button type="primary" htmlType="submit" loading={saving}>
+                保存设置
+              </Button>
               <Button onClick={() => fetchSettings()}>重置表单</Button>
             </Space>
           </Form.Item>
@@ -386,14 +439,25 @@ const SystemSettings = () => {
   // 数据备份功能已移除
 
   const renderAboutPage = () => {
-    const aboutKeys = ['app_version', 'company_name', 'contact_email', 'contact_phone', 'company_address', 'system_description', 'privacy_policy', 'terms_of_service'];
+    const aboutKeys = [
+      'app_version',
+      'company_name',
+      'contact_email',
+      'contact_phone',
+      'company_address',
+      'system_description',
+      'privacy_policy',
+      'terms_of_service',
+    ];
 
     return (
       <div>
         <Card title="关于系统" bordered={false} style={{ marginBottom: 16 }}>
           <Descriptions column={{ xs: 1, sm: 2, md: 3 }} bordered>
             <Descriptions.Item label="系统名称">机柜管理系统</Descriptions.Item>
-            <Descriptions.Item label="版本号">{settings.app_version?.value || '1.0.0'}</Descriptions.Item>
+            <Descriptions.Item label="版本号">
+              {settings.app_version?.value || '1.0.0'}
+            </Descriptions.Item>
             <Descriptions.Item label="系统状态">
               <Tag color="success">运行正常</Tag>
             </Descriptions.Item>
@@ -405,7 +469,14 @@ const SystemSettings = () => {
             {aboutKeys.slice(1).map(key => settings[key] && renderFormItem(key, settings[key]))}
             <Form.Item>
               <Space>
-                <Button type="primary" htmlType="submit" loading={saving} onClick={() => form.submit()}>保存信息</Button>
+                <Button
+                  type="primary"
+                  htmlType="submit"
+                  loading={saving}
+                  onClick={() => form.submit()}
+                >
+                  保存信息
+                </Button>
                 <Button onClick={() => fetchSettings()}>重置</Button>
               </Space>
             </Form.Item>
@@ -415,24 +486,42 @@ const SystemSettings = () => {
         {systemInfo && (
           <Card title="系统统计信息" bordered={false}>
             <Descriptions column={{ xs: 1, sm: 2, md: 4 }} bordered size="small">
-              <Descriptions.Item label="设备总数">{systemInfo.statistics?.devices || 0}</Descriptions.Item>
-              <Descriptions.Item label="机柜总数">{systemInfo.statistics?.racks || 0}</Descriptions.Item>
-              <Descriptions.Item label="机房总数">{systemInfo.statistics?.rooms || 0}</Descriptions.Item>
-              <Descriptions.Item label="用户总数">{systemInfo.statistics?.users || 0}</Descriptions.Item>
+              <Descriptions.Item label="设备总数">
+                {systemInfo.statistics?.devices || 0}
+              </Descriptions.Item>
+              <Descriptions.Item label="机柜总数">
+                {systemInfo.statistics?.racks || 0}
+              </Descriptions.Item>
+              <Descriptions.Item label="机房总数">
+                {systemInfo.statistics?.rooms || 0}
+              </Descriptions.Item>
+              <Descriptions.Item label="用户总数">
+                {systemInfo.statistics?.users || 0}
+              </Descriptions.Item>
             </Descriptions>
             <Divider />
             <Descriptions column={{ xs: 1, sm: 2 }} bordered size="small">
-              <Descriptions.Item label="Node.js 版本">{systemInfo.system?.nodeVersion}</Descriptions.Item>
-              <Descriptions.Item label="运行平台">{systemInfo.system?.platform} ({systemInfo.system?.arch})</Descriptions.Item>
+              <Descriptions.Item label="Node.js 版本">
+                {systemInfo.system?.nodeVersion}
+              </Descriptions.Item>
+              <Descriptions.Item label="运行平台">
+                {systemInfo.system?.platform} ({systemInfo.system?.arch})
+              </Descriptions.Item>
               <Descriptions.Item label="进程 ID">{systemInfo.system?.pid}</Descriptions.Item>
               <Descriptions.Item label="运行时间">
-                {systemInfo.system?.uptime ? `${Math.floor(systemInfo.system.uptime / 3600)}小时${Math.floor((systemInfo.system.uptime % 3600) / 60)}分钟` : '-'}
+                {systemInfo.system?.uptime
+                  ? `${Math.floor(systemInfo.system.uptime / 3600)}小时${Math.floor((systemInfo.system.uptime % 3600) / 60)}分钟`
+                  : '-'}
               </Descriptions.Item>
               <Descriptions.Item label="内存使用">
-                {systemInfo.system?.memoryUsage ? `${(systemInfo.system.memoryUsage.heapUsed / 1024 / 1024).toFixed(2)} MB` : '-'}
+                {systemInfo.system?.memoryUsage
+                  ? `${(systemInfo.system.memoryUsage.heapUsed / 1024 / 1024).toFixed(2)} MB`
+                  : '-'}
               </Descriptions.Item>
               <Descriptions.Item label="系统时间">
-                {systemInfo.timestamp ? new Date(systemInfo.timestamp).toLocaleString('zh-CN') : '-'}
+                {systemInfo.timestamp
+                  ? new Date(systemInfo.timestamp).toLocaleString('zh-CN')
+                  : '-'}
               </Descriptions.Item>
             </Descriptions>
           </Card>
@@ -445,19 +534,31 @@ const SystemSettings = () => {
     <div style={{ padding: 24 }}>
       <Tabs activeKey={activeTab} onChange={setActiveTab}>
         <TabPane
-          tab={<span><GlobalOutlined /> 全局配置</span>}
+          tab={
+            <span>
+              <GlobalOutlined /> 全局配置
+            </span>
+          }
           key="general"
         >
           {renderGeneralSettings()}
         </TabPane>
         <TabPane
-          tab={<span><BgColorsOutlined /> 外观设置</span>}
+          tab={
+            <span>
+              <BgColorsOutlined /> 外观设置
+            </span>
+          }
           key="appearance"
         >
           {renderAppearanceSettings()}
         </TabPane>
         <TabPane
-          tab={<span><InfoCircleOutlined /> 关于</span>}
+          tab={
+            <span>
+              <InfoCircleOutlined /> 关于
+            </span>
+          }
           key="about"
         >
           {renderAboutPage()}
diff --git a/frontend/src/pages/TicketCategoryManagement.jsx b/frontend/src/pages/TicketCategoryManagement.jsx
index d37cc49..240eee2 100644
--- a/frontend/src/pages/TicketCategoryManagement.jsx
+++ b/frontend/src/pages/TicketCategoryManagement.jsx
@@ -49,7 +49,7 @@ function TicketCategoryManagement() {
         priority: category.priority,
         defaultPriority: category.defaultPriority,
         expectedDuration: category.expectedDuration,
-        isActive: category.isActive
+        isActive: category.isActive,
       });
     } else {
       form.resetFields();
@@ -62,7 +62,7 @@ function TicketCategoryManagement() {
     setEditingCategory(null);
   };
 
-  const handleSubmit = async (values) => {
+  const handleSubmit = async values => {
     try {
       if (editingCategory) {
         await axios.put(`/api/ticket-categories/${editingCategory.categoryId}`, values);
@@ -81,7 +81,7 @@ function TicketCategoryManagement() {
     }
   };
 
-  const handleDelete = async (categoryId) => {
+  const handleDelete = async categoryId => {
     try {
       await axios.delete(`/api/ticket-categories/${categoryId}`);
       message.success('分类删除成功');
@@ -97,49 +97,47 @@ function TicketCategoryManagement() {
       title: '分类ID',
       dataIndex: 'categoryId',
       key: 'categoryId',
-      width: 150
+      width: 150,
     },
     {
       title: '分类名称',
       dataIndex: 'name',
       key: 'name',
-      width: 180
+      width: 180,
     },
     {
       title: '分类说明',
       dataIndex: 'description',
       key: 'description',
       width: 300,
-      ellipsis: true
+      ellipsis: true,
     },
     {
       title: '优先级',
       dataIndex: 'priority',
       key: 'priority',
-      width: 80
+      width: 80,
     },
     {
       title: '默认优先级',
       dataIndex: 'defaultPriority',
       key: 'defaultPriority',
-      width: 100
+      width: 100,
     },
     {
       title: '预计时长(分钟)',
       dataIndex: 'expectedDuration',
       key: 'expectedDuration',
-      width: 120
+      width: 120,
     },
     {
       title: '启用状态',
       dataIndex: 'isActive',
       key: 'isActive',
       width: 100,
-      render: (text) => (
-        <span style={{ color: text ? 'green' : 'red' }}>
-          {text ? '启用' : '禁用'}
-        </span>
-      )
+      render: text => (
+        <span style={{ color: text ? 'green' : 'red' }}>{text ? '启用' : '禁用'}</span>
+      ),
     },
     {
       title: '操作',
@@ -147,11 +145,7 @@ function TicketCategoryManagement() {
       width: 150,
       render: (_, record) => (
         <Space size="small">
-          <Button
-            type="link"
-            icon={<EditOutlined />}
-            onClick={() => showModal(record)}
-          >
+          <Button type="link" icon={<EditOutlined />} onClick={() => showModal(record)}>
             编辑
           </Button>
           <Popconfirm
@@ -166,22 +160,25 @@ function TicketCategoryManagement() {
             </Button>
           </Popconfirm>
         </Space>
-      )
-    }
+      ),
+    },
   ];
 
   return (
     <div style={{ padding: 24 }}>
-      <Card title="故障分类管理" extra={
-        <Space>
-          <Button icon={<ReloadOutlined />} onClick={initCategories}>
-            初始化分类
-          </Button>
-          <Button type="primary" icon={<PlusOutlined />} onClick={() => showModal()}>
-            添加分类
-          </Button>
-        </Space>
-      }>
+      <Card
+        title="故障分类管理"
+        extra={
+          <Space>
+            <Button icon={<ReloadOutlined />} onClick={initCategories}>
+              初始化分类
+            </Button>
+            <Button type="primary" icon={<PlusOutlined />} onClick={() => showModal()}>
+              添加分类
+            </Button>
+          </Space>
+        }
+      >
         <Table
           columns={columns}
           dataSource={categories}
diff --git a/frontend/src/pages/TicketFieldManagement.jsx b/frontend/src/pages/TicketFieldManagement.jsx
index 47c4011..cd65731 100644
--- a/frontend/src/pages/TicketFieldManagement.jsx
+++ b/frontend/src/pages/TicketFieldManagement.jsx
@@ -1,5 +1,17 @@
 import React, { useState, useEffect } from 'react';
-import { Table, Button, Modal, Form, Input, Select, message, Card, Space, InputNumber, Switch } from 'antd';
+import {
+  Table,
+  Button,
+  Modal,
+  Form,
+  Input,
+  Select,
+  message,
+  Card,
+  Space,
+  InputNumber,
+  Switch,
+} from 'antd';
 import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
 import axios from 'axios';
 
@@ -34,7 +46,7 @@ function TicketFieldManagement() {
     if (field) {
       const fieldData = {
         ...field,
-        options: field.options ? JSON.stringify(field.options, null, 2) : ''
+        options: field.options ? JSON.stringify(field.options, null, 2) : '',
       };
       form.setFieldsValue(fieldData);
     } else {
@@ -48,11 +60,11 @@ function TicketFieldManagement() {
     setEditingField(null);
   };
 
-  const handleSubmit = async (values) => {
+  const handleSubmit = async values => {
     try {
       const fieldData = {
         ...values,
-        options: values.options ? JSON.parse(values.options || '[]') : null
+        options: values.options ? JSON.parse(values.options || '[]') : null,
       };
 
       if (editingField) {
@@ -72,7 +84,7 @@ function TicketFieldManagement() {
     }
   };
 
-  const handleDelete = async (fieldId) => {
+  const handleDelete = async fieldId => {
     Modal.confirm({
       title: '确认删除',
       content: '确定要删除这个字段吗？',
@@ -88,7 +100,7 @@ function TicketFieldManagement() {
           message.error('字段删除失败');
           console.error('字段删除失败:', error);
         }
-      }
+      },
     });
   };
 
@@ -107,7 +119,7 @@ function TicketFieldManagement() {
       title: '字段类型',
       dataIndex: 'fieldType',
       key: 'fieldType',
-      render: (type) => {
+      render: type => {
         const typeMap = {
           string: '文本',
           number: '数字',
@@ -116,26 +128,22 @@ function TicketFieldManagement() {
           date: '日期',
           datetime: '日期时间',
           textarea: '多行文本',
-          device: '设备选择'
+          device: '设备选择',
         };
         return typeMap[type] || type;
-      }
+      },
     },
     {
       title: '必填',
       dataIndex: 'required',
       key: 'required',
-      render: (required) => (
-        <Switch checked={required} disabled />
-      )
+      render: required => <Switch checked={required} disabled />,
     },
     {
       title: '可见',
       dataIndex: 'visible',
       key: 'visible',
-      render: (visible) => (
-        <Switch checked={visible} disabled />
-      )
+      render: visible => <Switch checked={visible} disabled />,
     },
     {
       title: '顺序',
@@ -147,10 +155,20 @@ function TicketFieldManagement() {
       key: 'action',
       render: (_, record) => (
         <Space size="middle">
-          <Button type="primary" icon={<EditOutlined />} onClick={() => showModal(record)} size="small">
+          <Button
+            type="primary"
+            icon={<EditOutlined />}
+            onClick={() => showModal(record)}
+            size="small"
+          >
             编辑
           </Button>
-          <Button danger icon={<DeleteOutlined />} onClick={() => handleDelete(record.fieldId)} size="small">
+          <Button
+            danger
+            icon={<DeleteOutlined />}
+            onClick={() => handleDelete(record.fieldId)}
+            size="small"
+          >
             删除
           </Button>
         </Space>
@@ -160,11 +178,14 @@ function TicketFieldManagement() {
 
   return (
     <div>
-      <Card title="工单字段管理" extra={
-        <Button type="primary" icon={<PlusOutlined />} onClick={() => showModal()}>
-          添加字段
-        </Button>
-      }>
+      <Card
+        title="工单字段管理"
+        extra={
+          <Button type="primary" icon={<PlusOutlined />} onClick={() => showModal()}>
+            添加字段
+          </Button>
+        }
+      >
         <Table
           columns={columns}
           dataSource={fields}
@@ -181,11 +202,7 @@ function TicketFieldManagement() {
         footer={null}
         width={600}
       >
-        <Form
-          form={form}
-          layout="vertical"
-          onFinish={handleSubmit}
-        >
+        <Form form={form} layout="vertical" onFinish={handleSubmit}>
           <Form.Item
             name="fieldName"
             label="字段名称"
@@ -219,17 +236,11 @@ function TicketFieldManagement() {
             </Select>
           </Form.Item>
 
-          <Form.Item
-            name="required"
-            label="必填"
-          >
+          <Form.Item name="required" label="必填">
             <Switch />
           </Form.Item>
 
-          <Form.Item
-            name="visible"
-            label="可见"
-          >
+          <Form.Item name="visible" label="可见">
             <Switch defaultChecked />
           </Form.Item>
 
@@ -246,10 +257,7 @@ function TicketFieldManagement() {
             label="选项配置（仅下拉选择类型，JSON格式）"
             tooltip="格式示例：[{value: 'option1', label: '选项1'}]"
           >
-            <Input.TextArea 
-              rows={3} 
-              placeholder='[{"value": "option1", "label": "选项1"}]'
-            />
+            <Input.TextArea rows={3} placeholder='[{"value": "option1", "label": "选项1"}]' />
           </Form.Item>
 
           <Form.Item style={{ textAlign: 'right' }}>
diff --git a/frontend/src/pages/TicketManagement.jsx b/frontend/src/pages/TicketManagement.jsx
index 10aa816..a91bbef 100644
--- a/frontend/src/pages/TicketManagement.jsx
+++ b/frontend/src/pages/TicketManagement.jsx
@@ -1,6 +1,41 @@
 import React, { useState, useEffect, useCallback, useMemo } from 'react';
-import { Table, Button, Modal, Form, Input, Select, DatePicker, message, Card, Space, Tag, Dropdown, Menu, Tabs, Timeline, Descriptions, Checkbox, Popover, InputNumber, Switch } from 'antd';
-import { PlusOutlined, EditOutlined, DeleteOutlined, SearchOutlined, EyeOutlined, MoreOutlined, UserOutlined, ToolOutlined, CheckCircleOutlined, SyncOutlined, ClockCircleOutlined, CloseCircleOutlined, SettingOutlined } from '@ant-design/icons';
+import {
+  Table,
+  Button,
+  Modal,
+  Form,
+  Input,
+  Select,
+  DatePicker,
+  message,
+  Card,
+  Space,
+  Tag,
+  Dropdown,
+  Menu,
+  Tabs,
+  Timeline,
+  Descriptions,
+  Checkbox,
+  Popover,
+  InputNumber,
+  Switch,
+} from 'antd';
+import {
+  PlusOutlined,
+  EditOutlined,
+  DeleteOutlined,
+  SearchOutlined,
+  EyeOutlined,
+  MoreOutlined,
+  UserOutlined,
+  ToolOutlined,
+  CheckCircleOutlined,
+  SyncOutlined,
+  ClockCircleOutlined,
+  CloseCircleOutlined,
+  SettingOutlined,
+} from '@ant-design/icons';
 import axios from 'axios';
 import dayjs from 'dayjs';
 
@@ -21,64 +56,161 @@ const { TextArea } = Input;
 const { TabPane } = Tabs;
 
 const BUILTIN_TICKET_FIELDS = [
-  'ticketId', 'title', 'deviceId', 'deviceName', 'deviceModel', 'serialNumber',
-  'faultCategory', 'faultSubCategory', 'priority', 'status', 'description',
-  'expectedCompletionDate', 'reporterId', 'reporterName', 'assigneeId', 'assigneeName',
-  'location', 'resolution', 'completionDate', 'evaluation', 'evaluationRating',
-  'attachments', 'tags', 'notes', 'result', 'solution', 'usedParts'
+  'ticketId',
+  'title',
+  'deviceId',
+  'deviceName',
+  'deviceModel',
+  'serialNumber',
+  'faultCategory',
+  'faultSubCategory',
+  'priority',
+  'status',
+  'description',
+  'expectedCompletionDate',
+  'reporterId',
+  'reporterName',
+  'assigneeId',
+  'assigneeName',
+  'location',
+  'resolution',
+  'completionDate',
+  'evaluation',
+  'evaluationRating',
+  'attachments',
+  'tags',
+  'notes',
+  'result',
+  'solution',
+  'usedParts',
 ];
 
 const DEFAULT_TICKET_FIELDS = [
-  { fieldName: 'title', displayName: '标题', fieldType: 'string', required: true, order: 1, visible: true },
-  { fieldName: 'deviceId', displayName: '关联设备', fieldType: 'device', required: false, order: 2, visible: true },
-  { fieldName: 'deviceName', displayName: '设备名称', fieldType: 'string', required: false, order: 3, visible: true },
-  { fieldName: 'serialNumber', displayName: '设备序列号', fieldType: 'string', required: false, order: 4, visible: true },
-  { fieldName: 'faultCategory', displayName: '故障分类', fieldType: 'select', required: true, order: 5, visible: true, options: [] },
-  { fieldName: 'priority', displayName: '优先级', fieldType: 'select', required: true, order: 6, visible: true, options: [
-    { value: 'low', label: '低' }, { value: 'medium', label: '中' }, { value: 'high', label: '高' }, { value: 'urgent', label: '紧急' }
-  ]},
-  { fieldName: 'description', displayName: '故障描述', fieldType: 'textarea', required: true, order: 7, visible: true },
-  { fieldName: 'expectedCompletionDate', displayName: '期望完成时间', fieldType: 'datetime', required: false, order: 8, visible: true },
-  { fieldName: 'resolution', displayName: '解决方案', fieldType: 'textarea', required: false, order: 9, visible: true },
-  { fieldName: 'notes', displayName: '备注', fieldType: 'textarea', required: false, order: 10, visible: true }
+  {
+    fieldName: 'title',
+    displayName: '标题',
+    fieldType: 'string',
+    required: true,
+    order: 1,
+    visible: true,
+  },
+  {
+    fieldName: 'deviceId',
+    displayName: '关联设备',
+    fieldType: 'device',
+    required: false,
+    order: 2,
+    visible: true,
+  },
+  {
+    fieldName: 'deviceName',
+    displayName: '设备名称',
+    fieldType: 'string',
+    required: false,
+    order: 3,
+    visible: true,
+  },
+  {
+    fieldName: 'serialNumber',
+    displayName: '设备序列号',
+    fieldType: 'string',
+    required: false,
+    order: 4,
+    visible: true,
+  },
+  {
+    fieldName: 'faultCategory',
+    displayName: '故障分类',
+    fieldType: 'select',
+    required: true,
+    order: 5,
+    visible: true,
+    options: [],
+  },
+  {
+    fieldName: 'priority',
+    displayName: '优先级',
+    fieldType: 'select',
+    required: true,
+    order: 6,
+    visible: true,
+    options: [
+      { value: 'low', label: '低' },
+      { value: 'medium', label: '中' },
+      { value: 'high', label: '高' },
+      { value: 'urgent', label: '紧急' },
+    ],
+  },
+  {
+    fieldName: 'description',
+    displayName: '故障描述',
+    fieldType: 'textarea',
+    required: true,
+    order: 7,
+    visible: true,
+  },
+  {
+    fieldName: 'expectedCompletionDate',
+    displayName: '期望完成时间',
+    fieldType: 'datetime',
+    required: false,
+    order: 8,
+    visible: true,
+  },
+  {
+    fieldName: 'resolution',
+    displayName: '解决方案',
+    fieldType: 'textarea',
+    required: false,
+    order: 9,
+    visible: true,
+  },
+  {
+    fieldName: 'notes',
+    displayName: '备注',
+    fieldType: 'textarea',
+    required: false,
+    order: 10,
+    visible: true,
+  },
 ];
 
-const getStatusColor = (status) => {
+const getStatusColor = status => {
   const colors = {
     pending: 'orange',
     in_progress: 'processing',
     completed: 'green',
-    closed: 'default'
+    closed: 'default',
   };
   return colors[status] || 'default';
 };
 
-const getStatusText = (status) => {
+const getStatusText = status => {
   const texts = {
     pending: '待处理',
     in_progress: '处理中',
     completed: '已完成',
-    closed: '已关闭'
+    closed: '已关闭',
   };
   return texts[status] || status;
 };
 
-const getPriorityColor = (priority) => {
+const getPriorityColor = priority => {
   const colors = {
     low: 'green',
     medium: 'orange',
     high: 'red',
-    urgent: 'magenta'
+    urgent: 'magenta',
   };
   return colors[priority] || 'default';
 };
 
-const getPriorityText = (priority) => {
+const getPriorityText = priority => {
   const texts = {
     low: '低',
     medium: '中',
     high: '高',
-    urgent: '紧急'
+    urgent: '紧急',
   };
   return texts[priority] || priority;
 };
@@ -86,7 +218,9 @@ const getPriorityText = (priority) => {
 const generateTicketId = () => {
   const prefix = 'TKT';
   const timestamp = dayjs().format('YYYYMMDDHHmmss');
-  const random = Math.floor(Math.random() * 1000).toString().padStart(3, '0');
+  const random = Math.floor(Math.random() * 1000)
+    .toString()
+    .padStart(3, '0');
   return `${prefix}${timestamp}${random}`;
 };
 
@@ -111,7 +245,7 @@ function TicketManagement() {
     total: 0,
     pageSizeOptions: ['10', '20', '30', '50'],
     showSizeChanger: true,
-    showTotal: (total) => `共 ${total} 条记录`
+    showTotal: total => `共 ${total} 条记录`,
   });
 
   const [searchFilters, setSearchFilters] = useState({});
@@ -119,38 +253,41 @@ function TicketManagement() {
   const [ticketFields, setTicketFields] = useState(DEFAULT_TICKET_FIELDS);
   const [loadingFields, setLoadingFields] = useState(true);
 
-  const fetchTickets = useCallback(async (page = 1, pageSize = 10, filters = {}) => {
-    try {
-      setLoading(true);
-      const params = {
-        page,
-        pageSize,
-        ...searchFilters,
-        ...filters
-      };
+  const fetchTickets = useCallback(
+    async (page = 1, pageSize = 10, filters = {}) => {
+      try {
+        setLoading(true);
+        const params = {
+          page,
+          pageSize,
+          ...searchFilters,
+          ...filters,
+        };
 
-      const response = await axios.get('/api/tickets', { params });
-      const { tickets: ticketList, total } = response.data;
+        const response = await axios.get('/api/tickets', { params });
+        const { tickets: ticketList, total } = response.data;
 
-      const processedTickets = ticketList.map(ticket => {
-        const processed = { ...ticket };
-        if (ticket.metadata && typeof ticket.metadata === 'object') {
-          Object.entries(ticket.metadata).forEach(([key, value]) => {
-            processed[key] = value;
-          });
-        }
-        return processed;
-      });
+        const processedTickets = ticketList.map(ticket => {
+          const processed = { ...ticket };
+          if (ticket.metadata && typeof ticket.metadata === 'object') {
+            Object.entries(ticket.metadata).forEach(([key, value]) => {
+              processed[key] = value;
+            });
+          }
+          return processed;
+        });
 
-      setTickets(processedTickets);
-      setPagination(prev => ({ ...prev, current: page, pageSize, total }));
-    } catch (error) {
-      message.error('获取工单列表失败');
-      console.error('获取工单列表失败:', error);
-    } finally {
-      setLoading(false);
-    }
-  }, [searchFilters]);
+        setTickets(processedTickets);
+        setPagination(prev => ({ ...prev, current: page, pageSize, total }));
+      } catch (error) {
+        message.error('获取工单列表失败');
+        console.error('获取工单列表失败:', error);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [searchFilters]
+  );
 
   const fetchDevices = useCallback(async () => {
     try {
@@ -164,11 +301,16 @@ function TicketManagement() {
   const fetchCategories = useCallback(async () => {
     try {
       const response = await axios.get('/api/ticket-categories');
-      const categoryOptions = (response.data || []).map(cat => ({ value: cat.name, label: cat.name }));
+      const categoryOptions = (response.data || []).map(cat => ({
+        value: cat.name,
+        label: cat.name,
+      }));
       setCategories(response.data || []);
-      setTicketFields(prev => prev.map(field => 
-        field.fieldName === 'faultCategory' ? { ...field, options: categoryOptions } : field
-      ));
+      setTicketFields(prev =>
+        prev.map(field =>
+          field.fieldName === 'faultCategory' ? { ...field, options: categoryOptions } : field
+        )
+      );
     } catch (error) {
       console.error('获取分类列表失败:', error);
     }
@@ -195,106 +337,118 @@ function TicketManagement() {
     fetchTicketFields();
   }, [fetchTickets, fetchDevices, fetchCategories, fetchTicketFields]);
 
-  const renderFormItem = useCallback((field) => {
-    const { fieldName, displayName, fieldType, required, options, placeholder } = field;
-    const rules = required ? [{ required: true, message: `请选择或输入${displayName}` }] : [];
+  const renderFormItem = useCallback(
+    field => {
+      const { fieldName, displayName, fieldType, required, options, placeholder } = field;
+      const rules = required ? [{ required: true, message: `请选择或输入${displayName}` }] : [];
 
-    let formItem;
-    switch (fieldType) {
-      case 'string':
-        formItem = <Input placeholder={placeholder || `请输入${displayName}`} />;
-        break;
-      case 'number':
-        formItem = <InputNumber placeholder={placeholder || `请输入${displayName}`} style={{ width: '100%' }} />;
-        break;
-      case 'textarea':
-        formItem = <Input.TextArea rows={3} placeholder={placeholder || `请输入${displayName}`} />;
-        break;
-      case 'boolean':
-        formItem = <Switch />;
-        break;
-      case 'date':
-        formItem = <DatePicker style={{ width: '100%' }} />;
-        break;
-      case 'datetime':
-        formItem = <DatePicker showTime style={{ width: '100%' }} />;
-        break;
-      case 'select':
-        const selectOptions = options && Array.isArray(options) ? options : [];
-        formItem = (
-          <Select placeholder={placeholder || `请选择${displayName}`}>
-            {selectOptions.map((opt, idx) => (
-              <Option key={idx} value={opt.value}>{opt.label}</Option>
-            ))}
-          </Select>
-        );
-        break;
-      case 'device':
-        formItem = (
-          <Select placeholder="选择设备" showSearch optionFilterProp="children">
-            {devices.map(device => (
-              <Option key={device.deviceId} value={device.deviceId}>
-                {device.name} - {device.serialNumber}
-              </Option>
-            ))}
-          </Select>
-        );
-        break;
-      default:
-        formItem = <Input placeholder={placeholder || `请输入${displayName}`} />;
-    }
+      let formItem;
+      switch (fieldType) {
+        case 'string':
+          formItem = <Input placeholder={placeholder || `请输入${displayName}`} />;
+          break;
+        case 'number':
+          formItem = (
+            <InputNumber
+              placeholder={placeholder || `请输入${displayName}`}
+              style={{ width: '100%' }}
+            />
+          );
+          break;
+        case 'textarea':
+          formItem = (
+            <Input.TextArea rows={3} placeholder={placeholder || `请输入${displayName}`} />
+          );
+          break;
+        case 'boolean':
+          formItem = <Switch />;
+          break;
+        case 'date':
+          formItem = <DatePicker style={{ width: '100%' }} />;
+          break;
+        case 'datetime':
+          formItem = <DatePicker showTime style={{ width: '100%' }} />;
+          break;
+        case 'select':
+          const selectOptions = options && Array.isArray(options) ? options : [];
+          formItem = (
+            <Select placeholder={placeholder || `请选择${displayName}`}>
+              {selectOptions.map((opt, idx) => (
+                <Option key={idx} value={opt.value}>
+                  {opt.label}
+                </Option>
+              ))}
+            </Select>
+          );
+          break;
+        case 'device':
+          formItem = (
+            <Select placeholder="选择设备" showSearch optionFilterProp="children">
+              {devices.map(device => (
+                <Option key={device.deviceId} value={device.deviceId}>
+                  {device.name} - {device.serialNumber}
+                </Option>
+              ))}
+            </Select>
+          );
+          break;
+        default:
+          formItem = <Input placeholder={placeholder || `请输入${displayName}`} />;
+      }
 
-    return (
-      <Form.Item key={fieldName} name={fieldName} label={displayName} rules={rules}>
-        {formItem}
-      </Form.Item>
-    );
-  }, [devices]);
+      return (
+        <Form.Item key={fieldName} name={fieldName} label={displayName} rules={rules}>
+          {formItem}
+        </Form.Item>
+      );
+    },
+    [devices]
+  );
 
   const tableColumns = useMemo(() => {
     const baseColumns = [
       { title: '工单编号', dataIndex: 'ticketId', key: 'ticketId', width: 150, fixed: 'left' },
       { title: '标题', dataIndex: 'title', key: 'title', width: 200, ellipsis: true },
-      { 
-        title: '设备信息', 
-        key: 'deviceInfo', 
+      {
+        title: '设备信息',
+        key: 'deviceInfo',
         width: 180,
         render: (_, record) => (
           <div>
             <div>{record.deviceName || '-'}</div>
             <div style={{ fontSize: 12, color: '#888' }}>{record.serialNumber || '-'}</div>
           </div>
-        )
+        ),
       },
-      { 
-        title: '故障分类', 
-        dataIndex: 'faultCategory', 
-        key: 'faultCategory', 
+      {
+        title: '故障分类',
+        dataIndex: 'faultCategory',
+        key: 'faultCategory',
         width: 120,
-        render: (value) => value ? <Tag>{value}</Tag> : '-'
+        render: value => (value ? <Tag>{value}</Tag> : '-'),
       },
-      { 
-        title: '优先级', 
-        dataIndex: 'priority', 
-        key: 'priority', 
+      {
+        title: '优先级',
+        dataIndex: 'priority',
+        key: 'priority',
         width: 80,
-        render: (value) => <Tag color={getPriorityColor(value)}>{getPriorityText(value)}</Tag>
+        render: value => <Tag color={getPriorityColor(value)}>{getPriorityText(value)}</Tag>,
       },
-      { 
-        title: '状态', 
-        dataIndex: 'status', 
-        key: 'status', 
+      {
+        title: '状态',
+        dataIndex: 'status',
+        key: 'status',
         width: 100,
-        render: (value) => <Tag color={getStatusColor(value)}>{getStatusText(value)}</Tag>
+        render: value => <Tag color={getStatusColor(value)}>{getStatusText(value)}</Tag>,
       },
       { title: '报告人', dataIndex: 'reporterName', key: 'reporterName', width: 100 },
-      { 
-        title: '创建时间', 
-        dataIndex: 'createdAt', 
-        key: 'createdAt', 
+      {
+        title: '创建时间',
+        dataIndex: 'createdAt',
+        key: 'createdAt',
         width: 160,
-        render: (value) => value ? dayjs(value).format('YYYY-MM-DD HH:mm') : '-'
-      }
+        render: value => (value ? dayjs(value).format('YYYY-MM-DD HH:mm') : '-'),
+      },
     ];
 
     const customFieldColumns = ticketFields
@@ -304,20 +458,22 @@ function TicketManagement() {
         dataIndex: field.fieldName,
         key: field.fieldName,
         width: 120,
-        render: (value) => {
+        render: value => {
           if (value === null || value === undefined) return '-';
           if (field.fieldType === 'boolean') {
             return <Switch checked={value} disabled />;
           }
           if (field.fieldType === 'date' || field.fieldType === 'datetime') {
-            return value ? dayjs(value).format(field.fieldType === 'date' ? 'YYYY-MM-DD' : 'YYYY-MM-DD HH:mm') : '-';
+            return value
+              ? dayjs(value).format(field.fieldType === 'date' ? 'YYYY-MM-DD' : 'YYYY-MM-DD HH:mm')
+              : '-';
           }
           if (field.fieldType === 'select' && Array.isArray(field.options)) {
             const option = field.options.find(opt => opt.value === value);
             return option ? option.label : value;
           }
           return String(value);
-        }
+        },
       }));
 
     const actionColumn = {
@@ -329,17 +485,17 @@ function TicketManagement() {
         <Dropdown trigger={['click']} overlay={getActionItems(record)}>
           <Button type="text" icon={<MoreOutlined />} />
         </Dropdown>
-      )
+      ),
     };
 
     return [...baseColumns, ...customFieldColumns, actionColumn];
   }, [ticketFields]);
 
-  const fetchTicketDetail = useCallback(async (ticketId) => {
+  const fetchTicketDetail = useCallback(async ticketId => {
     try {
       const [ticketRes, operationsRes] = await Promise.all([
         axios.get(`/api/tickets/${ticketId}`),
-        axios.get(`/api/tickets/${ticketId}/operations`)
+        axios.get(`/api/tickets/${ticketId}/operations`),
       ]);
 
       setSelectedTicket(ticketRes.data);
@@ -389,120 +545,139 @@ function TicketManagement() {
     setEditingTicket(null);
   }, []);
 
-  const handleSubmit = useCallback(async (values) => {
-    try {
-      const ticketData = {
-        ...values,
-        expectedCompletionDate: values.expectedCompletionDate ? values.expectedCompletionDate.format('YYYY-MM-DD HH:mm:ss') : null,
-        completionDate: values.completionDate ? values.completionDate.format('YYYY-MM-DD HH:mm:ss') : null,
-        metadata: {}
-      };
+  const handleSubmit = useCallback(
+    async values => {
+      try {
+        const ticketData = {
+          ...values,
+          expectedCompletionDate: values.expectedCompletionDate
+            ? values.expectedCompletionDate.format('YYYY-MM-DD HH:mm:ss')
+            : null,
+          completionDate: values.completionDate
+            ? values.completionDate.format('YYYY-MM-DD HH:mm:ss')
+            : null,
+          metadata: {},
+        };
 
-      ticketFields.forEach(field => {
-        if (!BUILTIN_TICKET_FIELDS.includes(field.fieldName)) {
-          if (values[field.fieldName] !== undefined) {
-            ticketData.metadata[field.fieldName] = values[field.fieldName];
+        ticketFields.forEach(field => {
+          if (!BUILTIN_TICKET_FIELDS.includes(field.fieldName)) {
+            if (values[field.fieldName] !== undefined) {
+              ticketData.metadata[field.fieldName] = values[field.fieldName];
+            }
+            delete ticketData[field.fieldName];
+          }
+        });
+
+        if (deviceSource === 'manual') {
+          ticketData.deviceId = null;
+          ticketData.deviceName = values.deviceName;
+          ticketData.serialNumber = values.serialNumber;
+        } else {
+          const selectedDevice = devices.find(d => d.deviceId === values.deviceId);
+          if (selectedDevice) {
+            ticketData.deviceName = selectedDevice.name;
+            ticketData.serialNumber = selectedDevice.serialNumber;
           }
-          delete ticketData[field.fieldName];
         }
+
+        if (editingTicket) {
+          await axios.put(`/api/tickets/${editingTicket.ticketId}`, ticketData);
+          message.success('工单更新成功');
+        } else {
+          const user = getUserFromStorage();
+          ticketData.reporterId = user.userId || localStorage.getItem('userId') || 'USER001';
+          ticketData.reporterName = user.username || '系统用户';
+          await axios.post('/api/tickets', ticketData);
+          message.success('工单创建成功');
+        }
+
+        setModalVisible(false);
+        fetchTickets();
+        setEditingTicket(null);
+        setDeviceSource('select');
+      } catch (error) {
+        message.error(editingTicket ? '工单更新失败' : '工单创建失败');
+        console.error(error);
+      }
+    },
+    [editingTicket, fetchTickets, deviceSource, ticketFields, devices]
+  );
+
+  const handleDelete = useCallback(
+    async ticketId => {
+      Modal.confirm({
+        title: '确认删除',
+        content: '确定要删除这个工单吗？',
+        okText: '删除',
+        okType: 'danger',
+        cancelText: '取消',
+        onOk: async () => {
+          try {
+            await axios.delete(`/api/tickets/${ticketId}`);
+            message.success('工单删除成功');
+            fetchTickets();
+          } catch (error) {
+            message.error('工单删除失败');
+            console.error(error);
+          }
+        },
       });
+    },
+    [fetchTickets]
+  );
 
-      if (deviceSource === 'manual') {
-        ticketData.deviceId = null;
-        ticketData.deviceName = values.deviceName;
-        ticketData.serialNumber = values.serialNumber;
-      } else {
-        const selectedDevice = devices.find(d => d.deviceId === values.deviceId);
-        if (selectedDevice) {
-          ticketData.deviceName = selectedDevice.name;
-          ticketData.serialNumber = selectedDevice.serialNumber;
-        }
-      }
-
-      if (editingTicket) {
-        await axios.put(`/api/tickets/${editingTicket.ticketId}`, ticketData);
-        message.success('工单更新成功');
-      } else {
-        const user = getUserFromStorage();
-        ticketData.reporterId = user.userId || localStorage.getItem('userId') || 'USER001';
-        ticketData.reporterName = user.username || '系统用户';
-        await axios.post('/api/tickets', ticketData);
-        message.success('工单创建成功');
-      }
-
-      setModalVisible(false);
-      fetchTickets();
-      setEditingTicket(null);
-      setDeviceSource('select');
-    } catch (error) {
-      message.error(editingTicket ? '工单更新失败' : '工单创建失败');
-      console.error(error);
-    }
-  }, [editingTicket, fetchTickets, deviceSource, ticketFields, devices]);
-
-  const handleDelete = useCallback(async (ticketId) => {
-    Modal.confirm({
-      title: '确认删除',
-      content: '确定要删除这个工单吗？',
-      okText: '删除',
-      okType: 'danger',
-      cancelText: '取消',
-      onOk: async () => {
-        try {
-          await axios.delete(`/api/tickets/${ticketId}`);
-          message.success('工单删除成功');
-          fetchTickets();
-        } catch (error) {
-          message.error('工单删除失败');
-          console.error(error);
-        }
-      }
-    });
-  }, [fetchTickets]);
-
-  const handleProcess = useCallback((ticket) => {
+  const handleProcess = useCallback(ticket => {
     setSelectedTicket(ticket);
     processForm.resetFields();
     setProcessingModalVisible(true);
   }, []);
 
-  const handleProcessSubmit = useCallback(async (values) => {
-    try {
-      const user = getUserFromStorage();
-      await axios.put(`/api/tickets/${selectedTicket.ticketId}/process`, {
-        ...values,
-        operatorId: localStorage.getItem('userId'),
-        operatorName: user.username
-      });
-      message.success('工单处理完成');
-      setProcessingModalVisible(false);
-      fetchTickets();
-    } catch (error) {
-      message.error('处理失败');
-      console.error(error);
-    }
-  }, [selectedTicket, fetchTickets]);
+  const handleProcessSubmit = useCallback(
+    async values => {
+      try {
+        const user = getUserFromStorage();
+        await axios.put(`/api/tickets/${selectedTicket.ticketId}/process`, {
+          ...values,
+          operatorId: localStorage.getItem('userId'),
+          operatorName: user.username,
+        });
+        message.success('工单处理完成');
+        setProcessingModalVisible(false);
+        fetchTickets();
+      } catch (error) {
+        message.error('处理失败');
+        console.error(error);
+      }
+    },
+    [selectedTicket, fetchTickets]
+  );
 
-  const handleStatusChange = useCallback(async (ticketId, newStatus) => {
-    try {
-      const user = getUserFromStorage();
-      await axios.put(`/api/tickets/${ticketId}/status`, {
-        status: newStatus,
-        operatorId: localStorage.getItem('userId'),
-        operatorName: user.username
-      });
-      message.success('状态更新成功');
-      fetchTickets();
-    } catch (error) {
-      message.error('状态更新失败');
-      console.error(error);
-    }
-  }, [fetchTickets]);
+  const handleStatusChange = useCallback(
+    async (ticketId, newStatus) => {
+      try {
+        const user = getUserFromStorage();
+        await axios.put(`/api/tickets/${ticketId}/status`, {
+          status: newStatus,
+          operatorId: localStorage.getItem('userId'),
+          operatorName: user.username,
+        });
+        message.success('状态更新成功');
+        fetchTickets();
+      } catch (error) {
+        message.error('状态更新失败');
+        console.error(error);
+      }
+    },
+    [fetchTickets]
+  );
 
-  const handleSearch = useCallback((values) => {
-    setSearchFilters(values);
-    fetchTickets(1, pagination.pageSize, values);
-  }, [fetchTickets, pagination.pageSize]);
+  const handleSearch = useCallback(
+    values => {
+      setSearchFilters(values);
+      fetchTickets(1, pagination.pageSize, values);
+    },
+    [fetchTickets, pagination.pageSize]
+  );
 
   const handleReset = useCallback(() => {
     searchForm.resetFields();
@@ -510,12 +685,15 @@ function TicketManagement() {
     fetchTickets(1, pagination.pageSize, {});
   }, [fetchTickets, pagination.pageSize]);
 
-  const handleTableChange = useCallback((paginationInfo) => {
-    setPagination(paginationInfo);
-    fetchTickets(paginationInfo.current, paginationInfo.pageSize, searchFilters);
-  }, [fetchTickets, searchFilters]);
+  const handleTableChange = useCallback(
+    paginationInfo => {
+      setPagination(paginationInfo);
+      fetchTickets(paginationInfo.current, paginationInfo.pageSize, searchFilters);
+    },
+    [fetchTickets, searchFilters]
+  );
 
-  const handleDeviceSourceChange = useCallback((value) => {
+  const handleDeviceSourceChange = useCallback(value => {
     setDeviceSource(value);
   }, []);
 
@@ -535,10 +713,18 @@ function TicketManagement() {
     }
     return (
       <>
-        <Form.Item name="deviceName" label="设备名称" rules={[{ required: true, message: '请输入设备名称' }]}>
+        <Form.Item
+          name="deviceName"
+          label="设备名称"
+          rules={[{ required: true, message: '请输入设备名称' }]}
+        >
           <Input placeholder="请输入设备名称" />
         </Form.Item>
-        <Form.Item name="serialNumber" label="设备序列号" rules={[{ required: true, message: '请输入设备序列号' }]}>
+        <Form.Item
+          name="serialNumber"
+          label="设备序列号"
+          rules={[{ required: true, message: '请输入设备序列号' }]}
+        >
           <Input placeholder="请输入设备序列号" />
         </Form.Item>
       </>
@@ -560,7 +746,11 @@ function TicketManagement() {
           items.push(
             <React.Fragment key="deviceSource">
               <Form.Item label="设备来源" required>
-                <Select value={deviceSource} onChange={handleDeviceSourceChange} style={{ width: 200 }}>
+                <Select
+                  value={deviceSource}
+                  onChange={handleDeviceSourceChange}
+                  style={{ width: 200 }}
+                >
                   <Option value="select">从设备管理选择</Option>
                   <Option value="manual">手动输入</Option>
                 </Select>
@@ -574,38 +764,88 @@ function TicketManagement() {
       }
     });
     return items;
-  }, [ticketFields, deviceSource, devices, handleDeviceSourceChange, renderDeviceFormItems, renderFormItem, editingTicket]);
+  }, [
+    ticketFields,
+    deviceSource,
+    devices,
+    handleDeviceSourceChange,
+    renderDeviceFormItems,
+    renderFormItem,
+    editingTicket,
+  ]);
 
-  const getActionItems = useCallback((record) => (
-    <Menu
-      items={[
-        { key: 'view', icon: <EyeOutlined />, label: '查看详情', onClick: () => fetchTicketDetail(record.ticketId) },
-        { key: 'process', icon: <ToolOutlined />, label: '处理工单', disabled: record.status === 'closed' || record.status === 'completed',
-          onClick: () => handleProcess(record) },
-        { type: 'divider' },
-        { key: 'pending', label: '标记为待处理', disabled: record.status !== 'pending',
-          onClick: () => handleStatusChange(record.ticketId, 'pending') },
-        { key: 'in_progress', label: '标记为处理中', disabled: record.status !== 'pending',
-          onClick: () => handleStatusChange(record.ticketId, 'in_progress') },
-        { key: 'completed', label: '标记为已完成', disabled: record.status === 'completed' || record.status === 'closed',
-          onClick: () => handleStatusChange(record.ticketId, 'completed') },
-        { key: 'closed', label: '标记为已关闭', disabled: record.status === 'closed',
-          onClick: () => handleStatusChange(record.ticketId, 'closed') },
-        { type: 'divider' },
-        { key: 'delete', icon: <DeleteOutlined />, label: '删除工单', danger: true,
-          onClick: () => handleDelete(record.ticketId) }
-      ]}
-    />
-  ), [fetchTicketDetail, handleProcess, handleStatusChange, handleDelete]);
+  const getActionItems = useCallback(
+    record => (
+      <Menu
+        items={[
+          {
+            key: 'view',
+            icon: <EyeOutlined />,
+            label: '查看详情',
+            onClick: () => fetchTicketDetail(record.ticketId),
+          },
+          {
+            key: 'process',
+            icon: <ToolOutlined />,
+            label: '处理工单',
+            disabled: record.status === 'closed' || record.status === 'completed',
+            onClick: () => handleProcess(record),
+          },
+          { type: 'divider' },
+          {
+            key: 'pending',
+            label: '标记为待处理',
+            disabled: record.status !== 'pending',
+            onClick: () => handleStatusChange(record.ticketId, 'pending'),
+          },
+          {
+            key: 'in_progress',
+            label: '标记为处理中',
+            disabled: record.status !== 'pending',
+            onClick: () => handleStatusChange(record.ticketId, 'in_progress'),
+          },
+          {
+            key: 'completed',
+            label: '标记为已完成',
+            disabled: record.status === 'completed' || record.status === 'closed',
+            onClick: () => handleStatusChange(record.ticketId, 'completed'),
+          },
+          {
+            key: 'closed',
+            label: '标记为已关闭',
+            disabled: record.status === 'closed',
+            onClick: () => handleStatusChange(record.ticketId, 'closed'),
+          },
+          { type: 'divider' },
+          {
+            key: 'delete',
+            icon: <DeleteOutlined />,
+            label: '删除工单',
+            danger: true,
+            onClick: () => handleDelete(record.ticketId),
+          },
+        ]}
+      />
+    ),
+    [fetchTicketDetail, handleProcess, handleStatusChange, handleDelete]
+  );
 
   return (
     <div style={{ padding: 24 }}>
-      <Card title="工单管理" extra={
-        <Button type="primary" icon={<PlusOutlined />} onClick={() => showModal()}>
-          创建工单
-        </Button>
-      }>
-        <Form form={searchForm} layout="inline" onFinish={handleSearch} style={{ marginBottom: 16 }}>
+      <Card
+        title="工单管理"
+        extra={
+          <Button type="primary" icon={<PlusOutlined />} onClick={() => showModal()}>
+            创建工单
+          </Button>
+        }
+      >
+        <Form
+          form={searchForm}
+          layout="inline"
+          onFinish={handleSearch}
+          style={{ marginBottom: 16 }}
+        >
           <Form.Item name="keyword" label="关键词">
             <Input placeholder="标题/设备/描述" allowClear style={{ width: 200 }} />
           </Form.Item>
@@ -628,7 +868,9 @@ function TicketManagement() {
           <Form.Item name="faultCategory" label="故障分类">
             <Select placeholder="选择分类" allowClear style={{ width: 150 }}>
               {categories.map(cat => (
-                <Option key={cat.categoryId} value={cat.name}>{cat.name}</Option>
+                <Option key={cat.categoryId} value={cat.name}>
+                  {cat.name}
+                </Option>
               ))}
             </Select>
           </Form.Item>
@@ -653,7 +895,7 @@ function TicketManagement() {
           columnsState={{
             onChange: ({ visibleColumns }) => {
               localStorage.setItem('ticketVisibleColumns', JSON.stringify(visibleColumns));
-            }
+            },
           }}
         />
       </Card>
@@ -734,13 +976,18 @@ function TicketManagement() {
             关闭
           </Button>,
           selectedTicket?.status !== 'closed' && selectedTicket?.status !== 'completed' && (
-            <Button key="process" type="primary" icon={<ToolOutlined />} onClick={() => {
-              setDetailModalVisible(false);
-              handleProcess(selectedTicket);
-            }}>
+            <Button
+              key="process"
+              type="primary"
+              icon={<ToolOutlined />}
+              onClick={() => {
+                setDetailModalVisible(false);
+                handleProcess(selectedTicket);
+              }}
+            >
               处理工单
             </Button>
-          )
+          ),
         ]}
         width={900}
       >
@@ -751,8 +998,12 @@ function TicketManagement() {
                 <Descriptions.Item label="工单编号">{selectedTicket.ticketId}</Descriptions.Item>
                 <Descriptions.Item label="标题">{selectedTicket.title}</Descriptions.Item>
                 <Descriptions.Item label="设备名称">{selectedTicket.deviceName}</Descriptions.Item>
-                <Descriptions.Item label="设备序列号">{selectedTicket.serialNumber}</Descriptions.Item>
-                <Descriptions.Item label="故障分类">{selectedTicket.faultCategory}</Descriptions.Item>
+                <Descriptions.Item label="设备序列号">
+                  {selectedTicket.serialNumber}
+                </Descriptions.Item>
+                <Descriptions.Item label="故障分类">
+                  {selectedTicket.faultCategory}
+                </Descriptions.Item>
                 <Descriptions.Item label="优先级">
                   <Tag color={getPriorityColor(selectedTicket.priority)}>
                     {getPriorityText(selectedTicket.priority)}
@@ -765,17 +1016,29 @@ function TicketManagement() {
                 </Descriptions.Item>
                 <Descriptions.Item label="报告人">{selectedTicket.reporterName}</Descriptions.Item>
                 <Descriptions.Item label="创建时间">
-                  {selectedTicket.createdAt ? dayjs(selectedTicket.createdAt).format('YYYY-MM-DD HH:mm:ss') : '-'}
+                  {selectedTicket.createdAt
+                    ? dayjs(selectedTicket.createdAt).format('YYYY-MM-DD HH:mm:ss')
+                    : '-'}
                 </Descriptions.Item>
                 <Descriptions.Item label="期望完成时间">
-                  {selectedTicket.expectedCompletionDate ? dayjs(selectedTicket.expectedCompletionDate).format('YYYY-MM-DD HH:mm:ss') : '-'}
+                  {selectedTicket.expectedCompletionDate
+                    ? dayjs(selectedTicket.expectedCompletionDate).format('YYYY-MM-DD HH:mm:ss')
+                    : '-'}
                 </Descriptions.Item>
                 <Descriptions.Item label="完成时间" span={2}>
-                  {selectedTicket.completionDate ? dayjs(selectedTicket.completionDate).format('YYYY-MM-DD HH:mm:ss') : '-'}
+                  {selectedTicket.completionDate
+                    ? dayjs(selectedTicket.completionDate).format('YYYY-MM-DD HH:mm:ss')
+                    : '-'}
+                </Descriptions.Item>
+                <Descriptions.Item label="故障描述" span={2}>
+                  {selectedTicket.description || '-'}
+                </Descriptions.Item>
+                <Descriptions.Item label="解决方案" span={2}>
+                  {selectedTicket.resolution || '-'}
+                </Descriptions.Item>
+                <Descriptions.Item label="备注" span={2}>
+                  {selectedTicket.notes || '-'}
                 </Descriptions.Item>
-                <Descriptions.Item label="故障描述" span={2}>{selectedTicket.description || '-'}</Descriptions.Item>
-                <Descriptions.Item label="解决方案" span={2}>{selectedTicket.resolution || '-'}</Descriptions.Item>
-                <Descriptions.Item label="备注" span={2}>{selectedTicket.notes || '-'}</Descriptions.Item>
               </Descriptions>
             </TabPane>
 
@@ -785,18 +1048,24 @@ function TicketManagement() {
                   <Timeline.Item
                     key={index}
                     label={dayjs(record.createdAt).format('YYYY-MM-DD HH:mm:ss')}
-                    color={record.operationType === 'create' ? 'green' :
-                           record.operationType === 'complete' ? 'blue' :
-                           record.operationType === 'close' ? 'gray' : 'orange'}
+                    color={
+                      record.operationType === 'create'
+                        ? 'green'
+                        : record.operationType === 'complete'
+                          ? 'blue'
+                          : record.operationType === 'close'
+                            ? 'gray'
+                            : 'orange'
+                    }
                   >
-                    <div><strong>{record.operationType}</strong></div>
+                    <div>
+                      <strong>{record.operationType}</strong>
+                    </div>
                     <div>操作人: {record.operatorName || '-'}</div>
                     <div>内容: {record.operationDescription || '-'}</div>
                   </Timeline.Item>
                 ))}
-                {operationRecords.length === 0 && (
-                  <p style={{ color: '#888' }}>暂无操作记录</p>
-                )}
+                {operationRecords.length === 0 && <p style={{ color: '#888' }}>暂无操作记录</p>}
               </Timeline>
             </TabPane>
           </Tabs>
diff --git a/frontend/src/pages/TicketStatistics.jsx b/frontend/src/pages/TicketStatistics.jsx
index b02a29a..1423f21 100644
--- a/frontend/src/pages/TicketStatistics.jsx
+++ b/frontend/src/pages/TicketStatistics.jsx
@@ -1,60 +1,65 @@
 import React, { useState, useEffect, useCallback, useMemo } from 'react';
 import { Card, Row, Col, Statistic, Table, DatePicker, Select, Space, Tag, message } from 'antd';
-import { BarChartOutlined, PieChartOutlined, RiseOutlined, FallOutlined, ClockCircleOutlined, CheckCircleOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
+import {
+  BarChartOutlined,
+  PieChartOutlined,
+  RiseOutlined,
+  FallOutlined,
+  ClockCircleOutlined,
+  CheckCircleOutlined,
+  ExclamationCircleOutlined,
+} from '@ant-design/icons';
 import axios from 'axios';
 import dayjs from 'dayjs';
 
 const { RangePicker } = DatePicker;
 const { Option } = Select;
 
-const getStatusColor = (status) => {
+const getStatusColor = status => {
   const colors = {
     pending: 'orange',
     assigned: 'blue',
     in_progress: 'processing',
     completed: 'green',
-    closed: 'default'
+    closed: 'default',
   };
   return colors[status] || 'default';
 };
 
-const getStatusText = (status) => {
+const getStatusText = status => {
   const texts = {
     pending: '待处理',
     assigned: '已分配',
     in_progress: '处理中',
     completed: '已完成',
-    closed: '已关闭'
+    closed: '已关闭',
   };
   return texts[status] || status;
 };
 
-const getPriorityColor = (priority) => {
+const getPriorityColor = priority => {
   const colors = {
     low: 'green',
     medium: 'orange',
     high: 'red',
-    urgent: 'magenta'
+    urgent: 'magenta',
   };
   return colors[priority] || 'default';
 };
 
-const getPriorityText = (priority) => {
+const getPriorityText = priority => {
   const texts = {
     low: '低',
     medium: '中',
     high: '高',
-    urgent: '紧急'
+    urgent: '紧急',
   };
   return texts[priority] || priority;
 };
 
 function TicketStatistics() {
   const [loading, setLoading] = useState(true);
-  const [dateRange, setDateRange] = useState([
-    dayjs().subtract(30, 'days'),
-    dayjs()
-  ]);
+  const [dateRange, setDateRange] = useState([dayjs().subtract(30, 'days'), dayjs()]);
   const [statistics, setStatistics] = useState({
     total: 0,
     pending: 0,
@@ -66,7 +71,7 @@ function TicketStatistics() {
     byPriority: [],
     byStatus: [],
     byDevice: [],
-    trend: []
+    trend: [],
   });
 
   const fetchStatistics = useCallback(async () => {
@@ -74,7 +79,7 @@ function TicketStatistics() {
       setLoading(true);
       const params = {
         startDate: dateRange[0].format('YYYY-MM-DD'),
-        endDate: dateRange[1].format('YYYY-MM-DD')
+        endDate: dateRange[1].format('YYYY-MM-DD'),
       };
 
       const response = await axios.get('/api/tickets/statistics', { params });
@@ -91,192 +96,198 @@ function TicketStatistics() {
     fetchStatistics();
   }, [fetchStatistics]);
 
-  const handleDateChange = useCallback((dates) => {
+  const handleDateChange = useCallback(dates => {
     if (dates) {
       setDateRange(dates);
     }
   }, []);
 
-  const getStatusColor = (status) => {
+  const getStatusColor = status => {
     const colors = {
       pending: 'orange',
       assigned: 'blue',
       in_progress: 'processing',
       completed: 'green',
-      closed: 'default'
+      closed: 'default',
     };
     return colors[status] || 'default';
   };
 
-  const getStatusText = (status) => {
+  const getStatusText = status => {
     const texts = {
       pending: '待处理',
       assigned: '已分配',
       in_progress: '处理中',
       completed: '已完成',
-      closed: '已关闭'
+      closed: '已关闭',
     };
     return texts[status] || status;
   };
 
-  const getPriorityColor = (priority) => {
+  const getPriorityColor = priority => {
     const colors = {
       low: 'green',
       medium: 'orange',
       high: 'red',
-      urgent: 'magenta'
+      urgent: 'magenta',
     };
     return colors[priority] || 'default';
   };
 
-  const getPriorityText = (priority) => {
+  const getPriorityText = priority => {
     const texts = {
       low: '低',
       medium: '中',
       high: '高',
-      urgent: '紧急'
+      urgent: '紧急',
     };
     return texts[priority] || priority;
   };
 
-  const statusColumns = useMemo(() => [
-    {
-      title: '状态',
-      dataIndex: 'status',
-      key: 'status',
-      width: 120,
-      render: (status) => (
-        <Tag color={getStatusColor(status)}>
-          {getStatusText(status)}
-        </Tag>
-      )
-    },
-    {
-      title: '工单数量',
-      dataIndex: 'count',
-      key: 'count',
-      width: 120,
-      render: (count) => <Statistic value={count} valueStyle={{ fontSize: 16 }} />
-    },
-    {
-      title: '占比',
-      dataIndex: 'percentage',
-      key: 'percentage',
-      width: 120,
-      render: (pct) => (
-        <span style={{ color: pct > 30 ? '#ff4d4f' : '#52c41a' }}>
-          {pct !== undefined && pct !== null ? `${pct.toFixed(1)}%` : '-'}
-        </span>
-      )
-    }
-  ], []);
+  const statusColumns = useMemo(
+    () => [
+      {
+        title: '状态',
+        dataIndex: 'status',
+        key: 'status',
+        width: 120,
+        render: status => <Tag color={getStatusColor(status)}>{getStatusText(status)}</Tag>,
+      },
+      {
+        title: '工单数量',
+        dataIndex: 'count',
+        key: 'count',
+        width: 120,
+        render: count => <Statistic value={count} valueStyle={{ fontSize: 16 }} />,
+      },
+      {
+        title: '占比',
+        dataIndex: 'percentage',
+        key: 'percentage',
+        width: 120,
+        render: pct => (
+          <span style={{ color: pct > 30 ? '#ff4d4f' : '#52c41a' }}>
+            {pct !== undefined && pct !== null ? `${pct.toFixed(1)}%` : '-'}
+          </span>
+        ),
+      },
+    ],
+    []
+  );
 
-  const categoryColumns = useMemo(() => [
-    {
-      title: '故障分类',
-      dataIndex: 'category',
-      key: 'category',
-      width: 150
-    },
-    {
-      title: '工单数量',
-      dataIndex: 'count',
-      key: 'count',
-      width: 120,
-      render: (count) => <Statistic value={count} valueStyle={{ fontSize: 16 }} />
-    },
-    {
-      title: '占比',
-      dataIndex: 'percentage',
-      key: 'percentage',
-      width: 100,
-      render: (pct) => `${pct !== undefined && pct !== null ? pct.toFixed(1) : 0}%`
-    },
-    {
-      title: '已完成',
-      dataIndex: 'completed',
-      key: 'completed',
-      width: 100,
-      render: (count) => <Tag color="green">{count}</Tag>
-    },
-    {
-      title: '平均处理时间(小时)',
-      dataIndex: 'avgTime',
-      key: 'avgTime',
-      width: 150,
-      render: (time) => time !== undefined && time !== null ? time.toFixed(1) : '-'
-    }
-  ], []);
+  const categoryColumns = useMemo(
+    () => [
+      {
+        title: '故障分类',
+        dataIndex: 'category',
+        key: 'category',
+        width: 150,
+      },
+      {
+        title: '工单数量',
+        dataIndex: 'count',
+        key: 'count',
+        width: 120,
+        render: count => <Statistic value={count} valueStyle={{ fontSize: 16 }} />,
+      },
+      {
+        title: '占比',
+        dataIndex: 'percentage',
+        key: 'percentage',
+        width: 100,
+        render: pct => `${pct !== undefined && pct !== null ? pct.toFixed(1) : 0}%`,
+      },
+      {
+        title: '已完成',
+        dataIndex: 'completed',
+        key: 'completed',
+        width: 100,
+        render: count => <Tag color="green">{count}</Tag>,
+      },
+      {
+        title: '平均处理时间(小时)',
+        dataIndex: 'avgTime',
+        key: 'avgTime',
+        width: 150,
+        render: time => (time !== undefined && time !== null ? time.toFixed(1) : '-'),
+      },
+    ],
+    []
+  );
 
-  const priorityColumns = useMemo(() => [
-    {
-      title: '优先级',
-      dataIndex: 'priority',
-      key: 'priority',
-      width: 100,
-      render: (priority) => (
-        <Tag color={getPriorityColor(priority)}>
-          {getPriorityText(priority)}
-        </Tag>
-      )
-    },
-    {
-      title: '工单数量',
-      dataIndex: 'count',
-      key: 'count',
-      width: 120,
-      render: (count) => <Statistic value={count} valueStyle={{ fontSize: 16 }} />
-    },
-    {
-      title: '已完成',
-      dataIndex: 'completed',
-      key: 'completed',
-      width: 100,
-      render: (count) => <Tag color="green">{count}</Tag>
-    },
-    {
-      title: '平均处理时间(小时)',
-      dataIndex: 'avgTime',
-      key: 'avgTime',
-      width: 150,
-      render: (time) => time !== undefined && time !== null ? time.toFixed(1) : '-'
-    }
-  ], []);
+  const priorityColumns = useMemo(
+    () => [
+      {
+        title: '优先级',
+        dataIndex: 'priority',
+        key: 'priority',
+        width: 100,
+        render: priority => (
+          <Tag color={getPriorityColor(priority)}>{getPriorityText(priority)}</Tag>
+        ),
+      },
+      {
+        title: '工单数量',
+        dataIndex: 'count',
+        key: 'count',
+        width: 120,
+        render: count => <Statistic value={count} valueStyle={{ fontSize: 16 }} />,
+      },
+      {
+        title: '已完成',
+        dataIndex: 'completed',
+        key: 'completed',
+        width: 100,
+        render: count => <Tag color="green">{count}</Tag>,
+      },
+      {
+        title: '平均处理时间(小时)',
+        dataIndex: 'avgTime',
+        key: 'avgTime',
+        width: 150,
+        render: time => (time !== undefined && time !== null ? time.toFixed(1) : '-'),
+      },
+    ],
+    []
+  );
 
-  const deviceColumns = useMemo(() => [
-    {
-      title: '设备名称',
-      dataIndex: 'deviceName',
-      key: 'deviceName',
-      width: 180
-    },
-    {
-      title: '故障次数',
-      dataIndex: 'count',
-      key: 'count',
-      width: 100,
-      render: (count) => <Tag color="red">{count}</Tag>
-    },
-    {
-      title: '最后故障时间',
-      dataIndex: 'lastFaultTime',
-      key: 'lastFaultTime',
-      width: 160,
-      render: (text) => text ? dayjs(text).format('YYYY-MM-DD HH:mm') : '-'
-    },
-    {
-      title: '设备类型',
-      dataIndex: 'deviceType',
-      key: 'deviceType',
-      width: 100
-    }
-  ], []);
+  const deviceColumns = useMemo(
+    () => [
+      {
+        title: '设备名称',
+        dataIndex: 'deviceName',
+        key: 'deviceName',
+        width: 180,
+      },
+      {
+        title: '故障次数',
+        dataIndex: 'count',
+        key: 'count',
+        width: 100,
+        render: count => <Tag color="red">{count}</Tag>,
+      },
+      {
+        title: '最后故障时间',
+        dataIndex: 'lastFaultTime',
+        key: 'lastFaultTime',
+        width: 160,
+        render: text => (text ? dayjs(text).format('YYYY-MM-DD HH:mm') : '-'),
+      },
+      {
+        title: '设备类型',
+        dataIndex: 'deviceType',
+        key: 'deviceType',
+        width: 100,
+      },
+    ],
+    []
+  );
 
   const simpleBarData = [
     { name: '待处理', value: statistics.pending },
     { name: '处理中', value: statistics.inProgress },
     { name: '已完成', value: statistics.completed },
-    { name: '已关闭', value: statistics.closed }
+    { name: '已关闭', value: statistics.closed },
   ];
 
   return (
@@ -285,11 +296,7 @@ function TicketStatistics() {
         title="工单统计报表"
         extra={
           <Space>
-            <RangePicker
-              value={dateRange}
-              onChange={handleDateChange}
-              allowClear={false}
-            />
+            <RangePicker value={dateRange} onChange={handleDateChange} allowClear={false} />
           </Space>
         }
       >
@@ -362,7 +369,11 @@ function TicketStatistics() {
             <Card bordered={false} style={{ background: '#fff1f0' }}>
               <Statistic
                 title="完成率"
-                value={statistics.total > 0 ? ((statistics.completed / statistics.total) * 100).toFixed(1) : 0}
+                value={
+                  statistics.total > 0
+                    ? ((statistics.completed / statistics.total) * 100).toFixed(1)
+                    : 0
+                }
                 suffix="%"
                 prefix={<PieChartOutlined style={{ color: '#ff4d4f' }} />}
                 valueStyle={{ color: '#ff4d4f' }}
@@ -373,7 +384,11 @@ function TicketStatistics() {
             <Card bordered={false} style={{ background: '#f6ffed' }}>
               <Statistic
                 title="处理中占比"
-                value={statistics.total > 0 ? ((statistics.inProgress / statistics.total) * 100).toFixed(1) : 0}
+                value={
+                  statistics.total > 0
+                    ? ((statistics.inProgress / statistics.total) * 100).toFixed(1)
+                    : 0
+                }
                 suffix="%"
                 prefix={<RiseOutlined style={{ color: '#52c41a' }} />}
                 valueStyle={{ color: '#52c41a' }}
@@ -446,43 +461,43 @@ function TicketStatistics() {
                   dataIndex: 'date',
                   key: 'date',
                   width: 120,
-                  render: (text) => text ? dayjs(text).format('YYYY-MM-DD') : '-'
+                  render: text => (text ? dayjs(text).format('YYYY-MM-DD') : '-'),
                 },
                 {
                   title: '新建工单',
                   dataIndex: 'created',
                   key: 'created',
                   width: 100,
-                  render: (count) => <Tag color="blue">{count}</Tag>
+                  render: count => <Tag color="blue">{count}</Tag>,
                 },
                 {
                   title: '已完成',
                   dataIndex: 'completed',
                   key: 'completed',
                   width: 100,
-                  render: (count) => <Tag color="green">{count}</Tag>
+                  render: count => <Tag color="green">{count}</Tag>,
                 },
                 {
                   title: '关闭工单',
                   dataIndex: 'closed',
                   key: 'closed',
                   width: 100,
-                  render: (count) => <Tag color="default">{count}</Tag>
+                  render: count => <Tag color="default">{count}</Tag>,
                 },
                 {
                   title: '当日处理中',
                   dataIndex: 'inProgress',
                   key: 'inProgress',
                   width: 120,
-                  render: (count) => <Tag color="processing">{count}</Tag>
+                  render: count => <Tag color="processing">{count}</Tag>,
                 },
                 {
                   title: '新增待处理',
                   dataIndex: 'pending',
                   key: 'pending',
                   width: 120,
-                  render: (count) => <Tag color="orange">{count}</Tag>
-                }
+                  render: count => <Tag color="orange">{count}</Tag>,
+                },
               ]}
               dataSource={statistics.trend}
               rowKey="date"
diff --git a/frontend/src/pages/UserManagement.jsx b/frontend/src/pages/UserManagement.jsx
index 003ff89..42e6607 100644
--- a/frontend/src/pages/UserManagement.jsx
+++ b/frontend/src/pages/UserManagement.jsx
@@ -1,6 +1,31 @@
 import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
-import { Card, Table, Button, Space, Modal, Form, Input, Select, message, Tag, Popconfirm, Avatar, Tooltip, Badge } from 'antd';
-import { PlusOutlined, EditOutlined, DeleteOutlined, UserOutlined, ReloadOutlined, LockOutlined, CameraOutlined, CheckOutlined, CloseOutlined } from '@ant-design/icons';
+import {
+  Card,
+  Table,
+  Button,
+  Space,
+  Modal,
+  Form,
+  Input,
+  Select,
+  message,
+  Tag,
+  Popconfirm,
+  Avatar,
+  Tooltip,
+  Badge,
+} from 'antd';
+import {
+  PlusOutlined,
+  EditOutlined,
+  DeleteOutlined,
+  UserOutlined,
+  ReloadOutlined,
+  LockOutlined,
+  CameraOutlined,
+  CheckOutlined,
+  CloseOutlined,
+} from '@ant-design/icons';
 import { userAPI, roleAPI } from '../api';
 
 const { Option } = Select;
@@ -32,7 +57,7 @@ const UserManagement = () => {
     try {
       const params = {
         page: pagination.current,
-        pageSize: pagination.pageSize
+        pageSize: pagination.pageSize,
       };
       if (activeTab !== 'all') {
         params.status = activeTab;
@@ -69,7 +94,7 @@ const UserManagement = () => {
     setModalVisible(true);
   }, []);
 
-  const handleEdit = useCallback((user) => {
+  const handleEdit = useCallback(user => {
     setEditingUser(user);
     form.setFieldsValue({
       username: user.username,
@@ -77,55 +102,58 @@ const UserManagement = () => {
       phone: user.phone,
       realName: user.realName,
       status: user.status,
-      roleIds: user.roles?.map(r => r.roleId) || []
+      roleIds: user.roles?.map(r => r.roleId) || [],
     });
     setModalVisible(true);
   }, []);
 
-  const handleResetPassword = useCallback((user) => {
+  const handleResetPassword = useCallback(user => {
     setPasswordUser(user);
     passwordForm.resetFields();
     setPasswordModalVisible(true);
   }, []);
 
-  const handleAvatarClick = useCallback((user) => {
+  const handleAvatarClick = useCallback(user => {
     setAvatarUser(user);
     setAvatarModalVisible(true);
   }, []);
 
-  const handleAvatarUpload = useCallback(async (e) => {
-    const file = e.target.files[0];
-    if (!file) return;
+  const handleAvatarUpload = useCallback(
+    async e => {
+      const file = e.target.files[0];
+      if (!file) return;
 
-    if (!file.type.match(/image\/(jpeg|png|gif|webp)/)) {
-      message.error('只支持 JPG、PNG、GIF 和 WebP 格式的图片');
-      return;
-    }
-
-    if (file.size > 5 * 1024 * 1024) {
-      message.error('图片大小不能超过 5MB');
-      return;
-    }
-
-    setUploadLoading(true);
-    try {
-      const response = await userAPI.uploadAvatar(avatarUser.userId, file);
-      if (response.success) {
-        message.success('头像上传成功');
-        fetchUsers();
-        setAvatarModalVisible(false);
-      } else {
-        message.error(response.message || '上传失败');
+      if (!file.type.match(/image\/(jpeg|png|gif|webp)/)) {
+        message.error('只支持 JPG、PNG、GIF 和 WebP 格式的图片');
+        return;
       }
-    } catch (error) {
-      message.error('上传失败');
-    } finally {
-      setUploadLoading(false);
-      if (fileInputRef.current) {
-        fileInputRef.current.value = '';
+
+      if (file.size > 5 * 1024 * 1024) {
+        message.error('图片大小不能超过 5MB');
+        return;
       }
-    }
-  }, [avatarUser, fetchUsers]);
+
+      setUploadLoading(true);
+      try {
+        const response = await userAPI.uploadAvatar(avatarUser.userId, file);
+        if (response.success) {
+          message.success('头像上传成功');
+          fetchUsers();
+          setAvatarModalVisible(false);
+        } else {
+          message.error(response.message || '上传失败');
+        }
+      } catch (error) {
+        message.error('上传失败');
+      } finally {
+        setUploadLoading(false);
+        if (fileInputRef.current) {
+          fileInputRef.current.value = '';
+        }
+      }
+    },
+    [avatarUser, fetchUsers]
+  );
 
   const handleAvatarDelete = useCallback(async () => {
     try {
@@ -142,283 +170,302 @@ const UserManagement = () => {
     }
   }, [avatarUser, fetchUsers]);
 
-  const handleDelete = useCallback(async (userId) => {
-    try {
-      const response = await userAPI.delete(userId);
-      if (response.success) {
-        message.success('删除成功');
-        fetchUsers();
-      } else {
-        message.error(response.message || '删除失败');
+  const handleDelete = useCallback(
+    async userId => {
+      try {
+        const response = await userAPI.delete(userId);
+        if (response.success) {
+          message.success('删除成功');
+          fetchUsers();
+        } else {
+          message.error(response.message || '删除失败');
+        }
+      } catch (error) {
+        message.error('删除失败');
       }
-    } catch (error) {
-      message.error('删除失败');
-    }
-  }, [fetchUsers]);
+    },
+    [fetchUsers]
+  );
 
-  const handleLockUnlock = useCallback(async (record) => {
-    try {
-      const newStatus = record.status === 'locked' ? 'active' : 'locked';
-      const response = await userAPI.update(record.userId, {
-        status: newStatus
-      });
-      if (response.success) {
-        message.success(record.status === 'locked' ? '解锁成功' : '锁定成功');
-        fetchUsers();
-      } else {
-        message.error(response.message || '操作失败');
+  const handleLockUnlock = useCallback(
+    async record => {
+      try {
+        const newStatus = record.status === 'locked' ? 'active' : 'locked';
+        const response = await userAPI.update(record.userId, {
+          status: newStatus,
+        });
+        if (response.success) {
+          message.success(record.status === 'locked' ? '解锁成功' : '锁定成功');
+          fetchUsers();
+        } else {
+          message.error(response.message || '操作失败');
+        }
+      } catch (error) {
+        message.error('操作失败');
       }
-    } catch (error) {
-      message.error('操作失败');
-    }
-  }, [fetchUsers]);
+    },
+    [fetchUsers]
+  );
 
-  const handleSubmit = useCallback(async (values) => {
-    try {
-      let response;
-      if (editingUser) {
-        response = await userAPI.update(editingUser.userId, values);
-      } else {
-        response = await userAPI.create(values);
+  const handleSubmit = useCallback(
+    async values => {
+      try {
+        let response;
+        if (editingUser) {
+          response = await userAPI.update(editingUser.userId, values);
+        } else {
+          response = await userAPI.create(values);
+        }
+
+        if (response.success) {
+          message.success(editingUser ? '更新成功' : '创建成功');
+          setModalVisible(false);
+          fetchUsers();
+        } else {
+          message.error(response.message || '操作失败');
+        }
+      } catch (error) {
+        message.error('操作失败');
       }
+    },
+    [editingUser, fetchUsers]
+  );
 
-      if (response.success) {
-        message.success(editingUser ? '更新成功' : '创建成功');
-        setModalVisible(false);
-        fetchUsers();
-      } else {
-        message.error(response.message || '操作失败');
+  const handleResetPasswordSubmit = useCallback(
+    async values => {
+      try {
+        const response = await userAPI.resetPassword(passwordUser.userId, values);
+        if (response.success) {
+          message.success('密码重置成功');
+          setPasswordModalVisible(false);
+        } else {
+          message.error(response.message || '重置失败');
+        }
+      } catch (error) {
+        message.error('重置失败');
       }
-    } catch (error) {
-      message.error('操作失败');
-    }
-  }, [editingUser, fetchUsers]);
+    },
+    [passwordUser]
+  );
 
-  const handleResetPasswordSubmit = useCallback(async (values) => {
-    try {
-      const response = await userAPI.resetPassword(passwordUser.userId, values);
-      if (response.success) {
-        message.success('密码重置成功');
-        setPasswordModalVisible(false);
-      } else {
-        message.error(response.message || '重置失败');
-      }
-    } catch (error) {
-      message.error('重置失败');
-    }
-  }, [passwordUser]);
-
-  const getStatusColor = (status) => {
+  const getStatusColor = status => {
     const colors = {
       active: 'green',
       inactive: 'red',
       locked: 'orange',
-      pending: 'blue'
+      pending: 'blue',
     };
     return colors[status] || 'default';
   };
 
-  const getStatusText = (status) => {
+  const getStatusText = status => {
     const texts = {
       active: '正常',
       inactive: '禁用',
       locked: '锁定',
-      pending: '待审核'
+      pending: '待审核',
     };
     return texts[status] || status;
   };
 
-  const handleApprove = useCallback(async (userId) => {
-    try {
-      const response = await userAPI.approve(userId);
-      if (response.success) {
-        message.success('审核通过');
-        fetchUsers();
-      } else {
-        message.error(response.message || '审核失败');
+  const handleApprove = useCallback(
+    async userId => {
+      try {
+        const response = await userAPI.approve(userId);
+        if (response.success) {
+          message.success('审核通过');
+          fetchUsers();
+        } else {
+          message.error(response.message || '审核失败');
+        }
+      } catch (error) {
+        message.error('审核失败');
       }
-    } catch (error) {
-      message.error('审核失败');
-    }
-  }, [fetchUsers]);
+    },
+    [fetchUsers]
+  );
 
-  const handleReject = useCallback(async (userId) => {
-    try {
-      const response = await userAPI.reject(userId);
-      if (response.success) {
-        message.success('已拒绝该用户的注册申请');
-        fetchUsers();
-      } else {
-        message.error(response.message || '操作失败');
+  const handleReject = useCallback(
+    async userId => {
+      try {
+        const response = await userAPI.reject(userId);
+        if (response.success) {
+          message.success('已拒绝该用户的注册申请');
+          fetchUsers();
+        } else {
+          message.error(response.message || '操作失败');
+        }
+      } catch (error) {
+        message.error('操作失败');
       }
-    } catch (error) {
-      message.error('操作失败');
-    }
-  }, [fetchUsers]);
+    },
+    [fetchUsers]
+  );
 
-  const getAvatarUrl = (user) => {
+  const getAvatarUrl = user => {
     if (!user?.avatar) return null;
     return user.avatar;
   };
 
-  const tableColumns = useMemo(() => [
-    {
-      title: '头像',
-      key: 'avatar',
-      width: 80,
-      render: (_, record) => (
-        <Badge dot={!!record.avatar} color="green" offset={[-5, 35]}>
-          <Avatar
-            size={48}
-            icon={!record.avatar && <UserOutlined />}
-            src={getAvatarUrl(record)}
-            style={{ 
-              backgroundColor: record.avatar ? 'transparent' : '#1890ff',
-              cursor: 'pointer'
-            }}
-            onClick={() => handleAvatarClick(record)}
-          />
-        </Badge>
-      )
-    },
-    {
-      title: '用户名',
-      key: 'username',
-      width: 150,
-      render: (_, record) => (
-        <div>
-          <div style={{ fontWeight: 500 }}>{record.realName || record.username}</div>
-          <div style={{ fontSize: '12px', color: '#999' }}>@{record.username}</div>
-        </div>
-      )
-    },
-    {
-      title: '邮箱',
-      dataIndex: 'email',
-      key: 'email',
-      width: 200,
-      render: (email) => email || '-'
-    },
-    {
-      title: '手机号',
-      dataIndex: 'phone',
-      key: 'phone',
-      width: 130,
-      render: (phone) => phone || '-'
-    },
-    {
-      title: '角色',
-      key: 'roles',
-      render: (_, record) => (
-        <Space wrap>
-          {record.roles?.map(role => (
-            <Tag key={role.roleId} color={role.roleCode === 'admin' ? 'blue' : 'green'}>
-              {role.roleName}
-            </Tag>
-          )) || '-'}
-        </Space>
-      )
-    },
-    {
-      title: '状态',
-      dataIndex: 'status',
-      key: 'status',
-      render: (status) => (
-        <Tag color={getStatusColor(status)}>{getStatusText(status)}</Tag>
-      )
-    },
-    {
-      title: '最后登录',
-      key: 'lastLogin',
-      render: (_, record) => (
-        <div style={{ fontSize: '12px' }}>
-          <div>{record.lastLoginTime ? new Date(record.lastLoginTime).toLocaleString() : '从未登录'}</div>
-          <div style={{ color: '#999' }}>{record.lastLoginIp || '-'}</div>
-        </div>
-      )
-    },
-    {
-      title: '操作',
-      key: 'action',
-      render: (_, record) => (
-        <Space size="small">
-          {record.status === 'pending' ? (
-            <>
-              <Popconfirm
-                title="确定要通过该用户的注册申请吗？"
-                onConfirm={() => handleApprove(record.userId)}
-                okText="通过"
-                cancelText="取消"
-              >
-                <Tooltip title="通过">
+  const tableColumns = useMemo(
+    () => [
+      {
+        title: '头像',
+        key: 'avatar',
+        width: 80,
+        render: (_, record) => (
+          <Badge dot={!!record.avatar} color="green" offset={[-5, 35]}>
+            <Avatar
+              size={48}
+              icon={!record.avatar && <UserOutlined />}
+              src={getAvatarUrl(record)}
+              style={{
+                backgroundColor: record.avatar ? 'transparent' : '#1890ff',
+                cursor: 'pointer',
+              }}
+              onClick={() => handleAvatarClick(record)}
+            />
+          </Badge>
+        ),
+      },
+      {
+        title: '用户名',
+        key: 'username',
+        width: 150,
+        render: (_, record) => (
+          <div>
+            <div style={{ fontWeight: 500 }}>{record.realName || record.username}</div>
+            <div style={{ fontSize: '12px', color: '#999' }}>@{record.username}</div>
+          </div>
+        ),
+      },
+      {
+        title: '邮箱',
+        dataIndex: 'email',
+        key: 'email',
+        width: 200,
+        render: email => email || '-',
+      },
+      {
+        title: '手机号',
+        dataIndex: 'phone',
+        key: 'phone',
+        width: 130,
+        render: phone => phone || '-',
+      },
+      {
+        title: '角色',
+        key: 'roles',
+        render: (_, record) => (
+          <Space wrap>
+            {record.roles?.map(role => (
+              <Tag key={role.roleId} color={role.roleCode === 'admin' ? 'blue' : 'green'}>
+                {role.roleName}
+              </Tag>
+            )) || '-'}
+          </Space>
+        ),
+      },
+      {
+        title: '状态',
+        dataIndex: 'status',
+        key: 'status',
+        render: status => <Tag color={getStatusColor(status)}>{getStatusText(status)}</Tag>,
+      },
+      {
+        title: '最后登录',
+        key: 'lastLogin',
+        render: (_, record) => (
+          <div style={{ fontSize: '12px' }}>
+            <div>
+              {record.lastLoginTime ? new Date(record.lastLoginTime).toLocaleString() : '从未登录'}
+            </div>
+            <div style={{ color: '#999' }}>{record.lastLoginIp || '-'}</div>
+          </div>
+        ),
+      },
+      {
+        title: '操作',
+        key: 'action',
+        render: (_, record) => (
+          <Space size="small">
+            {record.status === 'pending' ? (
+              <>
+                <Popconfirm
+                  title="确定要通过该用户的注册申请吗？"
+                  onConfirm={() => handleApprove(record.userId)}
+                  okText="通过"
+                  cancelText="取消"
+                >
+                  <Tooltip title="通过">
+                    <Button type="text" icon={<CheckOutlined />} style={{ color: '#52c41a' }} />
+                  </Tooltip>
+                </Popconfirm>
+                <Popconfirm
+                  title="确定要拒绝该用户的注册申请吗？"
+                  onConfirm={() => handleReject(record.userId)}
+                  okText="拒绝"
+                  cancelText="取消"
+                >
+                  <Tooltip title="拒绝">
+                    <Button type="text" icon={<CloseOutlined />} style={{ color: '#ff4d4f' }} />
+                  </Tooltip>
+                </Popconfirm>
+              </>
+            ) : (
+              <>
+                <Tooltip title="编辑">
+                  <Button type="text" icon={<EditOutlined />} onClick={() => handleEdit(record)} />
+                </Tooltip>
+                <Tooltip title="重置密码">
                   <Button
                     type="text"
-                    icon={<CheckOutlined />}
-                    style={{ color: '#52c41a' }}
+                    icon={<LockOutlined />}
+                    onClick={() => handleResetPassword(record)}
                   />
                 </Tooltip>
-              </Popconfirm>
-              <Popconfirm
-                title="确定要拒绝该用户的注册申请吗？"
-                onConfirm={() => handleReject(record.userId)}
-                okText="拒绝"
-                cancelText="取消"
-              >
-                <Tooltip title="拒绝">
-                  <Button
-                    type="text"
-                    icon={<CloseOutlined />}
-                    style={{ color: '#ff4d4f' }}
-                  />
-                </Tooltip>
-              </Popconfirm>
-            </>
-          ) : (
-            <>
-              <Tooltip title="编辑">
-                <Button
-                  type="text"
-                  icon={<EditOutlined />}
-                  onClick={() => handleEdit(record)}
-                />
-              </Tooltip>
-              <Tooltip title="重置密码">
-                <Button
-                  type="text"
-                  icon={<LockOutlined />}
-                  onClick={() => handleResetPassword(record)}
-                />
-              </Tooltip>
-              <Popconfirm
-                title={record.status === 'locked' ? '确定要解锁此用户吗？' : '确定要锁定此用户吗？'}
-                onConfirm={() => handleLockUnlock(record)}
-                okText="确定"
-                cancelText="取消"
-              >
-                <Tooltip title={record.status === 'locked' ? '解锁' : '锁定'}>
-                  <Button
-                    type="text"
-                    icon={record.status === 'locked' ? <ReloadOutlined /> : <LockOutlined />}
-                    style={{ color: record.status === 'locked' ? '#52c41a' : '#faad14' }}
-                  />
-                </Tooltip>
-              </Popconfirm>
-              <Popconfirm
-                title="确定要删除此用户吗？"
-                onConfirm={() => handleDelete(record.userId)}
-                okText="确定"
-                cancelText="取消"
-              >
-                <Tooltip title="删除">
-                  <Button type="text" danger icon={<DeleteOutlined />} />
-                </Tooltip>
-              </Popconfirm>
-            </>
-          )}
-        </Space>
-      )
-    }
-  ], [handleAvatarClick, handleEdit, handleResetPassword, handleDelete, handleLockUnlock, handleApprove, handleReject]);
+                <Popconfirm
+                  title={
+                    record.status === 'locked' ? '确定要解锁此用户吗？' : '确定要锁定此用户吗？'
+                  }
+                  onConfirm={() => handleLockUnlock(record)}
+                  okText="确定"
+                  cancelText="取消"
+                >
+                  <Tooltip title={record.status === 'locked' ? '解锁' : '锁定'}>
+                    <Button
+                      type="text"
+                      icon={record.status === 'locked' ? <ReloadOutlined /> : <LockOutlined />}
+                      style={{ color: record.status === 'locked' ? '#52c41a' : '#faad14' }}
+                    />
+                  </Tooltip>
+                </Popconfirm>
+                <Popconfirm
+                  title="确定要删除此用户吗？"
+                  onConfirm={() => handleDelete(record.userId)}
+                  okText="确定"
+                  cancelText="取消"
+                >
+                  <Tooltip title="删除">
+                    <Button type="text" danger icon={<DeleteOutlined />} />
+                  </Tooltip>
+                </Popconfirm>
+              </>
+            )}
+          </Space>
+        ),
+      },
+    ],
+    [
+      handleAvatarClick,
+      handleEdit,
+      handleResetPassword,
+      handleDelete,
+      handleLockUnlock,
+      handleApprove,
+      handleReject,
+    ]
+  );
 
   const pageHeaderStyle = {
     marginBottom: '24px',
@@ -426,7 +473,7 @@ const UserManagement = () => {
     justifyContent: 'space-between',
     alignItems: 'center',
     flexWrap: 'wrap',
-    gap: '16px'
+    gap: '16px',
   };
 
   const titleStyle = {
@@ -436,20 +483,20 @@ const UserManagement = () => {
     background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
     WebkitBackgroundClip: 'text',
     WebkitTextFillColor: 'transparent',
-    backgroundClip: 'text'
+    backgroundClip: 'text',
   };
 
   const cardStyle = {
     borderRadius: '16px',
     border: 'none',
     boxShadow: '0 4px 20px rgba(0, 0, 0, 0.08)',
-    overflow: 'hidden'
+    overflow: 'hidden',
   };
 
   const cardHeadStyle = {
     borderBottom: '1px solid #f0f0f0',
     padding: '16px 24px',
-    background: 'linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%)'
+    background: 'linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%)',
   };
 
   const primaryButtonStyle = {
@@ -459,21 +506,21 @@ const UserManagement = () => {
     border: 'none',
     boxShadow: '0 4px 12px rgba(102, 126, 234, 0.35)',
     fontWeight: '500',
-    transition: 'all 0.3s ease'
+    transition: 'all 0.3s ease',
   };
 
   const secondaryButtonStyle = {
     height: '40px',
     borderRadius: '8px',
     border: '1px solid #e8e8e8',
-    transition: 'all 0.3s ease'
+    transition: 'all 0.3s ease',
   };
 
   const actionButtonStyle = {
     height: '32px',
     borderRadius: '6px',
     border: '1px solid #e8e8e8',
-    transition: 'all 0.3s ease'
+    transition: 'all 0.3s ease',
   };
 
   const modalHeaderStyle = {
@@ -481,25 +528,25 @@ const UserManagement = () => {
     alignItems: 'center',
     gap: '8px',
     fontSize: '18px',
-    fontWeight: '600'
+    fontWeight: '600',
   };
 
   const modalHeaderAccent = {
     width: '4px',
     height: '20px',
     background: 'linear-gradient(180deg, #667eea 0%, #764ba2 100%)',
-    borderRadius: '2px'
+    borderRadius: '2px',
   };
 
   const avatarModalStyle = {
     textAlign: 'center',
-    padding: '20px 0'
+    padding: '20px 0',
   };
 
   const avatarWrapperStyle = {
     marginBottom: '24px',
     position: 'relative',
-    display: 'inline-block'
+    display: 'inline-block',
   };
 
   return (
@@ -507,16 +554,12 @@ const UserManagement = () => {
       <div style={pageHeaderStyle}>
         <h1 style={titleStyle}>用户管理</h1>
         <Space size="middle">
-          <Button 
-            icon={<ReloadOutlined />} 
-            onClick={fetchUsers}
-            style={secondaryButtonStyle}
-          >
+          <Button icon={<ReloadOutlined />} onClick={fetchUsers} style={secondaryButtonStyle}>
             刷新
           </Button>
-          <Button 
-            type="primary" 
-            icon={<PlusOutlined />} 
+          <Button
+            type="primary"
+            icon={<PlusOutlined />}
             onClick={handleAdd}
             style={primaryButtonStyle}
           >
@@ -533,10 +576,10 @@ const UserManagement = () => {
           { key: 'pending', tab: '待审核' },
           { key: 'active', tab: '正常' },
           { key: 'locked', tab: '锁定' },
-          { key: 'inactive', tab: '禁用' }
+          { key: 'inactive', tab: '禁用' },
         ]}
         activeTabKey={activeTab}
-        onTabChange={(key) => {
+        onTabChange={key => {
           setActiveTab(key);
           setPagination(prev => ({ ...prev, current: 1 }));
         }}
@@ -550,9 +593,9 @@ const UserManagement = () => {
             ...pagination,
             showSizeChanger: true,
             showQuickJumper: true,
-            showTotal: (total) => `共 ${total} 条记录`
+            showTotal: total => `共 ${total} 条记录`,
           }}
-          onChange={(newPagination) => {
+          onChange={newPagination => {
             setPagination(prev => ({ ...prev, ...newPagination }));
           }}
           rowClassName={() => 'table-row'}
@@ -573,22 +616,17 @@ const UserManagement = () => {
         destroyOnHidden
         styles={{
           body: { padding: '24px' },
-          header: { borderBottom: '1px solid #f0f0f0', padding: '16px 24px' }
+          header: { borderBottom: '1px solid #f0f0f0', padding: '16px 24px' },
         }}
         style={{ borderRadius: '16px', overflow: 'hidden' }}
       >
-        <Form
-          form={form}
-          layout="vertical"
-          onFinish={handleSubmit}
-          style={{ marginTop: '20px' }}
-        >
+        <Form form={form} layout="vertical" onFinish={handleSubmit} style={{ marginTop: '20px' }}>
           <Form.Item
             name="username"
             label="用户名"
             rules={[
               { required: true, message: '请输入用户名' },
-              { min: 3, max: 20, message: '用户名长度必须在3-20个字符之间' }
+              { min: 3, max: 20, message: '用户名长度必须在3-20个字符之间' },
             ]}
           >
             <Input placeholder="请输入用户名" style={{ borderRadius: '8px' }} />
@@ -607,7 +645,7 @@ const UserManagement = () => {
             label="邮箱"
             rules={[
               { required: true, message: '请输入邮箱' },
-              { type: 'email', message: '请输入有效的邮箱地址' }
+              { type: 'email', message: '请输入有效的邮箱地址' },
             ]}
           >
             <Input placeholder="请输入邮箱" style={{ borderRadius: '8px' }} />
@@ -637,7 +675,7 @@ const UserManagement = () => {
               label="初始密码"
               rules={[
                 { required: true, message: '请输入初始密码' },
-                { min: 6, message: '密码长度不能少于6个字符' }
+                { min: 6, message: '密码长度不能少于6个字符' },
               ]}
             >
               <Input.Password placeholder="请输入初始密码" style={{ borderRadius: '8px' }} />
@@ -656,9 +694,7 @@ const UserManagement = () => {
             <Form.Item
               name="newPassword"
               label="新密码"
-              rules={[
-                { min: 6, message: '密码长度不能少于6个字符' }
-              ]}
+              rules={[{ min: 6, message: '密码长度不能少于6个字符' }]}
             >
               <Input.Password placeholder="留空则不修改密码" style={{ borderRadius: '8px' }} />
             </Form.Item>
@@ -666,21 +702,21 @@ const UserManagement = () => {
 
           <Form.Item style={{ marginBottom: 0, textAlign: 'right', marginTop: '24px' }}>
             <Space>
-              <Button 
+              <Button
                 onClick={() => setModalVisible(false)}
                 style={{ borderRadius: '8px', height: '40px' }}
               >
                 取消
               </Button>
-              <Button 
-                type="primary" 
-                htmlType="submit" 
+              <Button
+                type="primary"
+                htmlType="submit"
                 loading={loading}
                 style={{
                   ...primaryButtonStyle,
                   width: 'auto',
                   paddingLeft: '24px',
-                  paddingRight: '24px'
+                  paddingRight: '24px',
                 }}
               >
                 {editingUser ? '更新' : '创建'}
@@ -704,7 +740,7 @@ const UserManagement = () => {
         destroyOnHidden
         styles={{
           body: { padding: '24px' },
-          header: { borderBottom: '1px solid #f0f0f0', padding: '16px 24px' }
+          header: { borderBottom: '1px solid #f0f0f0', padding: '16px 24px' },
         }}
         style={{ borderRadius: '16px', overflow: 'hidden' }}
       >
@@ -719,7 +755,7 @@ const UserManagement = () => {
             label="新密码"
             rules={[
               { required: true, message: '请输入新密码' },
-              { min: 6, message: '密码长度不能少于6个字符' }
+              { min: 6, message: '密码长度不能少于6个字符' },
             ]}
           >
             <Input.Password placeholder="请输入新密码" style={{ borderRadius: '8px' }} />
@@ -727,21 +763,21 @@ const UserManagement = () => {
 
           <Form.Item style={{ marginBottom: 0, textAlign: 'right', marginTop: '24px' }}>
             <Space>
-              <Button 
+              <Button
                 onClick={() => setPasswordModalVisible(false)}
                 style={{ borderRadius: '8px', height: '40px' }}
               >
                 取消
               </Button>
-              <Button 
-                type="primary" 
-                htmlType="submit" 
+              <Button
+                type="primary"
+                htmlType="submit"
                 loading={loading}
                 style={{
                   ...primaryButtonStyle,
                   width: 'auto',
                   paddingLeft: '24px',
-                  paddingRight: '24px'
+                  paddingRight: '24px',
                 }}
               >
                 重置
@@ -765,7 +801,7 @@ const UserManagement = () => {
         destroyOnHidden
         styles={{
           body: { padding: '24px' },
-          header: { borderBottom: '1px solid #f0f0f0', padding: '16px 24px' }
+          header: { borderBottom: '1px solid #f0f0f0', padding: '16px 24px' },
         }}
         style={{ borderRadius: '16px', overflow: 'hidden' }}
       >
@@ -776,10 +812,10 @@ const UserManagement = () => {
                 size={120}
                 icon={!avatarUser?.avatar && <UserOutlined />}
                 src={getAvatarUrl(avatarUser)}
-                style={{ 
+                style={{
                   backgroundColor: avatarUser?.avatar ? 'transparent' : '#1890ff',
                   border: '1px solid #f0f0f0',
-                  cursor: 'pointer'
+                  cursor: 'pointer',
                 }}
               />
             </Badge>
@@ -794,23 +830,23 @@ const UserManagement = () => {
               onChange={handleAvatarUpload}
             />
 
-            <Button 
-              type="primary" 
+            <Button
+              type="primary"
               icon={<CameraOutlined />}
               onClick={() => fileInputRef.current?.click()}
               loading={uploadLoading}
               block
               style={{
                 ...primaryButtonStyle,
-                height: '44px'
+                height: '44px',
               }}
             >
               {avatarUser?.avatar ? '更换头像' : '上传头像'}
             </Button>
 
             {avatarUser?.avatar && (
-              <Button 
-                danger 
+              <Button
+                danger
                 icon={<DeleteOutlined />}
                 onClick={handleAvatarDelete}
                 block
diff --git a/frontend/src/styles/deviceManagementStyles.js b/frontend/src/styles/deviceManagementStyles.js
index 7f1bd5d..2da42d1 100644
--- a/frontend/src/styles/deviceManagementStyles.js
+++ b/frontend/src/styles/deviceManagementStyles.js
@@ -11,12 +11,12 @@ const { colors, shadows, borderRadius, transitions, spacing } = designTokens;
 export const pageContainerStyle = {
   minHeight: '100vh',
   background: colors.background.secondary,
-  padding: spacing.lg
+  padding: spacing.lg,
 };
 
 // 头部样式
 export const headerStyle = {
-  marginBottom: spacing.lg
+  marginBottom: spacing.lg,
 };
 
 // 标题行样式
@@ -26,14 +26,14 @@ export const titleRowStyle = {
   justifyContent: 'space-between',
   marginBottom: spacing.lg,
   flexWrap: 'wrap',
-  gap: spacing.md
+  gap: spacing.md,
 };
 
 // 标题区域样式
 export const titleSectionStyle = {
   display: 'flex',
   alignItems: 'center',
-  gap: spacing.md
+  gap: spacing.md,
 };
 
 // 标题图标样式
@@ -45,14 +45,14 @@ export const titleIconStyle = {
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-  boxShadow: shadows.medium
+  boxShadow: shadows.medium,
 };
 
 // 标题文本样式
 export const titleTextStyle = {
   display: 'flex',
   flexDirection: 'column',
-  gap: '2px'
+  gap: '2px',
 };
 
 // 页面标题样式
@@ -61,14 +61,14 @@ export const pageTitleStyle = {
   fontWeight: '700',
   margin: 0,
   color: colors.text.primary,
-  lineHeight: 1.2
+  lineHeight: 1.2,
 };
 
 // 页面副标题样式
 export const pageSubtitleStyle = {
   fontSize: '13px',
   color: colors.text.secondary,
-  margin: 0
+  margin: 0,
 };
 
 // 操作按钮基础样式
@@ -79,7 +79,7 @@ export const actionButtonStyle = {
   fontWeight: '500',
   display: 'inline-flex',
   alignItems: 'center',
-  gap: '6px'
+  gap: '6px',
 };
 
 // 主要操作按钮样式
@@ -88,7 +88,7 @@ export const primaryActionStyle = {
   background: colors.primary.gradient,
   border: 'none',
   color: '#ffffff !important',
-  boxShadow: shadows.small
+  boxShadow: shadows.small,
 };
 
 // 次要操作按钮样式
@@ -96,7 +96,7 @@ export const secondaryActionStyle = {
   ...actionButtonStyle,
   background: colors.background.primary,
   border: `1px solid ${colors.border.light}`,
-  color: colors.text.primary
+  color: colors.text.primary,
 };
 
 // 危险操作按钮样式
@@ -104,7 +104,7 @@ export const dangerActionStyle = {
   ...actionButtonStyle,
   background: colors.error.main,
   border: 'none',
-  color: '#ffffff'
+  color: '#ffffff',
 };
 
 // 主要按钮样式（大）
@@ -118,7 +118,7 @@ export const primaryButtonStyle = {
   fontWeight: '500',
   display: 'inline-flex',
   alignItems: 'center',
-  justifyContent: 'center'
+  justifyContent: 'center',
 };
 
 // 统计卡片行样式
@@ -126,7 +126,7 @@ export const statsRowStyle = {
   display: 'flex',
   gap: spacing.md,
   marginBottom: spacing.lg,
-  flexWrap: 'wrap'
+  flexWrap: 'wrap',
 };
 
 // 统计卡片基础样式
@@ -139,7 +139,7 @@ export const statCardStyle = {
   borderRadius: borderRadius.medium,
   border: `1px solid ${colors.border.light}`,
   boxShadow: shadows.small,
-  transition: `all ${transitions.fast}`
+  transition: `all ${transitions.fast}`,
 };
 
 // 统计数值样式
@@ -147,35 +147,35 @@ export const statValueStyle = {
   fontSize: '24px',
   fontWeight: '700',
   color: colors.text.primary,
-  lineHeight: 1.2
+  lineHeight: 1.2,
 };
 
 // 统计标签样式
 export const statLabelStyle = {
   fontSize: '12px',
   color: colors.text.secondary,
-  marginTop: '4px'
+  marginTop: '4px',
 };
 
 // 运行中状态统计卡片样式
 export const statCardRunningStyle = {
   ...statCardStyle,
   borderLeft: `3px solid ${colors.success.main}`,
-  background: `${colors.success.main}08`
+  background: `${colors.success.main}08`,
 };
 
 // 维护中状态统计卡片样式
 export const statCardMaintenanceStyle = {
   ...statCardStyle,
   borderLeft: `3px solid ${colors.warning.main}`,
-  background: `${colors.warning.main}08`
+  background: `${colors.warning.main}08`,
 };
 
 // 故障状态统计卡片样式
 export const statCardFaultStyle = {
   ...statCardStyle,
   borderLeft: `3px solid ${colors.error.main}`,
-  background: `${colors.error.main}08`
+  background: `${colors.error.main}08`,
 };
 
 // 卡片基础样式
@@ -184,7 +184,7 @@ export const cardStyle = {
   border: 'none',
   boxShadow: shadows.medium,
   overflow: 'hidden',
-  background: colors.background.primary
+  background: colors.background.primary,
 };
 
 // 筛选卡片样式
@@ -193,7 +193,7 @@ export const filterCardStyle = {
   border: 'none',
   boxShadow: shadows.small,
   background: colors.background.primary,
-  marginBottom: spacing.lg
+  marginBottom: spacing.lg,
 };
 
 // 模态框头部样式
@@ -202,7 +202,7 @@ export const modalHeaderStyle = {
   alignItems: 'center',
   gap: spacing.sm,
   fontSize: '18px',
-  fontWeight: '600'
+  fontWeight: '600',
 };
 
 // 表格样式常量
@@ -210,23 +210,23 @@ export const tableStyles = {
   // 表格容器样式
   wrapper: {
     borderRadius: borderRadius.medium,
-    overflow: 'hidden'
+    overflow: 'hidden',
   },
-  
+
   // 空状态样式
   empty: {
     textAlign: 'center',
     padding: '60px 20px',
     color: colors.text.secondary,
-    fontSize: '15px'
+    fontSize: '15px',
   },
-  
+
   // 空状态图标样式
   emptyIcon: {
     fontSize: '48px',
     marginBottom: '16px',
-    color: colors.border.light
-  }
+    color: colors.border.light,
+  },
 };
 
 // 搜索输入框样式
@@ -234,24 +234,24 @@ export const searchInputStyle = {
   width: '280px',
   borderRadius: borderRadius.medium,
   border: `1px solid ${colors.border.light}`,
-  transition: `all ${transitions.fast}`
+  transition: `all ${transitions.fast}`,
 };
 
 // 选择器样式
 export const selectStyle = {
-  borderRadius: borderRadius.medium
+  borderRadius: borderRadius.medium,
 };
 
 // 下拉菜单样式
 export const dropdownStyle = {
-  borderRadius: borderRadius.medium
+  borderRadius: borderRadius.medium,
 };
 
 // 刷新按钮样式
 export const refreshButtonStyle = {
   borderRadius: borderRadius.medium,
   border: `1px solid ${colors.border.light}`,
-  height: '36px'
+  height: '36px',
 };
 
 // 搜索按钮样式
@@ -260,14 +260,14 @@ export const searchButtonStyle = {
   borderRadius: borderRadius.medium,
   background: colors.primary.gradient,
   border: 'none',
-  boxShadow: shadows.small
+  boxShadow: shadows.small,
 };
 
 // 重置按钮样式
 export const resetButtonStyle = {
   height: '36px',
   borderRadius: borderRadius.medium,
-  border: `1px solid ${colors.border.light}`
+  border: `1px solid ${colors.border.light}`,
 };
 
 // 导入模态框样式
@@ -278,32 +278,32 @@ export const importModalStyles = {
     padding: '16px',
     background: 'linear-gradient(180deg, #fafafa 0%, #ffffff 100%)',
     borderRadius: '12px',
-    border: '1px solid #f0f0f0'
+    border: '1px solid #f0f0f0',
   },
-  
+
   // 标题样式
   title: {
     fontWeight: '600',
     marginBottom: '8px',
-    color: '#333'
+    color: '#333',
   },
-  
+
   // 列表样式
   list: {
     paddingLeft: '20px',
     marginBottom: '10px',
     color: '#666',
     fontSize: '13px',
-    marginTop: '12px'
+    marginTop: '12px',
   },
-  
+
   // 进度容器样式
   progressContainer: {
     display: 'flex',
     alignItems: 'center',
-    marginBottom: '16px'
+    marginBottom: '16px',
   },
-  
+
   // 进度图标样式
   progressIcon: {
     width: '48px',
@@ -315,46 +315,49 @@ export const importModalStyles = {
     justifyContent: 'center',
     marginRight: '16px',
     color: '#fff',
-    fontSize: '20px'
+    fontSize: '20px',
   },
-  
+
   // 进度信息样式
   progressInfo: {
     title: {
       margin: '0 0 4px 0',
       fontWeight: '600',
       color: '#333',
-      fontSize: '16px'
+      fontSize: '16px',
     },
     phase: {
       margin: 0,
       color: colors.primary.main,
-      fontSize: '14px'
-    }
+      fontSize: '14px',
+    },
   },
-  
+
   // 结果卡片样式
-  resultCard: (type) => ({
+  resultCard: type => ({
     padding: '12px',
-    background: type === 'total' ? colors.primary.gradient :
-                type === 'success' ? 'linear-gradient(135deg, #52c41a 0%, #389e0d 100%)' :
-                'linear-gradient(135deg, #ff4d4f 0%, #cf1322 100%)',
+    background:
+      type === 'total'
+        ? colors.primary.gradient
+        : type === 'success'
+          ? 'linear-gradient(135deg, #52c41a 0%, #389e0d 100%)'
+          : 'linear-gradient(135deg, #ff4d4f 0%, #cf1322 100%)',
     borderRadius: '8px',
     color: '#fff',
-    textAlign: 'center'
+    textAlign: 'center',
   }),
-  
+
   // 结果数值样式
   resultValue: {
     fontSize: '24px',
-    fontWeight: '700'
+    fontWeight: '700',
   },
-  
+
   // 结果标签样式
   resultLabel: {
     fontSize: '12px',
-    opacity: 0.9
-  }
+    opacity: 0.9,
+  },
 };
 
 // 详情模态框样式
@@ -363,27 +366,27 @@ export const detailModalStyles = {
   infoItem: {
     label: {
       fontWeight: '500',
-      color: '#666'
+      color: '#666',
     },
     value: {
       marginLeft: 8,
-      color: '#333'
-    }
+      color: '#333',
+    },
   },
-  
+
   // 描述区域样式
   description: {
-    marginTop: '16px'
+    marginTop: '16px',
   },
-  
+
   // 描述内容样式
   descriptionContent: {
     marginTop: '8px',
     padding: '12px',
     backgroundColor: '#fafafa',
     borderRadius: '8px',
-    color: '#333'
-  }
+    color: '#333',
+  },
 };
 
 // 导出模态框样式
@@ -394,17 +397,17 @@ export const exportModalStyles = {
     overflow: 'auto',
     border: '1px solid #f0f0f0',
     borderRadius: '8px',
-    padding: '12px'
+    padding: '12px',
   },
-  
+
   // 字段项样式
   fieldItem: {
-    marginBottom: '8px'
-  }
+    marginBottom: '8px',
+  },
 };
 
 // CSS-in-JS 样式字符串生成函数
-export const generateGlobalStyles = (tokens) => `
+export const generateGlobalStyles = tokens => `
   .device-modal .ant-modal-close {
     top: 16px;
     right: 24px;