chaos/chaos_it
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 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
This commit is contained in:
Chaos
2025-11-26 09:21:38 +08:00
parent 7ce645704e
commit 2a14389daf
3 changed files with 81 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/lib/components/layout/app/AppSidebar.svelte
View File

@@ -1,24 +1,15 @@
<script lang="ts">
import { resolve } from '$app/paths';
import { page } from '$app/state';
import { fly, fade } from 'svelte/transition';
import Icon from '$lib/components/icon/Icon.svelte';
import type { NavItem, ProcessedNavItem } from '$lib/types/layout';
import { getContext } from 'svelte';
import { resolve } from '$app/paths';
import { fade, fly } from 'svelte/transition';
import Icon from '$lib/components/icon/Icon.svelte';
import type { NavItem, ProcessedNavItem } from '$lib/types/layout';
import { TOAST_KEY, type ToastState } from '$lib/stores/toast.svelte.ts';
// import { SIDEBAR_KEY, SidebarState } from '$lib/stores/sidebar.svelte.ts';
import { enhance } from '$app/forms';
import { SIDEBAR_KEY, SidebarState } from '$lib/stores/sidebar.svelte.ts';
const sidebarState = getContext<SidebarState>(SIDEBAR_KEY);
// const sidebarState = getContext<SidebarState>(SIDEBAR_KEY);
// 1. 模拟数据：包含三层结构
@@ -312,12 +303,12 @@
<div
class="fixed inset-0 z-20 cursor-pointer bg-black/50 backdrop-blur-sm md:hidden"
role="button"
tabindex="0"
class="fixed inset-0 z-20 cursor-pointer bg-black/50 backdrop-blur-sm md:hidden"
transition:fade={{ duration: 200 }}
@@ -326,25 +317,25 @@
<aside
class="bg-base-200 border-base-100/70 fixed z-30 flex h-full w-64 flex-shrink-0 flex-col border-r md:relative"
in:fly={{ duration: 200, x: -100 }}
out:fly={{ duration: 200, x: -100 }}
class="bg-base-200 border-base-100/70 fixed z-30 flex h-full w-64 flex-shrink-0 flex-col border-r md:relative"
>
<div class="h-18 flex flex-shrink-0 items-center p-4">
<a
href={resolve('/app/dashboard')}
class="flex items-center gap-3"
href={resolve('/app/dashboard')}
>
<Icon id="logo" size="32" className="flex-shrink-0 rounded-box" />
<Icon className="flex-shrink-0 rounded-box" id="logo" size="32" />
<p class="truncate font-serif text-lg font-bold">IT DTMS</p>
@@ -366,12 +357,12 @@
{/each}
</ul>
<!-- 状态: {sidebarState.isSidebarExpanded ? '展开' : '收起'}-->
<!-- <button-->
<!-- onclick="{sidebarState.toggleSidebar}"-->
<!-- class="btn btn-square btn-ghost">-->
<!-- 123-->
<!-- </button>-->
<!-- 状态: {sidebarState.isSidebarExpanded ? '展开' : '收起'}-->
<!-- <button-->
<!-- onclick="{sidebarState.toggleSidebar}"-->
<!-- class="btn btn-square btn-ghost">-->
<!-- 123-->
<!-- </button>-->
</div>