feat(users): implement role filtering and pagination in user management

- Add role filtering functionality with radio buttons for each role
- Implement pagination controls at the bottom of the user table
- Update user table to show loading state without text
- Improve avatar display logic with conditional rendering
- Adjust styling for better UI consistency and responsiveness
- Remove unused sidebar state imports and commented-out code
- Add console logs for debugging data flow and role changes
- Modify search button size from sm to xs for better fit
- Enhance role badge styling with margin adjustments
- Refactor sidebar overlay and positioning classes

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

@@ -4,6 +4,7 @@
 
 	const { data } = $props();
 
+	console.log("data", data);
 	const newRowTitles = [
 		{ title: 'ID', width: 5}
 		, { title: '用户名', width: 15 }
@@ -11,12 +12,19 @@
 		, { title: '头像', width: 10 }
 		, { title: '用户组', width: 45 }
 	];
+
+	let x ;
+
+	const handleRoleChange = (e) => {
+		console.log(e.target.value);
+		x = e.target.value;
+	}
 </script>
 
 <div class=" ">
 
 	<div class="flex justify-between items-center ">
-		<p class="">用户管理</p>
+		<p class="font-bold">用户管理</p>
 		<div class="breadcrumbs ">
 			<ul>
 				<li><a href={resolve('/app/dashboard')}>仪表盘</a></li>
@@ -46,23 +54,16 @@
 						</g>
 					</svg>
 					<input type="search" required placeholder="Search" />
-					<button class="btn btn-sm btn-primary">搜索</button>
+					<button class="btn btn-xs 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>
-
+					<div class="filter  w-64">
+						<input class="btn filter-reset " type="radio" value=''  name="metaframeworks" aria-label="All" onchange={handleRoleChange} />
 							{#each roles as role(role.id)}
-								<option value="{role.id}">{role.name}</option>
-								{/each}
-						</select>
-					</div>
-				{:catch error}
-					<div>
-
+								<input class="btn " type="radio" name="metaframeworks" aria-label="{role.name}" value={role.id} onchange={handleRoleChange} />
+							{/each}
 					</div>
 				{/await}
 			</div>
@@ -101,7 +102,7 @@
 				<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 class="loading  text-base-content"></div>
 
 						</div>
 					</td>
@@ -119,18 +120,45 @@
 						<td>{record.id}</td>
 						<td>{record.username}</td>
 						<td>{record.nickname}</td>
-						<td><img class="w-8 h-8 rounded-box bg-primary-content/10 border-0" src="{record.avatar}" alt=" "></td>
-						<td class="flex gap-2">
-							{#each record.roles as role(role.id)}
-
-								<span class="badge {role.id === 1 ? 'badge-primary' : 'badge-secondary'}">{role.name}</span>
-
+						<td>
+							<div class="w-8 h-8 rounded-box bg-primary-content/10 border-0">
+							{#if record.avatar}
+								<img class="w-8 h-8 rounded-box bg-primary-content/10 border-0" src="{record.avatar}" alt=" ">
+							{/if}
+							</div>
+						</td>
+						<td class="">
+							{#each record.roles as role (role.id)}
+								<span class="badge mr-2 last:mr-0 {role.id === 1 ? 'badge-primary' : 'badge-secondary'}">{role.name}</span>
 							{/each}
 						</td>
 					</tr>
 				{/each}
 
 				</tbody>
+				<tfoot>
+				<tr>
+					<th colspan={newRowTitles.length + 1} class="text-center py-4 ">
+						<div class=" flex items-center justify-between">
+							<div>
+								page {userList.current} of {userList.pages}
+							</div>
+
+							<div class="join">
+								<button class="join-item btn">1</button>
+								<button class="join-item btn">2</button>
+								<button class="join-item btn btn-disabled">...</button>
+								<button class="join-item btn">99</button>
+								<button class="join-item btn">100</button>
+							</div>
+
+							<div>
+								<button class="btn btn-primary">下一页</button>
+							</div>
+						</div>
+					</th>
+				</tr>
+				</tfoot>
 			{:catch error}
 
 				<tbody>
@@ -144,6 +172,7 @@
 				</tr>
 				</tbody>
 			{/await}
+
 		</table>
 
 	</div>