基础的 宽屏下拉面板的实现

zyuas-neo/package-lock.json

@@ -19,6 +19,7 @@
         "@types/node": "^25.3.1",
         "@vitejs/plugin-vue": "^6.0.2",
         "sass": "^1.97.3",
+        "sharp": "^0.34.5",
         "typescript": "^5.9.3",
         "vite": "^7.3.1",
         "vue-tsc": "^3.2.5"
@@ -88,6 +89,17 @@
         "vue": "^3.2.0"
       }
     },
+    "node_modules/@emnapi/runtime": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmmirror.com/@emnapi/runtime/-/runtime-1.8.1.tgz",
+      "integrity": "sha512-mehfKSMWjjNol8659Z8KxEMrdSJDDot5SXMq00dM8BN4o+CLNXQ0xH2V7EchNHV4RmbZLmmPdEaXZc5H2FXmDg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.27.3",
       "resolved": "https://registry.npmmirror.com/@esbuild/aix-ppc64/-/aix-ppc64-0.27.3.tgz",
@@ -555,6 +567,496 @@
       "integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==",
       "license": "MIT"
     },
+    "node_modules/@img/colour": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/@img/colour/-/colour-1.1.0.tgz",
+      "integrity": "sha512-Td76q7j57o/tLVdgS746cYARfSyxk8iEfRxewL9h4OMzYhbW4TAcppl0mT4eyqXddh6L/jwoM75mo7ixa/pCeQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@img/sharp-darwin-arm64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmmirror.com/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.34.5.tgz",
+      "integrity": "sha512-imtQ3WMJXbMY4fxb/Ndp6HBTNVtWCUI0WdobyheGf5+ad6xX8VIDO8u2xE4qc/fr08CKG/7dDseFtn6M6g/r3w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-arm64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-darwin-x64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmmirror.com/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.34.5.tgz",
+      "integrity": "sha512-YNEFAF/4KQ/PeW0N+r+aVVsoIY0/qxxikF2SWdp+NRkmMB7y9LBZAVqQ4yhGCm/H3H270OSykqmQMKLBhBJDEw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-x64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-arm64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmmirror.com/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.2.4.tgz",
+      "integrity": "sha512-zqjjo7RatFfFoP0MkQ51jfuFZBnVE2pRiaydKJ1G/rHZvnsrHAOcQALIi9sA5co5xenQdTugCvtb1cuf78Vf4g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-x64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmmirror.com/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.2.4.tgz",
+      "integrity": "sha512-1IOd5xfVhlGwX+zXv2N93k0yMONvUlANylbJw1eTah8K/Jtpi15KC+WSiaX/nBmbm2HxRM1gZ0nSdjSsrZbGKg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmmirror.com/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.2.4.tgz",
+      "integrity": "sha512-bFI7xcKFELdiNCVov8e44Ia4u2byA+l3XtsAj+Q8tfCwO6BQ8iDojYdvoPMqsKDkuoOo+X6HZA0s0q11ANMQ8A==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmmirror.com/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.2.4.tgz",
+      "integrity": "sha512-excjX8DfsIcJ10x1Kzr4RcWe1edC9PquDRRPx3YVCvQv+U5p7Yin2s32ftzikXojb1PIFc/9Mt28/y+iRklkrw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-ppc64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmmirror.com/@img/sharp-libvips-linux-ppc64/-/sharp-libvips-linux-ppc64-1.2.4.tgz",
+      "integrity": "sha512-FMuvGijLDYG6lW+b/UvyilUWu5Ayu+3r2d1S8notiGCIyYU/76eig1UfMmkZ7vwgOrzKzlQbFSuQfgm7GYUPpA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-riscv64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmmirror.com/@img/sharp-libvips-linux-riscv64/-/sharp-libvips-linux-riscv64-1.2.4.tgz",
+      "integrity": "sha512-oVDbcR4zUC0ce82teubSm+x6ETixtKZBh/qbREIOcI3cULzDyb18Sr/Wcyx7NRQeQzOiHTNbZFF1UwPS2scyGA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-s390x": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmmirror.com/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.2.4.tgz",
+      "integrity": "sha512-qmp9VrzgPgMoGZyPvrQHqk02uyjA0/QrTO26Tqk6l4ZV0MPWIW6LTkqOIov+J1yEu7MbFQaDpwdwJKhbJvuRxQ==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-x64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmmirror.com/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.2.4.tgz",
+      "integrity": "sha512-tJxiiLsmHc9Ax1bz3oaOYBURTXGIRDODBqhveVHonrHJ9/+k89qbLl0bcJns+e4t4rvaNBxaEZsFtSfAdquPrw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-arm64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmmirror.com/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.2.4.tgz",
+      "integrity": "sha512-FVQHuwx1IIuNow9QAbYUzJ+En8KcVm9Lk5+uGUQJHaZmMECZmOlix9HnH7n1TRkXMS0pGxIJokIVB9SuqZGGXw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-x64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmmirror.com/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.2.4.tgz",
+      "integrity": "sha512-+LpyBk7L44ZIXwz/VYfglaX/okxezESc6UxDSoyo2Ks6Jxc4Y7sGjpgU9s4PMgqgjj1gZCylTieNamqA1MF7Dg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmmirror.com/@img/sharp-linux-arm/-/sharp-linux-arm-0.34.5.tgz",
+      "integrity": "sha512-9dLqsvwtg1uuXBGZKsxem9595+ujv0sJ6Vi8wcTANSFpwV/GONat5eCkzQo/1O6zRIkh0m/8+5BjrRr7jDUSZw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmmirror.com/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.34.5.tgz",
+      "integrity": "sha512-bKQzaJRY/bkPOXyKx5EVup7qkaojECG6NLYswgktOZjaXecSAeCWiZwwiFf3/Y+O1HrauiE3FVsGxFg8c24rZg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-ppc64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmmirror.com/@img/sharp-linux-ppc64/-/sharp-linux-ppc64-0.34.5.tgz",
+      "integrity": "sha512-7zznwNaqW6YtsfrGGDA6BRkISKAAE1Jo0QdpNYXNMHu2+0dTrPflTLNkpc8l7MUP5M16ZJcUvysVWWrMefZquA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-ppc64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-riscv64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmmirror.com/@img/sharp-linux-riscv64/-/sharp-linux-riscv64-0.34.5.tgz",
+      "integrity": "sha512-51gJuLPTKa7piYPaVs8GmByo7/U7/7TZOq+cnXJIHZKavIRHAP77e3N2HEl3dgiqdD/w0yUfiJnII77PuDDFdw==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-riscv64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-s390x": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmmirror.com/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.34.5.tgz",
+      "integrity": "sha512-nQtCk0PdKfho3eC5MrbQoigJ2gd1CgddUMkabUj+rBevs8tZ2cULOx46E7oyX+04WGfABgIwmMC0VqieTiR4jg==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-s390x": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-x64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmmirror.com/@img/sharp-linux-x64/-/sharp-linux-x64-0.34.5.tgz",
+      "integrity": "sha512-MEzd8HPKxVxVenwAa+JRPwEC7QFjoPWuS5NZnBt6B3pu7EG2Ge0id1oLHZpPJdn3OQK+BQDiw9zStiHBTJQQQQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-x64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-arm64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmmirror.com/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.34.5.tgz",
+      "integrity": "sha512-fprJR6GtRsMt6Kyfq44IsChVZeGN97gTD331weR1ex1c1rypDEABN6Tm2xa1wE6lYb5DdEnk03NZPqA7Id21yg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-arm64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-x64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmmirror.com/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.34.5.tgz",
+      "integrity": "sha512-Jg8wNT1MUzIvhBFxViqrEhWDGzqymo3sV7z7ZsaWbZNDLXRJZoRGrjulp60YYtV4wfY8VIKcWidjojlLcWrd8Q==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-x64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-wasm32": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmmirror.com/@img/sharp-wasm32/-/sharp-wasm32-0.34.5.tgz",
+      "integrity": "sha512-OdWTEiVkY2PHwqkbBI8frFxQQFekHaSSkUIJkwzclWZe64O1X4UlUjqqqLaPbUpMOQk6FBu/HtlGXNblIs0huw==",
+      "cpu": [
+        "wasm32"
+      ],
+      "dev": true,
+      "license": "Apache-2.0 AND LGPL-3.0-or-later AND MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/runtime": "^1.7.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-arm64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmmirror.com/@img/sharp-win32-arm64/-/sharp-win32-arm64-0.34.5.tgz",
+      "integrity": "sha512-WQ3AgWCWYSb2yt+IG8mnC6Jdk9Whs7O0gxphblsLvdhSpSTtmu69ZG1Gkb6NuvxsNACwiPV6cNSZNzt0KPsw7g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-ia32": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmmirror.com/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.34.5.tgz",
+      "integrity": "sha512-FV9m/7NmeCmSHDD5j4+4pNI8Cp3aW+JvLoXcTUo0IqyjSfAZJ8dIUmijx1qaJsIiU+Hosw6xM5KijAWRJCSgNg==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-x64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmmirror.com/@img/sharp-win32-x64/-/sharp-win32-x64-0.34.5.tgz",
+      "integrity": "sha512-+29YMsqY2/9eFEiW93eqWnuLcWcufowXewwSNIT6UwZdUUCrM3oFjMWH/Z6/TMmb4hlFenmfAVbpWeup2jryCw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.5.5",
       "resolved": "https://registry.npmmirror.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
