组件修改

.vscode/settings.json

@@ -1,3 +1,4 @@
 {
-    "maven.view": "hierarchical"
+    "maven.view": "hierarchical",
+    "editor.tabSize": 4,
 }

urbanLifelineWeb/package.json

@@ -11,7 +11,9 @@
   },
   "devDependencies": {
     "concurrently": "^9.1.0",
-    "rimraf": "^5.0.5"
+    "rimraf": "^5.0.5",
+    "sass": "^1.94.2",
+    "sass-embedded": "^1.93.3"
   },
   "engines": {
     "node": ">=16.0.0",

urbanLifelineWeb/packages/shared/package.json

@@ -22,6 +22,8 @@
     "@vitejs/plugin-vue-jsx": "^4.1.1",
     "@originjs/vite-plugin-federation": "^1.3.6",
     "npm-run-all": "^4.1.5",
+    "sass": "^1.80.6",
+    "sass-embedded": "^1.80.6",
     "typescript": "^5.7.2",
     "vite": "^6.0.3"
   },

urbanLifelineWeb/packages/shared/pnpm-lock.yaml

@@ -31,12 +31,18 @@ devDependencies:
   npm-run-all:
     specifier: ^4.1.5
     version: 4.1.5
+  sass:
+    specifier: ^1.80.6
+    version: 1.94.2
+  sass-embedded:
+    specifier: ^1.80.6
+    version: 1.93.3
   typescript:
     specifier: ^5.7.2
     version: 5.9.3
   vite:
     specifier: ^6.0.3
-    version: 6.4.1(@types/node@20.19.25)
+    version: 6.4.1(@types/node@20.19.25)(sass-embedded@1.93.3)(sass@1.94.2)
 
 packages:
 
@@ -294,6 +300,10 @@ packages:
       '@babel/helper-string-parser': 7.27.1
       '@babel/helper-validator-identifier': 7.28.5
 
+  /@bufbuild/protobuf@2.10.1:
+    resolution: {integrity: sha512-ckS3+vyJb5qGpEYv/s1OebUHDi/xSNtfgw1wqKZo7MR9F2z+qXr0q5XagafAG/9O0QPVIUfST0smluYSTpYFkg==}
+    dev: true
+
   /@esbuild/aix-ppc64@0.25.12:
     resolution: {integrity: sha512-Hhmwd6CInZ3dwpuGTF8fJG6yoWmsToE+vYgD4nytZVxcu1ulHpUQRAB1UJ8+N1Am3Mz4+xOByoQoSZf4D+CpkA==}
     engines: {node: '>=18'}
@@ -565,6 +575,155 @@ packages:
       magic-string: 0.27.0
     dev: true
 
