diff --git a/package-lock.json b/package-lock.json
index 6bb517b..fa98f56 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "amfe-flexible": "^2.2.1",
+        "axios": "^1.18.1",
         "pinia": "^3.0.4",
         "vant": "^4.9.24",
         "vue": "^3.5.38",
@@ -1214,6 +1215,18 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/agent-base": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmmirror.com/agent-base/-/agent-base-6.0.2.tgz",
+      "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6.0.0"
+      }
+    },
     "node_modules/amfe-flexible": {
       "version": "2.2.1",
       "resolved": "https://registry.npmmirror.com/amfe-flexible/-/amfe-flexible-2.2.1.tgz",
@@ -1263,6 +1276,24 @@
         "url": "https://github.com/sponsors/sxzz"
       }
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "license": "MIT"
+    },
+    "node_modules/axios": {
+      "version": "1.18.1",
+      "resolved": "https://registry.npmmirror.com/axios/-/axios-1.18.1.tgz",
+      "integrity": "sha512-3nTvFlvpn9Zu/RkHUqtc7/+al4UpRW5az71ap5zccp6e8RAYEzhMTecX8Dz1wWDYrPpUoB1HAQEGEAEvUr7S9g==",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.16.0",
+        "form-data": "^4.0.5",
+        "https-proxy-agent": "^5.0.1",
+        "proxy-from-env": "^2.1.0"
+      }
+    },
     "node_modules/baseline-browser-mapping": {
       "version": "2.10.38",
       "resolved": "https://registry.npmmirror.com/baseline-browser-mapping/-/baseline-browser-mapping-2.10.38.tgz",
@@ -1335,6 +1366,19 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001799",
       "resolved": "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001799.tgz",
@@ -1371,6 +1415,18 @@
         "url": "https://paulmillr.com/funding/"
       }
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "license": "MIT",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/confbox": {
       "version": "0.2.4",
       "resolved": "https://registry.npmmirror.com/confbox/-/confbox-0.2.4.tgz",
@@ -1409,7 +1465,6 @@
       "version": "4.4.3",
       "resolved": "https://registry.npmmirror.com/debug/-/debug-4.4.3.tgz",
       "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ms": "^2.1.3"
@@ -1466,6 +1521,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/detect-libc": {
       "version": "2.1.2",
       "resolved": "https://registry.npmmirror.com/detect-libc/-/detect-libc-2.1.2.tgz",
@@ -1476,6 +1540,20 @@
         "node": ">=8"
       }
     },
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.5.377",
       "resolved": "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.5.377.tgz",
@@ -1505,6 +1583,51 @@
         "url": "https://github.com/sponsors/antfu"
       }
     },
+    "node_modules/es-define-property": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmmirror.com/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-object-atoms": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/es-object-atoms/-/es-object-atoms-1.1.2.tgz",
+      "integrity": "sha512-HWcBoN6NileqtSydK2FqHbS/LoDd2pqrnQHLyJzBj4kOp/ky2MWMN694xOfkK8/SnUsW2DH7EfyVlydKCsm1Zw==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-set-tostringtag": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
+      "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/escalade": {
       "version": "3.2.0",
       "resolved": "https://registry.npmmirror.com/escalade/-/escalade-3.2.0.tgz",
@@ -1557,6 +1680,42 @@
         }
       }
     },
+    "node_modules/follow-redirects": {
+      "version": "1.16.0",
+      "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.16.0.tgz",
+      "integrity": "sha512-y5rN/uOsadFT/JfYwhxRS5R7Qce+g3zG97+JrtFZlC9klX/W5hD7iiLzScI4nZqUS7DNUdhPgw4xI8W2LuXlUw==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/form-data": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmmirror.com/form-data/-/form-data-4.0.6.tgz",
+      "integrity": "sha512-vKatAh4SlVfgbv+YtmhiRjhEMJsYpsG1Y2rMQtR+SVSbytsSD1YGzDIcrAJmdFec88u/+VoGmxnl+80gL1tRCQ==",
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "es-set-tostringtag": "^2.1.0",
+        "hasown": "^2.0.4",
+        "mime-types": "^2.1.35"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmmirror.com/fsevents/-/fsevents-2.3.3.tgz",
@@ -1572,6 +1731,15 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmmirror.com/gensync/-/gensync-1.0.0-beta.2.tgz",
@@ -1582,12 +1750,113 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/get-intrinsic": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmmirror.com/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "function-bind": "^1.1.2",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/gopd": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmmirror.com/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-tostringtag": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+      "license": "MIT",
+      "dependencies": {
+        "has-symbols": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmmirror.com/hasown/-/hasown-2.0.4.tgz",
+      "integrity": "sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A==",
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/hookable": {
       "version": "5.5.3",
       "resolved": "https://registry.npmmirror.com/hookable/-/hookable-5.5.3.tgz",
       "integrity": "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==",
       "license": "MIT"
     },
+    "node_modules/https-proxy-agent": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmmirror.com/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
+      "integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==",
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "6",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/is-docker": {
       "version": "3.0.0",
       "resolved": "https://registry.npmmirror.com/is-docker/-/is-docker-3.0.0.tgz",
@@ -2014,6 +2283,36 @@
         "url": "https://github.com/sponsors/sxzz"
       }
     },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/mitt": {
       "version": "3.0.1",
       "resolved": "https://registry.npmmirror.com/mitt/-/mitt-3.0.1.tgz",
@@ -2063,7 +2362,6 @@
       "version": "2.1.3",
       "resolved": "https://registry.npmmirror.com/ms/-/ms-2.1.3.tgz",
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/muggle-string": {
@@ -2271,6 +2569,15 @@
         "url": "https://github.com/prettier/prettier?sponsor=1"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-2.1.0.tgz",
