feat(users): 实现用户列表页面的异步数据加载与UI优化

- 添加角色服务依赖以获取用户组信息
- 将用户列表和角色信息改为流式加载
- 更新用户列表页面布局与样式
- 增加搜索框和用户组筛选下拉菜单
- 添加加载状态提示与错误处理显示
- 引入sass-embedded支持SCSS样式编写
- 调整表格列宽并增加响应式设计
- 添加面包屑导航与页面标题展示
- 新增添加用户按钮及操作下拉菜单
- 使用Icon组件替换原有图标实现方式

package-lock.json

@@ -25,6 +25,7 @@
 				"prettier": "^3.6.2",
 				"prettier-plugin-svelte": "^3.4.0",
 				"prettier-plugin-tailwindcss": "^0.7.1",
+				"sass-embedded": "^1.93.3",
 				"svelte": "^5.41.0",
 				"svelte-check": "^4.3.3",
 				"tailwindcss": "^4.1.14",
@@ -33,6 +34,13 @@
 				"vite": "^7.1.10"
 			}
 		},
+		"node_modules/@bufbuild/protobuf": {
+			"version": "2.10.1",
+			"resolved": "https://registry.npmmirror.com/@bufbuild/protobuf/-/protobuf-2.10.1.tgz",
+			"integrity": "sha512-ckS3+vyJb5qGpEYv/s1OebUHDi/xSNtfgw1wqKZo7MR9F2z+qXr0q5XagafAG/9O0QPVIUfST0smluYSTpYFkg==",
+			"dev": true,
+			"license": "(Apache-2.0 AND BSD-3-Clause)"
+		},
 		"node_modules/@esbuild/aix-ppc64": {
 			"version": "0.25.12",
 			"resolved": "https://registry.npmmirror.com/@esbuild/aix-ppc64/-/aix-ppc64-0.25.12.tgz",
@@ -793,6 +801,330 @@
 				"node": ">= 8"
 			}
 		},