@@ -1631,7 +2133,6 @@
       "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
       "dev": true,
       "license": "Apache-2.0",
-      "optional": true,
       "engines": {
         "node": ">=8"
       }
@@ -2054,6 +2555,64 @@
         "@parcel/watcher": "^2.4.1"
       }
     },
+    "node_modules/semver": {
+      "version": "7.7.4",
+      "resolved": "https://registry.npmmirror.com/semver/-/semver-7.7.4.tgz",
+      "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/sharp": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmmirror.com/sharp/-/sharp-0.34.5.tgz",
+      "integrity": "sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@img/colour": "^1.0.0",
+        "detect-libc": "^2.1.2",
+        "semver": "^7.7.3"
+      },
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-darwin-arm64": "0.34.5",
+        "@img/sharp-darwin-x64": "0.34.5",
+        "@img/sharp-libvips-darwin-arm64": "1.2.4",
+        "@img/sharp-libvips-darwin-x64": "1.2.4",
+        "@img/sharp-libvips-linux-arm": "1.2.4",
+        "@img/sharp-libvips-linux-arm64": "1.2.4",
+        "@img/sharp-libvips-linux-ppc64": "1.2.4",
+        "@img/sharp-libvips-linux-riscv64": "1.2.4",
+        "@img/sharp-libvips-linux-s390x": "1.2.4",
+        "@img/sharp-libvips-linux-x64": "1.2.4",
+        "@img/sharp-libvips-linuxmusl-arm64": "1.2.4",
+        "@img/sharp-libvips-linuxmusl-x64": "1.2.4",
+        "@img/sharp-linux-arm": "0.34.5",
+        "@img/sharp-linux-arm64": "0.34.5",
+        "@img/sharp-linux-ppc64": "0.34.5",
+        "@img/sharp-linux-riscv64": "0.34.5",
+        "@img/sharp-linux-s390x": "0.34.5",
+        "@img/sharp-linux-x64": "0.34.5",
+        "@img/sharp-linuxmusl-arm64": "0.34.5",
+        "@img/sharp-linuxmusl-x64": "0.34.5",
+        "@img/sharp-wasm32": "0.34.5",
+        "@img/sharp-win32-arm64": "0.34.5",
+        "@img/sharp-win32-ia32": "0.34.5",
+        "@img/sharp-win32-x64": "0.34.5"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -2120,6 +2679,14 @@
         "url": "https://github.com/sponsors/SuperchupuDev"
       }
     },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "dev": true,