+  /@parcel/watcher-android-arm64@2.5.1:
+    resolution: {integrity: sha512-KF8+j9nNbUN8vzOFDpRMsaKBHZ/mcjEjMToVMJOhTozkDonQFFrRcfdLWn6yWKCmJKmdVxSgHiYvTCef4/qcBA==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@parcel/watcher-darwin-arm64@2.5.1:
+    resolution: {integrity: sha512-eAzPv5osDmZyBhou8PoF4i6RQXAfeKL9tjb3QzYuccXFMQU0ruIc/POh30ePnaOyD1UXdlKguHBmsTs53tVoPw==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@parcel/watcher-darwin-x64@2.5.1:
+    resolution: {integrity: sha512-1ZXDthrnNmwv10A0/3AJNZ9JGlzrF82i3gNQcWOzd7nJ8aj+ILyW1MTxVk35Db0u91oD5Nlk9MBiujMlwmeXZg==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@parcel/watcher-freebsd-x64@2.5.1:
+    resolution: {integrity: sha512-SI4eljM7Flp9yPuKi8W0ird8TI/JK6CSxju3NojVI6BjHsTyK7zxA9urjVjEKJ5MBYC+bLmMcbAWlZ+rFkLpJQ==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@parcel/watcher-linux-arm-glibc@2.5.1:
+    resolution: {integrity: sha512-RCdZlEyTs8geyBkkcnPWvtXLY44BCeZKmGYRtSgtwwnHR4dxfHRG3gR99XdMEdQ7KeiDdasJwwvNSF5jKtDwdA==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm]
+    os: [linux]
+    libc: [glibc]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@parcel/watcher-linux-arm-musl@2.5.1:
+    resolution: {integrity: sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm]
+    os: [linux]
+    libc: [musl]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@parcel/watcher-linux-arm64-glibc@2.5.1:
+    resolution: {integrity: sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@parcel/watcher-linux-arm64-musl@2.5.1:
+    resolution: {integrity: sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@parcel/watcher-linux-x64-glibc@2.5.1:
+    resolution: {integrity: sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@parcel/watcher-linux-x64-musl@2.5.1:
+    resolution: {integrity: sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@parcel/watcher-win32-arm64@2.5.1:
+    resolution: {integrity: sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@parcel/watcher-win32-ia32@2.5.1:
+    resolution: {integrity: sha512-c2KkcVN+NJmuA7CGlaGD1qJh1cLfDnQsHjE89E60vUEMlqduHGCdCLJCID5geFVM0dOtA3ZiIO8BoEQmzQVfpQ==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [ia32]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@parcel/watcher-win32-x64@2.5.1:
+    resolution: {integrity: sha512-9lHBdJITeNR++EvSQVUcaZoWupyHfXe1jZvGZ06O/5MflPcuPLtEphScIBL+AiCWBO46tDSHzWyD0uDmmZqsgA==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@parcel/watcher@2.5.1:
+    resolution: {integrity: sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg==}
+    engines: {node: '>= 10.0.0'}
+    requiresBuild: true
+    dependencies:
+      detect-libc: 1.0.3
+      is-glob: 4.0.3
+      micromatch: 4.0.8
+      node-addon-api: 7.1.1
+    optionalDependencies:
+      '@parcel/watcher-android-arm64': 2.5.1
+      '@parcel/watcher-darwin-arm64': 2.5.1
+      '@parcel/watcher-darwin-x64': 2.5.1
+      '@parcel/watcher-freebsd-x64': 2.5.1
+      '@parcel/watcher-linux-arm-glibc': 2.5.1
+      '@parcel/watcher-linux-arm-musl': 2.5.1
+      '@parcel/watcher-linux-arm64-glibc': 2.5.1
+      '@parcel/watcher-linux-arm64-musl': 2.5.1
+      '@parcel/watcher-linux-x64-glibc': 2.5.1
+      '@parcel/watcher-linux-x64-musl': 2.5.1
+      '@parcel/watcher-win32-arm64': 2.5.1
+      '@parcel/watcher-win32-ia32': 2.5.1
+      '@parcel/watcher-win32-x64': 2.5.1
+    dev: true
+    optional: true
+
   /@rolldown/pluginutils@1.0.0-beta.53:
     resolution: {integrity: sha512-vENRlFU4YbrwVqNDZ7fLvy+JR1CRkyr01jhSiDpE1u6py3OMzQfztQU2jxykW3ALNxO4kSlqIDeYyD0Y9RcQeQ==}
     dev: true
@@ -777,7 +936,7 @@ packages:
       '@babel/plugin-transform-typescript': 7.28.5(@babel/core@7.28.5)
       '@rolldown/pluginutils': 1.0.0-beta.53
       '@vue/babel-plugin-jsx': 1.5.0(@babel/core@7.28.5)
-      vite: 6.4.1(@types/node@20.19.25)
+      vite: 6.4.1(@types/node@20.19.25)(sass-embedded@1.93.3)(sass@1.94.2)
       vue: 3.5.25(typescript@5.9.3)
     transitivePeerDependencies:
       - supports-color
@@ -790,7 +949,7 @@ packages:
       vite: ^5.0.0 || ^6.0.0
       vue: ^3.2.25
     dependencies:
-      vite: 6.4.1(@types/node@20.19.25)
+      vite: 6.4.1(@types/node@20.19.25)(sass-embedded@1.93.3)(sass@1.94.2)
       vue: 3.5.25(typescript@5.9.3)
     dev: true
 
@@ -960,6 +1119,15 @@ packages:
       concat-map: 0.0.1
     dev: true
 
+  /braces@3.0.3:
+    resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
+    engines: {node: '>=8'}
+    requiresBuild: true
+    dependencies:
+      fill-range: 7.1.1
+    dev: true
+    optional: true
+
   /browserslist@4.28.1:
     resolution: {integrity: sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA==}
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
@@ -972,6 +1140,10 @@ packages:
       update-browserslist-db: 1.2.2(browserslist@4.28.1)
     dev: true
 
+  /buffer-builder@0.2.0:
+    resolution: {integrity: sha512-7VPMEPuYznPSoR21NE1zvd2Xna6c/CloiZCfcMXR1Jny6PjX0N4Nsa38zcBFo/FMK+BlA+FLKbJCQ0i2yxp+Xg==}
+    dev: true
+
   /call-bind-apply-helpers@1.0.2:
     resolution: {integrity: sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==}
     engines: {node: '>= 0.4'}
@@ -1011,6 +1183,13 @@ packages:
       supports-color: 5.5.0
     dev: true
 
+  /chokidar@4.0.3:
+    resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==}
+    engines: {node: '>= 14.16.0'}
+    dependencies:
+      readdirp: 4.1.2
+    dev: true
+
   /color-convert@1.9.3:
     resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
     dependencies:
@@ -1021,6 +1200,10 @@ packages:
     resolution: {integrity: sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==}
     dev: true
 
+  /colorjs.io@0.5.2:
+    resolution: {integrity: sha512-twmVoizEW7ylZSN32OgKdXRmo1qg+wT5/6C3xu5b9QsWzSFAhHLn2xd8ro0diCsKfCj1RdaTP/nrcW+vAoQPIw==}
+    dev: true
+
   /concat-map@0.0.1:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
     dev: true
@@ -1104,6 +1287,14 @@ packages:
     resolution: {integrity: sha512-ugFTXCtDZunbzasqBxrK93Ik/DRYsO6S/fedkWEMKqt04xZ4csmnmwGDBAb07QWNaGMAmnTIemsYZCksjATwsA==}
     dev: false
 
+  /detect-libc@1.0.3:
+    resolution: {integrity: sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==}
+    engines: {node: '>=0.10'}
+    hasBin: true
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /dunder-proto@1.0.1:
     resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
     engines: {node: '>= 0.4'}
@@ -1288,6 +1479,15 @@ packages:
       picomatch: 4.0.3
     dev: true
 
+  /fill-range@7.1.1:
+    resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
+    engines: {node: '>=8'}
+    requiresBuild: true
+    dependencies:
+      to-regex-range: 5.0.1
+    dev: true
+    optional: true
+
   /for-each@0.3.5:
     resolution: {integrity: sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==}
     engines: {node: '>= 0.4'}
@@ -1393,6 +1593,11 @@ packages:
     engines: {node: '>=4'}
     dev: true
 
+  /has-flag@4.0.0:
+    resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
+    engines: {node: '>=8'}
+    dev: true
+
   /has-property-descriptors@1.0.2:
     resolution: {integrity: sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==}
     dependencies:
@@ -1429,6 +1634,10 @@ packages:
     resolution: {integrity: sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==}
     dev: true
 
+  /immutable@5.1.4:
+    resolution: {integrity: sha512-p6u1bG3YSnINT5RQmx/yRZBpenIl30kVxkTLDyHLIMk0gict704Q9n+thfDI7lTRm9vXdDYutVzXhzcThxTnXA==}
+    dev: true
+
   /internal-slot@1.1.0:
     resolution: {integrity: sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==}
     engines: {node: '>= 0.4'}
@@ -1506,6 +1715,13 @@ packages:
       has-tostringtag: 1.0.2
     dev: true
 
+  /is-extglob@2.1.1:
+    resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
+    engines: {node: '>=0.10.0'}
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /is-finalizationregistry@1.1.1:
     resolution: {integrity: sha512-1pC6N8qWJbWoPtEjgcL2xyhQOP491EQjeUo3qTKcmV8YSDDJrOepfG8pcC7h/QgnQHYSv0mJ3Z/ZWxmatVrysg==}
     engines: {node: '>= 0.4'}
@@ -1524,6 +1740,15 @@ packages:
       safe-regex-test: 1.1.0
     dev: true
 
+  /is-glob@4.0.3:
+    resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
+    engines: {node: '>=0.10.0'}
+    requiresBuild: true
+    dependencies:
+      is-extglob: 2.1.1
+    dev: true
+    optional: true
+
   /is-map@2.0.3:
     resolution: {integrity: sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==}
     engines: {node: '>= 0.4'}
@@ -1542,6 +1767,13 @@ packages:
       has-tostringtag: 1.0.2
     dev: true
 
+  /is-number@7.0.0:
+    resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
+    engines: {node: '>=0.12.0'}
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /is-regex@1.2.1:
     resolution: {integrity: sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==}
     engines: {node: '>= 0.4'}
@@ -1674,6 +1906,16 @@ packages:
     engines: {node: '>= 0.10.0'}
     dev: true
 
+  /micromatch@4.0.8:
+    resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
+    engines: {node: '>=8.6'}
+    requiresBuild: true
+    dependencies:
+      braces: 3.0.3
+      picomatch: 2.3.1
+    dev: true
+    optional: true
+
   /minimatch@3.1.2:
     resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
     dependencies:
@@ -1693,6 +1935,12 @@ packages:
     resolution: {integrity: sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==}
     dev: true
 
+  /node-addon-api@7.1.1:
+    resolution: {integrity: sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==}
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /node-fetch-native@1.6.7:
     resolution: {integrity: sha512-g9yhqoedzIUm0nTnTqAQvueMPVOuIY16bqgAJJC8XOOubYFNwz6IER9qs0Gq2Xd0+CecCKFjtdDTMA4u4xG06Q==}
     dev: false
@@ -1792,6 +2040,13 @@ packages:
   /picocolors@1.1.1:
     resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
 
+  /picomatch@2.3.1:
+    resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
+    engines: {node: '>=8.6'}
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /picomatch@4.0.3:
     resolution: {integrity: sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==}
     engines: {node: '>=12'}
@@ -1830,6 +2085,11 @@ packages:
       path-type: 3.0.0
     dev: true
 
+  /readdirp@4.1.2:
+    resolution: {integrity: sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==}
+    engines: {node: '>= 14.18.0'}
+    dev: true
+
   /reflect.getprototypeof@1.0.10:
     resolution: {integrity: sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==}
     engines: {node: '>= 0.4'}
@@ -1898,6 +2158,12 @@ packages:
       fsevents: 2.3.3
     dev: true
 
+  /rxjs@7.8.2:
+    resolution: {integrity: sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==}
+    dependencies:
+      tslib: 2.8.1
+    dev: true
+
   /safe-array-concat@1.1.3:
     resolution: {integrity: sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q==}
     engines: {node: '>=0.4'}
@@ -1926,6 +2192,236 @@ packages:
       is-regex: 1.2.1
     dev: true
 
+  /sass-embedded-all-unknown@1.93.3:
+    resolution: {integrity: sha512-3okGgnE41eg+CPLtAPletu6nQ4N0ij7AeW+Sl5Km4j29XcmqZQeFwYjHe1AlKTEgLi/UAONk1O8i8/lupeKMbw==}
+    cpu: ['!arm', '!arm64', '!riscv64', '!x64']
+    requiresBuild: true
+    dependencies:
+      sass: 1.93.3
+    dev: true
+    optional: true
+
+  /sass-embedded-android-arm64@1.93.3:
+    resolution: {integrity: sha512-uqUl3Kt1IqdGVAcAdbmC+NwuUJy8tM+2ZnB7/zrt6WxWVShVCRdFnWR9LT8HJr7eJN7AU8kSXxaVX/gedanPsg==}
+    engines: {node: '>=14.0.0'}
+    cpu: [arm64]
+    os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /sass-embedded-android-arm@1.93.3:
+    resolution: {integrity: sha512-8xOw9bywfOD6Wv24BgCmgjkk6tMrsOTTHcb28KDxeJtFtoxiUyMbxo0vChpPAfp2Hyg2tFFKS60s0s4JYk+Raw==}
+    engines: {node: '>=14.0.0'}
+    cpu: [arm]
+    os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /sass-embedded-android-riscv64@1.93.3:
+    resolution: {integrity: sha512-2jNJDmo+3qLocjWqYbXiBDnfgwrUeZgZFHJIwAefU7Fn66Ot7rsXl+XPwlokaCbTpj7eMFIqsRAZ/uDueXNCJg==}
+    engines: {node: '>=14.0.0'}
+    cpu: [riscv64]
+    os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /sass-embedded-android-x64@1.93.3:
+    resolution: {integrity: sha512-y0RoAU6ZenQFcjM9PjQd3cRqRTjqwSbtWLL/p68y2oFyh0QGN0+LQ826fc0ZvU/AbqCsAizkqjzOn6cRZJxTTQ==}
+    engines: {node: '>=14.0.0'}
+    cpu: [x64]
+    os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /sass-embedded-darwin-arm64@1.93.3:
+    resolution: {integrity: sha512-7zb/hpdMOdKteK17BOyyypemglVURd1Hdz6QGsggy60aUFfptTLQftLRg8r/xh1RbQAUKWFbYTNaM47J9yPxYg==}
+    engines: {node: '>=14.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /sass-embedded-darwin-x64@1.93.3:
+    resolution: {integrity: sha512-Ek1Vp8ZDQEe327Lz0b7h3hjvWH3u9XjJiQzveq74RPpJQ2q6d9LfWpjiRRohM4qK6o4XOHw1X10OMWPXJtdtWg==}
+    engines: {node: '>=14.0.0'}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /sass-embedded-linux-arm64@1.93.3:
+    resolution: {integrity: sha512-RBrHWgfd8Dd8w4fbmdRVXRrhh8oBAPyeWDTKAWw8ZEmuXfVl4ytjDuyxaVilh6rR1xTRTNpbaA/YWApBlLrrNw==}
+    engines: {node: '>=14.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: glibc
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /sass-embedded-linux-arm@1.93.3:
+    resolution: {integrity: sha512-yeiv2y+dp8B4wNpd3+JsHYD0mvpXSfov7IGyQ1tMIR40qv+ROkRqYiqQvAOXf76Qwh4Y9OaYZtLpnsPjfeq6mA==}
+    engines: {node: '>=14.0.0'}
+    cpu: [arm]
+    os: [linux]
+    libc: glibc
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /sass-embedded-linux-musl-arm64@1.93.3:
+    resolution: {integrity: sha512-PS829l+eUng+9W4PFclXGb4uA2+965NHV3/Sa5U7qTywjeeUUYTZg70dJHSqvhrBEfCc2XJABeW3adLJbyQYkw==}
+    engines: {node: '>=14.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: musl
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /sass-embedded-linux-musl-arm@1.93.3:
+    resolution: {integrity: sha512-fU0fwAwbp7sBE3h5DVU5UPzvaLg7a4yONfFWkkcCp6ZrOiPuGRHXXYriWQ0TUnWy4wE+svsVuWhwWgvlb/tkKg==}
+    engines: {node: '>=14.0.0'}
+    cpu: [arm]
+    os: [linux]
+    libc: musl
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /sass-embedded-linux-musl-riscv64@1.93.3:
+    resolution: {integrity: sha512-cK1oBY+FWQquaIGEeQ5H74KTO8cWsSWwXb/WaildOO9U6wmUypTgUYKQ0o5o/29nZbWWlM1PHuwVYTSnT23Jjg==}
+    engines: {node: '>=14.0.0'}
+    cpu: [riscv64]
+    os: [linux]
+    libc: musl
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /sass-embedded-linux-musl-x64@1.93.3:
+    resolution: {integrity: sha512-A7wkrsHu2/I4Zpa0NMuPGkWDVV7QGGytxGyUq3opSXgAexHo/vBPlGoDXoRlSdex0cV+aTMRPjoGIfdmNlHwyg==}
+    engines: {node: '>=14.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: musl
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /sass-embedded-linux-riscv64@1.93.3:
+    resolution: {integrity: sha512-vWkW1+HTF5qcaHa6hO80gx/QfB6GGjJUP0xLbnAoY4pwEnw5ulGv6RM8qYr8IDhWfVt/KH+lhJ2ZFxnJareisQ==}
+    engines: {node: '>=14.0.0'}
+    cpu: [riscv64]
+    os: [linux]
+    libc: glibc
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /sass-embedded-linux-x64@1.93.3:
+    resolution: {integrity: sha512-k6uFxs+e5jSuk1Y0niCwuq42F9ZC5UEP7P+RIOurIm8w/5QFa0+YqeW+BPWEW5M1FqVOsNZH3qGn4ahqvAEjPA==}
+    engines: {node: '>=14.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: glibc
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /sass-embedded-unknown-all@1.93.3:
+    resolution: {integrity: sha512-o5wj2rLpXH0C+GJKt/VpWp6AnMsCCbfFmnMAttcrsa+U3yrs/guhZ3x55KAqqUsE8F47e3frbsDL+1OuQM5DAA==}
+    os: ['!android', '!darwin', '!linux', '!win32']
+    requiresBuild: true
+    dependencies:
+      sass: 1.93.3
+    dev: true
+    optional: true
+
+  /sass-embedded-win32-arm64@1.93.3:
+    resolution: {integrity: sha512-0dOfT9moy9YmBolodwYYXtLwNr4jL4HQC9rBfv6mVrD7ud8ue2kDbn+GVzj1hEJxvEexVSmDCf7MHUTLcGs9xQ==}
+    engines: {node: '>=14.0.0'}
+    cpu: [arm64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /sass-embedded-win32-x64@1.93.3:
+    resolution: {integrity: sha512-wHFVfxiS9hU/sNk7KReD+lJWRp3R0SLQEX4zfOnRP2zlvI2X4IQR5aZr9GNcuMP6TmNpX0nQPZTegS8+h9RrEg==}
+    engines: {node: '>=14.0.0'}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /sass-embedded@1.93.3:
+    resolution: {integrity: sha512-+VUy01yfDqNmIVMd/LLKl2TTtY0ovZN0rTonh+FhKr65mFwIYgU9WzgIZKS7U9/SPCQvWTsTGx9jyt+qRm/XFw==}
+    engines: {node: '>=16.0.0'}
+    hasBin: true
+    dependencies:
+      '@bufbuild/protobuf': 2.10.1
+      buffer-builder: 0.2.0
+      colorjs.io: 0.5.2
+      immutable: 5.1.4
+      rxjs: 7.8.2
+      supports-color: 8.1.1
+      sync-child-process: 1.0.2
+      varint: 6.0.0
+    optionalDependencies:
+      sass-embedded-all-unknown: 1.93.3
+      sass-embedded-android-arm: 1.93.3
+      sass-embedded-android-arm64: 1.93.3
+      sass-embedded-android-riscv64: 1.93.3
+      sass-embedded-android-x64: 1.93.3
+      sass-embedded-darwin-arm64: 1.93.3
+      sass-embedded-darwin-x64: 1.93.3
+      sass-embedded-linux-arm: 1.93.3
+      sass-embedded-linux-arm64: 1.93.3
+      sass-embedded-linux-musl-arm: 1.93.3
+      sass-embedded-linux-musl-arm64: 1.93.3
+      sass-embedded-linux-musl-riscv64: 1.93.3
+      sass-embedded-linux-musl-x64: 1.93.3
+      sass-embedded-linux-riscv64: 1.93.3
+      sass-embedded-linux-x64: 1.93.3
+      sass-embedded-unknown-all: 1.93.3
+      sass-embedded-win32-arm64: 1.93.3
+      sass-embedded-win32-x64: 1.93.3
+    dev: true
+
+  /sass@1.93.3:
+    resolution: {integrity: sha512-elOcIZRTM76dvxNAjqYrucTSI0teAF/L2Lv0s6f6b7FOwcwIuA357bIE871580AjHJuSvLIRUosgV+lIWx6Rgg==}
+    engines: {node: '>=14.0.0'}
+    hasBin: true
+    requiresBuild: true
+    dependencies:
+      chokidar: 4.0.3
+      immutable: 5.1.4
+      source-map-js: 1.2.1
+    optionalDependencies:
+      '@parcel/watcher': 2.5.1
+    dev: true
+    optional: true
+
+  /sass@1.94.2:
+    resolution: {integrity: sha512-N+7WK20/wOr7CzA2snJcUSSNTCzeCGUTFY3OgeQP3mZ1aj9NMQ0mSTXwlrnd89j33zzQJGqIN52GIOmYrfq46A==}
+    engines: {node: '>=14.0.0'}
+    hasBin: true
+    dependencies:
+      chokidar: 4.0.3
+      immutable: 5.1.4
+      source-map-js: 1.2.1
+    optionalDependencies:
+      '@parcel/watcher': 2.5.1
+    dev: true
+
   /semver@5.7.2:
     resolution: {integrity: sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==}
     hasBin: true
@@ -2112,11 +2608,30 @@ packages:
       has-flag: 3.0.0
     dev: true
 
+  /supports-color@8.1.1:
+    resolution: {integrity: sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==}
+    engines: {node: '>=10'}
+    dependencies:
+      has-flag: 4.0.0
+    dev: true
+
   /supports-preserve-symlinks-flag@1.0.0:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
     dev: true
 
+  /sync-child-process@1.0.2:
+    resolution: {integrity: sha512-8lD+t2KrrScJ/7KXCSyfhT3/hRq78rC0wBFqNJXv3mZyn6hW2ypM05JmlSvtqRbeq6jqA94oHbxAr2vYsJ8vDA==}
+    engines: {node: '>=16.0.0'}
+    dependencies:
+      sync-message-port: 1.1.3
+    dev: true
+
+  /sync-message-port@1.1.3:
+    resolution: {integrity: sha512-GTt8rSKje5FilG+wEdfCkOcLL7LWqpMlr2c3LRuKt/YXxcJ52aGSbGBAdI4L3aaqfrBt6y711El53ItyH1NWzg==}
+    engines: {node: '>=16.0.0'}
+    dev: true
+
   /tinyglobby@0.2.15:
     resolution: {integrity: sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==}
     engines: {node: '>=12.0.0'}
@@ -2125,6 +2640,19 @@ packages:
       picomatch: 4.0.3
     dev: true
 
+  /to-regex-range@5.0.1:
+    resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
+    engines: {node: '>=8.0'}
+    requiresBuild: true
+    dependencies:
+      is-number: 7.0.0
+    dev: true
+    optional: true
+
+  /tslib@2.8.1:
+    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
+    dev: true
+
   /typed-array-buffer@1.0.3:
     resolution: {integrity: sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==}
     engines: {node: '>= 0.4'}
@@ -2211,7 +2739,11 @@ packages:
       spdx-expression-parse: 3.0.1
     dev: true
 
-  /vite@6.4.1(@types/node@20.19.25):
+  /varint@6.0.0:
+    resolution: {integrity: sha512-cXEIW6cfr15lFv563k4GuVuW/fiwjknytD37jIOLSdSWuOI6WnO/oKwmP2FQTU2l01LP8/M5TSAJpzUaGe3uWg==}
+    dev: true
+
+  /vite@6.4.1(@types/node@20.19.25)(sass-embedded@1.93.3)(sass@1.94.2):
     resolution: {integrity: sha512-+Oxm7q9hDoLMyJOYfUYBuHQo+dkAloi33apOPP56pzj+vsdJDzr+j1NISE5pyaAuKL4A3UD34qd0lx5+kfKp2g==}
     engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
     hasBin: true
@@ -2257,6 +2789,8 @@ packages:
       picomatch: 4.0.3
       postcss: 8.5.6
       rollup: 4.53.3
+      sass: 1.94.2
+      sass-embedded: 1.93.3
       tinyglobby: 0.2.15
     optionalDependencies:
       fsevents: 2.3.3

urbanLifelineWeb/packages/shared/src/App.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script setup lang="ts">
-// 根组件只包含路由视图，布局和样式由 DefaultLayout 组件处理
+// 根组件只包含路由视图，布局和样式由 SharedLayout 组件处理
 </script>
 
 <style>

urbanLifelineWeb/packages/shared/src/api/file/file.ts

@@ -0,0 +1,60 @@
+import { api } from '@/api/index'
+import { BatchFileUploadParam, FileUploadParam, ResultDomain, TbSysFileDTO } from '@/types';
+
+export const fileAPI = {
+    baseUrl: "/file",
+
+    /**
+     * 上传文件
+     * @param param 文件上传参数
+     * @returns Promise<ResultDomain<SysFile>>
+     */
+    async uploadFile(param: FileUploadParam): Promise<ResultDomain<TbSysFileDTO>> {
+        const formData = new FormData();
+        formData.append('file', param.file);
+        if (param.module) {
+            formData.append('module', param.module);
+        }
+        if (param.optsn) {
+            formData.append('optsn', param.optsn);
+        }
+        if (param.uploader) {
+            formData.append('uploader', param.uploader);
+        }
+        const response = await api.upload<TbSysFileDTO>(`${this.baseUrl}/upload`, formData);
+        return response.data;
+    },
+
+    /**
+     * 批量上传文件
+     * @param param 批量文件上传参数
+     * @returns Promise<ResultDomain<SysFile>>
+     */
+    async batchUploadFiles(param: BatchFileUploadParam): Promise<ResultDomain<TbSysFileDTO>> {
+        const formData = new FormData();
+        param.files.forEach(file => {
+            formData.append('files', file);
+        });
+        if (param.module) {
+            formData.append('module', param.module);
+        }
+        if (param.optsn) {
+            formData.append('optsn', param.optsn);
+        }
+        if (param.uploader) {
+            formData.append('uploader', param.uploader);
+        }
+        const response = await api.upload<TbSysFileDTO>(`${this.baseUrl}/batch-upload`, formData);
+        return response.data;
+    },
+
+    /**
+     * 下载文件
+     * @param fileId 文件ID
+     * @param filename 保存的文件名（可选）
+     * @returns Promise<void>
+     */
+    async downloadFile(fileId: string, filename?: string): Promise<void> {
+        return api.download(`${this.baseUrl}/download/${fileId}`, filename);
+    },
+}

urbanLifelineWeb/packages/shared/src/components/base/button/Button.vue

@@ -1,13 +1,52 @@
 <template>
-    <button :type="type" :style="style"></button>
+    <button 
+        :class="[
+            'btn',
+            `btn--${variant}`,
+            `btn--${size}`,
+            {
+                'btn--disabled': disabled,
+                'btn--loading': loading
+            }
+        ]"
+        :type="type" 
+        :disabled="disabled || loading"
+        :style="customStyle"
+        @click="handleClick"
+    >
+        <span v-if="loading" class="btn__spinner"></span>
+        <span class="btn__content">
+            <slot></slot>
+        </span>
+    </button>
 </template>
 <script setup lang="ts">
 interface Props{
-    type: 'button' | 'submit' | 'reset',
-    style: string
+    type?: 'button' | 'submit' | 'reset'
+    variant?: 'primary' | 'secondary' | 'danger' | 'success' | 'warning' | 'gradient-blue' | 'gradient-purple' | 'gradient-pink' | 'gradient-orange' | 'gradient-green' | 'gradient-blue-special'
+    size?: 'small' | 'medium' | 'large'
+    disabled?: boolean
+    loading?: boolean
+    customStyle?: string
 }
 
-const props = defineProps<Props>()
+const props = withDefaults(defineProps<Props>(), {
+    type: 'button',
+    variant: 'primary',
+    size: 'medium',
+    disabled: false,
+    loading: false
+})
+
+const emit = defineEmits<{
+    click: [event: MouseEvent]
+}>()
+
+const handleClick = (event: MouseEvent) => {
+    if (!props.disabled && !props.loading) {
+        emit('click', event)
+    }
+}
 
 </script>
 

urbanLifelineWeb/packages/shared/src/components/base/button/ButtonExample.vue

@@ -0,0 +1,165 @@
+<template>
+    <div class="button-test">
+        <h2>按钮组件测试</h2>
+        
+        <!-- 基础按钮 -->
+        <section class="test-section">
+            <h3>基础按钮</h3>
+            <div class="button-group">
+                <Button variant="primary">Primary</Button>
+                <Button variant="secondary">Secondary</Button>
+                <Button variant="danger">Danger</Button>
+                <Button variant="success">Success</Button>
+                <Button variant="warning">Warning</Button>
+            </div>
+        </section>
+
+        <!-- 渐变按钮 -->
+        <section class="test-section">
+            <h3>渐变按钮</h3>
+            <div class="button-group">
+                <Button variant="gradient-blue">Gradient Blue</Button>
+                <Button variant="gradient-purple">Gradient Purple</Button>
+                <Button variant="gradient-pink">Gradient Pink</Button>
+                <Button variant="gradient-orange">Gradient Orange</Button>
+                <Button variant="gradient-green">Gradient Green</Button>
+                <Button variant="gradient-blue-special">Special Blue</Button>
+            </div>
+        </section>
+
+        <!-- 尺寸测试 -->
+        <section class="test-section">
+            <h3>按钮尺寸（渐变示例）</h3>
+            <div class="button-group">
+                <Button variant="gradient-blue" size="small">Small</Button>
+                <Button variant="gradient-pink" size="medium">Medium</Button>
+                <Button variant="gradient-green" size="large">Large</Button>
+            </div>
+        </section>
+
+        <!-- 状态测试 -->
+        <section class="test-section">
+            <h3>按钮状态</h3>
+            <div class="button-group">
+                <Button variant="gradient-blue" :loading="isLoading" @click="toggleLoading">
+                    {{ isLoading ? '加载中...' : '点击加载' }}
+                </Button>
+                <Button variant="gradient-purple" disabled>禁用按钮</Button>
+                <Button variant="gradient-pink" :loading="true">持续加载</Button>
+            </div>
+        </section>
+
+        <!-- 混合展示 -->
+        <section class="test-section">
+            <h3>混合展示</h3>
+            <div class="mixed-demo">
+                <div class="card">
+                    <h4>渐变卡片演示</h4>
+                    <p>这是一个使用渐变按钮的卡片示例</p>
+                    <div class="card-actions">
+                        <Button variant="gradient-blue" size="small">详情</Button>
+                        <Button variant="gradient-green" size="small">确认</Button>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </div>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+import Button from './Button.vue'
+
+// 响应式数据
+const isLoading = ref(false)
+
+// 方法
+const toggleLoading = () => {
+    isLoading.value = true
+    setTimeout(() => {
+        isLoading.value = false
+    }, 2000)
+}
+</script>
+
+<style lang="scss" scoped>
+.button-test {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 20px;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+
+    h2 {
+        text-align: center;
+        color: #333;
+        margin-bottom: 30px;
+        font-size: 28px;
+    }
+
+    .test-section {
+        margin-bottom: 40px;
+        padding: 20px;
+        border: 1px solid #e1e5e9;
+        border-radius: 8px;
+        background: white;
+        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+
+        h3 {
+            margin: 0 0 20px 0;
+            color: #495057;
+            font-size: 20px;
+            border-bottom: 2px solid #f8f9fa;
+            padding-bottom: 10px;
+        }
+
+        .button-group {
+            display: flex;
+            gap: 12px;
+            flex-wrap: wrap;
+            align-items: center;
+        }
+    }
+
+    .mixed-demo {
+        .card {
+            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            padding: 24px;
+            border-radius: 12px;
+            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+            max-width: 400px;
+
+            h4 {
+                margin: 0 0 12px 0;
+                color: #374151;
+                font-size: 18px;
+            }
+
+            p {
+                margin: 0 0 20px 0;
+                color: #6b7280;
+                line-height: 1.6;
+            }
+
+            .card-actions {
+                display: flex;
+                gap: 8px;
+                justify-content: flex-end;
+            }
+        }
+    }
+}
+
+// 响应式设计
+@media (max-width: 768px) {
+    .button-test {
+        padding: 16px;
+
+        .test-section {
+            padding: 16px;
+
+            .button-group {
+                gap: 8px;
+            }
+        }
+    }
+}
+</style>

urbanLifelineWeb/packages/shared/src/components/base/button/button.scss

@@ -0,0 +1,189 @@
+.btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    border: none;
+    border-radius: 6px;
+    cursor: pointer;
+    font-weight: 500;
+    transition: all 0.2s ease;
+    text-decoration: none;
+    white-space: nowrap;
+    
+    &:focus {
+        outline: 2px solid rgba(59, 130, 246, 0.5);
+        outline-offset: 2px;
+    }
+
+    // 尺寸
+    &--small {
+        padding: 6px 12px;
+        font-size: 12px;
+        line-height: 1.4;
+    }
+
+    &--medium {
+        padding: 8px 16px;
+        font-size: 14px;
+        line-height: 1.5;
+    }
+
+    &--large {
+        padding: 12px 20px;
+        font-size: 16px;
+        line-height: 1.5;
+    }
+
+    // 变体
+    &--primary {
+        background-color: #3b82f6;
+        color: white;
+        
+        &:hover:not(.btn--disabled):not(.btn--loading) {
+            background-color: #2563eb;
+        }
+    }
+
+    &--secondary {
+        background-color: #f1f5f9;
+        color: #475569;
+        border: 1px solid #e2e8f0;
+        
+        &:hover:not(.btn--disabled):not(.btn--loading) {
+            background-color: #e2e8f0;
+        }
+    }
+
+    &--danger {
+        background-color: #ef4444;
+        color: white;
+        
+        &:hover:not(.btn--disabled):not(.btn--loading) {
+            background-color: #dc2626;
+        }
+    }
+
+    &--success {
+        background-color: #10b981;
+        color: white;
+        
+        &:hover:not(.btn--disabled):not(.btn--loading) {
+            background-color: #059669;
+        }
+    }
+
+    &--warning {
+        background-color: #f59e0b;
+        color: white;
+        
+        &:hover:not(.btn--disabled):not(.btn--loading) {
+            background-color: #d97706;
+        }
+    }
+
+    // 渐变变体
+    &--gradient-blue {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        color: white;
+        border: none;
+        
+        &:hover:not(.btn--disabled):not(.btn--loading) {
+            background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
+            transform: translateY(-1px);
+            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+        }
+    }
+
+    &--gradient-purple {
+        background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
+        color: #374151;
+        border: none;
+        
+        &:hover:not(.btn--disabled):not(.btn--loading) {
+            background: linear-gradient(135deg, #96e6e2 0%, #fcc4d1 100%);
+            transform: translateY(-1px);
+            box-shadow: 0 4px 12px rgba(168, 237, 234, 0.4);
+        }
+    }
+
+    &--gradient-pink {
+        background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
+        color: white;
+        border: none;
+        
+        &:hover:not(.btn--disabled):not(.btn--loading) {
+            background: linear-gradient(135deg, #ff888c 0%, #feb7dd 100%);
+            transform: translateY(-1px);
+            box-shadow: 0 4px 12px rgba(255, 154, 158, 0.4);
+        }
+    }
+
+    &--gradient-orange {
+        background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
+        color: #374151;
+        border: none;
+        
+        &:hover:not(.btn--disabled):not(.btn--loading) {
+            background: linear-gradient(135deg, #ffe4c0 0%, #fba88d 100%);
+            transform: translateY(-1px);
+            box-shadow: 0 4px 12px rgba(252, 182, 159, 0.4);
+        }
+    }
+
+    &--gradient-green {
+        background: linear-gradient(135deg, #a8e6cf 0%, #dcedc1 100%);
+        color: #374151;
+        border: none;
+        
+        &:hover:not(.btn--disabled):not(.btn--loading) {
+            background: linear-gradient(135deg, #96dfbf 0%, #d0e6af 100%);
+            transform: translateY(-1px);
+            box-shadow: 0 4px 12px rgba(168, 230, 207, 0.4);
+        }
+    }
+
+    &--gradient-blue-special {
+        background: linear-gradient(281.59deg, #162C8E 8.51%, #1D72D3 66.15%, #AEF1FF 100.83%);
+        color: white;
+        border: none;
+        
+        &:hover:not(.btn--disabled):not(.btn--loading) {
+            background: linear-gradient(281.59deg, #142558 8.51%, #1a64b8 66.15%, #9ce8f5 100.83%);
+            transform: translateY(-1px);
+            box-shadow: 0 4px 12px rgba(29, 114, 211, 0.4);
+        }
+    }
+
+    // 状态
+    &--disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+
+    &--loading {
+        cursor: wait;
+    }
+
+    // 加载动画
+    &__spinner {
+        width: 16px;
+        height: 16px;
+        border: 2px solid transparent;
+        border-top: 2px solid currentColor;
+        border-radius: 50%;
+        animation: spin 1s linear infinite;
+    }
+
+    &__content {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+    }
+}
+
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}

urbanLifelineWeb/packages/shared/src/components/dynamicComponent/DynamicComponent.vue

@@ -0,0 +1,8 @@
+<template>
+</template>
+<script setup lang="ts">
+
+</script>
+<style lang="scss" scoped>
+@import url("./DynamicComponent.scss");
+</style>

urbanLifelineWeb/packages/shared/src/components/dynamicComponent/DynamicComponentExample.vue

@@ -1,9 +1,7 @@
 <template>
-
 </template>
 <script setup lang="ts">
 
 </script>
 <style lang="scss" scoped>
-    
 </style>

urbanLifelineWeb/packages/shared/src/components/fileupload/FileUpload.scss

@@ -0,0 +1,402 @@
+// 文件上传组件 - 精简版样式
+.file-upload {
+  display: inline-block;
+  width: 100%;
+
+  // 封面模式
+  &.cover {
+    width: 300px;
+    height: 200px;
+
+    .image-wrapper {
+      position: relative;
+      width: 300px;
+      height: 200px;
+      border-radius: 6px;
+      overflow: hidden;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: #f5f7fa;
+
+      &:hover .actions {
+        opacity: 1;
+      }
+
+      .image {
+        display: block;
+        object-fit: contain;
+        max-width: 100%;
+        max-height: 100%;
+
+        &.horizontal {
+          width: 100%;
+          height: auto;
+        }
+
+        &.vertical {
+          height: 100%;
+          width: auto;
+        }
+      }
+
+      .actions {
+        position: absolute;
+        top: 8px;
+        right: 8px;
+        opacity: 0;
+        transition: opacity 0.3s;
+      }
+    }
+  }
+
+  // 弹窗模式
+  &.dialog {
+    .overlay {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: rgba(0, 0, 0, 0.5);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 1000;
+    }
+
+    .modal {
+      background: white;
+      border-radius: 12px;
+      padding: 24px;
+      width: 90%;
+      max-width: 500px;
+      max-height: 80vh;
+      overflow-y: auto;
+      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
+    }
+
+    .header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 20px;
+      padding-bottom: 12px;
+      border-bottom: 1px solid #e2e8f0;
+
+      h3 {
+        margin: 0;
+        font-size: 18px;
+        font-weight: 600;
+        color: #1e293b;
+      }
+    }
+
+    .footer {
+      display: flex;
+      gap: 12px;
+      justify-content: flex-end;
+      margin-top: 20px;
+      padding-top: 20px;
+      border-top: 1px solid #e2e8f0;
+    }
+  }
+
+  // 内容模式
+  &.content {}
+
+  // 通用容器
+  .container {
+    padding: 20px 0;
+  }
+
+  // 上传区域
+  .area {
+    border: 2px dashed #dcdfe6;
+    border-radius: 8px;
+    padding: 60px 20px;
+    text-align: center;
+    cursor: pointer;
+    transition: all 0.3s;
+    background: #fafafa;
+    min-height: 160px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+
+    // 封面模式特殊样式
+    &.cover {
+      border: 1px dashed #d9d9d9;
+      border-radius: 6px;
+      background: #ffffff;
+      padding: 30px 20px;
+
+      &:hover {
+        box-shadow: 0 4px 12px rgba(64, 158, 255, 0.1);
+        transform: translateY(-2px);
+
+        .icon {
+          transform: scale(1.1);
+        }
+      }
+    }
+
+    &:hover {
+      border-color: #409eff;
+      background: #f0f9ff;
+
+      .icon .plus {
+
+        &::before,
+        &::after {
+          background-color: #409eff;
+        }
+      }
+
+      .text {
+        color: #409eff;
+      }
+    }
+
+    &.dragover {
+      border-color: #409eff;
+      background: #e6f7ff;
+      border-style: solid;
+    }
+
+    &.disabled {
+      cursor: not-allowed;
+      opacity: 0.6;
+    }
+  }
+
+  // 内容区域
+  .content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    width: 100%;
+  }
+
+  // 图标
+  .icon {
+    margin-bottom: 16px;
+    transition: all 0.3s;
+
+    .plus {
+      width: 80px;
+      height: 80px;
+      position: relative;
+      margin: 0 auto;
+
+      &::before,
+      &::after {
+        content: '';
+        position: absolute;
+        background-color: #c0c4cc;
+        transition: all 0.3s;
+      }
+
+      // 竖线
+      &::before {
+        width: 2px;
+        height: 80px;
+        left: 50%;
+        top: 0;
+        transform: translateX(-50%);
+      }
+
+      // 横线
+      &::after {
+        width: 80px;
+        height: 2px;
+        left: 0;
+        top: 50%;
+        transform: translateY(-50%);
+      }
+    }
+  }
+
+  // 封面模式的小图标
+  &.cover .icon .plus {
+    width: 48px;
+    height: 48px;
+
+    &::before {
+      width: 1px;
+      height: 48px;
+    }
+
+    &::after {
+      width: 48px;
+      height: 1px;
+    }
+  }
+
+  // 文字
+  .text {
+    color: #606266;
+    font-size: 16px;
+    margin-bottom: 8px;
+    font-weight: 500;
+    transition: color 0.3s;
+
+    .link {
+      color: #409eff;
+      cursor: pointer;
+      text-decoration: underline;
+    }
+  }
+
+  // 提示
+  .tip {
+    color: #909399;
+    font-size: 13px;
+    line-height: 1.5;
+    max-width: 240px;
+  }
+
+  // 加载状态
+  .loading {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(255, 255, 255, 0.9);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    .spinner {
+      font-size: 32px;
+      color: #409eff;
+      margin-bottom: 8px;
+      animation: rotate 1s linear infinite;
+    }
+
+    div {
+      font-size: 14px;
+      color: #606266;
+    }
+  }
+
+  // 文件列表
+  .files {
+    margin-top: 20px;
+
+    h4 {
+      margin: 0 0 12px 0;
+      font-size: 14px;
+      font-weight: 600;
+      color: #374151;
+    }
+  }
+
+  // 单个文件
+  .file {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px;
+    background-color: #f8fafc;
+    border-radius: 6px;
+    margin-bottom: 8px;
+    transition: background-color 0.2s ease;
+
+    &:hover {
+      background-color: #e2e8f0;
+    }
+
+    .preview {
+      width: 60px;
+      height: 60px;
+      border-radius: 4px;
+      overflow: hidden;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: #f5f7fa;
+      flex-shrink: 0;
+
+      .thumb {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+
+      .type-icon {
+        font-size: 24px;
+      }
+    }
+
+    .info {
+      flex: 1;
+      min-width: 0;
+
+      .name {
+        font-size: 14px;
+        font-weight: 500;
+        color: #1e293b;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        margin-bottom: 4px;
+      }
+
+      .size {
+        font-size: 12px;
+        color: #64748b;
+      }
+    }
+
+    .actions {
+      display: flex;
+      gap: 8px;
+    }
+  }
+
+  // 操作按钮区域
+  .actions {
+    margin-top: 16px;
+    text-align: center;
+
+    &:not(.file .actions) {
+      display: flex;
+      gap: 12px;
+      justify-content: center;
+    }
+  }
+}
+
+// 动画
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+// 响应式设计
+@media (max-width: 768px) {
+  .file-upload {
+    &.dialog .modal {
+      margin: 16px;
+      padding: 20px;
+      width: calc(100% - 32px);
+    }
+
+    .area.cover {
+      width: 250px;
+      height: 160px;
+    }
+  }
+}

urbanLifelineWeb/packages/shared/src/components/fileupload/FileUpload.vue

@@ -1,26 +1,404 @@
 <template>
-	<div v-if="mode==='cover'">
-		<!-- 封面的文件上传，只可传一张图片，上传成功后，封面图片会替换 -->
+	<!-- 封面模式 -->
+	<div v-if="mode === 'cover'" class="file-upload cover">
+		<!-- 已上传的封面 -->
+		<div v-if="currentCoverImg" class="image-wrapper">
+			<img :src="currentCoverImg" class="image" :class="coverImageClass" @load="handleCoverImageLoad"
+				alt="封面图片" />
+			<div class="actions">
+				<Button variant="danger" size="small" @click="handleRemoveCover">
+					×
+				</Button>
+			</div>
+		</div>
+
+		<!-- 上传区域 -->
+		<div v-else class="area cover" :class="{ dragover: isDragover, disabled: uploading }" @click="triggerFileInput"
+			@drop.prevent="handleDrop" @dragover.prevent="handleDragOver" @dragleave.prevent="handleDragLeave">
+			<div v-if="!uploading" class="content">
+				<div class="icon">
+					<div class="plus"></div>
+				</div>
+				<div class="text">点击上传封面</div>
+				<div class="tip">
+					{{ `支持 ${getAcceptText()} 格式，最大 ${(maxSize / 1024 / 1024).toFixed(0)}MB` }}
+				</div>
+			</div>
+			<div v-if="uploading" class="loading">
+				<div class="spinner">⟳</div>
+				<div>上传中...</div>
+			</div>
+		</div>
+
+		<input ref="fileInputRef" type="file" :accept="accept" @change="handleFileSelect" hidden />
 	</div>
-	<div v-if="mode==='dialog'">
-		<!-- 文件上传弹窗，可传多个文件，上传成功后，文件列表会更新 -->
+
+	<!-- 弹窗模式 -->
+	<div v-else-if="mode === 'dialog'" class="file-upload dialog">
+		<Button @click="showDialog = true" variant="primary">
+			{{ buttonText || '上传文件' }}
+		</Button>
+
+		<div v-if="showDialog" class="overlay" @click="closeDialog">
+			<div class="modal" @click.stop>
+				<div class="header">
+					<h3>{{ title || '文件上传' }}</h3>
+					<Button variant="secondary" size="small" @click="closeDialog">×</Button>
+				</div>
+
+				<div class="container">
+					<div class="area" :class="{ dragover: isDragover, disabled: uploading }" @click="triggerFileInput"
+						@drop.prevent="handleDrop" @dragover.prevent="handleDragOver"
+						@dragleave.prevent="handleDragLeave">
+						<div class="icon">
+							<div class="plus"></div>
+						</div>
+						<div class="text">
+							将文件拖到此处，或<span class="link">点击上传</span>
+						</div>
+						<div class="tip">{{ getUploadTip() }}</div>
+					</div>
+
+					<input ref="fileInputRef" type="file" :accept="accept" :multiple="maxCount > 1"
+						@change="handleFileSelect" hidden />
+
+					<!-- 文件列表 -->
+					<div v-if="selectedFiles.length > 0" class="files">
+						<div v-for="(file, index) in selectedFiles" :key="index" class="file">
+							<div class="preview">
+								<img v-if="isImageFile(file)" :src="getFilePreviewUrl(file)" class="thumb" />
+								<span v-else class="type-icon">{{ getFileTypeIcon(file) }}</span>
+							</div>
+
+							<div class="info">
+								<div class="name">{{ file.name }}</div>
+								<div class="size">{{ formatFileSize(file.size) }}</div>
+							</div>
+
+							<div class="actions">
+								<Button variant="danger" size="small" @click="removeFile(index)" :disabled="uploading">
+									删除
+								</Button>
+							</div>
+						</div>
+					</div>
+				</div>
+
+				<div class="footer">
+					<Button variant="secondary" @click="closeDialog" :disabled="uploading">取消</Button>
+					<Button variant="primary" @click="uploadFiles" :loading="uploading"
+						:disabled="selectedFiles.length === 0">
+						{{ uploading ? '上传中...' : '确定上传' }}
+					</Button>
+				</div>
+			</div>
+		</div>
 	</div>
-	<div v-if="mode==='content'">
-		<!-- 嵌入原div文件上传内容，可传多个文件，上传成功后，文件列表会更新 -->
+
+	<!-- 内容模式 -->
+	<div v-else class="file-upload content">
+		<div class="container">
+			<div class="area" :class="{ dragover: isDragover, disabled: uploading }" @click="triggerFileInput"
+				@drop.prevent="handleDrop" @dragover.prevent="handleDragOver" @dragleave.prevent="handleDragLeave">
+				<div class="icon">
+					<div class="plus"></div>
+				</div>
+				<div class="text">
+					将文件拖到此处，或<span class="link">点击上传</span>
+				</div>
+				<div class="tip">{{ getUploadTip() }}</div>
+			</div>
+
+			<input ref="fileInputRef" type="file" :accept="accept" :multiple="maxCount > 1" @change="handleFileSelect"
+				hidden />
+
+			<!-- 文件列表 -->
+			<div v-if="selectedFiles.length > 0" class="files">
+				<h4>待上传文件：</h4>
+				<div v-for="(file, index) in selectedFiles" :key="index" class="file">
+					<div class="preview">
+						<img v-if="isImageFile(file)" :src="getFilePreviewUrl(file)" class="thumb" />
+						<span v-else class="type-icon">{{ getFileTypeIcon(file) }}</span>
+					</div>
+
+					<div class="info">
+						<div class="name">{{ file.name }}</div>
+						<div class="size">{{ formatFileSize(file.size) }}</div>
+					</div>
+
+					<div class="actions">
+						<Button variant="danger" size="small" @click="removeFile(index)" :disabled="uploading">
+							删除
+						</Button>
+					</div>
+				</div>
+			</div>
+
+			<!-- 上传按钮 -->
+			<div v-if="selectedFiles.length > 0" class="actions">
+				<Button variant="primary" @click="uploadFiles" :loading="uploading"
+					:disabled="selectedFiles.length === 0">
+					{{ uploading ? '上传中...' : '确定上传' }}
+				</Button>
+			</div>
+		</div>
 	</div>
+
 </template>
+
 <script setup lang="ts">
+import { ref, computed } from 'vue'
 import { Button } from '@/components'
 import { FILE_DOWNLOAD_URL } from '@/config'
-interface Props{
+import { fileAPI } from '@/api/file/file'
+import type { TbSysFileDTO } from '@/types/file/file'
+import {
+	formatFileSize,
+	isImageFile,
+	getFileTypeIcon,
+	isValidFileType,
+	getFilePreviewUrl
+} from '@/utils/file'
+
+interface Props {
 	mode: 'cover' | 'dialog' | 'content'
-	coverImg: string
-	fileList: FileList
+	coverImg?: string
+	fileList?: TbSysFileDTO[]
+	accept?: string
+	maxSize?: number
+	maxCount?: number
+	title?: string
+	buttonText?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	coverImg: '',
+	fileList: () => [],
+	accept: '',
+	maxSize: 10 * 1024 * 1024,
+	maxCount: 10,
+	title: '文件上传',
+	buttonText: '上传文件'
+})
+
+const emit = defineEmits<{
+	'update:coverImg': [value: string]
+	'update:fileList': [value: TbSysFileDTO[]]
+	'upload-success': [files: TbSysFileDTO[]]
+	'upload-error': [error: string]
+}>()
+
+// 响应式数据
+const showDialog = ref(false)
+const uploading = ref(false)
+const selectedFiles = ref<File[]>([])
+const isDragover = ref(false)
+const coverImageClass = ref('')
+
+// 文件输入引用
+const fileInputRef = ref<HTMLInputElement>()
+
+// 计算属性
+const currentCoverImg = computed({
+	get: () => props.coverImg,
+	set: (value: string) => emit('update:coverImg', value)
+})
+
+// 触发文件输入
+const triggerFileInput = () => {
+	fileInputRef.value?.click()
+}
+
+// 拖拽相关
+const handleDragOver = (event: DragEvent) => {
+	event.preventDefault()
+	isDragover.value = true
+}
+
+const handleDragLeave = () => {
+	isDragover.value = false
+}
+
+const handleDrop = (event: DragEvent) => {
+	event.preventDefault()
+	isDragover.value = false
+	if (uploading.value) return
+
+	const files = event.dataTransfer?.files
+	if (files && files.length > 0) {
+		addFiles(Array.from(files))
+
+		// cover模式和content模式下拖拽文件后立即上传
+		if (props.mode === 'cover' || props.mode === 'content') {
+			uploadFiles()
+		}
+	}
+}
+
+// 处理封面图片加载
+const handleCoverImageLoad = (event: Event) => {
+	const img = event.target as HTMLImageElement
+	const width = img.naturalWidth
+	const height = img.naturalHeight
+
+	if (width > height) {
+		coverImageClass.value = 'horizontal'
+	} else {
+		coverImageClass.value = 'vertical'
+	}
+}
+
+// 删除封面
+const handleRemoveCover = () => {
+	emit('update:coverImg', '')
+	coverImageClass.value = ''
+	selectedFiles.value = []
+}
+
+// 获取接受文件类型文本
+const getAcceptText = (): string => {
+	if (!props.accept || props.accept === '*/*') return '所有'
+	if (props.accept.includes('image')) return '图片'
+	return props.accept
+}
+
+// 获取上传提示文本
+const getUploadTip = (): string => {
+	const acceptText = getAcceptText()
+	const sizeText = (props.maxSize / 1024 / 1024).toFixed(0)
+	return `支持 ${acceptText} 格式，单个文件不超过 ${sizeText}MB`
+}
+
+// 添加文件
+const addFiles = (files: File[]) => {
+	files.forEach(file => {
+		// 验证文件大小
+		if (file.size > props.maxSize) {
+			emit('upload-error', `文件 ${file.name} 大小超过 ${(props.maxSize / 1024 / 1024).toFixed(0)}MB`)
+			return
+		}
+
+		// 验证文件类型
+		if (props.accept && !isValidFileType(file, props.accept)) {
+			emit('upload-error', `文件 ${file.name} 类型不符合要求`)
+			return
+		}
+
+		// 检查是否重复
+		if (selectedFiles.value.some(f => f.name === file.name && f.size === file.size)) {
+			emit('upload-error', `文件 ${file.name} 已添加`)
+			return
+		}
+
+		// 如果不允许多选或封面模式，清空之前的文件
+		if (props.maxCount === 1 || props.mode === 'cover') {
+			selectedFiles.value = [file]
+		} else {
+			// 检查数量限制
+			if (selectedFiles.value.length >= props.maxCount) {
+				emit('upload-error', `最多只能上传 ${props.maxCount} 个文件`)
+				return
+			}
+			selectedFiles.value.push(file)
+		}
+	})
+}
+
+// 处理文件选择
+const handleFileSelect = (event: Event) => {
+	const target = event.target as HTMLInputElement
+	const files = Array.from(target.files || [])
+
+	if (files.length === 0) return
+
+	addFiles(files)
+
+	// 清空 input，允许重复选择同一文件
+	target.value = ''
+
+	// cover模式和content模式下选择文件后立即上传
+	if (props.mode === 'cover' || props.mode === 'content') {
+		uploadFiles()
+	}
+}
+
+// 移除文件
+const removeFile = (index: number) => {
+	selectedFiles.value.splice(index, 1)
+}
+
+// 关闭弹窗
+const closeDialog = () => {
+	showDialog.value = false
+	selectedFiles.value = []
+	isDragover.value = false
+}
+
+// 上传文件
+const uploadFiles = async () => {
+	if (selectedFiles.value.length === 0) return
+
+	uploading.value = true
+	const uploadedFilesList: TbSysFileDTO[] = []
+
+	try {
+
+		if (selectedFiles.value.length === 1) {
+			const file = selectedFiles.value[0]
+			const result = await fileAPI.uploadFile({
+				file: file,
+				module: props.mode,
+				optsn: ''
+			})
+
+			if (result.success && result.data) {
+				uploadedFilesList.push(result.data)
+
+				if (props.mode === 'cover' && result.data.url) {
+					emit('update:coverImg', result.data.url)
+				}
+			} else {
+				emit('upload-error', result.message || '上传失败，请重试')
+				return
+			}
+		} else {
+			const result = await fileAPI.batchUploadFiles({
+				files: selectedFiles.value,
+				module: props.mode,
+				optsn: ''
+			})
+
+			if (result.success) {
+				const files = result.dataList || []
+				uploadedFilesList.push(...files)
+			} else {
+				emit('upload-error', result.message || '上传失败，请重试')
+				return
+			}
+		}
+
+		// 上传成功
+		if (uploadedFilesList.length > 0) {
+			emit('upload-success', uploadedFilesList)
+			emit('update:fileList', [...props.fileList, ...uploadedFilesList])
+		}
+
+		// 清空文件列表
+		selectedFiles.value = []
+		if (props.mode === 'dialog') {
+			closeDialog()
+		}
+
+	} catch (error) {
+		console.error('上传失败:', error)
+		emit('upload-error', '上传失败，请重试')
+	} finally {
+		uploading.value = false
+	}
 }
 
-const props = defineProps<Props>()
 </script>
 
 <style lang="scss" scoped>
-
+@import './FileUpload.scss';
 </style>

urbanLifelineWeb/packages/shared/src/components/fileupload/FileUploadExample.vue

@@ -0,0 +1,312 @@
+<template>
+  <div class="file-upload-test">
+    <h2>文件上传组件测试</h2>
+    
+    <!-- 封面模式测试 -->
+    <section class="test-section">
+      <h3>1. 封面模式测试</h3>
+      <div class="test-content">
+        <div class="cover-upload-wrapper">
+          <FileUpload 
+            mode="cover"
+            v-model:coverImg="coverImage"
+            accept="image/*"
+            :maxSize="5 * 1024 * 1024"
+            @upload-success="handleCoverUploadSuccess"
+            @upload-error="handleUploadError"
+            style="height: auto;"
+          />
+        </div>
+        <div class="test-info">
+          <p><strong>当前封面:</strong> {{ coverImage || '无' }}</p>
+          <p><strong>说明:</strong> 点击上传封面图片，支持JPG、PNG、GIF格式，最大5MB</p>
+        </div>
+      </div>
+    </section>
+
+    <!-- 弹窗模式测试 -->
+    <section class="test-section">
+      <h3>2. 弹窗模式测试</h3>
+      <div class="test-content">
+        <FileUpload 
+          mode="dialog"
+          v-model:fileList="dialogFileList"
+          :maxCount="5"
+          :maxSize="10 * 1024 * 1024"
+          @upload-success="handleDialogUploadSuccess"
+          @upload-error="handleUploadError"
+        />
+        <div class="test-info">
+          <p><strong>已上传文件数:</strong> {{ dialogFileList.length }}</p>
+          <p><strong>说明:</strong> 点击按钮打开弹窗，支持多文件上传，最多5个文件，每个文件最大10MB</p>
+          <div v-if="dialogFileList.length > 0" class="uploaded-files">
+            <h4>已上传的文件:</h4>
+            <ul>
+              <li v-for="file in dialogFileList" :key="file.fileId">
+                <strong>{{ file.name }}</strong> 
+                <span class="file-size">({{ formatFileSize(file.size || 0) }})</span>
+                <span class="file-type">{{ file.type }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- 内容模式测试 -->
+    <section class="test-section">
+      <h3>3. 内容模式测试</h3>
+      <div class="test-content">
+        <FileUpload 
+          mode="content"
+          v-model:fileList="contentFileList"
+          :maxCount="3"
+          :maxSize="20 * 1024 * 1024"
+          @upload-success="handleContentUploadSuccess"
+          @upload-error="handleUploadError"
+        />
+        <div class="test-info">
+          <p><strong>已上传文件数:</strong> {{ contentFileList.length }}</p>
+          <p><strong>说明:</strong> 直接在页面中显示上传区域，最多3个文件，每个文件最大20MB</p>
+          <div v-if="contentFileList.length > 0" class="uploaded-files">
+            <h4>已上传的文件:</h4>
+            <ul>
+              <li v-for="file in contentFileList" :key="file.fileId">
+                <strong>{{ file.name }}</strong> 
+                <span class="file-size">({{ formatFileSize(file.size || 0) }})</span>
+                <span class="file-type">{{ file.type }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- 消息提示 -->
+    <div v-if="message" class="message" :class="messageType">
+      <p>{{ message }}</p>
+      <button @click="clearMessage">×</button>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+import FileUpload from './FileUpload.vue'
+import type { TbSysFileDTO } from '@/types/file/file'
+
+// 响应式数据
+const coverImage = ref<string>('')
+const dialogFileList = ref<TbSysFileDTO[]>([])
+const contentFileList = ref<TbSysFileDTO[]>([])
+const message = ref<string>('')
+const messageType = ref<'success' | 'error'>('success')
+
+// 处理封面上传成功
+const handleCoverUploadSuccess = (files: TbSysFileDTO[]) => {
+  console.log('封面上传成功:', files)
+  showMessage('封面上传成功！', 'success')
+}
+
+// 处理弹窗上传成功
+const handleDialogUploadSuccess = (files: TbSysFileDTO[]) => {
+  console.log('弹窗上传成功:', files)
+  showMessage(`成功上传 ${files.length} 个文件！`, 'success')
+}
+
+// 处理内容上传成功
+const handleContentUploadSuccess = (files: TbSysFileDTO[]) => {
+  console.log('内容上传成功:', files)
+  showMessage(`成功上传 ${files.length} 个文件！`, 'success')
+}
+
+// 处理上传错误
+const handleUploadError = (error: string) => {
+  console.error('上传错误:', error)
+  showMessage(error, 'error')
+}
+
+// 显示消息
+const showMessage = (msg: string, type: 'success' | 'error') => {
+  message.value = msg
+  messageType.value = type
+  
+  // 3秒后自动清除消息
+  setTimeout(() => {
+    clearMessage()
+  }, 3000)
+}
+
+// 清除消息
+const clearMessage = () => {
+  message.value = ''
+}
+
+// 格式化文件大小
+const formatFileSize = (bytes: number): string => {
+  if (bytes === 0) return '0 B'
+  const k = 1024
+  const sizes = ['B', 'KB', 'MB', 'GB']
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
+}
+</script>
+<style lang="scss" scoped>
+.file-upload-test {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+
+  h2 {
+    text-align: center;
+    color: #333;
+    margin-bottom: 30px;
+    font-size: 28px;
+  }
+
+  .test-section {
+    margin-bottom: 40px;
+    border: 1px solid #e1e5e9;
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+
+    h3 {
+      background-color: #f8f9fa;
+      margin: 0;
+      padding: 15px 20px;
+      color: #495057;
+      font-size: 20px;
+      border-bottom: 1px solid #e1e5e9;
+    }
+
+    .test-content {
+      padding: 20px;
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 30px;
+      align-items: start;
+
+      @media (max-width: 768px) {
+        grid-template-columns: 1fr;
+        gap: 20px;
+      }
+    }
+
+    .test-info {
+      background-color: #f8f9fa;
+      padding: 15px;
+      border-radius: 6px;
+      border-left: 4px solid #007bff;
+
+      p {
+        margin: 8px 0;
+        
+        strong {
+          color: #495057;
+        }
+      }
+
+      .uploaded-files {
+        margin-top: 15px;
+
+        h4 {
+          margin: 0 0 10px 0;
+          color: #495057;
+          font-size: 16px;
+        }
+
+        ul {
+          list-style: none;
+          padding: 0;
+          margin: 0;
+
+          li {
+            padding: 8px 12px;
+            background-color: white;
+            border-radius: 4px;
+            margin-bottom: 5px;
+            border: 1px solid #e1e5e9;
+            
+            .file-size {
+              color: #6c757d;
+              font-size: 12px;
+              margin-left: 8px;
+            }
+
+            .file-type {
+              color: #28a745;
+              font-size: 12px;
+              margin-left: 8px;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .message {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    padding: 15px 20px;
+    border-radius: 6px;
+    color: white;
+    display: flex;
+    align-items: center;
+    gap: 15px;
+    z-index: 1000;
+    min-width: 300px;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+
+    &.success {
+      background-color: #28a745;
+    }
+
+    &.error {
+      background-color: #dc3545;
+    }
+
+    p {
+      margin: 0;
+      flex: 1;
+    }
+
+    button {
+      background: none;
+      border: none;
+      color: white;
+      font-size: 18px;
+      cursor: pointer;
+      padding: 0;
+      width: 24px;
+      height: 24px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 50%;
+      
+      &:hover {
+        background-color: rgba(255,255,255,0.2);
+      }
+    }
+  }
+
+//   // 为封面模式设置默认尺寸，可被外部覆盖
+//   .cover-upload-wrapper .file-upload.cover .area.cover {
+//     width: 300px;
+//     height: 200px;
+//   }
+
+//   .cover-upload-wrapper .file-upload.cover .image-wrapper {
+//     width: 300px;
+//     height: 200px;
+//   }
+
+//   // 为内容模式也设置相同的默认尺寸，演示统一行为
+//   .file-upload.content .area {
+//     width: 300px;
+//     height: 200px;
+//   }
+}
+</style>

urbanLifelineWeb/packages/shared/src/layouts/DefaultLayout.vue

@@ -1,39 +0,0 @@
-<template>
-  <div class="app-layout">
-    <header>
-      <h1>Shared Components Demo</h1>
-      <nav>
-        <router-link to="/">Home</router-link> |
-        <router-link to="/fileupload">FileUpload Demo</router-link>
-      </nav>
-    </header>
-    <main>
-      <router-view />
-    </main>
-  </div>
-</template>
-
-<style scoped>
-.app-layout {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 0 16px;
-}
-header {
-  margin-bottom: 24px;
-  padding-bottom: 16px;
-  border-bottom: 1px solid #eaeaea;
-}
-nav {
-  margin: 12px 0;
-}
-nav a {
-  margin-right: 16px;
-  color: #2c3e50;
-  text-decoration: none;
-}
-nav a.router-link-exact-active {
-  color: #42b983;
-  font-weight: bold;
-}
-</style>

urbanLifelineWeb/packages/shared/src/layouts/SharedLayout.vue

@@ -0,0 +1,241 @@
+<template>
+  <div class="app-layout">
+    <header class="header">
+      <h1>Shared Components Demo</h1>
+    </header>
+    
+    <div class="content-wrapper">
+      <!-- 左侧树形导航 -->
+      <aside class="sidebar">
+        <div class="nav-tree">
+          <div class="nav-item" :class="{ active: $route.path === '/' }">
+            <router-link to="/" class="nav-link">
+              🏠 Home
+            </router-link>
+          </div>
+          
+          <div v-for="group in componentGroups" :key="group.name" class="nav-group">
+            <div class="group-title">📁 {{ group.name }}</div>
+            <div class="group-items">
+              <div v-for="item in group.items" :key="item.path" 
+                   class="nav-item" :class="{ active: $route.path === item.path }">
+                <router-link :to="item.path" class="nav-link">
+                  🧩 {{ item.displayName }}
+                </router-link>
+              </div>
+            </div>
+          </div>
+        </div>
+      </aside>
+      
+      <!-- 右侧内容区域 -->
+      <main class="main-content">
+        <router-view />
+      </main>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+// 根据目录结构组织组件路由  
+const componentGroups = computed(() => {
+  // 直接基于文件路径创建路由结构
+  const testComponents = import.meta.glob('../components/**/*Example.vue')
+  const groups: Record<string, any[]> = {}
+  
+  Object.keys(testComponents).forEach(filePath => {
+    // 解析文件路径
+    // ../components/base/button/ButtonExample.vue -> ['base', 'button']
+    // ../components/fileupload/FileUploadExample.vue -> ['fileupload']
+    const pathWithoutPrefix = filePath.replace('../components/', '')
+    const segments = pathWithoutPrefix.replace(/Test\.vue$/, '').split('/').filter(Boolean)
+    
+    if (segments.length === 0) return
+    
+    // 组件名是最后一级目录，但路径保持完整结构
+    const componentName = segments[segments.length - 1]
+    const routePath = `/${segments.join('/').toLowerCase()}`
+    
+    // 确定分组
+    let groupName: string
+    if (segments.length === 1) {
+      // 顶级组件: fileupload -> Components
+      groupName = 'Components'
+    } else {
+      // 嵌套组件: base/button -> Base
+      groupName = segments[0].charAt(0).toUpperCase() + segments[0].slice(1)
+    }
+    
+    // 格式化显示名称
+    const displayName = componentName.charAt(0).toUpperCase() + componentName.slice(1)
+    
+    if (!groups[groupName]) {
+      groups[groupName] = []
+    }
+    
+    groups[groupName].push({
+      path: routePath,
+      displayName: displayName
+    })
+  })
+
+  // 转换为数组并排序
+  return Object.entries(groups)
+    .map(([name, items]) => ({
+      name,
+      items: items.sort((a, b) => a.displayName.localeCompare(b.displayName))
+    }))
+    .sort((a, b) => a.name.localeCompare(b.name))
+})
+</script>
+
+<style scoped>
+.app-layout {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  max-width: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+.header {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  padding: 16px 24px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+  z-index: 10;
+}
+
+.header h1 {
+  margin: 0;
+  font-size: 24px;
+  font-weight: 600;
+}
+
+.content-wrapper {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+}
+
+.sidebar {
+  width: 280px;
+  background: #f8fafc;
+  border-right: 1px solid #e2e8f0;
+  overflow-y: auto;
+  flex-shrink: 0;
+}
+
+.nav-tree {
+  padding: 16px;
+}
+
+.nav-item {
+  margin-bottom: 4px;
+}
+
+.nav-item.active .nav-link {
+  background: #667eea;
+  color: white;
+  font-weight: 600;
+}
+
+.nav-link {
+  display: block;
+  padding: 8px 12px;
+  color: #374151;
+  text-decoration: none;
+  border-radius: 6px;
+  transition: all 0.2s ease;
+  font-size: 14px;
+}
+
+.nav-link:hover {
+  background: #e2e8f0;
+  color: #1f2937;
+}
+
+.nav-group {
+  margin-bottom: 24px;
+}
+
+.group-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #6b7280;
+  padding: 8px 12px;
+  margin-bottom: 8px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.group-items {
+  margin-left: 12px;
+}
+
+.group-items .nav-link {
+  padding-left: 20px;
+}
+
+.main-content {
+  flex: 1;
+  padding: 24px;
+  overflow-y: auto;
+  background: white;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .content-wrapper {
+    flex-direction: column;
+  }
+  
+  .sidebar {
+    width: 100%;
+    height: auto;
+    max-height: 40vh;
+    border-right: none;
+    border-bottom: 1px solid #e2e8f0;
+  }
+  
+  .main-content {
+    padding: 16px;
+  }
+  
+  .header {
+    padding: 12px 16px;
+  }
+  
+  .header h1 {
+    font-size: 20px;
+  }
+}
+
+/* 滚动条样式 */
+.sidebar::-webkit-scrollbar,
+.main-content::-webkit-scrollbar {
+  width: 6px;
+}
+
+.sidebar::-webkit-scrollbar-track,
+.main-content::-webkit-scrollbar-track {
+  background: #f1f1f1;
+}
+
+.sidebar::-webkit-scrollbar-thumb,
+.main-content::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 3px;
+}
+
+.sidebar::-webkit-scrollbar-thumb:hover,
+.main-content::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
+}
+</style>

urbanLifelineWeb/packages/shared/src/router/index.ts

@@ -15,8 +15,8 @@ interface RouteItem {
 }
 
 // 布局组件
-const DefaultLayout = defineAsyncComponent(
-  () => import('../layouts/DefaultLayout.vue')
+const SharedLayout = defineAsyncComponent(
+  () => import('../layouts/SharedLayout.vue')
 )
 
 // 首页组件
@@ -46,7 +46,7 @@ const Home = {
 const routes: RouteRecordRaw[] = [
   {
     path: '/',
-    component: DefaultLayout,
+    component: SharedLayout,
     children: [
       { 
         path: '', 
@@ -59,29 +59,33 @@ const routes: RouteRecordRaw[] = [
   }
 ]
 
-// 自动导入所有以 Test.vue 结尾的组件
-const testComponents = import.meta.glob('../components/**/*Test.vue')
+// 自动导入所有以 Example.vue 结尾的组件
+const testComponents = import.meta.glob('../components/**/*Example.vue')
 
 // 为每个测试组件创建路由
 Object.entries(testComponents).forEach(([path, component]) => {
-  // 从路径中提取路由路径
-  // 例如: ../components/fileupload/FileUploadTest.vue -> /fileupload
-  const routePath = path
-    .replace('../components/', '/') // 移除相对路径
-    .replace(/\/\w+Test\.vue$/, '') // 移除 Test.vue 部分
-    .toLowerCase() // 统一小写
-
-  const routeName = routePath.slice(1) || 'home'
+  // 保持完整的路径结构
+  // ../components/base/button/ButtonExample.vue -> /base/button
+  // ../components/fileupload/FileUploadExample.vue -> /fileupload
+  const pathSegments = path
+    .replace('../components/', '')
+    .replace(/Test\.vue$/, '')
+    .split('/')
+    .filter(Boolean)
+  
+  const routePath = `/${pathSegments.join('/').toLowerCase()}`
+  const componentName = pathSegments[pathSegments.length - 1].toLowerCase()
+  
   const routeConfig: RouteRecordRaw = {
     path: routePath,
-    name: routeName,
-    component: DefaultLayout,
+    name: componentName,
+    component: SharedLayout,
     children: [
       {
         path: '',
-        name: `${routeName}-content`,
+        name: `${componentName}-content`,
         component: defineAsyncComponent(component as any),
-        meta: { title: `${routeName} Demo` }
+        meta: { title: `${componentName.charAt(0).toUpperCase() + componentName.slice(1)} Demo` }
       }
     ]
   }
@@ -103,7 +107,7 @@ Object.entries(testComponents).forEach(([path, component]) => {
     const props = homeRoute.props as { routes: RouteItem[] }
     props.routes.push({
       path: routePath,
-      name: routeName
+      name: componentName
     })
   }
 })

urbanLifelineWeb/packages/shared/src/types/file/file.ts

@@ -25,3 +25,17 @@ export interface TbSysFileDTO extends BaseDTO {
   /** 文件状态 */
   status?: string
 }
+
+export interface FileUploadParam {
+  file: File;
+  module?: string;
+  optsn?: string;
+  uploader?: string;
+}
+
+export interface BatchFileUploadParam {
+  files: File[];
+  module?: string;
+  optsn?: string;
+  uploader?: string;
+}

urbanLifelineWeb/packages/shared/src/utils/file.ts

@@ -0,0 +1,181 @@
+/**
+ * 文件处理相关工具函数
+ */
+
+/**
+ * 验证文件类型
+ */
+export const isValidFileType = (file: File, accept: string): boolean => {
+  if (!accept || accept === '*/*') return true
+  
+  const acceptTypes = accept.split(',').map(t => t.trim())
+  return acceptTypes.some(type => {
+    if (type.startsWith('.')) {
+      return file.name.toLowerCase().endsWith(type.toLowerCase())
+    } else if (type.endsWith('/*')) {
+      return file.type.startsWith(type.replace('/*', ''))
+    } else {
+      return file.type === type
+    }
+  })
+}
+
+/**
+ * 判断是否为图片文件
+ */
+export const isImageFile = (file: File): boolean => {
+  return file.type.startsWith('image/')
+}
+
+/**
+ * 判断是否为文本文件
+ */
+export const isTextFile = (file: File): boolean => {
+  return file.type.startsWith('text/')
+}
+
+/**
+ * 获取文件预览URL
+ */
+export const getFilePreviewUrl = (file: File): string => {
+  return URL.createObjectURL(file)
+}
+
+/**
+ * 格式化文件大小
+ */
+export const formatFileSize = (bytes: number): string => {
+  if (bytes === 0) return '0 B'
+  const k = 1024
+  const sizes = ['B', 'KB', 'MB', 'GB', 'TB']
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
+}
+
+/**
+ * 获取文件类型图标
+ */
+export const getFileTypeIcon = (file: File): string => {
+  const extension = file.name.split('.').pop()?.toLowerCase()
+  const iconMap: Record<string, string> = {
+    // 文档类
+    'pdf': '📄',
+    'doc': '📝',
+    'docx': '📝', 
+    'txt': '📄',
+    'md': '📄',
+    'rtf': '📄',
+    
+    // 表格类
+    'xls': '📊',
+    'xlsx': '📊',
+    'csv': '📊',
+    
+    // 演示文稿
+    'ppt': '📊',
+    'pptx': '📊',
+    
+    // 压缩包
+    'zip': '📦',
+    'rar': '📦',
+    '7z': '📦',
+    'tar': '📦',
+    'gz': '📦',
+    
+    // 视频
+    'mp4': '🎬',
+    'avi': '🎬',
+    'mov': '🎬',
+    'wmv': '🎬',
+    'flv': '🎬',
+    'mkv': '🎬',
+    
+    // 音频
+    'mp3': '🎵',
+    'wav': '🎵',
+    'flac': '🎵',
+    'aac': '🎵',
+    
+    // 图片
+    'jpg': '🖼️',
+    'jpeg': '🖼️',
+    'png': '🖼️',
+    'gif': '🖼️',
+    'bmp': '🖼️',
+    'svg': '🖼️',
+    'webp': '🖼️'
+  }
+  return iconMap[extension || ''] || '📄'
+}
+
+/**
+ * 验证文件大小
+ */
+export const validateFileSize = (file: File, maxSize: number): { valid: boolean; error?: string } => {
+  if (file.size > maxSize) {
+    const maxSizeMB = (maxSize / 1024 / 1024).toFixed(0)
+    return {
+      valid: false,
+      error: `文件 ${file.name} 大小超过 ${maxSizeMB}MB`
+    }
+  }
+  return { valid: true }
+}
+
+/**
+ * 验证文件类型
+ */
+export const validateFileType = (file: File, accept?: string): { valid: boolean; error?: string } => {
+  if (accept && !isValidFileType(file, accept)) {
+    return {
+      valid: false,
+      error: `文件 ${file.name} 类型不符合要求`
+    }
+  }
+  return { valid: true }
+}
+
+/**
+ * 检查文件是否重复
+ */
+export const checkFileDuplicate = (file: File, existingFiles: File[]): { valid: boolean; error?: string } => {
+  if (existingFiles.some(f => f.name === file.name && f.size === file.size)) {
+    return {
+      valid: false,
+      error: `文件 ${file.name} 已添加`
+    }
+  }
+  return { valid: true }
+}
+
+/**
+ * 综合验证文件
+ */
+export const validateFile = (
+  file: File, 
+  options: {
+    maxSize?: number
+    accept?: string
+    existingFiles?: File[]
+  } = {}
+): { valid: boolean; error?: string } => {
+  const { maxSize, accept, existingFiles = [] } = options
+  
+  // 检查文件大小
+  if (maxSize) {
+    const sizeResult = validateFileSize(file, maxSize)
+    if (!sizeResult.valid) return sizeResult
+  }
+  
+  // 检查文件类型
+  if (accept) {
+    const typeResult = validateFileType(file, accept)
+    if (!typeResult.valid) return typeResult
+  }
+  
+  // 检查是否重复
+  const duplicateResult = checkFileDuplicate(file, existingFiles)
+  if (!duplicateResult.valid) return duplicateResult
+  
+  return { valid: true }
+}

urbanLifelineWeb/packages/shared/src/utils/index.ts

@@ -0,0 +1,5 @@
+/**
+ * Utils 统一导出
+ */
+
+export * from './file'

urbanLifelineWeb/pnpm-lock.yaml

@@ -11,9 +11,19 @@ devDependencies:
   rimraf:
     specifier: ^5.0.5
     version: 5.0.10
+  sass:
+    specifier: ^1.94.2
+    version: 1.94.2
+  sass-embedded:
+    specifier: ^1.93.3
+    version: 1.93.3
 
 packages:
 
+  /@bufbuild/protobuf@2.10.1:
+    resolution: {integrity: sha512-ckS3+vyJb5qGpEYv/s1OebUHDi/xSNtfgw1wqKZo7MR9F2z+qXr0q5XagafAG/9O0QPVIUfST0smluYSTpYFkg==}
+    dev: true
+
   /@isaacs/cliui@8.0.2:
     resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
     engines: {node: '>=12'}
@@ -26,6 +36,155 @@ packages:
       wrap-ansi-cjs: /wrap-ansi@7.0.0
     dev: true
 
+  /@parcel/watcher-android-arm64@2.5.1:
+    resolution: {integrity: sha512-KF8+j9nNbUN8vzOFDpRMsaKBHZ/mcjEjMToVMJOhTozkDonQFFrRcfdLWn6yWKCmJKmdVxSgHiYvTCef4/qcBA==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@parcel/watcher-darwin-arm64@2.5.1:
+    resolution: {integrity: sha512-eAzPv5osDmZyBhou8PoF4i6RQXAfeKL9tjb3QzYuccXFMQU0ruIc/POh30ePnaOyD1UXdlKguHBmsTs53tVoPw==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@parcel/watcher-darwin-x64@2.5.1:
+    resolution: {integrity: sha512-1ZXDthrnNmwv10A0/3AJNZ9JGlzrF82i3gNQcWOzd7nJ8aj+ILyW1MTxVk35Db0u91oD5Nlk9MBiujMlwmeXZg==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@parcel/watcher-freebsd-x64@2.5.1:
+    resolution: {integrity: sha512-SI4eljM7Flp9yPuKi8W0ird8TI/JK6CSxju3NojVI6BjHsTyK7zxA9urjVjEKJ5MBYC+bLmMcbAWlZ+rFkLpJQ==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@parcel/watcher-linux-arm-glibc@2.5.1:
+    resolution: {integrity: sha512-RCdZlEyTs8geyBkkcnPWvtXLY44BCeZKmGYRtSgtwwnHR4dxfHRG3gR99XdMEdQ7KeiDdasJwwvNSF5jKtDwdA==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm]
+    os: [linux]
+    libc: [glibc]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@parcel/watcher-linux-arm-musl@2.5.1:
+    resolution: {integrity: sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm]
+    os: [linux]
+    libc: [musl]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@parcel/watcher-linux-arm64-glibc@2.5.1:
+    resolution: {integrity: sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@parcel/watcher-linux-arm64-musl@2.5.1:
+    resolution: {integrity: sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@parcel/watcher-linux-x64-glibc@2.5.1:
+    resolution: {integrity: sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@parcel/watcher-linux-x64-musl@2.5.1:
+    resolution: {integrity: sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@parcel/watcher-win32-arm64@2.5.1:
+    resolution: {integrity: sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@parcel/watcher-win32-ia32@2.5.1:
+    resolution: {integrity: sha512-c2KkcVN+NJmuA7CGlaGD1qJh1cLfDnQsHjE89E60vUEMlqduHGCdCLJCID5geFVM0dOtA3ZiIO8BoEQmzQVfpQ==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [ia32]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@parcel/watcher-win32-x64@2.5.1:
+    resolution: {integrity: sha512-9lHBdJITeNR++EvSQVUcaZoWupyHfXe1jZvGZ06O/5MflPcuPLtEphScIBL+AiCWBO46tDSHzWyD0uDmmZqsgA==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@parcel/watcher@2.5.1:
+    resolution: {integrity: sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg==}
+    engines: {node: '>= 10.0.0'}
+    requiresBuild: true
+    dependencies:
+      detect-libc: 1.0.3
+      is-glob: 4.0.3
+      micromatch: 4.0.8
+      node-addon-api: 7.1.1
+    optionalDependencies:
+      '@parcel/watcher-android-arm64': 2.5.1
+      '@parcel/watcher-darwin-arm64': 2.5.1
+      '@parcel/watcher-darwin-x64': 2.5.1
+      '@parcel/watcher-freebsd-x64': 2.5.1
+      '@parcel/watcher-linux-arm-glibc': 2.5.1
+      '@parcel/watcher-linux-arm-musl': 2.5.1
+      '@parcel/watcher-linux-arm64-glibc': 2.5.1
+      '@parcel/watcher-linux-arm64-musl': 2.5.1
+      '@parcel/watcher-linux-x64-glibc': 2.5.1
+      '@parcel/watcher-linux-x64-musl': 2.5.1
+      '@parcel/watcher-win32-arm64': 2.5.1
+      '@parcel/watcher-win32-ia32': 2.5.1
+      '@parcel/watcher-win32-x64': 2.5.1
+    dev: true
+    optional: true
+
   /@pkgjs/parseargs@0.11.0:
     resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
     engines: {node: '>=14'}
@@ -65,6 +224,19 @@ packages:
       balanced-match: 1.0.2
     dev: true
 
+  /braces@3.0.3:
+    resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
+    engines: {node: '>=8'}
+    requiresBuild: true
+    dependencies:
+      fill-range: 7.1.1
+    dev: true
+    optional: true
+
+  /buffer-builder@0.2.0:
+    resolution: {integrity: sha512-7VPMEPuYznPSoR21NE1zvd2Xna6c/CloiZCfcMXR1Jny6PjX0N4Nsa38zcBFo/FMK+BlA+FLKbJCQ0i2yxp+Xg==}
+    dev: true
+
   /chalk@4.1.2:
     resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
     engines: {node: '>=10'}
@@ -73,6 +245,13 @@ packages:
       supports-color: 7.2.0
     dev: true
 
+  /chokidar@4.0.3:
+    resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==}
+    engines: {node: '>= 14.16.0'}
+    dependencies:
+      readdirp: 4.1.2
+    dev: true
+
   /cliui@8.0.1:
     resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==}
     engines: {node: '>=12'}
@@ -93,6 +272,10 @@ packages:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
     dev: true
 
+  /colorjs.io@0.5.2:
+    resolution: {integrity: sha512-twmVoizEW7ylZSN32OgKdXRmo1qg+wT5/6C3xu5b9QsWzSFAhHLn2xd8ro0diCsKfCj1RdaTP/nrcW+vAoQPIw==}
+    dev: true
+
   /concurrently@9.2.1:
     resolution: {integrity: sha512-fsfrO0MxV64Znoy8/l1vVIjjHa29SZyyqPgQBwhiDcaW8wJc2W3XWVOGx4M3oJBnv/zdUZIIp1gDeS98GzP8Ng==}
     engines: {node: '>=18'}
@@ -115,6 +298,14 @@ packages:
       which: 2.0.2
     dev: true
 
+  /detect-libc@1.0.3:
+    resolution: {integrity: sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==}
+    engines: {node: '>=0.10'}
+    hasBin: true
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /eastasianwidth@0.2.0:
     resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
     dev: true
@@ -132,6 +323,15 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
+  /fill-range@7.1.1:
+    resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
+    engines: {node: '>=8'}
+    requiresBuild: true
+    dependencies:
+      to-regex-range: 5.0.1
+    dev: true
+    optional: true
+
   /foreground-child@3.3.1:
     resolution: {integrity: sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==}
     engines: {node: '>=14'}
@@ -162,11 +362,38 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /immutable@5.1.4:
+    resolution: {integrity: sha512-p6u1bG3YSnINT5RQmx/yRZBpenIl30kVxkTLDyHLIMk0gict704Q9n+thfDI7lTRm9vXdDYutVzXhzcThxTnXA==}
+    dev: true
+
+  /is-extglob@2.1.1:
+    resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
+    engines: {node: '>=0.10.0'}
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /is-fullwidth-code-point@3.0.0:
     resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
     engines: {node: '>=8'}
     dev: true
 
+  /is-glob@4.0.3:
+    resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
+    engines: {node: '>=0.10.0'}
+    requiresBuild: true
+    dependencies:
+      is-extglob: 2.1.1
+    dev: true
+    optional: true
+
+  /is-number@7.0.0:
+    resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
+    engines: {node: '>=0.12.0'}
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /isexe@2.0.0:
     resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
     dev: true
@@ -183,6 +410,16 @@ packages:
     resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
     dev: true
 
+  /micromatch@4.0.8:
+    resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
+    engines: {node: '>=8.6'}
+    requiresBuild: true
+    dependencies:
+      braces: 3.0.3
+      picomatch: 2.3.1
+    dev: true
+    optional: true
+
   /minimatch@9.0.5:
     resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==}
     engines: {node: '>=16 || 14 >=14.17'}
@@ -195,6 +432,12 @@ packages:
     engines: {node: '>=16 || 14 >=14.17'}
     dev: true
 
+  /node-addon-api@7.1.1:
+    resolution: {integrity: sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==}
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /package-json-from-dist@1.0.1:
     resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==}
     dev: true
@@ -212,6 +455,18 @@ packages:
       minipass: 7.1.2
     dev: true
 
+  /picomatch@2.3.1:
+    resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
+    engines: {node: '>=8.6'}
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /readdirp@4.1.2:
+    resolution: {integrity: sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==}
+    engines: {node: '>= 14.18.0'}
+    dev: true
+
   /require-directory@2.1.1:
     resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
     engines: {node: '>=0.10.0'}
@@ -230,6 +485,236 @@ packages:
       tslib: 2.8.1
     dev: true
 
+  /sass-embedded-all-unknown@1.93.3:
+    resolution: {integrity: sha512-3okGgnE41eg+CPLtAPletu6nQ4N0ij7AeW+Sl5Km4j29XcmqZQeFwYjHe1AlKTEgLi/UAONk1O8i8/lupeKMbw==}
+    cpu: ['!arm', '!arm64', '!riscv64', '!x64']
+    requiresBuild: true
+    dependencies:
+      sass: 1.93.3
+    dev: true
+    optional: true
+
+  /sass-embedded-android-arm64@1.93.3:
+    resolution: {integrity: sha512-uqUl3Kt1IqdGVAcAdbmC+NwuUJy8tM+2ZnB7/zrt6WxWVShVCRdFnWR9LT8HJr7eJN7AU8kSXxaVX/gedanPsg==}
+    engines: {node: '>=14.0.0'}
+    cpu: [arm64]
+    os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /sass-embedded-android-arm@1.93.3:
+    resolution: {integrity: sha512-8xOw9bywfOD6Wv24BgCmgjkk6tMrsOTTHcb28KDxeJtFtoxiUyMbxo0vChpPAfp2Hyg2tFFKS60s0s4JYk+Raw==}
+    engines: {node: '>=14.0.0'}
+    cpu: [arm]
+    os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /sass-embedded-android-riscv64@1.93.3:
+    resolution: {integrity: sha512-2jNJDmo+3qLocjWqYbXiBDnfgwrUeZgZFHJIwAefU7Fn66Ot7rsXl+XPwlokaCbTpj7eMFIqsRAZ/uDueXNCJg==}
+    engines: {node: '>=14.0.0'}
+    cpu: [riscv64]
+    os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /sass-embedded-android-x64@1.93.3:
+    resolution: {integrity: sha512-y0RoAU6ZenQFcjM9PjQd3cRqRTjqwSbtWLL/p68y2oFyh0QGN0+LQ826fc0ZvU/AbqCsAizkqjzOn6cRZJxTTQ==}
+    engines: {node: '>=14.0.0'}
+    cpu: [x64]
+    os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /sass-embedded-darwin-arm64@1.93.3:
+    resolution: {integrity: sha512-7zb/hpdMOdKteK17BOyyypemglVURd1Hdz6QGsggy60aUFfptTLQftLRg8r/xh1RbQAUKWFbYTNaM47J9yPxYg==}
+    engines: {node: '>=14.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /sass-embedded-darwin-x64@1.93.3:
+    resolution: {integrity: sha512-Ek1Vp8ZDQEe327Lz0b7h3hjvWH3u9XjJiQzveq74RPpJQ2q6d9LfWpjiRRohM4qK6o4XOHw1X10OMWPXJtdtWg==}
+    engines: {node: '>=14.0.0'}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /sass-embedded-linux-arm64@1.93.3:
+    resolution: {integrity: sha512-RBrHWgfd8Dd8w4fbmdRVXRrhh8oBAPyeWDTKAWw8ZEmuXfVl4ytjDuyxaVilh6rR1xTRTNpbaA/YWApBlLrrNw==}
+    engines: {node: '>=14.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: glibc
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /sass-embedded-linux-arm@1.93.3:
+    resolution: {integrity: sha512-yeiv2y+dp8B4wNpd3+JsHYD0mvpXSfov7IGyQ1tMIR40qv+ROkRqYiqQvAOXf76Qwh4Y9OaYZtLpnsPjfeq6mA==}
+    engines: {node: '>=14.0.0'}
+    cpu: [arm]
+    os: [linux]
+    libc: glibc
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /sass-embedded-linux-musl-arm64@1.93.3:
+    resolution: {integrity: sha512-PS829l+eUng+9W4PFclXGb4uA2+965NHV3/Sa5U7qTywjeeUUYTZg70dJHSqvhrBEfCc2XJABeW3adLJbyQYkw==}
+    engines: {node: '>=14.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: musl
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /sass-embedded-linux-musl-arm@1.93.3:
+    resolution: {integrity: sha512-fU0fwAwbp7sBE3h5DVU5UPzvaLg7a4yONfFWkkcCp6ZrOiPuGRHXXYriWQ0TUnWy4wE+svsVuWhwWgvlb/tkKg==}
+    engines: {node: '>=14.0.0'}
+    cpu: [arm]
+    os: [linux]
+    libc: musl
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /sass-embedded-linux-musl-riscv64@1.93.3:
+    resolution: {integrity: sha512-cK1oBY+FWQquaIGEeQ5H74KTO8cWsSWwXb/WaildOO9U6wmUypTgUYKQ0o5o/29nZbWWlM1PHuwVYTSnT23Jjg==}
+    engines: {node: '>=14.0.0'}
+    cpu: [riscv64]
+    os: [linux]
+    libc: musl
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /sass-embedded-linux-musl-x64@1.93.3:
+    resolution: {integrity: sha512-A7wkrsHu2/I4Zpa0NMuPGkWDVV7QGGytxGyUq3opSXgAexHo/vBPlGoDXoRlSdex0cV+aTMRPjoGIfdmNlHwyg==}
+    engines: {node: '>=14.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: musl
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /sass-embedded-linux-riscv64@1.93.3:
+    resolution: {integrity: sha512-vWkW1+HTF5qcaHa6hO80gx/QfB6GGjJUP0xLbnAoY4pwEnw5ulGv6RM8qYr8IDhWfVt/KH+lhJ2ZFxnJareisQ==}
+    engines: {node: '>=14.0.0'}
+    cpu: [riscv64]
+    os: [linux]
+    libc: glibc
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /sass-embedded-linux-x64@1.93.3:
+    resolution: {integrity: sha512-k6uFxs+e5jSuk1Y0niCwuq42F9ZC5UEP7P+RIOurIm8w/5QFa0+YqeW+BPWEW5M1FqVOsNZH3qGn4ahqvAEjPA==}
+    engines: {node: '>=14.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: glibc
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /sass-embedded-unknown-all@1.93.3:
+    resolution: {integrity: sha512-o5wj2rLpXH0C+GJKt/VpWp6AnMsCCbfFmnMAttcrsa+U3yrs/guhZ3x55KAqqUsE8F47e3frbsDL+1OuQM5DAA==}
+    os: ['!android', '!darwin', '!linux', '!win32']
+    requiresBuild: true
+    dependencies:
+      sass: 1.93.3
+    dev: true
+    optional: true
+
+  /sass-embedded-win32-arm64@1.93.3:
+    resolution: {integrity: sha512-0dOfT9moy9YmBolodwYYXtLwNr4jL4HQC9rBfv6mVrD7ud8ue2kDbn+GVzj1hEJxvEexVSmDCf7MHUTLcGs9xQ==}
+    engines: {node: '>=14.0.0'}
+    cpu: [arm64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /sass-embedded-win32-x64@1.93.3:
+    resolution: {integrity: sha512-wHFVfxiS9hU/sNk7KReD+lJWRp3R0SLQEX4zfOnRP2zlvI2X4IQR5aZr9GNcuMP6TmNpX0nQPZTegS8+h9RrEg==}
+    engines: {node: '>=14.0.0'}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /sass-embedded@1.93.3:
+    resolution: {integrity: sha512-+VUy01yfDqNmIVMd/LLKl2TTtY0ovZN0rTonh+FhKr65mFwIYgU9WzgIZKS7U9/SPCQvWTsTGx9jyt+qRm/XFw==}
+    engines: {node: '>=16.0.0'}
+    hasBin: true
+    dependencies:
+      '@bufbuild/protobuf': 2.10.1
+      buffer-builder: 0.2.0
+      colorjs.io: 0.5.2
+      immutable: 5.1.4
+      rxjs: 7.8.2
+      supports-color: 8.1.1
+      sync-child-process: 1.0.2
+      varint: 6.0.0
+    optionalDependencies:
+      sass-embedded-all-unknown: 1.93.3
+      sass-embedded-android-arm: 1.93.3
+      sass-embedded-android-arm64: 1.93.3
+      sass-embedded-android-riscv64: 1.93.3
+      sass-embedded-android-x64: 1.93.3
+      sass-embedded-darwin-arm64: 1.93.3
+      sass-embedded-darwin-x64: 1.93.3
+      sass-embedded-linux-arm: 1.93.3
+      sass-embedded-linux-arm64: 1.93.3
+      sass-embedded-linux-musl-arm: 1.93.3
+      sass-embedded-linux-musl-arm64: 1.93.3
+      sass-embedded-linux-musl-riscv64: 1.93.3
+      sass-embedded-linux-musl-x64: 1.93.3
+      sass-embedded-linux-riscv64: 1.93.3
+      sass-embedded-linux-x64: 1.93.3
+      sass-embedded-unknown-all: 1.93.3
+      sass-embedded-win32-arm64: 1.93.3
+      sass-embedded-win32-x64: 1.93.3
+    dev: true
+
+  /sass@1.93.3:
+    resolution: {integrity: sha512-elOcIZRTM76dvxNAjqYrucTSI0teAF/L2Lv0s6f6b7FOwcwIuA357bIE871580AjHJuSvLIRUosgV+lIWx6Rgg==}
+    engines: {node: '>=14.0.0'}
+    hasBin: true
+    requiresBuild: true
+    dependencies:
+      chokidar: 4.0.3
+      immutable: 5.1.4
+      source-map-js: 1.2.1
+    optionalDependencies:
+      '@parcel/watcher': 2.5.1
+    dev: true
+    optional: true
+
+  /sass@1.94.2:
+    resolution: {integrity: sha512-N+7WK20/wOr7CzA2snJcUSSNTCzeCGUTFY3OgeQP3mZ1aj9NMQ0mSTXwlrnd89j33zzQJGqIN52GIOmYrfq46A==}
+    engines: {node: '>=14.0.0'}
+    hasBin: true
+    dependencies:
+      chokidar: 4.0.3
+      immutable: 5.1.4
+      source-map-js: 1.2.1
+    optionalDependencies:
+      '@parcel/watcher': 2.5.1
+    dev: true
+
   /shebang-command@2.0.0:
     resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
     engines: {node: '>=8'}
@@ -252,6 +737,11 @@ packages:
     engines: {node: '>=14'}
     dev: true
 
+  /source-map-js@1.2.1:
+    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
   /string-width@4.2.3:
     resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
     engines: {node: '>=8'}
@@ -298,6 +788,27 @@ packages:
       has-flag: 4.0.0
     dev: true
 
+  /sync-child-process@1.0.2:
+    resolution: {integrity: sha512-8lD+t2KrrScJ/7KXCSyfhT3/hRq78rC0wBFqNJXv3mZyn6hW2ypM05JmlSvtqRbeq6jqA94oHbxAr2vYsJ8vDA==}
+    engines: {node: '>=16.0.0'}
+    dependencies:
+      sync-message-port: 1.1.3
+    dev: true
+
+  /sync-message-port@1.1.3:
+    resolution: {integrity: sha512-GTt8rSKje5FilG+wEdfCkOcLL7LWqpMlr2c3LRuKt/YXxcJ52aGSbGBAdI4L3aaqfrBt6y711El53ItyH1NWzg==}
+    engines: {node: '>=16.0.0'}
+    dev: true
+
+  /to-regex-range@5.0.1:
+    resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
+    engines: {node: '>=8.0'}
+    requiresBuild: true
+    dependencies:
+      is-number: 7.0.0
+    dev: true
+    optional: true
+
   /tree-kill@1.2.2:
     resolution: {integrity: sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==}
     hasBin: true
@@ -307,6 +818,10 @@ packages:
     resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
     dev: true
 
+  /varint@6.0.0:
+    resolution: {integrity: sha512-cXEIW6cfr15lFv563k4GuVuW/fiwjknytD37jIOLSdSWuOI6WnO/oKwmP2FQTU2l01LP8/M5TSAJpzUaGe3uWg==}
+    dev: true
+
   /which@2.0.2:
     resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
     engines: {node: '>= 8'}