+		"node_modules/@parcel/watcher": {
+			"version": "2.5.1",
+			"resolved": "https://registry.npmmirror.com/@parcel/watcher/-/watcher-2.5.1.tgz",
+			"integrity": "sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg==",
+			"dev": true,
+			"hasInstallScript": true,
+			"license": "MIT",
+			"optional": true,
+			"dependencies": {
+				"detect-libc": "^1.0.3",
+				"is-glob": "^4.0.3",
+				"micromatch": "^4.0.5",
+				"node-addon-api": "^7.0.0"
+			},
+			"engines": {
+				"node": ">= 10.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			},
+			"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"
+			}
+		},
+		"node_modules/@parcel/watcher-android-arm64": {
+			"version": "2.5.1",
+			"resolved": "https://registry.npmmirror.com/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.1.tgz",
+			"integrity": "sha512-KF8+j9nNbUN8vzOFDpRMsaKBHZ/mcjEjMToVMJOhTozkDonQFFrRcfdLWn6yWKCmJKmdVxSgHiYvTCef4/qcBA==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"android"
+			],
+			"engines": {
+				"node": ">= 10.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
+		},
+		"node_modules/@parcel/watcher-darwin-arm64": {
+			"version": "2.5.1",
+			"resolved": "https://registry.npmmirror.com/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.1.tgz",
+			"integrity": "sha512-eAzPv5osDmZyBhou8PoF4i6RQXAfeKL9tjb3QzYuccXFMQU0ruIc/POh30ePnaOyD1UXdlKguHBmsTs53tVoPw==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"engines": {
+				"node": ">= 10.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
+		},
+		"node_modules/@parcel/watcher-darwin-x64": {
+			"version": "2.5.1",
+			"resolved": "https://registry.npmmirror.com/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.1.tgz",
+			"integrity": "sha512-1ZXDthrnNmwv10A0/3AJNZ9JGlzrF82i3gNQcWOzd7nJ8aj+ILyW1MTxVk35Db0u91oD5Nlk9MBiujMlwmeXZg==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"engines": {
+				"node": ">= 10.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
+		},
+		"node_modules/@parcel/watcher-freebsd-x64": {
+			"version": "2.5.1",
+			"resolved": "https://registry.npmmirror.com/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.1.tgz",
+			"integrity": "sha512-SI4eljM7Flp9yPuKi8W0ird8TI/JK6CSxju3NojVI6BjHsTyK7zxA9urjVjEKJ5MBYC+bLmMcbAWlZ+rFkLpJQ==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"freebsd"
+			],
+			"engines": {
+				"node": ">= 10.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
+		},
+		"node_modules/@parcel/watcher-linux-arm-glibc": {
+			"version": "2.5.1",
+			"resolved": "https://registry.npmmirror.com/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.1.tgz",
+			"integrity": "sha512-RCdZlEyTs8geyBkkcnPWvtXLY44BCeZKmGYRtSgtwwnHR4dxfHRG3gR99XdMEdQ7KeiDdasJwwvNSF5jKtDwdA==",
+			"cpu": [
+				"arm"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">= 10.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
+		},
+		"node_modules/@parcel/watcher-linux-arm-musl": {
+			"version": "2.5.1",
+			"resolved": "https://registry.npmmirror.com/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.1.tgz",
+			"integrity": "sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==",
+			"cpu": [
+				"arm"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">= 10.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
+		},
+		"node_modules/@parcel/watcher-linux-arm64-glibc": {
+			"version": "2.5.1",
+			"resolved": "https://registry.npmmirror.com/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.1.tgz",
+			"integrity": "sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">= 10.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
+		},
+		"node_modules/@parcel/watcher-linux-arm64-musl": {
+			"version": "2.5.1",
+			"resolved": "https://registry.npmmirror.com/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.1.tgz",
+			"integrity": "sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">= 10.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
+		},
+		"node_modules/@parcel/watcher-linux-x64-glibc": {
+			"version": "2.5.1",
+			"resolved": "https://registry.npmmirror.com/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.1.tgz",
+			"integrity": "sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">= 10.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
+		},
+		"node_modules/@parcel/watcher-linux-x64-musl": {
+			"version": "2.5.1",
+			"resolved": "https://registry.npmmirror.com/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.1.tgz",
+			"integrity": "sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">= 10.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
+		},
+		"node_modules/@parcel/watcher-win32-arm64": {
+			"version": "2.5.1",
+			"resolved": "https://registry.npmmirror.com/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.1.tgz",
+			"integrity": "sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": ">= 10.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
+		},
+		"node_modules/@parcel/watcher-win32-ia32": {
+			"version": "2.5.1",
+			"resolved": "https://registry.npmmirror.com/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.1.tgz",
+			"integrity": "sha512-c2KkcVN+NJmuA7CGlaGD1qJh1cLfDnQsHjE89E60vUEMlqduHGCdCLJCID5geFVM0dOtA3ZiIO8BoEQmzQVfpQ==",
+			"cpu": [
+				"ia32"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": ">= 10.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
+		},
+		"node_modules/@parcel/watcher-win32-x64": {
+			"version": "2.5.1",
+			"resolved": "https://registry.npmmirror.com/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.1.tgz",
+			"integrity": "sha512-9lHBdJITeNR++EvSQVUcaZoWupyHfXe1jZvGZ06O/5MflPcuPLtEphScIBL+AiCWBO46tDSHzWyD0uDmmZqsgA==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": ">= 10.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
+		},
+		"node_modules/@parcel/watcher/node_modules/detect-libc": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmmirror.com/detect-libc/-/detect-libc-1.0.3.tgz",
+			"integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"optional": true,
+			"bin": {
+				"detect-libc": "bin/detect-libc.js"
+			},
+			"engines": {
+				"node": ">=0.10"
+			}
+		},
 		"node_modules/@polka/url": {
 			"version": "1.0.0-next.29",
 			"resolved": "https://registry.npmmirror.com/@polka/url/-/url-1.0.0-next.29.tgz",
@@ -1888,6 +2220,13 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/buffer-builder": {
+			"version": "0.2.0",
+			"resolved": "https://registry.npmmirror.com/buffer-builder/-/buffer-builder-0.2.0.tgz",
+			"integrity": "sha512-7VPMEPuYznPSoR21NE1zvd2Xna6c/CloiZCfcMXR1Jny6PjX0N4Nsa38zcBFo/FMK+BlA+FLKbJCQ0i2yxp+Xg==",
+			"dev": true,
+			"license": "MIT/X11"
+		},
 		"node_modules/callsites": {
 			"version": "3.1.0",
 			"resolved": "https://registry.npmmirror.com/callsites/-/callsites-3.1.0.tgz",
@@ -1961,6 +2300,13 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/colorjs.io": {
+			"version": "0.5.2",
+			"resolved": "https://registry.npmmirror.com/colorjs.io/-/colorjs.io-0.5.2.tgz",
+			"integrity": "sha512-twmVoizEW7ylZSN32OgKdXRmo1qg+wT5/6C3xu5b9QsWzSFAhHLn2xd8ro0diCsKfCj1RdaTP/nrcW+vAoQPIw==",
+			"dev": true,
+			"license": "MIT"
+		},
 		"node_modules/concat-map": {
 			"version": "0.0.1",
 			"resolved": "https://registry.npmmirror.com/concat-map/-/concat-map-0.0.1.tgz",
@@ -2575,6 +2921,13 @@
 				"node": ">= 4"
 			}
 		},
+		"node_modules/immutable": {
+			"version": "5.1.4",
+			"resolved": "https://registry.npmmirror.com/immutable/-/immutable-5.1.4.tgz",
+			"integrity": "sha512-p6u1bG3YSnINT5RQmx/yRZBpenIl30kVxkTLDyHLIMk0gict704Q9n+thfDI7lTRm9vXdDYutVzXhzcThxTnXA==",
+			"dev": true,
+			"license": "MIT"
+		},
 		"node_modules/import-fresh": {
 			"version": "3.3.1",
 			"resolved": "https://registry.npmmirror.com/import-fresh/-/import-fresh-3.3.1.tgz",
@@ -3151,6 +3504,14 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/node-addon-api": {
+			"version": "7.1.1",
+			"resolved": "https://registry.npmmirror.com/node-addon-api/-/node-addon-api-7.1.1.tgz",
+			"integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
+			"dev": true,
+			"license": "MIT",
+			"optional": true
+		},
 		"node_modules/optionator": {
 			"version": "0.9.4",
 			"resolved": "https://registry.npmmirror.com/optionator/-/optionator-0.9.4.tgz",
@@ -3639,6 +4000,16 @@
 				"queue-microtask": "^1.2.2"
 			}
 		},