+      "license": "0BSD",
+      "optional": true
+    },
     "node_modules/typescript": {
       "version": "5.9.3",
       "resolved": "https://registry.npmmirror.com/typescript/-/typescript-5.9.3.tgz",

zyuas-neo/package.json

@@ -8,7 +8,8 @@
     "build": "vue-tsc && vite build",
     "build:skip-typecheck": "vite build",
     "preview": "vite preview",
-    "type-check": "vue-tsc --noEmit"
+    "type-check": "vue-tsc --noEmit",
+    "compress:images": "node scripts/compress-images.js"
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.2",
@@ -22,6 +23,7 @@
     "@types/node": "^25.3.1",
     "@vitejs/plugin-vue": "^6.0.2",
     "sass": "^1.97.3",
+    "sharp": "^0.34.5",
     "typescript": "^5.9.3",
     "vite": "^7.3.1",
     "vue-tsc": "^3.2.5"

zyuas-neo/scripts/compress-images.js

@@ -0,0 +1,109 @@
+import sharp from 'sharp'
+import { readdir, stat, rename, unlink } from 'fs/promises'
+import { join, extname } from 'path'
+
+const IMAGE_DIR = 'src/assets/images'
+const IMAGE_EXTENSIONS = ['.png', '.jpg', '.jpeg']
+
+// 计算文件大小（KB）
+function formatSize(bytes) {
+  return (bytes / 1024).toFixed(2) + ' KB'
+}
+
+// 压缩单个图片
+async function compressImage(fileName) {
+  const ext = extname(fileName).toLowerCase()
+  const inputPath = join(IMAGE_DIR, fileName)
+  const tempPath = join(IMAGE_DIR, 'temp_' + fileName)
+
+  try {
+    const inputStats = await stat(inputPath)
+    const inputSize = inputStats.size
+
+    let pipeline = sharp(inputPath)
+
+    // 根据图片类型设置压缩参数
+    if (ext === '.png') {
+      pipeline = pipeline.png({
+        compressionLevel: 9,
+        palette: true,
+        quality: 80
+      })
+    } else if (ext === '.jpg' || ext === '.jpeg') {
+      pipeline = pipeline.jpeg({
+        quality: 80,
+        mozjpeg: true
+      })
+    }
+
+    // 执行压缩到临时文件
+    await pipeline.toFile(tempPath)
+
+    // 删除原文件并重命名临时文件
+    await unlink(inputPath)
+    await rename(tempPath, inputPath)
+
+    const outputStats = await stat(inputPath)
+    const outputSize = outputStats.size
+
+    const savings = ((inputSize - outputSize) / inputSize * 100).toFixed(1)
+
+    console.log(`✅ ${fileName}`)
+    console.log(`   原始：${formatSize(inputSize)} → 压缩后：${formatSize(outputSize)} (节省 ${savings}%)`)
+
+    return { inputSize, outputSize, savings }
+  } catch (error) {
+    console.error(`❌ 压缩失败 ${fileName}:`, error.message)
+    // 清理临时文件（如果存在）
+    try {
+      await unlink(tempPath)
+    } catch (e) {
+      // 忽略
+    }
+    return null
+  }
+}
+
+// 主函数
+async function main() {
+  console.log('🚀 开始压缩图片...\n')
+
+  const files = await readdir(IMAGE_DIR)
+  const imageFiles = files.filter(file => 
+    IMAGE_EXTENSIONS.includes(extname(file).toLowerCase())
+  )
+  
+  if (imageFiles.length === 0) {
+    console.log('⚠️  未找到需要压缩的图片')
+    return
+  }
+
+  console.log(`📁 找到 ${imageFiles.length} 张图片\n`)
+
+  let totalInput = 0
+  let totalOutput = 0
+  let successCount = 0
+
+  for (const file of imageFiles) {
+    const result = await compressImage(file)
+    if (result) {
+      totalInput += result.inputSize
+      totalOutput += result.outputSize
+      successCount++
+      console.log()
+    }
+  }
+
+  const totalSavings = ((totalInput - totalOutput) / totalInput * 100).toFixed(1)
+
+  console.log('='.repeat(50))
+  console.log(`📊 压缩完成！`)
+  console.log(`   成功：${successCount}/${imageFiles.length} 张`)
+  console.log(`   原始总大小：${formatSize(totalInput)}`)
+  console.log(`   压缩后总大小：${formatSize(totalOutput)}`)
+  console.log(`   总计节省：${totalSavings}% (${formatSize(totalInput - totalOutput)})`)
+  console.log('='.repeat(50))
+}
+
+// 运行
+main().catch(console.error)

zyuas-neo/src/components/Header.vue

@@ -17,17 +17,13 @@
       </div>
 
       <div class="nav-right">
-        <el-menu
-          :default-active="activeIndex"
-          mode="horizontal"
-          :ellipsis="false"
-          class="nav-menu"
-        >
-          <el-menu-item
+        <ul class="nav-menu">
+          <li
             v-for="(item, index) in navList"
             :key="index"
-            :index="item.path"
-            @click="handleNavClick(index, item.path)"
+            class="nav-item"
+            @mouseenter="handleMenuEnter(index)"
+            @mouseleave="handleMenuLeave(index)"
           >
             <router-link :to="item.path" class="nav-link">
               {{ item.name }}
@@ -35,8 +31,30 @@
                 <ArrowDown />
               </el-icon>
             </router-link>
-          </el-menu-item>
-        </el-menu>
+
+            <!-- 二级菜单 - Mega Menu 宽屏面板 -->
+            <transition name="mega-menu-fade">
+              <div v-if="activeMenuIndex === index" class="mega-menu">
+                <div class="mega-menu-overlay">
+                  <div class="mega-menu-container">
+                    <div class="mega-menu-grid">
+                      <div
+                        v-for="(child, childIndex) in item.children"
+                        :key="childIndex"
+                        class="mega-menu-column"
+                      >
+                        <router-link :to="child.path" class="mega-menu-link">
+                          <span class="mega-menu-text">{{ child.name }}</span>
+                          <el-icon class="mega-menu-arrow"><ArrowRight /></el-icon>
+                        </router-link>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </transition>
+          </li>
+        </ul>
 
         <div class="nav-actions">
           <router-link
@@ -101,6 +119,7 @@ const navList: NavItem[] = navConfig
 const actionList: NavAction[] = navActions
 const navIndex = ref<number>(parseInt(sessionStorage.getItem('navIndex') || '0'))
 const mobileMenuVisible = ref<boolean>(false)
+const activeMenuIndex = ref<number | null>(null)
 
 const activeIndex = computed(() => {
   return route.path
@@ -112,6 +131,16 @@ const handleNavClick = (index: number, path: string) => {
   mobileMenuVisible.value = false
 }
 
+const handleMenuEnter = (index: number) => {
+  if (navList[index].children.length > 0) {
+    activeMenuIndex.value = index
+  }
+}
+
+const handleMenuLeave = (index: number) => {
+  activeMenuIndex.value = null
+}
+
 const handleLogoError = (e: Event) => {
   const target = e.target as HTMLImageElement
   target.src = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 50"><rect fill="%231e73be" width="200" height="50"/><text fill="white" x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-size="14">ZYUAS</text></svg>'
@@ -130,15 +159,22 @@ onMounted(() => {
 @import '@/assets/styles/mixins.scss';
 
 .header {
-  background: rgba(255, 255, 255, 0.95);
-  backdrop-filter: blur(10px);
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+  background: rgba(255, 255, 255, 1);
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 1000;
-  border-bottom: 1px solid rgba(30, 115, 190, 0.1);
+  border-bottom: 1px solid #f3f3f3;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+
+  // 全局覆盖 Element Plus 菜单样式
+  :deep(.el-menu),
+  :deep(.el-menu-item) {
+    border: none !important;
+    border-bottom: none !important;
+    box-shadow: none !important;
+  }
 }
 
 /* ===== 桌面端导航 ===== */
@@ -147,7 +183,7 @@ onMounted(() => {
   align-items: center;
   justify-content: space-between;
   height: 80px;
-  padding: 0;
+  padding: 0 20px;
   max-width: 1200px;
   margin: 0 auto;
 }
@@ -155,14 +191,13 @@ onMounted(() => {
 .nav-left {
   display: flex;
   align-items: center;
-  gap: 16px;
   flex-shrink: 0;
 }
 
 .nav-right {
   display: flex;
   align-items: center;
-  gap: 20px;
+  gap: 8px;
   height: 80px;
 }
 
@@ -176,7 +211,7 @@ onMounted(() => {
   .logo-wrapper {
     position: relative;
     display: inline-block;
-    padding: 8px 0 8px 8px;
+    padding: 8px 16px;
     border-radius: 12px;
     transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     overflow: visible;
@@ -204,25 +239,6 @@ onMounted(() => {
       animation: rotate-glow 3s linear infinite;
     }
 
-    &::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      border-radius: 12px;
-      background: linear-gradient(
-        135deg,
-        rgba(255, 140, 50, 0.08),
-        rgba(255, 160, 80, 0.12),
-        rgba(255, 140, 50, 0.08)
-      );
-      opacity: 0;
-      transition: opacity 0.4s ease;
-      z-index: 1;
-    }
-
     img {
       position: relative;
       z-index: 2;
@@ -238,10 +254,6 @@ onMounted(() => {
     transform: scale(1.08);
   }
 
-  &:hover .logo-wrapper::before {
-    opacity: 1;
-  }
-
   &:hover .logo-wrapper .logo-glow {
     opacity: 1;
   }
@@ -261,8 +273,6 @@ onMounted(() => {
 .header-company-name {
   display: flex;
   align-items: center;
-  padding-left: 20px;
-  margin-left: 20px;
   border-left: 1px solid rgba(30, 115, 190, 0.2);
 
   .name-wrapper {
@@ -273,24 +283,6 @@ onMounted(() => {
     transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     overflow: hidden;
 
-    &::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      border-radius: 12px;
-      background: linear-gradient(
-        135deg,
-        rgba(255, 140, 50, 0.08),
-        rgba(255, 160, 80, 0.12),
-        rgba(255, 140, 50, 0.08)
-      );
-      opacity: 0;
-      transition: opacity 0.4s ease;
-    }
-
     span {
       position: relative;
       z-index: 2;
@@ -308,10 +300,6 @@ onMounted(() => {
     transform: scale(1.03);
   }
 
-  &:hover .name-wrapper::before {
-    opacity: 1;
-  }
-
   &:hover .name-wrapper span {
     color: #2c2c2c;
   }
@@ -321,37 +309,37 @@ onMounted(() => {
 .nav-menu {
   display: flex;
   align-items: center;
+  gap: 8px;
+  list-style: none;
+  margin: 0;
+  padding: 0;
   height: 80px;
-  border-bottom: none !important;
-  background: transparent !important;
 
-  :deep(.el-menu) {
-    display: flex !important;
-    align-items: center !important;
-    height: 80px !important;
-    border-bottom: none !important;
-    border-right: none !important;
+  // 覆盖 Element Plus 默认样式
+  .el-menu,
+  .el-menu-item {
     background: transparent !important;
-    line-height: normal !important;
+    border: none !important;
+    border-bottom: none !important;
+    box-shadow: none !important;
   }
+}
 
-  :deep(.el-menu-item) {
-    display: flex !important;
-    align-items: center !important;
-    justify-content: center !important;
-    height: 80px !important;
-    min-width: auto !important;
-    padding: 0 18px !important;
-    border: none !important;
-    background: transparent !important;
-    white-space: nowrap;
-    line-height: normal !important;
-    float: none !important;
+.nav-item {
+  position: relative;
+  height: 80px;
+  display: flex;
+  align-items: center;
+  background: transparent !important;
 
-    &.is-active {
-      background-color: rgba($primary-color, 0.05) !important;
-      color: $primary-color !important;
-    }
+  // 移除所有可能的边框
+  border: none !important;
+  border-bottom: none !important;
+
+  &:hover {
+    background: transparent !important;
+    border: none !important;
+    border-bottom: none !important;
   }
 }
 
@@ -359,14 +347,43 @@ onMounted(() => {
   display: inline-flex;
   align-items: center;
   gap: 6px;
+  padding: 12px 18px;
   color: $text-primary;
   font-size: 15px;
   font-weight: 500;
   text-decoration: none;
   transition: color 0.3s ease;
+  position: relative;
+  background: transparent !important;
+  border: none !important;
+  border-bottom: none !important;
+
+  &::before {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    width: 0;
+    height: 3px;
+    background: $primary-gradient;
+    transition: width 0.3s ease;
+    transform: translateX(-50%);
+    border-radius: 3px 3px 0 0;
+  }
 
   &:hover {
     color: $primary-color;
+    background: transparent !important;
+    border: none !important;
+    border-bottom: none !important;
+
+    &::before {
+      width: 80%;
+    }
+
+    .nav-arrow {
+      transform: rotate(180deg);
+    }
   }
 }
 
@@ -375,8 +392,119 @@ onMounted(() => {
   transition: transform 0.3s ease;
 }
 
-.nav-menu :deep(.el-menu-item):hover .nav-arrow {
-  transform: rotate(180deg);
+/* Mega Menu - 宽屏下拉面板 */
+.mega-menu {
+  position: fixed;
+  top: 80px;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  pointer-events: none;
+}
+
+.mega-menu-overlay {
+  background: rgba(255, 255, 255, 1);
+  backdrop-filter: blur(20px);
+  border-bottom: 1px solid #f3f3f3;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+  pointer-events: auto;
+}
+
+.mega-menu-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 40px 20px;
+}
+
+.mega-menu-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 40px 32px;
+}
+
+.mega-menu-column {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.mega-menu-link {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 18px;
+  color: $text-primary;
+  font-size: 15px;
+  text-decoration: none;
+  transition: all 0.3s ease;
+  position: relative;
+
+  &::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 3px;
+    background: $primary-gradient;
+    transform: scaleY(0);
+    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  &:hover {
+    color: $primary-color;
+    transform: translateX(6px);
+
+    &::after {
+      transform: scaleY(1);
+    }
+
+    .mega-menu-arrow {
+      transform: translateX(6px);
+      color: $primary-color;
+    }
+  }
+}
+
+.mega-menu-text {
+  font-weight: 500;
+  position: relative;
+  z-index: 1;
+}
+
+.mega-menu-arrow {
+  font-size: 14px;
+  color: $text-tertiary;
+  transition: all 0.3s ease;
+  position: relative;
+  z-index: 1;
+  opacity: 0.6;
+}
+
+/* 淡入展开动画 */
+.mega-menu-fade-enter-active,
+.mega-menu-fade-leave-active {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.mega-menu-fade-enter-from {
+  opacity: 0;
+  transform: translateY(-5px);
+}
+
+.mega-menu-fade-enter-to {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.mega-menu-fade-leave-from {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.mega-menu-fade-leave-to {
+  opacity: 0;
+  transform: translateY(-5px);
 }
 
 /* 导航操作按钮 */
@@ -416,7 +544,6 @@ onMounted(() => {
     border: 1px solid $primary-color;
 
     &:hover {
-      background: rgba($primary-color, 0.05);
       color: $primary-dark;
       border-color: $primary-dark;
     }