+      "integrity": "sha512-cJ+oHTW1VAEa8cJslgmUZrc+sjRKgAKl3Zyse6+PV38hZe/V6Z14TbCuXcan9F9ghlz4QrFr2c92TNF82UkYHA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/quansync": {
       "version": "0.2.11",
       "resolved": "https://registry.npmmirror.com/quansync/-/quansync-0.2.11.tgz",
diff --git a/package.json b/package.json
index d56af14..63c6a89 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "amfe-flexible": "^2.2.1",
+    "axios": "^1.18.1",
     "pinia": "^3.0.4",
     "vant": "^4.9.24",
     "vue": "^3.5.38",
diff --git a/src/api/apply.js b/src/api/apply.js
new file mode 100644
index 0000000..17a5f4d
--- /dev/null
+++ b/src/api/apply.js
@@ -0,0 +1,15 @@
+import axios from 'axios';
+
+// 已审批列表
+export function applyListApi(params) {
+    return axios.get('/api/chain-remove-applies', {params});
+}
+// 待审批列表
+export function waitListApi(params) {
+    return axios.get('/api/chain-remove-applies/my-tasks', {params});
+}
+// 详情
+export function detailsApi(id) {
+  return axios.get('/api/chain-remove-applies/'+id);
+}
+
diff --git a/src/api/login.js b/src/api/login.js
new file mode 100644
index 0000000..b6b30a1
--- /dev/null
+++ b/src/api/login.js
@@ -0,0 +1,7 @@
+import axios from 'axios';
+
+// 用户登录
+export function loginApi(data) {
+  return axios.post('/api/auth/login', data);
+}
+
diff --git a/src/api/request.js b/src/api/request.js
new file mode 100644
index 0000000..9df08fc
--- /dev/null
+++ b/src/api/request.js
@@ -0,0 +1,47 @@
+import axios from 'axios';
+import router from '@/router'
+import { showNotify } from 'vant';
+
+const url = 'http://192.168.0.230';
+axios.defaults.baseURL = url; 
+axios.defaults.withCredentials = false;
+axios.defaults.timeout = 200000;
+
+// 请求拦截器
+axios.interceptors.request.use(
+  (config) => {
+    const token = localStorage.getItem('token');
+    if (token) {
+      if (!config.headers) {
+        config.headers = {};
+      }
+      config.headers.Authorization = `Bearer ` + token;
+      config.headers['Content-Type'] =
+        'application/json;application/vnd.ms-excel;application/json;charset=UTF-8';
+    }
+    return config;
+  },
+  (error) => {
+    return Promise.reject(error);
+  }
+);
+
+// 响应拦截器
+axios.interceptors.response.use(
+  (response) => {
+    const res = response.data;
+    if (res.code === 200) {
+      return res;
+    }
+    return res;
+  },
+  (error) => {
+    if (error.response.status === 401) {
+      showNotify({ type: 'danger', message: '账号已过期,请重新登录!' });
+      router.push({ path: '/login' });
+    } else {
+      showNotify({ type: 'danger', message: error.response.data.message || '服务错误' });
+    }
+    return Promise.reject(error);;
+  }
+);
\ No newline at end of file
diff --git a/src/assets/main.css b/src/assets/main.css
index 1b7980c..b6175c3 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -89,3 +89,15 @@ body {
   max-width: 1280px;
   margin: 0 auto;
 }
+.global-loading-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(255, 255, 255, 0.9);
+  z-index: 9999;
+}
diff --git a/src/main.js b/src/main.js
index 9d7b3b4..578ddef 100644
--- a/src/main.js
+++ b/src/main.js
@@ -4,6 +4,8 @@ import { createPinia } from 'pinia'
 import App from './App.vue'
 import router from './router'
 import 'amfe-flexible'
+import 'vant/lib/index.css'
+import '@/api/request';
 
 const app = createApp(App)
 
