diff --git a/.env.development b/.env.development
new file mode 100644
index 0000000..06d6606
--- /dev/null
+++ b/.env.development
@@ -0,0 +1,2 @@
+# 开发环境配置
+VUE_APP_API_BASE_URL=http://localhost:8080
diff --git a/.env.production b/.env.production
new file mode 100644
index 0000000..c4c9219
--- /dev/null
+++ b/.env.production
@@ -0,0 +1,2 @@
+# 生产环境配置
+VUE_APP_API_BASE_URL=/api
diff --git a/.gitignore b/.gitignore
index a19f004..3bec83e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,3 +9,4 @@ docs/_book
 # TODO: where does this rule come from?
 test/
 
+node_modules
diff --git a/package-lock.json b/package-lock.json
index 74344f4..c5f4ee9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "com_web",
       "version": "1.0.0",
       "dependencies": {
+        "axios": "^0.27.2",
         "jsonp": "^0.2.1",
         "vue": "^2.7.15",
         "vue-carousel": "^0.18.0",
@@ -548,6 +549,11 @@
       "integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==",
       "dev": true
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
     "node_modules/atob": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
@@ -592,6 +598,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/axios": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz",
+      "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
+      "dependencies": {
+        "follow-redirects": "^1.14.9",
+        "form-data": "^4.0.0"
+      }
+    },
     "node_modules/babel-code-frame": {
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
@@ -1880,7 +1895,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
       "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
-      "dev": true,
       "dependencies": {
         "es-errors": "^1.3.0",
         "function-bind": "^1.1.2"
@@ -2402,6 +2416,17 @@
         "node": ">=0.1.90"
       }
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/commander": {
       "version": "2.17.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-2.17.1.tgz",
@@ -4095,6 +4120,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/depd": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
@@ -4291,7 +4324,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
       "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
-      "dev": true,
       "dependencies": {
         "call-bind-apply-helpers": "^1.0.1",
         "es-errors": "^1.3.0",
@@ -4521,7 +4553,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
       "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       }
@@ -4530,7 +4561,6 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
       "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       }
@@ -4539,7 +4569,6 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
       "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
-      "dev": true,
       "dependencies": {
         "es-errors": "^1.3.0"
       },
@@ -4551,7 +4580,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
       "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
-      "dev": true,
       "dependencies": {
         "es-errors": "^1.3.0",
         "get-intrinsic": "^1.2.6",
@@ -5255,7 +5283,6 @@
       "version": "1.15.11",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.11.tgz",
       "integrity": "sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==",
-      "dev": true,
       "funding": [
         {
           "type": "individual",
@@ -5295,6 +5322,21 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/form-data": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.5.tgz",
+      "integrity": "sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "es-set-tostringtag": "^2.1.0",
+        "hasown": "^2.0.2",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/forwarded": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -5420,7 +5462,6 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
       "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "dev": true,
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -5473,7 +5514,6 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
       "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
-      "dev": true,
       "dependencies": {
         "call-bind-apply-helpers": "^1.0.2",
         "es-define-property": "^1.0.1",
@@ -5497,7 +5537,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
       "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
-      "dev": true,
       "dependencies": {
         "dunder-proto": "^1.0.1",
         "es-object-atoms": "^1.0.0"
@@ -5639,7 +5678,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
       "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -5751,7 +5789,6 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
       "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -5763,7 +5800,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
       "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
-      "dev": true,
       "dependencies": {
         "has-symbols": "^1.0.3"
       },
@@ -5890,7 +5926,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
       "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
-      "dev": true,
       "dependencies": {
         "function-bind": "^1.1.2"
       },
@@ -7468,7 +7503,6 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
       "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       }
@@ -7725,7 +7759,6 @@
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
       "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "dev": true,
       "engines": {
         "node": ">= 0.6"
       }
@@ -7734,7 +7767,6 @@
       "version": "2.1.35",
       "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
       "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "dev": true,
       "dependencies": {
         "mime-db": "1.52.0"
       },
@@ -16330,6 +16362,11 @@
       "integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==",
       "dev": true
     },
+    "asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
     "atob": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
@@ -16359,6 +16396,15 @@
         "possible-typed-array-names": "^1.0.0"
       }
     },
+    "axios": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz",
+      "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
+      "requires": {
+        "follow-redirects": "^1.14.9",
+        "form-data": "^4.0.0"
+      }
+    },
     "babel-code-frame": {
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
@@ -17541,7 +17587,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
       "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
-      "dev": true,
       "requires": {
         "es-errors": "^1.3.0",
         "function-bind": "^1.1.2"
@@ -17943,6 +17988,14 @@
       "integrity": "sha512-ENwblkFQpqqia6b++zLD/KUWafYlVY/UNnAp7oz7LY7E924wmpye416wBOmvv/HMWzl8gL1kJlfvId/1Dg176w==",
       "dev": true
     },
+    "combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "requires": {
+        "delayed-stream": "~1.0.0"
+      }
+    },
     "commander": {
       "version": "2.17.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-2.17.1.tgz",
@@ -19282,6 +19335,11 @@
         }
       }
     },
+    "delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="
+    },
     "depd": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
@@ -19442,7 +19500,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
       "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
-      "dev": true,
       "requires": {
         "call-bind-apply-helpers": "^1.0.1",
         "es-errors": "^1.3.0",
@@ -19645,20 +19702,17 @@
     "es-define-property": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
-      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
-      "dev": true
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g=="
     },
     "es-errors": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
-      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
-      "dev": true
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw=="
     },
     "es-object-atoms": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
       "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
-      "dev": true,
       "requires": {
         "es-errors": "^1.3.0"
       }
@@ -19667,7 +19721,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
       "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
-      "dev": true,
       "requires": {
         "es-errors": "^1.3.0",
         "get-intrinsic": "^1.2.6",
@@ -20226,8 +20279,7 @@
     "follow-redirects": {
       "version": "1.15.11",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.11.tgz",
-      "integrity": "sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==",
-      "dev": true
+      "integrity": "sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ=="
     },
     "for-each": {
       "version": "0.3.5",
@@ -20244,6 +20296,18 @@
       "integrity": "sha512-7EwmXrOjyL+ChxMhmG5lnW9MPt1aIeZEwKhQzoBUdTV0N3zuwWDZYVJatDvZ2OyzPUvdIAZDsCetk3coyMfcnQ==",
       "dev": true
     },
+    "form-data": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.5.tgz",
+      "integrity": "sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w==",
+      "requires": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "es-set-tostringtag": "^2.1.0",
+        "hasown": "^2.0.2",
+        "mime-types": "^2.1.12"
+      }
+    },
     "forwarded": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -20341,8 +20405,7 @@
     "function-bind": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