+		"node_modules/rxjs": {
+			"version": "7.8.2",
+			"resolved": "https://registry.npmmirror.com/rxjs/-/rxjs-7.8.2.tgz",
+			"integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"dependencies": {
+				"tslib": "^2.1.0"
+			}
+		},
 		"node_modules/sade": {
 			"version": "1.8.1",
 			"resolved": "https://registry.npmmirror.com/sade/-/sade-1.8.1.tgz",
@@ -3652,6 +4023,393 @@
 				"node": ">=6"
 			}
 		},
+		"node_modules/sass": {
+			"version": "1.93.3",
+			"resolved": "https://registry.npmmirror.com/sass/-/sass-1.93.3.tgz",
+			"integrity": "sha512-elOcIZRTM76dvxNAjqYrucTSI0teAF/L2Lv0s6f6b7FOwcwIuA357bIE871580AjHJuSvLIRUosgV+lIWx6Rgg==",
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"dependencies": {
+				"chokidar": "^4.0.0",
+				"immutable": "^5.0.2",
+				"source-map-js": ">=0.6.2 <2.0.0"
+			},
+			"bin": {
+				"sass": "sass.js"
+			},
+			"engines": {
+				"node": ">=14.0.0"
+			},
+			"optionalDependencies": {
+				"@parcel/watcher": "^2.4.1"
+			}
+		},
+		"node_modules/sass-embedded": {
+			"version": "1.93.3",
+			"resolved": "https://registry.npmmirror.com/sass-embedded/-/sass-embedded-1.93.3.tgz",
+			"integrity": "sha512-+VUy01yfDqNmIVMd/LLKl2TTtY0ovZN0rTonh+FhKr65mFwIYgU9WzgIZKS7U9/SPCQvWTsTGx9jyt+qRm/XFw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@bufbuild/protobuf": "^2.5.0",
+				"buffer-builder": "^0.2.0",
+				"colorjs.io": "^0.5.0",
+				"immutable": "^5.0.2",
+				"rxjs": "^7.4.0",
+				"supports-color": "^8.1.1",
+				"sync-child-process": "^1.0.2",
+				"varint": "^6.0.0"
+			},
+			"bin": {
+				"sass": "dist/bin/sass.js"
+			},
+			"engines": {
+				"node": ">=16.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"
+			}
+		},
+		"node_modules/sass-embedded-all-unknown": {
+			"version": "1.93.3",
+			"resolved": "https://registry.npmmirror.com/sass-embedded-all-unknown/-/sass-embedded-all-unknown-1.93.3.tgz",
+			"integrity": "sha512-3okGgnE41eg+CPLtAPletu6nQ4N0ij7AeW+Sl5Km4j29XcmqZQeFwYjHe1AlKTEgLi/UAONk1O8i8/lupeKMbw==",
+			"cpu": [
+				"!arm",
+				"!arm64",
+				"!riscv64",
+				"!x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"dependencies": {
+				"sass": "1.93.3"
+			}
+		},
+		"node_modules/sass-embedded-android-arm": {
+			"version": "1.93.3",
+			"resolved": "https://registry.npmmirror.com/sass-embedded-android-arm/-/sass-embedded-android-arm-1.93.3.tgz",
+			"integrity": "sha512-8xOw9bywfOD6Wv24BgCmgjkk6tMrsOTTHcb28KDxeJtFtoxiUyMbxo0vChpPAfp2Hyg2tFFKS60s0s4JYk+Raw==",
+			"cpu": [
+				"arm"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"android"
+			],
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/sass-embedded-android-arm64": {
+			"version": "1.93.3",
+			"resolved": "https://registry.npmmirror.com/sass-embedded-android-arm64/-/sass-embedded-android-arm64-1.93.3.tgz",
+			"integrity": "sha512-uqUl3Kt1IqdGVAcAdbmC+NwuUJy8tM+2ZnB7/zrt6WxWVShVCRdFnWR9LT8HJr7eJN7AU8kSXxaVX/gedanPsg==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"android"
+			],
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/sass-embedded-android-riscv64": {
+			"version": "1.93.3",
+			"resolved": "https://registry.npmmirror.com/sass-embedded-android-riscv64/-/sass-embedded-android-riscv64-1.93.3.tgz",
+			"integrity": "sha512-2jNJDmo+3qLocjWqYbXiBDnfgwrUeZgZFHJIwAefU7Fn66Ot7rsXl+XPwlokaCbTpj7eMFIqsRAZ/uDueXNCJg==",
+			"cpu": [
+				"riscv64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"android"
+			],
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/sass-embedded-android-x64": {
+			"version": "1.93.3",
+			"resolved": "https://registry.npmmirror.com/sass-embedded-android-x64/-/sass-embedded-android-x64-1.93.3.tgz",
+			"integrity": "sha512-y0RoAU6ZenQFcjM9PjQd3cRqRTjqwSbtWLL/p68y2oFyh0QGN0+LQ826fc0ZvU/AbqCsAizkqjzOn6cRZJxTTQ==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"android"
+			],
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/sass-embedded-darwin-arm64": {
+			"version": "1.93.3",
+			"resolved": "https://registry.npmmirror.com/sass-embedded-darwin-arm64/-/sass-embedded-darwin-arm64-1.93.3.tgz",
+			"integrity": "sha512-7zb/hpdMOdKteK17BOyyypemglVURd1Hdz6QGsggy60aUFfptTLQftLRg8r/xh1RbQAUKWFbYTNaM47J9yPxYg==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/sass-embedded-darwin-x64": {
+			"version": "1.93.3",
+			"resolved": "https://registry.npmmirror.com/sass-embedded-darwin-x64/-/sass-embedded-darwin-x64-1.93.3.tgz",
+			"integrity": "sha512-Ek1Vp8ZDQEe327Lz0b7h3hjvWH3u9XjJiQzveq74RPpJQ2q6d9LfWpjiRRohM4qK6o4XOHw1X10OMWPXJtdtWg==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/sass-embedded-linux-arm": {
+			"version": "1.93.3",
+			"resolved": "https://registry.npmmirror.com/sass-embedded-linux-arm/-/sass-embedded-linux-arm-1.93.3.tgz",
+			"integrity": "sha512-yeiv2y+dp8B4wNpd3+JsHYD0mvpXSfov7IGyQ1tMIR40qv+ROkRqYiqQvAOXf76Qwh4Y9OaYZtLpnsPjfeq6mA==",
+			"cpu": [
+				"arm"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/sass-embedded-linux-arm64": {
+			"version": "1.93.3",
+			"resolved": "https://registry.npmmirror.com/sass-embedded-linux-arm64/-/sass-embedded-linux-arm64-1.93.3.tgz",
+			"integrity": "sha512-RBrHWgfd8Dd8w4fbmdRVXRrhh8oBAPyeWDTKAWw8ZEmuXfVl4ytjDuyxaVilh6rR1xTRTNpbaA/YWApBlLrrNw==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/sass-embedded-linux-musl-arm": {
+			"version": "1.93.3",
+			"resolved": "https://registry.npmmirror.com/sass-embedded-linux-musl-arm/-/sass-embedded-linux-musl-arm-1.93.3.tgz",
+			"integrity": "sha512-fU0fwAwbp7sBE3h5DVU5UPzvaLg7a4yONfFWkkcCp6ZrOiPuGRHXXYriWQ0TUnWy4wE+svsVuWhwWgvlb/tkKg==",
+			"cpu": [
+				"arm"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/sass-embedded-linux-musl-arm64": {
+			"version": "1.93.3",
+			"resolved": "https://registry.npmmirror.com/sass-embedded-linux-musl-arm64/-/sass-embedded-linux-musl-arm64-1.93.3.tgz",
+			"integrity": "sha512-PS829l+eUng+9W4PFclXGb4uA2+965NHV3/Sa5U7qTywjeeUUYTZg70dJHSqvhrBEfCc2XJABeW3adLJbyQYkw==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/sass-embedded-linux-musl-riscv64": {
+			"version": "1.93.3",
+			"resolved": "https://registry.npmmirror.com/sass-embedded-linux-musl-riscv64/-/sass-embedded-linux-musl-riscv64-1.93.3.tgz",
+			"integrity": "sha512-cK1oBY+FWQquaIGEeQ5H74KTO8cWsSWwXb/WaildOO9U6wmUypTgUYKQ0o5o/29nZbWWlM1PHuwVYTSnT23Jjg==",
+			"cpu": [
+				"riscv64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/sass-embedded-linux-musl-x64": {
+			"version": "1.93.3",
+			"resolved": "https://registry.npmmirror.com/sass-embedded-linux-musl-x64/-/sass-embedded-linux-musl-x64-1.93.3.tgz",
+			"integrity": "sha512-A7wkrsHu2/I4Zpa0NMuPGkWDVV7QGGytxGyUq3opSXgAexHo/vBPlGoDXoRlSdex0cV+aTMRPjoGIfdmNlHwyg==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/sass-embedded-linux-riscv64": {
+			"version": "1.93.3",
+			"resolved": "https://registry.npmmirror.com/sass-embedded-linux-riscv64/-/sass-embedded-linux-riscv64-1.93.3.tgz",
+			"integrity": "sha512-vWkW1+HTF5qcaHa6hO80gx/QfB6GGjJUP0xLbnAoY4pwEnw5ulGv6RM8qYr8IDhWfVt/KH+lhJ2ZFxnJareisQ==",
+			"cpu": [
+				"riscv64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/sass-embedded-linux-x64": {
+			"version": "1.93.3",
+			"resolved": "https://registry.npmmirror.com/sass-embedded-linux-x64/-/sass-embedded-linux-x64-1.93.3.tgz",
+			"integrity": "sha512-k6uFxs+e5jSuk1Y0niCwuq42F9ZC5UEP7P+RIOurIm8w/5QFa0+YqeW+BPWEW5M1FqVOsNZH3qGn4ahqvAEjPA==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/sass-embedded-unknown-all": {
+			"version": "1.93.3",
+			"resolved": "https://registry.npmmirror.com/sass-embedded-unknown-all/-/sass-embedded-unknown-all-1.93.3.tgz",
+			"integrity": "sha512-o5wj2rLpXH0C+GJKt/VpWp6AnMsCCbfFmnMAttcrsa+U3yrs/guhZ3x55KAqqUsE8F47e3frbsDL+1OuQM5DAA==",
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"!android",
+				"!darwin",
+				"!linux",
+				"!win32"
+			],
+			"dependencies": {
+				"sass": "1.93.3"
+			}
+		},
+		"node_modules/sass-embedded-win32-arm64": {
+			"version": "1.93.3",
+			"resolved": "https://registry.npmmirror.com/sass-embedded-win32-arm64/-/sass-embedded-win32-arm64-1.93.3.tgz",
+			"integrity": "sha512-0dOfT9moy9YmBolodwYYXtLwNr4jL4HQC9rBfv6mVrD7ud8ue2kDbn+GVzj1hEJxvEexVSmDCf7MHUTLcGs9xQ==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/sass-embedded-win32-x64": {
+			"version": "1.93.3",
+			"resolved": "https://registry.npmmirror.com/sass-embedded-win32-x64/-/sass-embedded-win32-x64-1.93.3.tgz",
+			"integrity": "sha512-wHFVfxiS9hU/sNk7KReD+lJWRp3R0SLQEX4zfOnRP2zlvI2X4IQR5aZr9GNcuMP6TmNpX0nQPZTegS8+h9RrEg==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/sass-embedded/node_modules/supports-color": {
+			"version": "8.1.1",
+			"resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-8.1.1.tgz",
+			"integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"has-flag": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/supports-color?sponsor=1"
+			}
+		},
 		"node_modules/semver": {
 			"version": "7.7.3",
 			"resolved": "https://registry.npmmirror.com/semver/-/semver-7.7.3.tgz",
@@ -3826,6 +4584,29 @@
 				}
 			}
 		},
+		"node_modules/sync-child-process": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmmirror.com/sync-child-process/-/sync-child-process-1.0.2.tgz",
+			"integrity": "sha512-8lD+t2KrrScJ/7KXCSyfhT3/hRq78rC0wBFqNJXv3mZyn6hW2ypM05JmlSvtqRbeq6jqA94oHbxAr2vYsJ8vDA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"sync-message-port": "^1.0.0"
+			},
+			"engines": {
+				"node": ">=16.0.0"
+			}
+		},
+		"node_modules/sync-message-port": {
+			"version": "1.1.3",
+			"resolved": "https://registry.npmmirror.com/sync-message-port/-/sync-message-port-1.1.3.tgz",
+			"integrity": "sha512-GTt8rSKje5FilG+wEdfCkOcLL7LWqpMlr2c3LRuKt/YXxcJ52aGSbGBAdI4L3aaqfrBt6y711El53ItyH1NWzg==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=16.0.0"
+			}
+		},
 		"node_modules/tailwindcss": {
 			"version": "4.1.17",
 			"resolved": "https://registry.npmmirror.com/tailwindcss/-/tailwindcss-4.1.17.tgz",
@@ -3900,6 +4681,13 @@
 				"typescript": ">=4.8.4"
 			}
 		},
+		"node_modules/tslib": {
+			"version": "2.8.1",
+			"resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.8.1.tgz",
+			"integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+			"dev": true,
+			"license": "0BSD"
+		},
 		"node_modules/type-check": {
 			"version": "0.4.0",
 			"resolved": "https://registry.npmmirror.com/type-check/-/type-check-0.4.0.tgz",
@@ -3975,6 +4763,13 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/varint": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmmirror.com/varint/-/varint-6.0.0.tgz",
+			"integrity": "sha512-cXEIW6cfr15lFv563k4GuVuW/fiwjknytD37jIOLSdSWuOI6WnO/oKwmP2FQTU2l01LP8/M5TSAJpzUaGe3uWg==",
+			"dev": true,
+			"license": "MIT"
+		},
 		"node_modules/vite": {
 			"version": "7.2.2",
 			"resolved": "https://registry.npmmirror.com/vite/-/vite-7.2.2.tgz",

package.json

@@ -28,6 +28,7 @@
 		"prettier": "^3.6.2",
 		"prettier-plugin-svelte": "^3.4.0",
 		"prettier-plugin-tailwindcss": "^0.7.1",
+		"sass-embedded": "^1.93.3",
 		"svelte": "^5.41.0",
 		"svelte-check": "^4.3.3",
 		"tailwindcss": "^4.1.14",

src/lib/api/services/roleService.ts

@@ -0,0 +1,12 @@
+import { api } from '$lib/api/httpClient.ts';
+import type { RoleResponse } from '$lib/types/user.ts';
+
+export const roleService = {
+	getAllRoles: async (token:string) => {
+		const response = await api.get<RoleResponse[]>('/role/', {headers: {Authorization: `${token}`}});
+		if (response.code != 200 || !response.data){
+			throw new Error(response.msg);
+		}
+		return response.data;
+	},
+}

src/lib/types/user.ts

@@ -2,11 +2,13 @@ export interface UserProfile{
 	id: number;
 	username : string;
 	nickname : string;
-	roles : {
+	roles : RoleResponse[];
-		id: number;
-		name: string;
-	}[];
 	avatar? : string;
 }
 
 
+
+export interface RoleResponse {
+	id: number;
+	name: string;
+}

src/routes/app/+layout.svelte

@@ -13,7 +13,7 @@
 
 		<AppHeader />
 
-		<main class="flex-1 overflow-y-auto p-4">
+		<main class="flex-1 overflow-y-auto px-4">
 			{@render children()}
 		</main>
 	</div>

src/routes/app/settings/auth/users/+page.server.ts

@@ -2,6 +2,7 @@ import type { PageServerLoad } from './$types';
 import { userService } from '$lib/api/services/userService.ts';
 import { COOKIE_TOKEN_KEY } from '$lib/components/constants/cookiesConstants.ts';
 import { redirect } from '@sveltejs/kit';
+import { roleService } from '$lib/api/services/roleService.ts';
 
 export const load:PageServerLoad = async ({ cookies }) => {
 
@@ -11,11 +12,21 @@ export const load:PageServerLoad = async ({ cookies }) => {
 		throw redirect(302, '/auth/login');
 	}
 
+	const getRoles = async() => {
+		return await roleService.getAllRoles(token);
+	}
 
-	const allUsers = await userService.getAllUsers({ page: 1, size: 10 ,token:token});
 
+	const getUserList = async() => {
+		await new Promise(resolve => setTimeout(resolve, 3000));
+		return await userService.getAllUsers({ page: 1, size: 10 ,token:token});
+	}
 
 	return {
-		"userList": allUsers
+
+		 streamed:{
+			 userList: getUserList(),
+			 roles: getRoles(),
+		 }
 	};
 };

src/routes/app/settings/auth/users/+page.svelte

@@ -1,49 +1,113 @@
 <script lang="ts">
 	import { resolve } from '$app/paths';
+	import Icon from '$lib/components/icon/Icon.svelte';
 
-	const {data} = $props();
+	const { data } = $props();
 
-	console.log(data);
+	const newRowTitles = [
-
+		{ title: 'ID', width: 5}
-
+		, { title: '用户名', width: 15 }
-
+		, { title: '昵称', width: 20 }
-	const {current,pages,size,total,records} = data.userList;
+		, { title: '头像', width: 10 }
-	const rowTitles = ['ID','用户名','昵称','头像','用户组']
+		, { title: '用户组', width: 45 }
+	];
 </script>
 
-<div class="p-6">
+<div class=" ">
 
-	<div class="flex justify-between items-center bg-base-100">
+	<div class="flex justify-between items-center ">
-		<div>
+		<p class="">用户管理</p>
-			<h1 class="text-2xl font-bold">用户列表</h1>
+		<div class="breadcrumbs ">
-		</div>
-		<div class="breadcrumbs text-sm">
 			<ul>
-				<li><a href={resolve('/app/dashboard')} >仪表盘</a></li>
+				<li><a href={resolve('/app/dashboard')}>仪表盘</a></li>
-				<li><a href={resolve('/app/settings')} >系统设置</a></li>
+				<li><a href={resolve('/app/settings')}>系统设置</a></li>
-				<li><a href={resolve('/app/settings/auth')} >认证管理</a></li>
+				<li><a href={resolve('/app/settings/auth')}>认证管理</a></li>
-				<li><a href={resolve('/app/settings/auth/users')} >用户管理</a></li>
+				<li><a href={resolve('/app/settings/auth/users')}>用户管理</a></li>
 
 			</ul>
 		</div>
 	</div>
-	<div class="overflow-x-auto">
-		<table  class="table">
 
+
+	<div class="overflow-x-auto rounded-box shadow bg-base-100 mt-1 ">
+		<div class="flex items-center justify-between px-4 pt-4 pb-2">
+			<div class="flex gap-4">
+				<label class="input">
+					<svg class="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+						<g
+							stroke-linejoin="round"
+							stroke-linecap="round"
+							stroke-width="2.5"
+							fill="none"
+							stroke="currentColor"
+						>
+							<circle cx="11" cy="11" r="8"></circle>
+							<path d="m21 21-4.3-4.3"></path>
+						</g>
+					</svg>
+					<input type="search" required placeholder="Search" />
+					<button class="btn btn-sm btn-primary">搜索</button>
+				</label>
+				{#await data.streamed.roles}
+					<div></div>
+				{:then roles }
+					<div class=" ">
+						<select class="select w-36" aria-label="Category">
+						<option disabled selected>用户组别</option>
+
+							{#each roles as role(role.id)}
+								<option value="{role.id}">{role.name}</option>
+								{/each}
+						</select>
+					</div>
+				{:catch error}
+					<p class="error">加载失败: {error.message}</p>
+				{/await}
+			</div>
+			<div class=" flex items-center justify-center gap-4">
+				<button class="btn btn-primary">添加用户</button>
+
+				<div class="dropdown  dropdown-bottom dropdown-end">
+					<div tabindex="0" role="button" class="btn" ><Icon id="menu" size="24" /></div>
+					<ul tabindex="-1" class="dropdown-content menu bg-base-200 rounded-box z-1 w-52 p-2 mt-2 shadow-sm" >
+						<li><div>删除</div></li>
+						<li><div>封禁</div></li>
+					</ul>
+				</div>
+
+			</div>
+
+
+		</div>
+
+		<table class="table">
 			<thead>
-				<tr>
+			<tr>
-					<th>
+				<th style="width: 5%">
-						<label>
+					<label>
-							<input type="checkbox" class="checkbox" />
+						<input type="checkbox" class="checkbox" />
-						</label>
+					</label>
-					</th>
+				</th>
-					{#each rowTitles as title,index(index)}
+				{#each newRowTitles as item,index(index)}
-					<th>{title}</th>
+					<th style="width: {item.width}%" >{item.title}</th>
-					{/each}
+				{/each}
-				</tr>
+			</tr>
 			</thead>
-			<tbody>
+
-				{#each records as record(record.id)}
+			{#await data.streamed.userList}
+				<tbody>
+				<tr>
+					<td colspan={newRowTitles.length + 1} class="text-center py-4 ">
+						<div class="min-h-96 flex items-center justify-center">
+							<div class="loading  text-base-content">Loading...</div>
+
+						</div>
+					</td>
+				</tr>
+				</tbody>
+			{:then userList}
+				<tbody>
+				{#each userList.records as record(record.id)}
 					<tr>
 						<th>
 							<label>
@@ -63,18 +127,27 @@
 						</td>
 					</tr>
 				{/each}
-			</tbody>
-			<tfoot>
-			<tr>
-				<th>
 
-				</th>
+				</tbody>
-				{#each rowTitles as title,index(index)}
+			{:catch error}
-					<th>{title}</th>
+				<p class="error">加载失败: {error.message}</p>
-				{/each}
+			{/await}
-			</tr>
+
-			</tfoot>
+
 		</table>
+
 	</div>
 
-</div>
+</div>
+<style lang="scss">
+  .loading {
+    padding: 20px;
+    background: #f0f0f0;
+    border-radius: 8px;
+    text-align: center;
+  }
+
+  .error {
+    color: red;
+  }
+</style>