diff --git a/src/router/index.js b/src/router/index.js
index 74c5af0..f32914c 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -26,20 +26,36 @@ const router = createRouter({
 // 动态路由（需要权限的页面）
 // 注意：这些路由不会在一开始注册，而是在守卫中动态添加
 const asyncRoutes = [
+  // 列表
   {
     path: '/applyList',
     name: 'applyList',
     component: () => import('../views/applyList/index.vue'),
-    meta: {
-      title: '申请列表',
-    },
+  },
+  // 详情
+  {
+    path: '/detail',
+    name: 'detail',
+    component: () => import('../views/applyList/detail.vue'),
+  },
+  // 联锁详情
+  {
+    path: '/lockDetail',
+    name: 'lockDetail',
+    component: () => import('../views/applyList/lockDetail.vue'),
+  },
+  // 待审批列表
+  {
+    path: '/waitList',
+    name: 'waitList',
+    component: () => import('../views/applyList/waitList.vue'),
   },
 ]
 
 // 标志位：是否已添加动态路由
 let isRoutesAdded = false
 router.beforeEach((to, from, next) => {
-  const token = localStorage.getItem('token')
+  const token = localStorage.getItem('token') || '123'
   if (token) {
     // 关键：有 token 但业务路由还没挂载 => 动态添加（仅一次）
     if (!isRoutesAdded) {
diff --git a/src/views/applyList/detail.vue b/src/views/applyList/detail.vue
new file mode 100644
index 0000000..c859b9b
--- /dev/null
+++ b/src/views/applyList/detail.vue
@@ -0,0 +1,272 @@
+<script setup>
+import { ref,onMounted } from 'vue'
+import router from '@/router'
+import { useRoute } from 'vue-router'
+import { showNotify } from 'vant'
+import { detailsApi } from '@/api/apply';
+
+const route = useRoute()
+const loading = ref(false);
+const params = ref(null)
+const info = ref(null)
+// 状态
+const statusList = ref([
+    {text:'草稿',value:0},
+    {text:'申请中（安全员/技术员）',value:1},
+    {text:'申请中（车间主任）',value:2},
+    {text:'申请中（车间值班人员）',value:101},
+    {text:'各部门会签中',value:3},
+    {text:'审批中',value:4},
+    {text:'通过',value:5},
+    {text:'已关闭',value:97},
+    {text:'已撤回',value:98},
+    {text:'已驳回',value:99},
+]);
+// 匹配选项
+const matchOptions = (arr,val) => {
+    const target = arr.find(item => item.value == val);
+    return target ? target.text : '';
+}
+// 路由跳转
+const jumpTo = (val) => {
+    // 跳转已审批列表
+    if(val===0){
+        router.push({
+            path: '/applyList',
+        })
+    }
+    // 跳转待审批列表
+    if(val===1){
+        router.push({
+            path: '/waitList',
+        })
+    }
+    // 跳转联锁详情页
+    if(val===2){
+        router.push({
+            path: '/lockDetail',
+            query: { id: params.value.id, type: params.value.type },
+        })
+    }
+}
+// 同意
+const agree = () => {
+    showNotify({ type: 'success', message: '同意成功' });
+}
+// 获取详情
+const getDetail = async () => {
+    loading.value = true;
+    try {
+        const res = await detailsApi(params.value?.id);
+        info.value = res.data;
+        if(res.data?.status>=1 && res.data?.status<=4){
+            let allEmpty = res.data?.draft_apply_steps.every(item => item.draft_cosign_items.length === 0);
+            if(res.data?.draft_apply_steps?.length && !allEmpty){
+                info.value.steps = res.data?.draft_apply_steps;
+            }else{
+                info.value.steps = res.data?.apply_steps;
+            }
+        }else{
+            info.value.steps = res.data?.apply_steps;
+        }
+    } finally {
+        loading.value = false;
+    }
+}
+
+onMounted(() => { 
+    if(route.query){
+        params.value = route.query;
+        getDetail();
+    }
+})
+</script>
+
+<template>
+<!-- 全屏加载遮罩层 -->
+<div v-if="loading" class="global-loading-overlay">
+    <van-loading size="30px" color="#1989fa" vertical></van-loading>
+</div>
+<div class="main">
+    <div class="tab-box">
+        <p class="tab" :class="{'active':params?.type==='finish'}" @click="jumpTo(0)">已审批</p>
+        <p class="tab" :class="{'active':params?.type==='wait'}" @click="jumpTo(1)">待审批</p>
+    </div>
+    <template v-if="info">
+        <div class="detail">
+            <div class="row">
+                <div v-if="info.template_id==4">
+                    <p v-if="info.status==1">申请中（车间值班人员）</p>
+                    <p v-else>{{matchOptions(statusList,info.status)}}</p>
+                </div>
+                <div v-else>
+                    <p v-if="info.status==5 || info.status==100">通过</p>
+                    <p v-else>{{matchOptions(statusList,info.status)}}</p>
+                </div>
+                <p>申请摘除数量({{info.chain_count}})个</p>
+            </div>
+            <div class="row">
+                <p>岗位：{{info.chain_position}}</p>
+                <p>类型：{{info.template_name}}</p>
+            </div>
+            <div class="row">
+                <p>摘除理由：{{info.reasons}}</p>
+            </div>
+            <div class="row">
+                <p>计划摘除时间：{{info.plan_remove_time?.slice(0,16)}}</p>
+            </div>
+            <div class="row">
+                <p>计划恢复时间：{{info.plan_recover_time?.slice(0,16)}}</p>
+            </div>
+            <div class="row col">
+                <p class="blue-color">风险辨识</p>
+                <p>{{info.risk_description}}</p>
+            </div>
+            <div class="row col">
+                <p class="blue-color">安全措施</p>
+                <p>{{info.safety_measures}}</p>
+            </div>
+            <div class="row col">
+                <div class="timeline">
+                    <div class="timeline-item" v-if="info.template_id==4">
+                        <div class="left">
+                            <p class="timeline-dot"></p>
+                            <div class="txt">班长：</div>
+                            <div class="txt">{{info?.apply_user?.realname}}</div>
+                        </div>
+                    </div>
+                    <div class="timeline-item" v-if="info.template_id>=1 && info.template_id<=3">
+                        <div class="left">
+                            <p class="timeline-dot"></p>
+                            <div class="txt">车间工程师：</div>
+                            <div class="txt">{{info?.apply_user?.realname}}</div>
+                        </div>
+                    </div>
+                    <template v-for="(item, index) in info?.steps || []" :key="index">
+                        <template v-for="(sItem,sIndex) in (item.cosigns || item.cosign_items || item.draft_cosign_items)" :key="sIndex">
+                            <div class="timeline-item">
+                                <div class="left">
+                                    <p class="timeline-dot"></p>
+                                    <div class="txt">{{sItem.dept_name}}：</div>
+                                    <div class="txt">{{sItem.user_name}}</div>
+                                </div>
+                                <div class="txt" v-if="sItem.signed_at">{{(sItem.signed_at)?.slice(0,16)}}</div>
+                            </div>
+                        </template>
+                    </template>
+                </div>
+            </div>
+        </div>
+        <div class="btns">
+            <p class="btn" @click="jumpTo(params?.type==='finish'?0:1)">返回列表</p>
+            <p class="btn" @click="jumpTo(2)">联锁详情</p>
+            <p class="btn" v-if="params?.type==='wait'" @click="agree">同意</p>
+            <p class="btn" v-if="params?.type==='wait'">驳回</p>
+        </div>
+    </template>
+    <template v-else>
+        <van-empty description="暂无数据" />
+    </template>
+</div>
+</template>
+
+<style scoped>
+.blue-color {
+    color: #1989fa;
+}
+.main {
+    height: 100vh;
+    padding: 12px;
+    overflow: hidden;
+    font-size: 14px;
+}
+/* tab切换 */
+.tab-box {
+    display: flex;
+    border: 1px solid #1989fa;
+}
+.tab {
+    width: 50%;
+    padding: 5px 0;
+    text-align: center;
+    font-size: 16px;
+    color: #1989fa;
+}
+.tab.active {
+    background-color: #1989fa;
+    color: #fff;
+}
+/* 详情 */
+.detail {
+    margin-top: 12px;
+    height: calc(100vh - 120px);
+    overflow-y: auto;
+    border: 1px solid #f1f1f1;
+    border-radius: 2px;
+    padding: 10px;
+}
+.detail .row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 10px;
+    gap: 10px;
+}
+.detail .col {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 2px;
+}
+.detail .row:first-child {
+    margin-top: 0;
+}
+/* 底部按钮 */
+.btns {
+    margin-top: 12px;
+    display: flex;
+    gap: 12px;
+}
+.btns .btn {
+    width: 100%;
+    text-align: center;
+    padding: 8px 0;
+    border: 1px solid #eee;
+    border-radius: 2px;
+}
+/* 时间线 */
+.timeline {
+    width: 100%;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+.timeline:before {
+    content: '';
+    width: 1px;
+    height: calc(100% - 6px);
+    background: #1989fa;
+    position: absolute;
+    top: 3px;
+    left: 6px;
+}
+.timeline-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    position: relative;
+}
+.timeline-item .left {
+    display: flex;
+    align-items: center;
+}
+/* 圆点 */
+.timeline-dot {
+    width: 12px;
+    height: 12px;
+    background: #1989fa;
+    border-radius: 50%;
+    margin-right: 10px;
+}
+</style>
diff --git a/src/views/applyList/index.vue b/src/views/applyList/index.vue
index 33d32f2..cf79776 100644
--- a/src/views/applyList/index.vue
+++ b/src/views/applyList/index.vue
@@ -1,12 +1,213 @@
 <script setup>
+import { ref,onMounted } from 'vue'
+import router from '@/router'
+import { applyListApi } from '@/api/apply';
 
+const loading = ref(false);
+const isAll = ref('1');
+const currentPage = ref(1);
+const total = ref(0);
+// 状态
+const statusList = ref([
+    {text:'草稿',value:0},
+    {text:'申请中（安全员/技术员）',value:1},
+    {text:'申请中（车间主任）',value:2},
+    {text:'申请中（车间值班人员）',value:101},
+    {text:'各部门会签中',value:3},
+    {text:'审批中',value:4},
+    {text:'通过',value:5},
+    {text:'已关闭',value:97},
+    {text:'已撤回',value:98},
+    {text:'已驳回',value:99},
+]);
+const list = ref([])
+
+// 匹配选项
+const matchOptions = (arr,val) => {
+    const target = arr.find(item => item.value == val);
+    return target ? target.text : '';
+}
+// 单选框切换
+const radioChange = (val) => {
+    isAll.value = val;
+    currentPage.value = 1;
+    getList();
+}
+// 跳转
+const jumpTo = (type,item) => {
+    // 跳转待审批列表
+    if(type==='wait'){
+        router.push({
+            path: '/waitList',
+        })
+    }
+    // 跳转详情
+    if(type==='detail'){
+        router.push({
+            path: '/detail',
+            query: {id: item.id,type: 'finish'}
+        })
+    }
+}
+// 获取列表数据
+const getList = async () => {
+    loading.value = true;
+    try { 
+        const res = await applyListApi({
+            org_id: 1,
+            choice_status: Number(isAll.value),
+            remove_type: [],
+            status: [],
+            sort: JSON.stringify({'plan_remove_time':'','plan_recover_time':'','status_updated_at':''}),
+            page: currentPage.value,
+            per_page: 20
+        });
+        list.value = res.data.list;
+        total.value = res.data.meta.pagination.total;
+    } finally { 
+        loading.value = false;
+    }
+}
+
+// 分页
+const pageChange = (val) => {
+    currentPage.value = val;
+    getList();
+}
+
+onMounted(() => { 
+    getList();
+});
 </script>
 
 <template>
-    <div class="login">申请列表</div>
+<!-- 全屏加载遮罩层 -->
+<div v-if="loading" class="global-loading-overlay">
+    <van-loading size="30px" color="#1989fa" vertical></van-loading>
+</div>
+<div class="main">
+    <div class="tab-box">
+        <p class="tab active">已审批</p>
+        <p class="tab" @click="jumpTo('wait',null)">待审批</p>
+    </div>
+    <div class="radio-box">
+        <van-radio-group v-model="isAll" direction="horizontal" @change="radioChange">
+            <van-radio name="1">只显示未关闭</van-radio>
+            <van-radio name="0">显示全部</van-radio>
+        </van-radio-group>
+    </div>
+    <div class="list">
+        <template v-if="list.length">
+            <div class="item" v-for="(item, index) in list" :key="index">
+                <div class="row">
+                    <p>类型：{{item.template_name}}</p>
+                    <p>申请摘除数量({{item.chain_count}})个</p>
+                </div>
+                <div class="row">
+                    <div class="blue-color bold">
+                        <div v-if="item.template_id==4">
+                            <p v-if="item.status==1">申请中（车间值班人员）</p>
+                            <p v-else>{{matchOptions(statusList,item.status)}}</p>
+                        </div>
+                        <div v-else>
+                            <p v-if="item.status==5 || item.status==100">通过</p>
+                            <p v-else>{{matchOptions(statusList,item.status)}}</p>
+                        </div>
+                    </div>
+                    <p>岗位：{{item.chain_position}}</p>
+                </div>
+                <div class="row">
+                    <p>申请时间：{{item.created_at?.slice(0,16)}}</p>
+                    <p>申请人：{{item?.apply_user?.realname}}</p>
+                </div>
+                <div class="row">
+                    <p>计划摘除时间：{{item.plan_remove_time?.slice(0,16)}}</p>
+                    <p class="btn" @click="jumpTo('detail',item)">查看</p>
+                </div>
+            </div>
+        </template>
+        <template v-else>
+            <van-empty description="暂无数据" />
+        </template>
+    </div>
+    <van-pagination
+        v-if="list.length"
+        v-model="currentPage"
+        :total-items="total"
+        :show-page-size="3"
+        :items-per-page="20"
+        force-ellipses
+        @change="pageChange"
+    />
+</div>
 </template>
+
 <style scoped>
-.login {
+:deep(.van-radio-group--horizontal) {
+    justify-content: space-around;
+}
+.blue-color {
+    color: #1989fa;
+}
+.bold {
+    font-weight: bold;
+}
+
+.main {
+    height: 100vh;
+    padding: 12px;
+    overflow: hidden;
     font-size: 14px;
 }
+/* tab切换 */
+.tab-box {
+    display: flex;
+    border: 1px solid #1989fa;
+}
+.tab {
+    width: 50%;
+    padding: 5px 0;
+    text-align: center;
+    font-size: 16px;
+    color: #1989fa;
+}
+.tab.active {
+    background-color: #1989fa;
+    color: #fff;
+}
+/* 单选框 */
+.radio-box {
+    padding: 12px 0;
+}
+/* 列表 */
+.list {
+    height: calc(100vh - 155px);
+    margin-bottom: 12px;
+    overflow-y: auto;
+}
+.list .item {
+    border: 1px solid #f1f1f1;
+    border-radius: 4px;
+    padding: 10px;
+    margin-top: 12px;
+}
+.list .item:first-child {
+    margin-top: 0;
+}
+.list .item .row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 10px;
+    gap: 10px;
+}
+.list .item .row:first-child {
+    margin-top: 0;
+}
+.btn {
+    background-color: #1989fa;
+    color: #fff;
+    padding: 4px 15px;
+    border-radius: 2px;
+}
 </style>
diff --git a/src/views/applyList/lockDetail.vue b/src/views/applyList/lockDetail.vue
new file mode 100644
index 0000000..45e7ddc
--- /dev/null
+++ b/src/views/applyList/lockDetail.vue
@@ -0,0 +1,215 @@
+<script setup>
+import { ref, onMounted } from 'vue'
+import router from '@/router'
+import { useRoute } from 'vue-router'
+import { showNotify } from 'vant'
+import { detailsApi } from '@/api/apply';
+
+const route = useRoute()
+const loading = ref(false);
+const params = ref(null)
+const info = ref(null)
+const list = ref([{}])
+// 路由跳转
+const jumpTo = (val) => {
+    // 跳转已审批列表
+    if(val===0){
+        router.push({
+            path: '/applyList',
+        })
+    }
+    // 跳转待审批列表
+    if(val===1){
+        router.push({
+            path: '/waitList',
+        })
+    }
+    // 跳转详情
+    if(val===3){
+        router.push({
+            path: '/detail',
+            query: { id: params.value.id, type: params.value.type },
+        })
+    }
+}
+
+// 层级处理
+const getOrg = (data) => {
+    if(data && data.length){
+        let orgList = [];
+        for(let item of data){
+            orgList.push(item.label);
+        }
+        return orgList.join('/');
+    }
+    return '';
+}
+
+// 同意
+const agree = () => {
+    showNotify({ type: 'success', message: '同意成功' });
+}
+
+// 获取详情
+const getDetail = async () => {
+    loading.value = true;
+    try {
+        const res = await detailsApi(params.value?.id);
+        info.value = res.data;
+        console.log(info.value);
+    } finally {
+        loading.value = false;
+    }
+}
+
+onMounted(() => { 
+    if(route.query){
+        params.value = route.query;
+        getDetail();
+    }
+})
+</script>
+
+<template>
+<!-- 全屏加载遮罩层 -->
+<div v-if="loading" class="global-loading-overlay">
+    <van-loading size="30px" color="#1989fa" vertical></van-loading>
+</div>
+<div class="main">
+    <div class="tab-box">
+        <p class="tab" :class="{'active':params?.type==='finish'}" @click="jumpTo(0)">已审批</p>
+        <p class="tab" :class="{'active':params?.type==='wait'}" @click="jumpTo(1)">待审批</p>
+    </div>
+    <template v-if="list.length">
+        <div class="detail">
+            <div class="item" v-for="(item, index) in info?.items" :key="index">
+                <div class="row">
+                    <p><span class="order">{{index+1}}</span>联锁名称：二甲苯蒸馏釜冷凝器下料温度高高联锁</p>
+                </div>
+                <div class="row">
+                    <p>层级：{{getOrg(info?.organizations)}}</p>
+                    <p>表决方式：{{ item?.chain?.condition_num || '' }} 选 {{ item?.chain?.choice_num || '' }}</p>
+                </div>
+                <div class="row">
+                    <div class="node">
+                        <p>仪表位号：</p>
+                        <table class="table">
+                            <tr>
+                                <th style="width: 65px;">仪表位号</th>
+                                <th>单位</th>
+                                <th style="width: 70px;">联锁值(低)</th>
+                                <th style="width: 70px;">联锁值(高)</th>
+                            </tr>
+                            <tr v-for="(node,nodeIndex) in item?.chain?.nodes" :key="nodeIndex">
+                                <td class="td">{{node.real_time_node_name}}</td>
+                                <td class="td">{{node?.node?.unit}}</td>
+                                <td class="td">{{node?.l}}</td>
+                                <td class="td">{{node?.h}}</td>
+                            </tr>
+                        </table>
+                    </div>
+                </div>
+                <div class="row">
+                    <p>联锁动作：{{item?.chain?.action.join(',')}}</p>
+                </div>
+            </div>
+        </div>
+        <div class="btns">
+            <p class="btn" @click="jumpTo(params?.type==='finish'?0:1)">返回列表</p>
+            <p class="btn" @click="jumpTo(3)">返回申请</p>
+            <p class="btn" v-if="params?.type==='wait'" @click="agree">同意</p>
+            <p class="btn" v-if="params?.type==='wait'">驳回</p>
+        </div>
+    </template>
+    <template v-else>
+        <van-empty description="暂无数据" />
+    </template>
+</div>
+</template>
+
+<style scoped>
+.main {
+    height: 100vh;
+    padding: 12px;
+    overflow: hidden;
+    font-size: 14px;
+}
+/* tab切换 */
+.tab-box {
+    display: flex;
+    border: 1px solid #1989fa;
+}
+.tab {
+    width: 50%;
+    padding: 5px 0;
+    text-align: center;
+    font-size: 16px;
+    color: #1989fa;
+}
+.tab.active {
+    background-color: #1989fa;
+    color: #fff;
+}
+/* 详情 */
+.detail {
+    margin-top: 12px;
+    height: calc(100vh - 120px);
+    overflow-y: auto;
+}
+.detail .item {
+    border: 1px solid #f1f1f1;
+    border-radius: 4px;
+    padding: 10px;
+    margin-top: 12px;
+}
+.detail .item:first-child {
+    margin-top: 0;
+}
+.detail .item .row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 10px;
+    gap: 10px;
+}
+
+.detail .item .row:first-child {
+    margin-top: 0;
+}
+.detail .item .order {
+    margin-right: 10px;
+}
+.node {
+    width: 100%;
+    display: flex;
+    align-items: flex-start;
+    gap: 10px;
+}
+.table {
+    flex: 1;
+    margin-top: -3px;
+}
+.table td {
+    text-align: center;
+    font-size: 13px;
+}
+.table .td {
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    white-space: normal;
+    word-break: break-all;
+}
+/* 底部按钮 */
+.btns {
+    margin-top: 12px;
+    display: flex;
+    gap: 12px;
+}
+.btns .btn {
+    width: 100%;
+    text-align: center;
+    padding: 8px 0;
+    border: 1px solid #eee;
+    border-radius: 2px;
+}
+</style>
diff --git a/src/views/applyList/waitList.vue b/src/views/applyList/waitList.vue
new file mode 100644
index 0000000..3f27478
--- /dev/null
+++ b/src/views/applyList/waitList.vue
@@ -0,0 +1,177 @@
+<script setup>
+import { ref,onMounted } from 'vue'
+import router from '@/router'
+import { waitListApi } from '@/api/apply';
+
+const loading = ref(false);
+// 状态
+const statusList = ref([
+    {text:'草稿',value:0},
+    {text:'申请中（安全员/技术员）',value:1},
+    {text:'申请中（车间主任）',value:2},
+    {text:'申请中（车间值班人员）',value:101},
+    {text:'各部门会签中',value:3},
+    {text:'审批中',value:4},
+    {text:'通过',value:5},
+    {text:'已撤回',value:98},
+    {text:'已驳回',value:99},
+]);
+const list = ref([])
+
+// 匹配选项
+const matchOptions = (arr,val) => {
+    const target = arr.find(item => item.value == val);
+    return target ? target.text : '';
+}
+
+// 跳转
+const jumpTo = (type,item) => {
+    // 跳转已审批列表
+    if(type==='finish'){
+        router.push({
+            path: '/applyList',
+        })
+    }
+    // 跳转详情
+    if(type==='detail'){
+        router.push({
+            path: '/detail',
+            query: {id: item.id,type: 'wait'}
+        })
+    }
+}
+
+// 获取列表数据
+const getList = async () => {
+     loading.value = true;
+    try { 
+        const res = await waitListApi({
+            org_id: 1,
+            remove_type: [],
+            status: [],
+            sort: JSON.stringify({'plan_remove_time':'','plan_recover_time':'','status_updated_at':''}),
+            page: 1,
+            per_page: 9999
+        });
+        res.data?.initiated.forEach((item) => { item.type = 'myself'; });
+        res.data?.pending.forEach((item) => { item.type = 'pending'; });
+        list.value = res.data?.initiated.concat(res.data?.pending);
+    } finally { 
+        loading.value = false;
+    }
+}
+
+onMounted(() => { 
+    getList();
+});
+</script>
+
+<template>
+<!-- 全屏加载遮罩层 -->
+<div v-if="loading" class="global-loading-overlay">
+    <van-loading size="30px" color="#1989fa" vertical></van-loading>
+</div>
+<div class="main">
+    <div class="tab-box">
+        <p class="tab" @click="jumpTo('finish',null)">已审批</p>
+        <p class="tab active">待审批</p>
+    </div>
+    <div class="list">
+        <template v-if="list.length">
+            <div class="item" v-for="(item, index) in list" :key="index">
+                <div class="row">
+                    <p>类型：{{item.template_name}}</p>
+                    <p>申请摘除数量({{item.chain_count}})个</p>
+                </div>
+                <div class="row">
+                    <div class="blue-color bold">
+                        <div v-if="item.template_id==4">
+                            <p v-if="item.status==1">申请中（车间值班人员）</p>
+                            <p v-else>{{matchOptions(statusList,item.status)}}</p>
+                        </div>
+                        <div v-else>
+                            <p v-if="item.status==5 || item.status==100">通过</p>
+                            <p v-else>{{matchOptions(statusList,item.status)}}</p>
+                        </div>
+                    </div>
+                    <p>岗位：{{item.chain_position}}</p>
+                </div>
+                <div class="row">
+                    <p>申请时间：{{item.created_at?.slice(0,16)}}</p>
+                    <p>申请人：{{item?.apply_user?.realname}}</p>
+                </div>
+                <div class="row">
+                    <p>计划摘除时间：{{item.plan_remove_time?.slice(0,16)}}</p>
+                    <p class="btn" @click="jumpTo('detail',item)">查看</p>
+                </div>
+            </div>
+        </template>
+        <template v-else>
+            <van-empty description="暂无数据" />
+        </template>
+    </div>
+</div>
+</template>
+
+<style scoped>
+.blue-color {
+    color: #1989fa;
+}
+.bold {
+    font-weight: bold;
+}
+
+.main {
+    height: 100vh;
+    padding: 12px;
+    overflow: hidden;
+    font-size: 14px;
+}
+/* tab切换 */
+.tab-box {
+    display: flex;
+    border: 1px solid #1989fa;
+}
+.tab {
+    width: 50%;
+    padding: 5px 0;
+    text-align: center;
+    font-size: 16px;
+    color: #1989fa;
+}
+.tab.active {
+    background-color: #1989fa;
+    color: #fff;
+}
+/* 列表 */
+.list {
+    height: calc(100vh - 70px);
+    overflow-y: auto;
+    margin-top: 12px;
+}
+.list .item {
+    border: 1px solid #f1f1f1;
+    border-radius: 4px;
+    padding: 10px;
+    margin-top: 12px;
+}
+.list .item:first-child {
+    margin-top: 0;
+}
+.list .item .row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 10px;
+    gap: 10px;
+}
+.list .item .row:first-child {
+    margin-top: 0;
+}
+.btn {
+    background-color: #1989fa;
+    color: #fff;
+    padding: 4px 15px;
+    border-radius: 2px;
+}
+</style>
diff --git a/src/views/error/404.vue b/src/views/error/404.vue
index 128ddc2..9973494 100644
--- a/src/views/error/404.vue
+++ b/src/views/error/404.vue
@@ -1,3 +1,305 @@
 <template>
-    <div>404</div>
-</template>
\ No newline at end of file
+  <div class="not-found">
+    <!-- 背景装饰 -->
+    <div class="bg-decoration">
+      <div class="circle circle-1"></div>
+      <div class="circle circle-2"></div>
+      <div class="circle circle-3"></div>
+      <div class="circle circle-4"></div>
+    </div>
+
+    <!-- 主内容 -->
+    <div class="content">
+      <!-- 404 数字艺术字 -->
+      <div class="error-code">
+        <span class="digit digit-1">4</span>
+        <span class="digit digit-2">0</span>
+        <span class="digit digit-3">4</span>
+      </div>
+
+      <!-- 插画图标 -->
+      <div class="illustration">
+        <van-icon name="warning-o" size="51.2px" color="#ee0a24" />
+        <div class="illustration-line"></div>
+      </div>
+
+      <!-- 提示文字 -->
+      <div class="message">
+        <h1 class="title">哎呀！页面走丢了</h1>
+        <p class="desc">您访问的页面不存在或已被移除</p>
+        <p class="sub-desc">可能是链接有误，或页面已更新</p>
+      </div>
+
+      <!-- 操作按钮 -->
+      <div class="actions">
+        <van-button
+          type="danger"
+          round
+          block
+          size="normal"
+          @click="goBack"
+        >
+          返回上一页
+        </van-button>
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+// 返回首页
+const goHome = () => {
+  router.push('/')
+}
+
+// 返回上一页
+const goBack = () => {
+  router.go(-1)
+}
+</script>
+
+<style scoped>
+/* ===== 容器 ===== */
+.not-found {
+  position: relative;
+  min-height: 100vh;
+  min-height: 100dvh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(145deg, #f8f9fe 0%, #f0f2f8 100%);
+  padding: 24px 20px;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+/* ===== 背景装饰 ===== */
+.not-found .bg-decoration {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.not-found .circle {
+  position: absolute;
+  border-radius: 50%;
+  opacity: 0.4;
+  animation: float 8s ease-in-out infinite alternate;
+}
+
+.not-found .circle-1 {
+  width: 320px;
+  height: 320px;
+  top: -8%;
+  right: -10%;
+  background: radial-gradient(circle, rgba(238, 10, 36, 0.08), transparent);
+  animation-delay: 0s;
+}
+
+.not-found .circle-2 {
+  width: 224px;
+  height: 224px;
+  bottom: -5%;
+  left: -8%;
+  background: radial-gradient(circle, rgba(238, 10, 36, 0.06), transparent);
+  animation-delay: 2s;
+}
+
+.not-found .circle-3 {
+  width: 128px;
+  height: 128px;
+  top: 30%;
+  right: 5%;
+  background: radial-gradient(circle, rgba(238, 10, 36, 0.05), transparent);
+  animation-delay: 4s;
+}
+
+.not-found .circle-4 {
+  width: 160px;
+  height: 160px;
+  bottom: 20%;
+  left: 5%;
+  background: radial-gradient(circle, rgba(238, 10, 36, 0.04), transparent);
+  animation-delay: 1s;
+}
+
+@keyframes float {
+  0% {
+    transform: translate(0, 0) scale(1);
+  }
+  100% {
+    transform: translate(20px, -20px) scale(1.05);
+  }
+}
+
+/* ===== 内容区 ===== */
+.not-found .content {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  max-width: 420px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+/* ===== 404 数字 ===== */
+.not-found .error-code {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 2.4px;
+  margin-bottom: 8px;
+  font-weight: 900;
+  line-height: 1;
+  user-select: none;
+}
+
+.not-found .error-code .digit {
+  font-size: 128px;
+  background: linear-gradient(135deg, #ee0a24 0%, #c41230 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  text-shadow: 0 12px 40px rgba(238, 10, 36, 0.2);
+  position: relative;
+  transition: transform 0.3s ease;
+}
+
+.not-found .error-code .digit-1 {
+  animation: popIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both;
+}
+
+.not-found .error-code .digit-2 {
+  animation: popIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both;
+}
+
+.not-found .error-code .digit-3 {
+  animation: popIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s both;
+}
+
+@keyframes popIn {
+  0% {
+    opacity: 0;
+    transform: scale(0.5) translateY(30px);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+/* ===== 插画 ===== */
+.not-found .illustration {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 24px;
+  opacity: 0;
+  animation: fadeUp 0.8s ease 0.7s both;
+}
+
+.not-found .illustration .van-icon {
+  filter: drop-shadow(0 4px 12px rgba(238, 10, 36, 0.2));
+}
+
+.not-found .illustration-line {
+  width: 40px;
+  height: 2px;
+  background: linear-gradient(90deg, rgba(238, 10, 36, 0.3), rgba(238, 10, 36, 0.05));
+  border-radius: 2px;
+}
+
+@keyframes fadeUp {
+  0% {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* ===== 提示文字 ===== */
+.not-found .message {
+  margin-bottom: 32px;
+  opacity: 0;
+  animation: fadeUp 0.8s ease 0.9s both;
+}
+
+.not-found .message .title {
+  font-size: 24px;
+  font-weight: 700;
+  color: #1a1a2e;
+  margin: 0 0 8px 0;
+  letter-spacing: 0.02em;
+}
+
+.not-found .message .desc {
+  font-size: 16px;
+  color: #6b7280;
+  margin: 0 0 4px 0;
+  font-weight: 400;
+  line-height: 1.6;
+}
+
+.not-found .message .sub-desc {
+  font-size: 14px;
+  color: #9ca3af;
+  margin: 0;
+  font-weight: 300;
+  line-height: 1.6;
+}
+
+/* ===== 按钮 ===== */
+.not-found .actions {
+  width: 100%;
+}
+
+/* ===== 移动端适配 ===== */
+@media (max-width: 420px) {
+  .not-found .error-code .digit {
+    font-size: 96px;
+  }
+
+  .not-found .message .title {
+    font-size: 20px;
+  }
+
+  .not-found .message .desc {
+    font-size: 14.4px;
+  }
+}
+
+@media (max-width: 360px) {
+  .not-found .error-code .digit {
+    font-size: 76.8px;
+  }
+
+  .not-found .message .title {
+    font-size: 17.6px;
+  }
+
+  .not-found .content {
+    padding: 0 4px;
+  }
+}
+
+/* ===== 刘海屏 & 安全区适配 ===== */
+@supports (padding: max(0px)) {
+  .not-found {
+    padding-top: max(24px, env(safe-area-inset-top));
+    padding-bottom: max(24px, env(safe-area-inset-bottom));
+    padding-left: max(20px, env(safe-area-inset-left));
+    padding-right: max(20px, env(safe-area-inset-right));
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 30dd353..a839358 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -1,6 +1,7 @@
 <script setup>
 import { ref } from 'vue'
 import router from '@/router'
+import { loginApi } from '@/api/login';
 
 const btnLoading = ref(false)
 const formData = ref({
@@ -9,13 +10,15 @@ const formData = ref({
 })
 
 // 登录提交
-const onSubmit = (values) => {
+const onSubmit = async (values) => {
     btnLoading.value = true;
-    console.log(values);
-    setTimeout(() => {
-        btnLoading.value = false;
+    try { 
+        const res = await loginApi(values);
+        localStorage.setItem('token', res.data.access_token);
         router.push({ path: '/applyList' });
-    }, 1000);
+    } finally { 
+        btnLoading.value = false;
+    }
 }
 </script>
 
@@ -26,12 +29,13 @@ const onSubmit = (values) => {
             <img src="/public/logo.png" alt="">
             <p class="login">登录</p>
         </div>
-        <van-form @submit="onSubmit" size="small" label-width="1.2rem">
+        <van-form class="form" @submit="onSubmit" size="small" label-width="1.2rem">
             <van-cell-group inset>
                 <van-field
                     v-model="formData.username"
                     name="username"
                     label="用户名"
+                    clearable
                     placeholder="请输入用户名"
                     :rules="[{ required: true, message: '请输入用户名' }]"
                 />
@@ -40,6 +44,7 @@ const onSubmit = (values) => {
                     type="password"
                     name="password"
                     label="密码"
+                    clearable
                     placeholder="请输入密码"
                     :rules="[{ required: true, message: '请输入密码' }]"
                 />
@@ -66,7 +71,7 @@ const onSubmit = (values) => {
     padding: 10px;
 }
 .box {
-    width: 80%;
+    width: 90%;
     background: #fff;
     border-radius: 8px;
     display: flex;
@@ -89,6 +94,9 @@ const onSubmit = (values) => {
 .login {
     font-size: 20px;
 }
+.form {
+    width: 100%;
+}
 .btn {
     margin-top: 10px;
 }
diff --git a/vite.config.js b/vite.config.js
index d34fc87..4bdd5aa 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -13,7 +13,7 @@ export default defineConfig({
   plugins: [
     vue(),
     vueJsx(),
-    vueDevTools(),
+    // vueDevTools(),
     AutoImport({
       resolvers: [VantResolver()],
     }),