-      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "dev": true
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA=="
     },
     "function.prototype.name": {
       "version": "1.1.8",
@@ -20380,7 +20443,6 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
       "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
-      "dev": true,
       "requires": {
         "call-bind-apply-helpers": "^1.0.2",
         "es-define-property": "^1.0.1",
@@ -20398,7 +20460,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
       "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
-      "dev": true,
       "requires": {
         "dunder-proto": "^1.0.1",
         "es-object-atoms": "^1.0.0"
@@ -20499,8 +20560,7 @@
     "gopd": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
-      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
-      "dev": true
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg=="
     },
     "graceful-fs": {
       "version": "4.2.11",
@@ -20578,14 +20638,12 @@
     "has-symbols": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
-      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
-      "dev": true
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ=="
     },
     "has-tostringtag": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
       "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
-      "dev": true,
       "requires": {
         "has-symbols": "^1.0.3"
       }
@@ -20680,7 +20738,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
       "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
-      "dev": true,
       "requires": {
         "function-bind": "^1.1.2"
       }
@@ -21852,8 +21909,7 @@
     "math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
-      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
-      "dev": true
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g=="
     },
     "md5.js": {
       "version": "1.3.5",
@@ -22065,14 +22121,12 @@
     "mime-db": {
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
-      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "dev": true
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="
     },
     "mime-types": {
       "version": "2.1.35",
       "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
       "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "dev": true,
       "requires": {
         "mime-db": "1.52.0"
       }
diff --git a/package.json b/package.json
index e7afe86..04c1a63 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "build": "node build/build.js"
   },
   "dependencies": {
+    "axios": "^0.27.2",
     "jsonp": "^0.2.1",
     "vue": "^2.7.15",
     "vue-carousel": "^0.18.0",
diff --git a/src/router/index.js b/src/router/index.js
index 8b2312d..e6d7b28 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -3,14 +3,21 @@ import VueRouter from 'vue-router'
 
 Vue.use(VueRouter)
 const HomePage = () => import('../views/HomePage')
+const ManagePage = () => import('../views/ManagePage')
 
 const router = new VueRouter({
   mode: 'history',
   base: __dirname,
-  routes: [{
-    path: '/',
-    component: HomePage
-  }]
+  routes: [
+    {
+      path: '/',
+      component: HomePage
+    },
+    {
+      path: '/manage',
+      component: ManagePage
+    }
+  ]
 });
 
 export default router;
diff --git a/src/services/ToolService.js b/src/services/ToolService.js
new file mode 100644
index 0000000..59f9965
--- /dev/null
+++ b/src/services/ToolService.js
@@ -0,0 +1,138 @@
+import request from './request'
+
+/**
+ * 工具管理服务
+ */
+class ToolService {
+  /**
+   * 获取所有分类列表（不分页）
+   * @returns {Promise}
+   */
+  static getCategories() {
+    return request({
+      url: '/invest/workToolCategory/list',
+      method: 'get',
+      params: {
+        pageNum: 1,
+        pageSize: 1000
+      }
+    })
+  }
+
+  /**
+   * 获取分类详情
+   * @param {number} id - 分类ID
+   * @returns {Promise}
+   */
+  static getCategoryById(id) {
+    return request({
+      url: `/invest/workToolCategory/${id}`,
+      method: 'get'
+    })
+  }
+
+  /**
+   * 创建分类
+   * @param {Object} data - 分类数据
+   * @returns {Promise}
+   */
+  static createCategory(data) {
+    return request({
+      url: '/invest/workToolCategory',
+      method: 'post',
+      data
+    })
+  }
+
+  /**
+   * 更新分类
+   * @param {Object} data - 分类数据（包含id）
+   * @returns {Promise}
+   */
+  static updateCategory(data) {
+    return request({
+      url: '/invest/workToolCategory',
+      method: 'put',
+      data
+    })
+  }
+
+  /**
+   * 删除分类（逻辑删除）
+   * @param {Array} ids - 分类ID数组
+   * @returns {Promise}
+   */
+  static deleteCategory(ids) {
+    return request({
+      url: `/invest/workToolCategory/${ids.join(',')}`,
+      method: 'delete'
+    })
+  }
+
+  /**
+   * 获取工具列表（不分页）
+   * @returns {Promise}
+   */
+  static getTools() {
+    return request({
+      url: '/invest/workTool/list',
+      method: 'get',
+      params: {
+        pageNum: 1,
+        pageSize: 1000
+      }
+    })
+  }
+
+  /**
+   * 获取工具详情
+   * @param {number} id - 工具ID
+   * @returns {Promise}
+   */
+  static getToolById(id) {
+    return request({
+      url: `/invest/workTool/${id}`,
+      method: 'get'
+    })
+  }
+
+  /**
+   * 创建工具
+   * @param {Object} data - 工具数据
+   * @returns {Promise}
+   */
+  static createTool(data) {
+    return request({
+      url: '/invest/workTool',
+      method: 'post',
+      data
+    })
+  }
+
+  /**
+   * 更新工具
+   * @param {Object} data - 工具数据（包含id）
+   * @returns {Promise}
+   */
+  static updateTool(data) {
+    return request({
+      url: '/invest/workTool',
+      method: 'put',
+      data
+    })
+  }
+
+  /**
+   * 删除工具（逻辑删除）
+   * @param {Array} ids - 工具ID数组
+   * @returns {Promise}
+   */
+  static deleteTool(ids) {
+    return request({
+      url: `/invest/workTool/${ids.join(',')}`,
+      method: 'delete'
+    })
+  }
+}
+
+export default ToolService
diff --git a/src/services/request.js b/src/services/request.js
new file mode 100644
index 0000000..69f2aa5
--- /dev/null
+++ b/src/services/request.js
@@ -0,0 +1,33 @@
+import axios from 'axios'
+
+// 创建 axios 实例
+const service = axios.create({
+  baseURL: 'https://qdintc.com/prod-api',
+  timeout: 20000
+})
+
+// 请求拦截器
+service.interceptors.request.use(
+  config => {
+    // 可以在这里添加 token 等认证信息
+    return config
+  },
+  error => {
+    console.error('请求错误:', error)
+    return Promise.reject(error)
+  }
+)
+
+// 响应拦截器
+service.interceptors.response.use(
+  response => {
+    const res = response.data
+    return res
+  },
+  error => {
+    console.error('响应错误:', error)
+    return Promise.reject(error)
+  }
+)
+
+export default service
diff --git a/src/views/HomePage.vue b/src/views/HomePage.vue
index fd84ef0..9ff7e20 100644
--- a/src/views/HomePage.vue
+++ b/src/views/HomePage.vue
@@ -2,7 +2,13 @@
   <page class="home-page workbench-page">
     <!-- 固定标题栏 -->
     <div class="workbench-header">
-      <h1>Qdintc - 统一工作平台</h1>
+      <h1>统一工作平台</h1>
+      <div class="header-actions">
+        <button class="view-toggle-btn" @click="toggleView">
+          {{ viewMode === 'colorful' ? '简洁版' : '炫彩版' }}
+        </button>
+        <button class="manage-btn" @click="goManage">管理数据</button>
+      </div>
     </div>
     
     <!-- 主内容区 -->
@@ -12,12 +18,14 @@
         <div 
           v-for="category in categories" 
           :key="category.key"
-          v-show="category.tools.length > 0"
+          v-show="category.tools && category.tools.length > 0"
           class="tool-category"
         >
           <h2 class="category-title">{{ category.title }}</h2>
           <div class="category-items">
+            <!-- 炫彩版 -->
             <div 
+              v-if="viewMode === 'colorful'"
               v-for="tool in category.tools" 
               :key="tool.name" 
               class="tool-card"
@@ -32,6 +40,23 @@
                 <p class="tool-url">{{ tool.displayUrl }}</p>
               </div>
             </div>
+            
+            <!-- 简洁版 -->
+            <div
+              v-if="viewMode === 'simple'"
+              v-for="tool in category.tools" 
+              :key="tool.name" 
+              class="tool-card-simple"
+              @click="openTool(tool.url)"
+            >
+              <span class="simple-tool-name">{{ tool.name }}</span>
+              <div class="simple-tool-tooltip">
+                <div class="tooltip-content">
+                  <p class="tooltip-desc">{{ tool.desc }}</p>
+                  <p class="tooltip-url">{{ tool.url }}</p>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -41,6 +66,7 @@
 <script>
 import './less/home-page.less'
 import Page from '../components/Page'
+import ToolService from '../services/ToolService'
 
 export default {
   name: 'HomePage',
@@ -48,325 +74,108 @@ export default {
   
   data() {
     return {
-        // 代码管理工具
-        codeTools: [
-           {
-            name: '禅道',
-            desc: '项目管理与Bug追踪',
-            url: 'http://81.70.89.108:8088',
-            displayUrl: '81.70.89.108:8088',
-            icon: '禅',
-            color: 'linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)'
-          },
-          {
-            name: 'Gitea',
-            desc: 'Gitea代码仓库管理',
-            url: 'http://81.70.89.108:81/user/login',
-            displayUrl: '81.70.89.108:81',
-            icon: 'Git',
-            color: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
-          },
-          {
-            name: 'Gitee',
-            desc: 'Gitee代码仓库管理',
-            url: 'https://gitee.com/qdintc',
-            displayUrl: 'gitee.com/qdintc',
-            icon: 'GL',
-            color: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)'
-          },
-           {
-            name: 'Minio',
-            desc: 'Minio对象存储',
-            url: 'http://81.70.89.108:9009',
-            displayUrl: '81.70.89.108:9009',
-            icon: 'MI',
-            color: 'linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%)'
-          },
-         
-          {
-            name: 'Harbor',
-            desc: 'Docker镜像仓库',
-            url: 'http://81.70.89.108:8081',
-            displayUrl: '81.70.89.108:8081',
-            icon: 'HB',
-            color: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)'
-          }
-        ],
-        // 数据库工具
-        databaseTools: [
-          
-           {
-            name: 'Nocos',
-            desc: 'Nocos配置管理',
-            url: 'http://117.72.197.29:8088/',
-            displayUrl: '117.72.197.29:8088',
-            icon: 'NC',
-            color: 'linear-gradient(135deg, #fbc2eb 0%, #a6c1ee 100%)'
-          },
-          
-           {
-            name: 'Jenkins',
-            desc: '持续集成构建平台',
-            url: 'http://81.70.89.108:8080/login',
-            displayUrl: '81.70.89.108:8080',
-            icon: 'JK',
-            color: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)'
-          },
-           {
-            name: 'Portainer',
-            desc: 'Docker容器管理',
-            url: 'https://8.140.22.151:9443',
-            displayUrl: '8.140.22.151:9443',
-            icon: 'PT',
-            color: 'linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%)'
-          },
-          {
-            name: 'NodeRed',
-            desc: 'NodeRed物联数据接入',
-            url: 'http://8.140.22.151:1880/',
-            displayUrl: '8.140.22.151:1880',
-            icon: 'NR',
-            color: 'linear-gradient(135deg, #f8b500 0%, #fceabb 100%)'
-          },
-          {
-            name: 'EMQX',
-            desc: 'EMQX消息队列',
-            url: 'http://8.140.22.151:28083',
-            displayUrl: '8.140.22.151:28083',
-            icon: 'MQ',
-            color: 'linear-gradient(135deg, #e43a15 0%, #e65245 100%)'
-          }
-        ],
-        // 
-        monitorTools: [
-          
-        ],
-        // 文档知识工具
-        docTools: [
-         
-          {
-            name: '智聪官网',
-            desc: '智聪官网',
-            url: 'https://www.qdintc.com',
-            displayUrl: 'www.qdintc.com',
-            icon: '官',
-            color: 'linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%)'
-          },
-          {
-            name: '智聪记账Web',
-            desc: '记账管理平台Web',
-            url: 'http://152.136.151.187:8080/intc/#/login',
-            displayUrl: '152.136.151.187:8080',
-            icon: 'A',
-            color: 'linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%)'
-          },
-          {
-            name: '智聪记账H5',
-            desc: '记账管理平台H5',
-            url: 'http://152.136.151.187:82/#/',
-            displayUrl: '152.136.151.187:82',
-            icon: 'A5',
-            color: 'linear-gradient(135deg, #d299c2 0%, #fef9d7 100%)'
-          },
-          {
-            name: '智聪健康Web',
-            desc: '健康档案平台Web',
-            url: 'http://152.136.151.187:81/hrms/login',
-            displayUrl: '152.136.151.187:81',
-            icon: 'H',
-            color: 'linear-gradient(135deg, #96fbc4 0%, #f9f586 100%)'
-          },
-          {
-            name: '智聪健康H5',
-            desc: '健康档案平台H5',
-            url: 'http://152.136.151.187:89/#/',
-            displayUrl: '152.136.151.187:89',
-            icon: 'H5',
-            color: 'linear-gradient(135deg, #ff9966 0%, #ff5e62 100%)'
-          },
-          {
-            name: '智聪物联网',
-            desc: '智聪物联网平台',
-            url: 'http://152.136.151.187:8086/login',
-            displayUrl: '152.136.151.187:8086',
-            icon: '物联',
-            color: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)'
-          },
-          {
-            name: '智聪物联网大屏',
-            desc: '智聪物联网大屏',
-            url: 'http://152.136.151.187:8088/login',
-            displayUrl: '152.136.151.187:8088',
-            icon: '大屏',
-            color: 'linear-gradient(135deg, #ff6b95 0%, #ffa44f 100%)'
-          },
-          // {
-          //   name: '智聪茅台Web',
-          //   desc: 'Imaotai预约平台Web',
-          //   url: 'http://152.136.151.187:8081/imaotai/login',
-          //   displayUrl: '152.136.151.187:8081',
-          //   icon: '茅',
-          //   color: 'linear-gradient(135deg, #fc6c85 0%, #f857a6 100%)'
-          // },
-          // {
-          //   name: '智聪茅台H5',
-          //   desc: 'Imaotai预约平台h5',
-          //   url: 'http://152.136.151.187:90/#/',
-          //   displayUrl: '152.136.151.187:90',
-          //   icon: '茅5',
-          //   color: 'linear-gradient(135deg, #30cfd0 0%, #330867 100%)'
-          // }
-        ],
-        // 测试工具
-        testTools: [
-            {
-            name: '豆包',
-            desc: '豆包AI工具',
-            url: 'https://www.doubao.com/chat/',
-            displayUrl: 'www.doubao.com',
-            icon: '豆包',
-            color: 'linear-gradient(135deg, #0ba360 0%, #3cba92 100%)'
-          } ,
-          {
-            name: '微信公众号',
-            desc: '微信公众号',
-            url: 'https://mp.weixin.qq.com/cgi-bin/loginpage',
-            displayUrl: 'mp.weixin.qq.com',
-            icon: '微信',
-            color: 'linear-gradient(135deg, #38ef7d 0%, #11998e 100%)'
-          } ,
-           {
-            name: '腾讯云',
-            desc: '腾讯云',
-            url: 'https://cloud.tencent.com',
-            displayUrl: 'cloud.tencent.com',
-            icon: '腾讯',
-            color: 'linear-gradient(135deg, #2af598 0%, #009efd 100%)'
-          },
-          {
-            name: '阿里云',
-            desc: '阿里云',
-            url: 'https://www.aliyun.com',
-            displayUrl: 'www.aliyun.com',
-            icon: '阿里',
-            color: 'linear-gradient(135deg, #f77062 0%, #fe5196 100%)'
-          }
-          ,
-          {
-            name: '京东云',
-            desc: '京东云',
-            url: 'https://www.jdcloud.com',
-            displayUrl: 'www.jdcloud.com',
-            icon: '京东',
-            color: 'linear-gradient(135deg, #ee0979 0%, #ff6a00 100%)'
-          }
-        ],
-        // 安全扫描工具
-        securityTools: [
-          
-        ],
-        // 其他工具
-        otherTools: [
-          {
-            name: '随机密码',
-            desc: '随机密码生成器',
-            url: 'https://suijimimashengcheng.bmcx.com',
-            displayUrl: 'bmcx.com',
-            icon: '密',
-            color: 'linear-gradient(135deg, #fdcbf1 0%, #e6dee9 100%)'
-          },
-          {
-            name: '翻墙工具',
-            desc: 'CordCloud',
-            url: 'https://cordc.xyz/auth/login',
-            displayUrl: 'cordc.xyz',
-            icon: 'COR',
-            color: 'linear-gradient(135deg, #a8c0ff 0%, #3f2b96 100%)'
-          },
-          {
-            name: '图片压缩',
-            desc: '图片压缩工具',
-            url: 'https://squoosh.app',
-            displayUrl: 'squoosh.app',
-            icon: 'SQ',
-            color: 'linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%)'
-          },
-          {
-            name: '2925邮箱',
-            desc: '无限邮',
-            url: 'https://www.2925.com/login/',
-            displayUrl: 'www.2925.com',
-            icon: '邮',
-            color: 'linear-gradient(135deg, #ff9a56 0%, #ff5e62 100%)'
-          },
-          {
-            name: '青岛人社',
-            desc: '青岛市人力资源保障局',
-            url: 'https://hrss.qingdao.gov.cn',
-            displayUrl: 'hrss.qingdao.gov.cn',
-            icon: '人社',
-            color: 'linear-gradient(135deg, #fddb92 0%, #d1fdff 100%)'
-          },
-          {
-            name: '青岛公积金',
-            desc: '青岛市住房公积金中心',
-            url: 'https://www.qdgjj.com/',
-            displayUrl: 'www.qdgjj.com',
-            icon: '住房',
-            color: 'linear-gradient(135deg, #9890e3 0%, #b1f4cf 100%)'
-          },
-          {
-            name: '软著登记系统',
-            desc: '中国版权保护中心',
-            url: 'https://register.ccopyright.com.cn/login.html',
-            displayUrl: 'ccopyright.com.cn',
-            icon: '软著',
-            color: 'linear-gradient(135deg, #ebc0fd 0%, #d9ded8 100%)'
-          },
-          {
-            name: '开源软件镜像站',
-            desc: '清华大学开源软件镜像站',
-            url: 'https://mirrors.tuna.tsinghua.edu.cn',
-            displayUrl: 'tsinghua.edu.cn',
-            icon: '镜像',
-            color: 'linear-gradient(135deg, #96e6a1 0%, #d4fc79 100%)'
-          },
-          {
-            name: 'IP地址查询',
-            desc: 'iP地址归属地查询',
-            url: 'https://www.ip138.com/',
-            displayUrl: 'www.ip138.com',
-            icon: 'IP',
-            color: 'linear-gradient(135deg, #accbee 0%, #e7f0fd 100%)'
-          }
-        ],
-        // 空分类占位
-        ciTools: [],
-        projectTools: [],
-        monitorTools: [],
-        securityTools: [],
-        cloudTools: []
-      }
-    },
-  
-  computed: {
-    // 分类配置（统一管理）
-    categories: function() {
-      return [
-        { key: 'doc', title: '智聪科技', tools: this.docTools },
-        { key: 'code', title: '管理工具', tools: this.codeTools },
-        { key: 'database', title: '开发工具', tools: this.databaseTools },
-        { key: 'test', title: '第三方服务', tools: this.testTools },
-        { key: 'other', title: '其他工具', tools: this.otherTools }
-      ]
+      loading: false,
+      categories: [],
+      viewMode: 'colorful' // 'colorful' 或 'simple'
     }
   },
   
   created() {
-    this.init()
+    this.loadData()
   },
   
   methods: {
+    /**
+     * 加载数据（分类和工具）
+     */
+    async loadData() {
+      try {
+        this.loading = true
+        
+        // 并发加载分类和工具
+        const [categoriesRes, toolsRes] = await Promise.all([
+          ToolService.getCategories(),
+          ToolService.getTools()
+        ])
+        
+        if (categoriesRes && categoriesRes.code === 200 && toolsRes && toolsRes.code === 200) {
+          // 处理分类数据
+          const categories = (categoriesRes.rows || []).map(cat => ({
+            id: cat.id,
+            key: cat.categoryKey,
+            title: cat.categoryTitle,
+            sortOrder: cat.sortOrder || 0,
+            tools: []
+          }))
+          
+          // 处理工具数据
+          const tools = (toolsRes.rows || []).map(tool => ({
+            id: tool.id,
+            categoryId: tool.categoryId,
+            name: tool.name,
+            desc: tool.description,
+            url: tool.url,
+            displayUrl: tool.displayUrl,
+            icon: tool.icon,
+            color: tool.color
+          }))
+          
+          // 将工具分配到对应的分类
+          tools.forEach(tool => {
+            const category = categories.find(cat => cat.id === tool.categoryId)
+            if (category) {
+              category.tools.push(tool)
+            }
+          })
+          
+          // 按 sortOrder 排序
+          categories.sort((a, b) => a.sortOrder - b.sortOrder)
+          
+          this.categories = categories
+        } else {
+          console.error('加载数据失败')
+          this.loadDefaultData()
+        }
+      } catch (error) {
+        console.error('加载数据异常:', error)
+        this.loadDefaultData()
+      } finally {
+        this.loading = false
+      }
+    },
+
+    /**
+     * 加载默认数据（用于API不可用时的降级方案）
+     */
+    loadDefaultData() {
+      this.categories = [
+        { 
+          key: 'doc', 
+          title: '智聪科技', 
+          tools: this.getDefaultDocTools() 
+        },
+        { 
+          key: 'code', 
+          title: '管理工具', 
+          tools: this.getDefaultCodeTools() 
+        },
+        { 
+          key: 'database', 
+          title: '开发工具', 
+          tools: this.getDefaultDatabaseTools() 
+        },
+        { 
+          key: 'test', 
+          title: '第三方服务', 
+          tools: this.getDefaultTestTools() 
+        },
+        { 
+          key: 'other', 
+          title: '其他工具', 
+          tools: this.getDefaultOtherTools() 
+        }
+      ]
+    },
     /**
      * 打开工具链接
      * @param {string} url - 工具访问地址
@@ -377,6 +186,73 @@ export default {
       } else {
         alert('请先配置该工具的访问地址')
       }
+    },
+
+    // 以下是默认数据方法（用于 API 不可用时）
+    getDefaultDocTools() {
+      return [
+        { name: '智聪官网', desc: '智聪官网', url: 'https://www.qdintc.com', displayUrl: 'www.qdintc.com', icon: '官', color: 'linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%)' },
+        { name: '智聪记账Web', desc: '记账管理平台Web', url: 'http://152.136.151.187:8080/intc/#/login', displayUrl: '152.136.151.187:8080', icon: 'A', color: 'linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%)' },
+        { name: '智聪记账H5', desc: '记账管理平台H5', url: 'http://152.136.151.187:82/#/', displayUrl: '152.136.151.187:82', icon: 'A5', color: 'linear-gradient(135deg, #d299c2 0%, #fef9d7 100%)' },
+        { name: '智聪健康Web', desc: '健康档案平台Web', url: 'http://152.136.151.187:81/hrms/login', displayUrl: '152.136.151.187:81', icon: 'H', color: 'linear-gradient(135deg, #96fbc4 0%, #f9f586 100%)' },
+        { name: '智聪健康H5', desc: '健康档案平台H5', url: 'http://152.136.151.187:89/#/', displayUrl: '152.136.151.187:89', icon: 'H5', color: 'linear-gradient(135deg, #ff9966 0%, #ff5e62 100%)' },
+        { name: '智聪物联网', desc: '智聪物联网平台', url: 'http://152.136.151.187:8086/login', displayUrl: '152.136.151.187:8086', icon: '物联', color: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)' },
+        { name: '智聪物联网大屏', desc: '智聪物联网大屏', url: 'http://152.136.151.187:8088/login', displayUrl: '152.136.151.187:8088', icon: '大屏', color: 'linear-gradient(135deg, #ff6b95 0%, #ffa44f 100%)' }
+      ]
+    },
+
+    getDefaultCodeTools() {
+      return [
+        { name: '禅道', desc: '项目管理与Bug追踪', url: 'http://81.70.89.108:8088', displayUrl: '81.70.89.108:8088', icon: '禅', color: 'linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)' },
+        { name: 'Gitea', desc: 'Gitea代码仓库管理', url: 'http://81.70.89.108:81/user/login', displayUrl: '81.70.89.108:81', icon: 'Git', color: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' },
+        { name: 'Gitee', desc: 'Gitee代码仓库管理', url: 'https://gitee.com/qdintc', displayUrl: 'gitee.com/qdintc', icon: 'GL', color: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)' },
+        { name: 'Minio', desc: 'Minio对象存储', url: 'http://81.70.89.108:9009', displayUrl: '81.70.89.108:9009', icon: 'MI', color: 'linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%)' },
+        { name: 'Harbor', desc: 'Docker镜像仓库', url: 'http://81.70.89.108:8081', displayUrl: '81.70.89.108:8081', icon: 'HB', color: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)' }
+      ]
+    },
+
+    getDefaultDatabaseTools() {
+      return [
+        { name: 'Nocos', desc: 'Nocos配置管理', url: 'http://117.72.197.29:8088/', displayUrl: '117.72.197.29:8088', icon: 'NC', color: 'linear-gradient(135deg, #fbc2eb 0%, #a6c1ee 100%)' },
+        { name: 'Jenkins', desc: '持续集成构建平台', url: 'http://81.70.89.108:8080/login', displayUrl: '81.70.89.108:8080', icon: 'JK', color: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)' },
+        { name: 'Portainer', desc: 'Docker容器管理', url: 'https://8.140.22.151:9443', displayUrl: '8.140.22.151:9443', icon: 'PT', color: 'linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%)' },
+        { name: 'NodeRed', desc: 'NodeRed物联数据接入', url: 'http://8.140.22.151:1880/', displayUrl: '8.140.22.151:1880', icon: 'NR', color: 'linear-gradient(135deg, #f8b500 0%, #fceabb 100%)' },
+        { name: 'EMQX', desc: 'EMQX消息队列', url: 'http://8.140.22.151:28083', displayUrl: '8.140.22.151:28083', icon: 'MQ', color: 'linear-gradient(135deg, #e43a15 0%, #e65245 100%)' }
+      ]
+    },
+
+    getDefaultTestTools() {
+      return [
+        { name: '豆包', desc: '豆包AI工具', url: 'https://www.doubao.com/chat/', displayUrl: 'www.doubao.com', icon: '豆包', color: 'linear-gradient(135deg, #0ba360 0%, #3cba92 100%)' },
+        { name: '微信公众号', desc: '微信公众号', url: 'https://mp.weixin.qq.com/cgi-bin/loginpage', displayUrl: 'mp.weixin.qq.com', icon: '微信', color: 'linear-gradient(135deg, #38ef7d 0%, #11998e 100%)' },
+        { name: '腾讯云', desc: '腾讯云', url: 'https://cloud.tencent.com', displayUrl: 'cloud.tencent.com', icon: '腾讯', color: 'linear-gradient(135deg, #2af598 0%, #009efd 100%)' },
+        { name: '阿里云', desc: '阿里云', url: 'https://www.aliyun.com', displayUrl: 'www.aliyun.com', icon: '阿里', color: 'linear-gradient(135deg, #f77062 0%, #fe5196 100%)' },
+        { name: '京东云', desc: '京东云', url: 'https://www.jdcloud.com', displayUrl: 'www.jdcloud.com', icon: '京东', color: 'linear-gradient(135deg, #ee0979 0%, #ff6a00 100%)' }
+      ]
+    },
+
+   getDefaultOtherTools() {
+      return [
+        { name: '随机密码', desc: '随机密码生成器', url: 'https://suijimimashengcheng.bmcx.com', displayUrl: 'bmcx.com', icon: '密', color: 'linear-gradient(135deg, #fdcbf1 0%, #e6dee9 100%)' },
+        { name: '翻墙工具', desc: 'CordCloud', url: 'https://cordc.xyz/auth/login', displayUrl: 'cordc.xyz', icon: 'COR', color: 'linear-gradient(135deg, #a8c0ff 0%, #3f2b96 100%)' },
+        { name: '图片压缩', desc: '图片压缩工具', url: 'https://squoosh.app', displayUrl: 'squoosh.app', icon: 'SQ', color: 'linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%)' },
+        { name: '2925邮箱', desc: '无限邮', url: 'https://www.2925.com/login/', displayUrl: 'www.2925.com', icon: '邮', color: 'linear-gradient(135deg, #ff9a56 0%, #ff5e62 100%)' },
+        { name: '青岛人社', desc: '青岛市人力资源保障局', url: 'https://hrss.qingdao.gov.cn', displayUrl: 'hrss.qingdao.gov.cn', icon: '人社', color: 'linear-gradient(135deg, #fddb92 0%, #d1fdff 100%)' },
+        { name: '青岛公积金', desc: '青岛市住房公积金中心', url: 'https://www.qdgjj.com/', displayUrl: 'www.qdgjj.com', icon: '住房', color: 'linear-gradient(135deg, #9890e3 0%, #b1f4cf 100%)' },
+        { name: '软著登记系统', desc: '中国版权保护中心', url: 'https://register.ccopyright.com.cn/login.html', displayUrl: 'ccopyright.com.cn', icon: '软著', color: 'linear-gradient(135deg, #ebc0fd 0%, #d9ded8 100%)' },
+        { name: '开源软件镜像站', desc: '清华大学开源软件镜像站', url: 'https://mirrors.tuna.tsinghua.edu.cn', displayUrl: 'tsinghua.edu.cn', icon: '镜像', color: 'linear-gradient(135deg, #96e6a1 0%, #d4fc79 100%)' },
+        { name: 'IP地址查询', desc: 'iP地址归属地查询', url: 'https://www.ip138.com/', displayUrl: 'www.ip138.com', icon: 'IP', color: 'linear-gradient(135deg, #accbee 0%, #e7f0fd 100%)' }
+      ]
+    },
+
+    // 跳转到管理页面
+    goManage() {
+      this.$router.push('/manage')
+    },
+    
+    // 切换视图模式
+    toggleView() {
+      this.viewMode = this.viewMode === 'colorful' ? 'simple' : 'colorful'
     }
   }
 }
@@ -406,12 +282,14 @@ export default {
   min-height: 100vh;
   background: @primary-gradient;
   padding: @header-height 0 0;
+  overflow: visible;
 }
 
 .workbench-container {
   max-width: 1920px;
   margin: 0 auto;
   padding: 20px @spacing-md;
+  overflow: visible;
 }
 
 .workbench-header {
@@ -420,17 +298,102 @@ export default {
   left: 0;
   right: 0;
   width: 100%;
-  text-align: center;
-  padding: @spacing-md 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: @spacing-md 40px;
   background: @primary-gradient;
-  z-index: 1000;
+  z-index: 99;
   
   h1 {
-    font-size: 32px;
-    font-weight: 700;
+    font-size: 36px;
+    font-weight: 800;
     color: @white-color;
     margin: 0;
-    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+    letter-spacing: 2px;
+    position: relative;
+    
+    // 发光效果
+    &::before {
+      content: attr(data-text);
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: -1;
+      filter: blur(10px);
+      opacity: 0.5;
+    }
+  }
+
+  .header-actions {
+    position: absolute;
+    right: 40px;
+    display: flex;
+    gap: 12px;
+    align-items: center;
+    
+    .view-toggle-btn {
+      padding: 12px 28px;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      border: none;
+      border-radius: 12px;
+      color: white;
+      font-size: 15px;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all 0.3s ease;
+      box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
+      
+      &:hover {
+        transform: translateY(-3px);
+        box-shadow: 0 10px 30px rgba(102, 126, 234, 0.5);
+        background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
+      }
+      
+      &:active {
+        transform: translateY(-1px);
+        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
+      }
+    }
+    
+    .manage-btn {
+      padding: 12px 28px;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      border: none;
+      border-radius: 12px;
+      color: white;
+      font-size: 15px;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all 0.3s ease;
+      box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
+      position: relative;
+      
+      // 齿轮图标
+      &::after {
+        content: '⚙️';
+        margin-left: 8px;
+        font-size: 16px;
+        display: inline-block;
+        transition: transform 0.5s ease;
+      }
+      
+      &:hover {
+        transform: translateY(-3px);
+        box-shadow: 0 10px 30px rgba(102, 126, 234, 0.5);
+        background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
+        
+        &::after {
+          transform: rotate(180deg);
+        }
+      }
+      
+      &:active {
+        transform: translateY(-1px);
+        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
+      }
+    }
   }
 }
 
@@ -439,10 +402,11 @@ export default {
   flex-wrap: wrap;
   gap: 15px @spacing-md;
   align-items: flex-start;
+  overflow: visible;
 }
 
-.tool-category {
-  flex: 0 1 auto;
+.tool-category {  flex: 0 1 auto;
+  overflow: visible;
   
   .category-title {
     font-size: 20px;
@@ -458,6 +422,7 @@ export default {
     display: flex;
     flex-wrap: wrap;
     gap: @spacing-sm;
+    overflow: visible;
   }
 }
 
@@ -479,6 +444,116 @@ export default {
   }
 }
 
+// 简洁版卡片样式
+.tool-card-simple {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 12px 24px;
+  background: rgba(255, 255, 255, 0.98);
+  border-radius: 10px;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.5);
+  backdrop-filter: blur(10px);
+  position: relative;
+  z-index: 1;
+  
+  .simple-tool-name {
+    font-size: 15px;
+    font-weight: 600;
+    color: @text-primary;
+    white-space: nowrap;
+    letter-spacing: 0.3px;
+    position: relative;
+    
+    // 文字渐变效果
+    background: linear-gradient(135deg, #333 0%, #555 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+  
+  // 悬浮提示框
+  .simple-tool-tooltip {
+    position: absolute;
+    bottom: calc(100% + 10px);
+    left: 50%;
+    transform: translateX(-50%) translateY(5px);
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.15s ease-out;
+    pointer-events: none;
+    z-index: 1001;
+    
+    .tooltip-content {
+      background: rgba(255, 255, 255, 0.98);
+      backdrop-filter: blur(10px);
+      color: @text-primary;
+      padding: 14px 18px;
+      border-radius: 8px;
+      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(102, 126, 234, 0.2);
+      white-space: nowrap;
+      position: relative;
+      
+      // 小三角
+      &::after {
+        content: '';
+        position: absolute;
+        top: 100%;
+        left: 50%;
+        transform: translateX(-50%);
+        border: 6px solid transparent;
+        border-top-color: rgba(255, 255, 255, 0.98);
+        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
+      }
+      
+      .tooltip-desc {
+        font-size: 14px;
+        font-weight: 600;
+        margin: 0 0 4px;
+        line-height: 1.4;
+        color: #333;
+      }
+      
+      .tooltip-url {
+        font-size: 12px;
+        margin: 0;
+        font-family: 'Consolas', 'Monaco', monospace;
+        color: #667eea;
+        font-weight: 500;
+      }
+    }
+  }
+  
+  &:hover {
+    transform: translateY(-3px) scale(1.02);
+    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.25);
+    background: white;
+    border-color: rgba(102, 126, 234, 0.3);
+    z-index: 999;
+    
+    .simple-tool-name {
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+    }
+    
+    .simple-tool-tooltip {
+      opacity: 1;
+      visibility: visible;
+      transform: translateX(-50%) translateY(0);
+    }
+  }
+  
+  &:active {
+    transform: translateY(-1px) scale(1.01);
+    box-shadow: 0 3px 12px rgba(102, 126, 234, 0.2);
+  }
+}
+
 .tool-icon {
   width: @icon-size;
   height: @icon-size;
@@ -556,6 +631,199 @@ export default {
   }
 }
 
+// 管理区域样式
+.manage-section {
+  background: rgba(255, 255, 255, 0.95);
+  border-radius: @border-radius-lg;
+  padding: 20px;
+  margin-bottom: 20px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  
+  .manage-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
+    
+    h3 {
+      margin: 0;
+      font-size: 20px;
+      color: @text-primary;
+    }
+    
+    .add-btn {
+      padding: 8px 16px;
+      background: #67c23a;
+      border: none;
+      border-radius: 6px;
+      color: white;
+      font-size: 14px;
+      cursor: pointer;
+      transition: all 0.2s ease;
+      
+      &:hover {
+        background: #85ce61;
+      }
+    }
+  }
+  
+  .category-list {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    
+    .category-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 12px 16px;
+      background: #f5f7fa;
+      border-radius: 8px;
+      
+      .category-name {
+        font-size: 16px;
+        color: @text-primary;
+        font-weight: 500;
+      }
+      
+      .category-actions {
+        display: flex;
+        gap: 8px;
+        
+        button {
+          padding: 6px 12px;
+          border-radius: 4px;
+          font-size: 13px;
+          cursor: pointer;
+          transition: all 0.2s ease;
+        }
+        
+        .edit-btn {
+          background: #409eff;
+          border: none;
+          color: white;
+          
+          &:hover {
+            background: #66b1ff;
+          }
+        }
+        
+        .delete-btn {
+          background: #f56c6c;
+          border: none;
+          color: white;
+          
+          &:hover {
+            background: #f78989;
+          }
+        }
+      }
+    }
+  }
+}
+
+// 对话框样式
+.dialog-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2000;
+  
+  .dialog {
+    background: white;
+    border-radius: @border-radius-lg;
+    padding: 24px;
+    width: 90%;
+    max-width: 500px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+    
+    h3 {
+      margin: 0 0 20px;
+      font-size: 20px;
+      color: @text-primary;
+    }
+    
+    .form-group {
+      margin-bottom: 16px;
+      
+      label {
+        display: block;
+        margin-bottom: 8px;
+        font-size: 14px;
+        color: @text-secondary;
+        font-weight: 500;
+      }
+      
+      input, select {
+        width: 100%;
+        padding: 10px 12px;
+        border: 1px solid #dcdfe6;
+        border-radius: 6px;
+        font-size: 14px;
+        box-sizing: border-box;
+        transition: border-color 0.2s ease;
+        
+        &:focus {
+          outline: none;
+          border-color: #409eff;
+        }
+        
+        &:disabled {
+          background: #f5f7fa;
+          color: #999;
+          cursor: not-allowed;
+        }
+      }
+      
+      select {
+        cursor: pointer;
+      }
+    }
+    
+    .dialog-actions {
+      display: flex;
+      justify-content: flex-end;
+      gap: 12px;
+      margin-top: 24px;
+      
+      button {
+        padding: 10px 24px;
+        border-radius: 6px;
+        font-size: 14px;
+        cursor: pointer;
+        transition: all 0.2s ease;
+      }
+      
+      .cancel-btn {
+        background: white;
+        border: 1px solid #dcdfe6;
+        color: @text-primary;
+        
+        &:hover {
+          color: #409eff;
+          border-color: #409eff;
+        }
+      }
+      
+      .confirm-btn {
+        background: #409eff;
+        border: none;
+        color: white;
+        
+        &:hover {
+          background: #66b1ff;
+        }
+      }
+    }
+  }
+}
+
 // 响应式布局 - 手机
 @media (max-width: 600px) {
   .workbench-container {
@@ -563,10 +831,20 @@ export default {
   }
   
   .workbench-header {
-    margin-bottom: @spacing-lg;
+    justify-content: flex-start;
+    padding: @spacing-md 20px;
     
     h1 {
-      font-size: 28px;
+      font-size: 24px;
+    }
+    
+    .header-actions {
+      right: 20px;
+      
+      // 手机端隐藏切换按钮，只保留管理数据按钮
+      .view-toggle-btn {
+        display: none;
+      }
     }
   }
   
@@ -586,6 +864,13 @@ export default {
     width: 100%;
   }
   
+  .tool-card-simple {
+    // 手机端禁用提示框
+    .simple-tool-tooltip {
+      display: none !important;
+    }
+  }
+  
   .tool-icon {
     width: 50px;
     height: 50px;
diff --git a/src/views/ManagePage.vue b/src/views/ManagePage.vue
new file mode 100644
index 0000000..8898577
--- /dev/null
+++ b/src/views/ManagePage.vue
@@ -0,0 +1,1283 @@
+<template>
+  <page class="manage-page">
+    <div class="manage-header">
+      <h1>管理数据</h1>
+      <button class="back-btn" @click="goBack">返回工作台</button>
+    </div>
+
+    <div class="manage-container">
+      <!-- 分类管理 -->
+      <div class="manage-section">
+        <div class="section-header">
+          <h2>分类管理</h2>
+          <button class="add-btn" @click="showAddCategoryDialog">+ 添加分类</button>
+        </div>
+        <div class="category-list">
+          <div v-for="category in categories" :key="category.id" class="category-item">
+            <div class="category-info">
+              <span class="category-key">{{ category.key }}</span>
+              <span class="category-name">{{ category.title }}</span>
+              <span class="category-sort">排序: {{ category.sortOrder }}</span>
+            </div>
+            <div class="category-footer">
+              <span class="category-count">{{ category.tools ? category.tools.length : 0 }} 个网址</span>
+              <div class="category-actions">
+                <button class="edit-btn" @click="editCategory(category)">编辑</button>
+                <button class="delete-btn" @click="deleteCategory(category)">删除</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 网址管理 -->
+      <div class="manage-section">
+        <div class="section-header">
+          <h2>网址管理</h2>
+        </div>
+        <div v-for="category in categories" :key="category.id" class="tool-group">
+          <div class="tool-group-header">
+            <h3>{{ category.title }}</h3>
+            <button class="add-btn small" @click="showAddToolDialog(category)">+ 添加网址</button>
+          </div>
+          <div class="tool-list">
+            <div v-for="tool in category.tools" :key="tool.id" class="tool-item">
+              <div class="tool-main">
+                <div class="tool-icon" :style="{background: tool.color}">
+                  <span>{{ tool.icon }}</span>
+                </div>
+                <div class="tool-info">
+                  <div class="tool-name">{{ tool.name }}</div>
+                  <div class="tool-desc">{{ tool.desc }}</div>
+                </div>
+                <span class="tool-sort">排序: {{ tool.sortOrder || 0 }}</span>
+              </div>
+              <div class="tool-footer">
+                <div class="tool-url">{{ tool.url }}</div>
+                <div class="tool-actions">
+                  <button class="edit-btn" @click="editTool(category, tool)">编辑</button>
+                  <button class="delete-btn" @click="deleteTool(category, tool)">删除</button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 分类编辑对话框 -->
+    <div v-if="showCategoryDialog" class="dialog-overlay" @click="closeCategoryDialog">
+      <div class="dialog" @click.stop>
+        <h3>{{ categoryForm.id ? '编辑分类' : '添加分类' }}</h3>
+        <div class="form-group">
+          <label><span class="required">*</span>分类标识：</label>
+          <input v-model="categoryForm.key" placeholder="例如：doc" :disabled="!!categoryForm.id" />
+        </div>
+        <div class="form-group">
+          <label><span class="required">*</span>分类名称：</label>
+          <input v-model="categoryForm.title" placeholder="例如：智聪科技" />
+        </div>
+        <div class="form-group">
+          <label>排序序号：</label>
+          <input v-model.number="categoryForm.sortOrder" type="number" placeholder="数字越小越靠前，例如：0" />
+        </div>
+        <div class="dialog-actions">
+          <button class="cancel-btn" @click="closeCategoryDialog">取消</button>
+          <button class="confirm-btn" @click="saveCategory">保存</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 工具编辑对话框 -->
+    <div v-if="showToolDialog" class="dialog-overlay" @click="closeToolDialog">
+      <div class="dialog" @click.stop>
+        <h3>{{ toolForm.id ? '编辑网址' : '添加网址' }}</h3>
+                <div class="form-group">
+          <label><span class="required">*</span>访问地址：</label>
+          <input v-model="toolForm.url" placeholder="例如：https://www.qdintc.com" />
+        </div>
+        <div class="form-group">
+          <label><span class="required">*</span>网址名称：</label>
+          <input v-model="toolForm.name" placeholder="例如：智聪官网" />
+        </div>
+ 
+        <div class="form-group">
+          <label>网址描述：</label>
+          <input v-model="toolForm.desc" placeholder="例如：智聪官网" />
+        </div>
+       
+        <div class="form-group">
+          <label>显示地址：</label>
+          <input v-model="toolForm.displayUrl" placeholder="例如：www.qdintc.com" />
+        </div>
+        <div class="form-group">
+          <label>图标文字：</label>
+          <input v-model="toolForm.icon" placeholder="例如：官" maxlength="4" />
+        </div>
+        <div class="form-group">
+          <label>图标颜色：</label>
+          <div class="color-picker">
+            <div 
+              v-for="(colorOption, index) in colorOptions" 
+              :key="index"
+              class="color-option"
+              :class="{ active: toolForm.color === colorOption.value }"
+              :style="{ background: colorOption.value }"
+              @click="toolForm.color = colorOption.value"
+              :title="colorOption.name"
+            >
+              <span v-if="toolForm.color === colorOption.value" class="check-icon">✓</span>
+            </div>
+          </div>
+        </div>
+        <div class="form-group">
+          <label>排序序号：</label>
+          <input v-model.number="toolForm.sortOrder" type="number" placeholder="数字越小越靠前，例如：0" />
+        </div>
+        <div class="dialog-actions">
+          <button class="cancel-btn" @click="closeToolDialog">取消</button>
+          <button class="confirm-btn" @click="saveTool">保存</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 确认对话框 -->
+    <div v-if="showConfirmDialog" class="dialog-overlay" @click="cancelConfirm">
+      <div class="confirm-dialog" @click.stop>
+        <div class="confirm-icon warning">⚠️</div>
+        <div class="confirm-message">{{ confirmMessage }}</div>
+        <div class="confirm-actions">
+          <button class="cancel-btn" @click="cancelConfirm">取消</button>
+          <button class="confirm-btn danger" @click="confirmAction">确定</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 消息提示 -->
+    <transition name="message-fade">
+      <div v-if="message.show" :class="['message-toast', message.type]">
+        <span class="message-icon">{{ messageIcon }}</span>
+        <span class="message-text">{{ message.text }}</span>
+      </div>
+    </transition>
+  </page>
+</template>
+
+<script>
+import Page from '../components/Page'
+import ToolService from '../services/ToolService'
+
+export default {
+  name: 'ManagePage',
+  components: { Page },
+  
+  data() {
+    return {
+      loading: false,
+      categories: [],
+      showCategoryDialog: false,
+      showToolDialog: false,
+      showConfirmDialog: false,
+      confirmMessage: '',
+      confirmCallback: null,
+      message: {
+        show: false,
+        text: '',
+        type: 'success' // success, error, warning
+      },
+      colorOptions: [
+        { name: '粉色', value: 'linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%)' },
+        { name: '蓝色', value: 'linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%)' },
+        { name: '紫色', value: 'linear-gradient(135deg, #d299c2 0%, #fef9d7 100%)' },
+        { name: '绿色', value: 'linear-gradient(135deg, #96fbc4 0%, #f9f586 100%)' },
+        { name: '橙色', value: 'linear-gradient(135deg, #ff9966 0%, #ff5e62 100%)' },
+        { name: '红黄', value: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)' },
+        { name: '紫蓝', value: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' },
+        { name: '青色', value: 'linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%)' },
+        { name: '蓝绿', value: 'linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)' },
+        { name: '深紫', value: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' },
+        { name: '粉蓝', value: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)' },
+        { name: '深绿', value: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)' },
+        { name: '淡紫', value: 'linear-gradient(135deg, #fbc2eb 0%, #a6c1ee 100%)' },
+        { name: '天蓝', value: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)' },
+        { name: '淡青', value: 'linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%)' },
+        { name: '金黄', value: 'linear-gradient(135deg, #f8b500 0%, #fceabb 100%)' },
+        { name: '橙红', value: 'linear-gradient(135deg, #e43a15 0%, #e65245 100%)' },
+        { name: '绿青', value: 'linear-gradient(135deg, #0ba360 0%, #3cba92 100%)' },
+        { name: '翠绿', value: 'linear-gradient(135deg, #38ef7d 0%, #11998e 100%)' },
+        { name: '深蓝', value: 'linear-gradient(135deg, #2af598 0%, #009efd 100%)' },
+        { name: '粉红', value: 'linear-gradient(135deg, #f77062 0%, #fe5196 100%)' },
+        { name: '橙粉', value: 'linear-gradient(135deg, #ee0979 0%, #ff6a00 100%)' },
+        { name: '淡粉', value: 'linear-gradient(135deg, #fdcbf1 0%, #e6dee9 100%)' },
+        { name: '深青', value: 'linear-gradient(135deg, #a8c0ff 0%, #3f2b96 100%)' },
+        { name: '淡黄', value: 'linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%)' },
+        { name: '淡蓝', value: 'linear-gradient(135deg, #accbee 0%, #e7f0fd 100%)' }
+      ],
+      categoryForm: {
+        id: null,
+        key: '',
+        title: '',
+        sortOrder: 0
+      },
+      toolForm: {
+        id: null,
+        categoryKey: '',
+        name: '',
+        desc: '',
+        url: '',
+        displayUrl: '',
+        icon: '',
+        color: 'linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%)',
+        sortOrder: 0
+      },
+      currentCategory: null
+    }
+  },
+  
+  computed: {
+    messageIcon() {
+      const icons = {
+        success: '✓',
+        error: '✕',
+        warning: '⚠'
+      }
+      return icons[this.message.type] || '✓'
+    }
+  },
+  
+
+  
+  created() {
+    this.loadData()
+  },
+  
+  methods: {
+    // 消息提示
+    showMessage(text, type = 'success') {
+      this.message = { show: true, text, type }
+      setTimeout(() => {
+        this.message.show = false
+      }, 3000)
+    },
+
+    // 确认对话框
+    showConfirm(message, callback) {
+      this.confirmMessage = message
+      this.confirmCallback = callback
+      this.showConfirmDialog = true
+    },
+
+    confirmAction() {
+      if (this.confirmCallback) {
+        this.confirmCallback()
+      }
+      this.showConfirmDialog = false
+      this.confirmCallback = null
+    },
+
+    cancelConfirm() {
+      this.showConfirmDialog = false
+      this.confirmCallback = null
+    },
+
+    goBack() {
+      this.$router.push('/')
+    },
+
+    async loadData() {
+      try {
+        this.loading = true
+        
+        const [categoriesRes, toolsRes] = await Promise.all([
+          ToolService.getCategories(),
+          ToolService.getTools()
+        ])
+        
+        if (categoriesRes && categoriesRes.code === 200 && toolsRes && toolsRes.code === 200) {
+          const categories = (categoriesRes.rows || []).map(cat => ({
+            id: cat.id,
+            key: cat.categoryKey,
+            title: cat.categoryTitle,
+            sortOrder: cat.sortOrder || 0,
+            tools: []
+          }))
+          
+          const tools = (toolsRes.rows || []).map(tool => ({
+            id: tool.id,
+            categoryId: tool.categoryId,
+            name: tool.name,
+            desc: tool.description,
+            url: tool.url,
+            displayUrl: tool.displayUrl,
+            icon: tool.icon,
+            color: tool.color
+          }))
+          
+          tools.forEach(tool => {
+            const category = categories.find(cat => cat.id === tool.categoryId)
+            if (category) {
+              category.tools.push(tool)
+            }
+          })
+          
+          categories.sort((a, b) => a.sortOrder - b.sortOrder)
+          
+          this.categories = categories
+        }
+      } catch (error) {
+        console.error('加载数据异常:', error)
+        this.showMessage('加载数据失败', 'error')
+      } finally {
+        this.loading = false
+      }
+    },
+
+    // 分类管理
+    showAddCategoryDialog() {
+      this.categoryForm = {
+        id: null,
+        key: '',
+        title: '',
+        sortOrder: this.categories.length
+      }
+      this.showCategoryDialog = true
+    },
+
+    editCategory(category) {
+      this.categoryForm = {
+        id: category.id,
+        key: category.key,
+        title: category.title,
+        sortOrder: category.sortOrder
+      }
+      this.showCategoryDialog = true
+    },
+
+    closeCategoryDialog() {
+      this.showCategoryDialog = false
+    },
+
+    saveCategory() {
+      if (!this.categoryForm.key) {
+        this.showMessage('请填写分类标识', 'warning')
+        return
+      }
+      
+      if (!this.categoryForm.title) {
+        this.showMessage('请填写分类名称', 'warning')
+        return
+      }
+
+      if (this.categoryForm.id) {
+        this.updateCategoryToServer()
+      } else {
+        if (this.categories.find(c => c.key === this.categoryForm.key)) {
+          this.showMessage('分类标识已存在，请使用其他标识', 'warning')
+          return
+        }
+        this.addCategoryToServer()
+      }
+    },
+
+    async addCategoryToServer() {
+      try {
+        const data = {
+          categoryKey: this.categoryForm.key,
+          categoryTitle: this.categoryForm.title,
+          sortOrder: this.categoryForm.sortOrder
+        }
+        
+        const response = await ToolService.createCategory(data)
+        
+        if (response && response.code === 200) {
+          this.showMessage('添加成功')
+          this.closeCategoryDialog()
+          this.loadData()
+        } else {
+          this.showMessage('添加失败：' + (response.msg || '未知错误'), 'error')
+        }
+      } catch (error) {
+        console.error('添加分类失败:', error)
+        this.showMessage('添加失败，请检查网络连接', 'error')
+      }
+    },
+
+    async updateCategoryToServer() {
+      try {
+        const response = await ToolService.updateCategory({
+          id: this.categoryForm.id,
+          categoryKey: this.categoryForm.key,
+          categoryTitle: this.categoryForm.title,
+          sortOrder: this.categoryForm.sortOrder
+        })
+        
+        if (response && response.code === 200) {
+          this.showMessage('修改成功')
+          this.closeCategoryDialog()
+          this.loadData()
+        } else {
+          this.showMessage('修改失败：' + (response.msg || '未知错误'), 'error')
+        }
+      } catch (error) {
+        console.error('修改分类失败:', error)
+        this.showMessage('修改失败，请检查网络连接', 'error')
+      }
+    },
+
+    deleteCategory(category) {
+      const message = category.tools && category.tools.length > 0 
+        ? `该分类下还有 ${category.tools.length} 个网址，确定要删除"${category.title}"吗？`
+        : `确定要删除分类"${category.title}"吗？`
+      
+      this.showConfirm(message, () => {
+        this.deleteCategoryFromServer(category.id)
+      })
+    },
+
+    async deleteCategoryFromServer(id) {
+      try {
+        const response = await ToolService.deleteCategory([id])
+        
+        if (response && response.code === 200) {
+          this.showMessage('删除成功')
+          this.loadData()
+        } else {
+          this.showMessage('删除失败：' + (response.msg || '未知错误'), 'error')
+        }
+      } catch (error) {
+        console.error('删除分类失败:', error)
+        this.showMessage('删除失败，请检查网络连接', 'error')
+      }
+    },
+
+    // 工具管理
+    showAddToolDialog(category) {
+      this.currentCategory = category
+      this.toolForm = {
+        id: null,
+        categoryKey: category.key,
+        name: '',
+        desc: '',
+        url: '',
+        displayUrl: '',
+        icon: '',
+        color: 'linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%)',
+        sortOrder: category.tools.length
+      }
+      this.showToolDialog = true
+    },
+
+    editTool(category, tool) {
+      this.currentCategory = category
+      this.toolForm = {
+        id: tool.id,
+        categoryKey: category.key,
+        name: tool.name,
+        desc: tool.desc,
+        url: tool.url,
+        displayUrl: tool.displayUrl,
+        icon: tool.icon,
+        color: tool.color,
+        sortOrder: tool.sortOrder || 0
+      }
+      this.showToolDialog = true
+    },
+
+    closeToolDialog() {
+      this.showToolDialog = false
+      this.currentCategory = null
+    },
+
+    saveTool() {
+      if (!this.toolForm.name) {
+        this.showMessage('请填写网址名称', 'warning')
+        return
+      }
+      
+      if (!this.toolForm.url) {
+        this.showMessage('请填写访问地址', 'warning')
+        return
+      }
+      
+      // 验证URL格式
+      if (!this.isValidUrl(this.toolForm.url)) {
+        this.showMessage('请输入完整的URL地址，必须以http://或https://开头', 'warning')
+        return
+      }
+
+      if (this.toolForm.id) {
+        this.updateToolToServer()
+      } else {
+        if (this.currentCategory.tools.find(t => t.name === this.toolForm.name)) {
+          this.showMessage('该分类下已存在同名网址，请使用其他名称', 'warning')
+          return
+        }
+        this.addToolToServer()
+      }
+    },
+    
+    // 验证URL格式
+    isValidUrl(url) {
+      if (!url) return false
+      return url.startsWith('http://') || url.startsWith('https://')
+    },
+
+    async addToolToServer() {
+      try {
+        const response = await ToolService.createTool({
+          categoryId: this.currentCategory.id,
+          name: this.toolForm.name,
+          description: this.toolForm.desc,
+          url: this.toolForm.url,
+          displayUrl: this.toolForm.displayUrl,
+          icon: this.toolForm.icon,
+          color: this.toolForm.color,
+          sortOrder: this.toolForm.sortOrder
+        })
+        
+        if (response && response.code === 200) {
+          this.showMessage('添加成功')
+          this.closeToolDialog()
+          this.loadData()
+        } else {
+          this.showMessage('添加失败：' + (response.msg || '未知错误'), 'error')
+        }
+      } catch (error) {
+        console.error('添加工具失败:', error)
+        this.showMessage('添加失败，请检查网络连接', 'error')
+      }
+    },
+
+    async updateToolToServer() {
+      try {
+        const response = await ToolService.updateTool({
+          id: this.toolForm.id,
+          categoryId: this.currentCategory.id,
+          name: this.toolForm.name,
+          description: this.toolForm.desc,
+          url: this.toolForm.url,
+          displayUrl: this.toolForm.displayUrl,
+          icon: this.toolForm.icon,
+          color: this.toolForm.color,
+          sortOrder: this.toolForm.sortOrder
+        })
+        
+        if (response && response.code === 200) {
+          this.showMessage('修改成功')
+          this.closeToolDialog()
+          this.loadData()
+        } else {
+          this.showMessage('修改失败：' + (response.msg || '未知错误'), 'error')
+        }
+      } catch (error) {
+        console.error('修改工具失败:', error)
+        this.showMessage('修改失败，请检查网络连接', 'error')
+      }
+    },
+
+    deleteTool(category, tool) {
+      this.showConfirm(`确定要删除网址"${tool.name}"吗？`, () => {
+        this.deleteToolFromServer(tool.id)
+      })
+    },
+
+    async deleteToolFromServer(id) {
+      try {
+        const response = await ToolService.deleteTool([id])
+        
+        if (response && response.code === 200) {
+          this.showMessage('删除成功')
+          this.loadData()
+        } else {
+          this.showMessage('删除失败：' + (response.msg || '未知错误'), 'error')
+        }
+      } catch (error) {
+        console.error('删除工具失败:', error)
+        this.showMessage('删除失败，请检查网络连接', 'error')
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@primary-color: #667eea;
+@primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+@text-primary: #333;
+@text-secondary: #666;
+@text-tertiary: #999;
+@border-color: #dcdfe6;
+@white-color: #fff;
+
+.manage-page {
+  min-height: 100vh;
+  background: @primary-gradient;
+  padding-top: 64px; // 为固定头部预留空间
+}
+
+.manage-header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  background: @primary-gradient;
+  padding: 20px 40px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  display: flex;
+  justify-content: center; // PC端居中
+  align-items: center;
+  z-index: 1000;
+  
+  h1 {
+    margin: 0;
+    font-size: 36px; // 与HomePage保持一致
+    color: @white-color;
+    font-weight: 800; // 与HomePage保持一致
+    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+    letter-spacing: 2px; // 添加字母间距
+  }
+  
+  .back-btn {
+    position: absolute; // 绝对定位避免遮挡标题
+    right: 40px;
+    padding: 12px 28px;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border: none;
+    border-radius: 12px;
+    color: white;
+    font-size: 15px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
+    
+    // 返回图标
+    &::before {
+      content: '◄';
+      margin-right: 8px;
+      font-size: 14px;
+      display: inline-block;
+      transition: transform 0.3s ease;
+    }
+    
+    &:hover {
+      transform: translateY(-3px);
+      box-shadow: 0 10px 30px rgba(102, 126, 234, 0.5);
+      background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
+      
+      &::before {
+        transform: translateX(-4px);
+      }
+    }
+    
+    &:active {
+      transform: translateY(-1px);
+      box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
+    }
+  }
+}
+
+.manage-container {
+  padding: 20px 8px;
+}
+
+.manage-section {
+  background: white;
+  border-radius: 12px;
+  padding: 20px 12px;
+  margin-bottom: 24px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+  
+  .section-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+    padding-bottom: 16px;
+    border-bottom: 2px solid #f0f0f0;
+    
+    h2 {
+      margin: 0;
+      font-size: 20px;
+      color: @text-primary;
+    }
+  }
+}
+
+// 统一的添加按钮样式
+.add-btn {
+  padding: 8px 20px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border: none;
+  border-radius: 8px;
+  color: white;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+  
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
+    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
+  }
+  
+  &:active {
+    transform: translateY(0);
+  }
+  
+  &.small {
+    padding: 6px 16px;
+    font-size: 13px;
+  }
+}
+
+.category-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 10px;
+  
+  .category-item {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 12px;
+    background: #f9fafb;
+    border-radius: 6px;
+    border: 1px solid #e5e7eb;
+    transition: all 0.2s ease;
+    
+    &:hover {
+      background: #f3f4f6;
+      border-color: @primary-color;
+    }
+    
+    .category-info {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      
+      .category-key {
+        padding: 3px 10px;
+        background: @primary-color;
+        color: white;
+        border-radius: 4px;
+        font-size: 12px;
+        font-weight: 500;
+        white-space: nowrap;
+      }
+      
+      .category-name {
+        font-size: 14px;
+        color: @text-primary;
+        font-weight: 500;
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      
+      .category-sort {
+        font-size: 12px;
+        color: @primary-color;
+        background: rgba(102, 126, 234, 0.1);
+        padding: 2px 8px;
+        border-radius: 4px;
+        white-space: nowrap;
+        font-weight: 500;
+      }
+    }
+    
+    .category-footer {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      
+      .category-count {
+        font-size: 12px;
+        color: @text-tertiary;
+        white-space: nowrap;
+      }
+      
+      .category-actions {
+        display: flex;
+        gap: 6px;
+      }
+    }
+  }
+}
+
+.tool-group {
+  margin-bottom: 24px;
+  
+  &:last-child {
+    margin-bottom: 0;
+  }
+  
+  .tool-group-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 12px;
+    padding: 12px 16px;
+    background: #f9fafb;
+    border-radius: 6px;
+    
+    h3 {
+      margin: 0;
+      font-size: 16px;
+      color: @text-primary;
+    }
+  }
+  
+  .tool-list {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    gap: 10px;
+    
+    .tool-item {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      padding: 10px;
+      background: #fafafa;
+      border-radius: 6px;
+      border: 1px solid #e5e7eb;
+      transition: all 0.2s ease;
+      
+      &:hover {
+        background: #f3f4f6;
+        border-color: @primary-color;
+      }
+      
+      .tool-main {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        
+        .tool-icon {
+          width: 36px;
+          height: 36px;
+          border-radius: 6px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 16px;
+          color: white;
+          font-weight: bold;
+          flex-shrink: 0;
+        }
+        
+        .tool-info {
+          flex: 1;
+          min-width: 0;
+          
+          .tool-name {
+            font-size: 13px;
+            font-weight: 500;
+            color: @text-primary;
+            margin-bottom: 2px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+          
+          .tool-desc {
+            font-size: 11px;
+            color: @text-secondary;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+        }
+        
+        .tool-sort {
+          font-size: 11px;
+          color: @primary-color;
+          background: rgba(102, 126, 234, 0.1);
+          padding: 2px 8px;
+          border-radius: 4px;
+          white-space: nowrap;
+          font-weight: 500;
+          flex-shrink: 0;
+        }
+      }
+      
+      .tool-footer {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: 8px;
+        
+        .tool-url {
+          font-size: 10px;
+          color: @text-tertiary;
+          font-family: 'Consolas', monospace;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          flex: 1;
+        }
+        
+        .tool-actions {
+          display: flex;
+          gap: 6px;
+          flex-shrink: 0;
+        }
+      }
+    }
+  }
+}
+
+button {
+  &.edit-btn {
+    padding: 5px 10px;
+    background: #409eff;
+    border: none;
+    border-radius: 4px;
+    color: white;
+    font-size: 12px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    
+    &:hover {
+      background: #66b1ff;
+    }
+  }
+  
+  &.delete-btn {
+    padding: 5px 10px;
+    background: #f56c6c;
+    border: none;
+    border-radius: 4px;
+    color: white;
+    font-size: 12px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    
+    &:hover {
+      background: #f78989;
+    }
+  }
+}
+
+// 对话框样式
+.dialog-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2000;
+  
+  .dialog {
+    background: white;
+    border-radius: 12px;
+    padding: 24px;
+    width: 90%;
+    max-width: 500px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+    
+    h3 {
+      margin: 0 0 20px;
+      font-size: 20px;
+      color: @text-primary;
+    }
+    
+    .form-group {
+      margin-bottom: 16px;
+      
+      label {
+        display: block;
+        margin-bottom: 8px;
+        font-size: 14px;
+        color: @text-secondary;
+        font-weight: 500;
+        
+        .required {
+          color: #f56c6c;
+          margin-right: 4px;
+        }
+      }
+      
+      input, select {
+        width: 100%;
+        padding: 10px 12px;
+        border: 1px solid @border-color;
+        border-radius: 6px;
+        font-size: 14px;
+        box-sizing: border-box;
+        transition: border-color 0.2s ease;
+        
+        &:focus {
+          outline: none;
+          border-color: @primary-color;
+        }
+        
+        &:disabled {
+          background: #f5f7fa;
+          color: #999;
+          cursor: not-allowed;
+        }
+      }
+      
+      select {
+        cursor: pointer;
+      }
+    }
+    
+    // 颜色选择器样式
+    .color-picker {
+      display: grid;
+      grid-template-columns: repeat(8, 1fr);
+      gap: 8px;
+      padding: 0 2px;
+      
+      .color-option {
+        width: 100%;
+        aspect-ratio: 1;
+        border-radius: 8px;
+        cursor: pointer;
+        transition: all 0.2s ease;
+        border: 3px solid transparent;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+        
+        &:hover {
+          transform: translateY(-2px);
+          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+        }
+        
+        &.active {
+          border-color: @primary-color;
+          box-shadow: 0 0 0 2px white, 0 0 0 4px @primary-color;
+        }
+        
+        .check-icon {
+          color: white;
+          font-size: 20px;
+          font-weight: bold;
+          text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+        }
+      }
+    }
+    
+    .dialog-actions {
+      display: flex;
+      justify-content: flex-end;
+      gap: 12px;
+      margin-top: 24px;
+      
+      button {
+        padding: 10px 24px;
+        border-radius: 6px;
+        font-size: 14px;
+        cursor: pointer;
+        transition: all 0.2s ease;
+      }
+      
+      .cancel-btn {
+        background: white;
+        border: 1px solid @border-color;
+        color: @text-primary;
+        
+        &:hover {
+          color: @primary-color;
+          border-color: @primary-color;
+        }
+      }
+      
+      .confirm-btn {
+        background: @primary-color;
+        border: none;
+        color: white;
+        
+        &:hover {
+          background: #5568d3;
+        }
+      }
+    }
+  }
+}
+
+// 确认对话框样式
+.confirm-dialog {
+  background: white;
+  border-radius: 12px;
+  padding: 32px 24px 24px;
+  width: 90%;
+  max-width: 400px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+  text-align: center;
+  
+  .confirm-icon {
+    font-size: 48px;
+    margin-bottom: 16px;
+    
+    &.warning {
+      color: #e6a23c;
+    }
+  }
+  
+  .confirm-message {
+    font-size: 16px;
+    color: @text-primary;
+    margin-bottom: 24px;
+    line-height: 1.6;
+  }
+  
+  .confirm-actions {
+    display: flex;
+    gap: 12px;
+    justify-content: center;
+    
+    button {
+      padding: 10px 32px;
+      border-radius: 6px;
+      font-size: 14px;
+      cursor: pointer;
+      transition: all 0.2s ease;
+      min-width: 100px;
+    }
+    
+    .cancel-btn {
+      background: white;
+      border: 1px solid @border-color;
+      color: @text-primary;
+      
+      &:hover {
+        color: @primary-color;
+        border-color: @primary-color;
+      }
+    }
+    
+    .confirm-btn {
+      background: @primary-color;
+      border: none;
+      color: white;
+      
+      &:hover {
+        background: #5568d3;
+      }
+      
+      &.danger {
+        background: #f56c6c;
+        
+        &:hover {
+          background: #f78989;
+        }
+      }
+    }
+  }
+}
+
+// 消息提示样式
+.message-toast {
+  position: fixed;
+  top: 80px;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 14px 24px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 14px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+  z-index: 3000;
+  min-width: 300px;
+  justify-content: center;
+  
+  .message-icon {
+    font-size: 18px;
+    font-weight: bold;
+  }
+  
+  &.success {
+    background: #f0f9ff;
+    border: 1px solid #67c23a;
+    color: #67c23a;
+    
+    .message-icon {
+      color: #67c23a;
+    }
+  }
+  
+  &.error {
+    background: #fef0f0;
+    border: 1px solid #f56c6c;
+    color: #f56c6c;
+    
+    .message-icon {
+      color: #f56c6c;
+    }
+  }
+  
+  &.warning {
+    background: #fdf6ec;
+    border: 1px solid #e6a23c;
+    color: #e6a23c;
+    
+    .message-icon {
+      color: #e6a23c;
+    }
+  }
+}
+
+// 消息提示动画
+.message-fade-enter-active,
+.message-fade-leave-active {
+  transition: all 0.3s ease;
+}
+
+.message-fade-enter {
+  opacity: 0;
+  transform: translate(-50%, -20px);
+}
+
+.message-fade-leave-to {
+  opacity: 0;
+  transform: translate(-50%, -20px);
+}
+
+// 响应式布局 - 手机端
+@media (max-width: 600px) {
+  .manage-header {
+    justify-content: flex-start; // 手机端左对齐
+    padding: 20px;
+    
+    h1 {
+      font-size: 24px; // 手机端与HomePage保持一致
+    }
+    
+    .back-btn {
+      right: 20px;
+      padding: 10px 20px;
+      font-size: 14px;
+      
+      &::before {
+        font-size: 12px;
+      }
+    }
+  }
+  
+  .manage-container {
+    padding: 16px 8px;
+  }
+  
+  .category-list {
+    grid-template-columns: 1fr !important;
+  }
+  
+  .tool-list {
+    grid-template-columns: 1fr !important;
+  }
+}
+</style>
\ No newline at end of file