feat(device): add device management feature
- Created device list page with loading states - Implemented device service with API integration - Added device response and request types - Updated sidebar navigation with device management section - Added laptop-settings icon - Modified user table component to accept props - Updated user service to return array of user profiles - Changed app language to Chinese (zh-CN)
This commit is contained in:
Chaos
@@ -63,7 +63,7 @@ const httpRequest = async <T>(
|
||||
options: RequestOptions = {}
|
||||
): Promise<ApiResult<T>> => {
|
||||
const fullUrl = `${API_BASE_URL}${url}`;
|
||||
const { body, headers, ...rest } = options;
|
||||
const { body , headers, ...rest } = options;
|
||||
|
||||
|
||||
|
||||
|
||||
46
src/lib/api/services/deviceService.ts
Normal file
46
src/lib/api/services/deviceService.ts
Normal file
@@ -0,0 +1,46 @@
|
||||
import { api } from '$lib/api/httpClient.ts';
|
||||
import type { PageResult } from '$lib/types/dataTable.ts';
|
||||
import type { CreateDeviceRequest, DeviceResponse } from '$lib/types/api.ts';
|
||||
|
||||
|
||||
export const deviceService = {
|
||||
getAllDevices: async ({ page, size,type,keyword,token}:{
|
||||
page: number,
|
||||
size: number,
|
||||
type?: number,
|
||||
keyword?: string,
|
||||
token:string
|
||||
}) => {
|
||||
const formData = new FormData();
|
||||
formData.append('pageNum', page.toString());
|
||||
formData.append('pageSize', size.toString());
|
||||
if ( type){
|
||||
formData.append('type', type.toString());
|
||||
}
|
||||
if ( keyword){
|
||||
formData.append('keyword', keyword);
|
||||
}
|
||||
|
||||
const result = await api.get<PageResult<DeviceResponse[]>>('/devices',{
|
||||
body: formData,
|
||||
headers:{Authorization: `${token}`}
|
||||
});
|
||||
|
||||
if (result.code != 200 || !result.data){
|
||||
throw new Error(result.msg);
|
||||
}
|
||||
|
||||
return result.data;
|
||||
},
|
||||
createDevice: async (device: CreateDeviceRequest,token:string) => {
|
||||
|
||||
const result = await api.post<DeviceResponse>('/devices',{
|
||||
body: JSON.stringify(device),
|
||||
headers:{Authorization: `${token}`}
|
||||
});
|
||||
if (result.code != 200 || !result.data){
|
||||
throw new Error(result.msg);
|
||||
}
|
||||
return result.data;
|
||||
}
|
||||
}
|
||||
@@ -14,7 +14,7 @@ export const userService = {
|
||||
const formData = new FormData();
|
||||
formData.append('pageNum', page.toString());
|
||||
formData.append('pageSize', size.toString());
|
||||
const response = await api.get<PageResult<UserProfile>>(
|
||||
const response = await api.get<PageResult<UserProfile[]>>(
|
||||
'/user/all',
|
||||
{
|
||||
body: formData,
|
||||
|
||||
@@ -127,4 +127,7 @@
|
||||
<symbol id="auth" viewBox="0 0 16 16"><path fill="currentColor" d="M9.07 6.746a2 2 0 0 0 2.91.001l.324-.344c.297.14.577.316.835.519l-.126.422a2 2 0 0 0 1.456 2.518l.348.083a4.7 4.7 0 0 1 .011 1.017l-.46.117a2 2 0 0 0-1.431 2.479l.156.556q-.383.294-.822.497l-.337-.357a2 2 0 0 0-2.91-.002l-.325.345a4.3 4.3 0 0 1-.835-.519l.126-.423a2 2 0 0 0-1.456-2.518l-.35-.083a4.7 4.7 0 0 1-.01-1.016l.462-.118a2 2 0 0 0 1.43-2.478l-.156-.557q.383-.294.822-.497zm-1.423-4.6a.5.5 0 0 1 .707 0C9.594 3.39 10.97 4 12.5 4a.5.5 0 0 1 .5.5v1.1a5.5 5.5 0 0 0-7.494 7.204C3.846 11.59 3 9.812 3 7.502V4.5a.5.5 0 0 1 .5-.5c1.53 0 2.904-.61 4.147-1.854M10.501 9.5a1 1 0 1 0 0 2a1 1 0 0 0 0-2"/></symbol>
|
||||
|
||||
<symbol id="chevron-up-down" viewBox="0 0 16 16"><path fill="currentColor" d="M4.22 6.53a.75.75 0 0 0 1.06 0L8 3.81l2.72 2.72a.75.75 0 1 0 1.06-1.06L8.53 2.22a.75.75 0 0 0-1.06 0L4.22 5.47a.75.75 0 0 0 0 1.06m0 2.94a.75.75 0 0 1 1.06 0L8 12.19l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0l-3.25-3.25a.75.75 0 0 1 0-1.06"/></symbol>
|
||||
|
||||
|
||||
<symbol id="laptop-settings" viewBox="0 0 20 20"><path fill="currentColor" d="M4.5 5A1.5 1.5 0 0 0 3 6.5v6A1.5 1.5 0 0 0 4.5 14h4.522A5.5 5.5 0 0 1 17 9.6V6.5A1.5 1.5 0 0 0 15.5 5zm-2 10h6.522q.047.516.185 1H2.5a.5.5 0 0 1 0-1m9.565-3.558a2 2 0 0 1-1.43 2.478l-.462.118a4.7 4.7 0 0 0 .01 1.016l.35.083a2 2 0 0 1 1.456 2.519l-.127.423q.388.306.835.517l.325-.344a2 2 0 0 1 2.91.002l.337.358q.44-.203.822-.498l-.156-.556a2 2 0 0 1 1.43-2.478l.46-.118a4.7 4.7 0 0 0-.01-1.017l-.348-.082a2 2 0 0 1-1.456-2.52l.126-.421a4.3 4.3 0 0 0-.835-.519l-.325.344a2 2 0 0 1-2.91-.001l-.337-.358a4.3 4.3 0 0 0-.821.497zm2.434 4.058a1 1 0 1 1 0-2a1 1 0 0 1 0 2"/></symbol>
|
||||
</svg>
|
||||
@@ -1,5 +1,4 @@
|
||||
<script lang="ts">
|
||||
|
||||
import { page } from '$app/state';
|
||||
import { getContext } from 'svelte';
|
||||
import { resolve } from '$app/paths';
|
||||
@@ -11,135 +10,88 @@
|
||||
import { enhance } from '$app/forms';
|
||||
// const sidebarState = getContext<SidebarState>(SIDEBAR_KEY);
|
||||
|
||||
|
||||
// 1. 模拟数据：包含三层结构
|
||||
|
||||
const rawNavItems: NavItem[] = [
|
||||
|
||||
{
|
||||
|
||||
id: 'dashboard',
|
||||
|
||||
label: '仪表盘',
|
||||
|
||||
icon: 'home',
|
||||
|
||||
href: '/app/dashboard'
|
||||
|
||||
},
|
||||
|
||||
{
|
||||
|
||||
id: 'statistics',
|
||||
|
||||
label: '数据看板',
|
||||
|
||||
icon: 'data',
|
||||
|
||||
href: '/app/statistics'
|
||||
|
||||
},
|
||||
|
||||
{
|
||||
|
||||
id: 'settings',
|
||||
|
||||
label: '系统设置',
|
||||
|
||||
icon: 'settings',
|
||||
|
||||
href: '/app/settings',
|
||||
|
||||
subItems: [
|
||||
|
||||
{
|
||||
|
||||
id: 'auth',
|
||||
|
||||
label: '认证管理',
|
||||
|
||||
href: '/app/settings/auth',
|
||||
|
||||
icon: 'auth',
|
||||
|
||||
subItems: [
|
||||
|
||||
{
|
||||
|
||||
id: 'users',
|
||||
|
||||
label: '用户管理',
|
||||
|
||||
href: '/app/settings/auth/users'
|
||||
|
||||
},
|
||||
|
||||
{
|
||||
|
||||
id: 'roles',
|
||||
|
||||
label: '角色权限',
|
||||
|
||||
href: '/app/settings/auth/roles'
|
||||
|
||||
},
|
||||
|
||||
{
|
||||
|
||||
id: 'permissions',
|
||||
|
||||
label: '权限管理',
|
||||
|
||||
href: '/app/settings/auth/permissions'
|
||||
|
||||
}
|
||||
|
||||
]
|
||||
|
||||
},
|
||||
|
||||
|
||||
{
|
||||
|
||||
id: 'advanced',
|
||||
|
||||
label: '高级设置',
|
||||
|
||||
href: '/app/settings/advanced',
|
||||
|
||||
id: "device",
|
||||
label: '设备管理',
|
||||
icon: 'laptop-settings',
|
||||
subItems: [
|
||||
|
||||
{
|
||||
|
||||
id: 'logs',
|
||||
|
||||
label: '安全日志',
|
||||
|
||||
href: '/app/settings/advanced/logs'
|
||||
|
||||
id: 'device',
|
||||
label: '设备管理',
|
||||
href: '/app/settings/device/list'
|
||||
},
|
||||
|
||||
{
|
||||
|
||||
id: 'backup',
|
||||
|
||||
label: '备份恢复',
|
||||
|
||||
href: '/app/settings/advanced/backup'
|
||||
|
||||
}
|
||||
|
||||
id: 'type',
|
||||
label: '类型管理',
|
||||
href: '/app/settings/device/type'
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'advanced',
|
||||
label: '高级设置',
|
||||
href: '/app/settings/advanced',
|
||||
subItems: [
|
||||
{
|
||||
id: 'logs',
|
||||
label: '安全日志',
|
||||
href: '/app/settings/advanced/logs'
|
||||
},
|
||||
{
|
||||
id: 'backup',
|
||||
label: '备份恢复',
|
||||
href: '/app/settings/advanced/backup'
|
||||
}
|
||||
]
|
||||
|
||||
}
|
||||
|
||||
]
|
||||
|
||||
}
|
||||
|
||||
];
|
||||
|
||||
|
||||
/**
|
||||
|
||||
* 递归计算高亮状态 (强类型版本)
|
||||
@@ -147,34 +99,25 @@
|
||||
*/
|
||||
|
||||
function processNavItems(items: NavItem[], currentPath: string): ProcessedNavItem[] {
|
||||
|
||||
return items.map((item) => {
|
||||
|
||||
const isSelfActive =
|
||||
|
||||
item.href === '/' ? currentPath === '/' : currentPath.startsWith(item.href);
|
||||
|
||||
|
||||
let processedSubItems: ProcessedNavItem[] | undefined = undefined;
|
||||
|
||||
let isChildActive = false;
|
||||
|
||||
|
||||
if (item.subItems) {
|
||||
|
||||
// 递归调用
|
||||
// 递归调用
|
||||
|
||||
processedSubItems = processNavItems(item.subItems, currentPath);
|
||||
|
||||
// 检查子项激活状态
|
||||
// 检查子项激活状态
|
||||
|
||||
isChildActive = processedSubItems.some((sub) => sub.isActive || sub.isChildActive);
|
||||
|
||||
}
|
||||
|
||||
|
||||
return {
|
||||
|
||||
...item,
|
||||
|
||||
subItems: processedSubItems, // 这里类型现在是 ProcessedNavItem[]
|
||||
@@ -182,180 +125,104 @@
|
||||
isActive: isSelfActive,
|
||||
|
||||
isChildActive: isChildActive
|
||||
|
||||
};
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
// 使用 $derived 动态计算，类型自动推断为 ProcessedNavItem[]
|
||||
|
||||
let navItems = $derived(processNavItems(rawNavItems, page.url.pathname));
|
||||
|
||||
|
||||
// 获取 Toast 以便提示用户
|
||||
|
||||
const toast = getContext<ToastState>(TOAST_KEY);
|
||||
|
||||
|
||||
// 处理提交结果的回调
|
||||
|
||||
const handleLogout = () => {
|
||||
|
||||
toast.info('正在退出登录...');
|
||||
|
||||
return async ({ result, update }) => {
|
||||
|
||||
|
||||
// result.type 可能是 'redirect', 'success', 'failure'
|
||||
// result.type 可能是 'redirect', 'success', 'failure'
|
||||
|
||||
if (result.type === 'redirect') {
|
||||
|
||||
toast.success('您已安全退出');
|
||||
|
||||
}
|
||||
|
||||
|
||||
// update() 会触发默认行为（也就是执行 redirect 跳转）
|
||||
// update() 会触发默认行为（也就是执行 redirect 跳转）
|
||||
|
||||
await update();
|
||||
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
|
||||
let logoutForm: HTMLFormElement;
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<!-- 定义递归 Snippet，显式指定类型 -->
|
||||
|
||||
{#snippet menuItem(item: ProcessedNavItem)}
|
||||
|
||||
<li>
|
||||
|
||||
{#if item.subItems && item.subItems.length > 0}
|
||||
|
||||
<details open={item.isChildActive}>
|
||||
|
||||
<summary class="group {item.isActive ? 'text-primary font-medium' : ''}">
|
||||
|
||||
<summary class="group {item.isActive ? 'font-medium text-primary' : ''}">
|
||||
{#if item.icon}
|
||||
|
||||
<Icon id={item.icon} size="20" />
|
||||
|
||||
{/if}
|
||||
|
||||
<span class="truncate">{item.label}</span>
|
||||
|
||||
</summary>
|
||||
|
||||
<ul>
|
||||
|
||||
{#each item.subItems as subItem (subItem.id)}
|
||||
|
||||
<!-- 递归渲染子项 -->
|
||||
|
||||
{@render menuItem(subItem)}
|
||||
|
||||
{/each}
|
||||
|
||||
</ul>
|
||||
|
||||
</details>
|
||||
|
||||
{:else}
|
||||
|
||||
<a
|
||||
|
||||
href={resolve(item.href)}
|
||||
|
||||
class="group {item.isActive ? 'active font-medium' : ''}"
|
||||
|
||||
>
|
||||
|
||||
<a href={resolve(item.href)} class="group {item.isActive ? 'active font-medium' : ''}">
|
||||
{#if item.icon}
|
||||
|
||||
<Icon id={item.icon} size="20" />
|
||||
|
||||
{:else}
|
||||
|
||||
<!-- 无图标时的占位符，保持对齐 -->
|
||||
|
||||
<span class="w-5 text-center text-xs opacity-50">•</span>
|
||||
|
||||
{/if}
|
||||
|
||||
<span class="truncate">{item.label}</span>
|
||||
|
||||
</a>
|
||||
|
||||
{/if}
|
||||
|
||||
</li>
|
||||
|
||||
{/snippet}
|
||||
|
||||
|
||||
<div
|
||||
|
||||
class="fixed inset-0 z-20 cursor-pointer bg-black/50 backdrop-blur-sm md:hidden"
|
||||
|
||||
role="button"
|
||||
|
||||
tabindex="0"
|
||||
|
||||
|
||||
transition:fade={{ duration: 200 }}
|
||||
|
||||
></div>
|
||||
|
||||
|
||||
<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"
|
||||
|
||||
class="fixed z-30 flex h-full w-64 flex-shrink-0 flex-col border-r border-base-100/70 bg-base-200 md:relative"
|
||||
in:fly={{ duration: 200, x: -100 }}
|
||||
|
||||
out:fly={{ duration: 200, x: -100 }}
|
||||
|
||||
>
|
||||
|
||||
<div class="h-18 flex flex-shrink-0 items-center p-4">
|
||||
|
||||
<a
|
||||
|
||||
class="flex items-center gap-3"
|
||||
|
||||
href={resolve('/app/dashboard')}
|
||||
|
||||
>
|
||||
|
||||
<div class="flex h-18 flex-shrink-0 items-center p-4">
|
||||
<a class="flex items-center gap-3" href={resolve('/app/dashboard')}>
|
||||
<Icon className="flex-shrink-0 rounded-box" id="logo" size="32" />
|
||||
|
||||
<p class="truncate font-serif text-lg font-bold">IT DTMS</p>
|
||||
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="custom-scrollbar flex-1 overflow-y-auto">
|
||||
|
||||
<ul class="menu menu-vertical w-full gap-1 px-2">
|
||||
|
||||
{#each navItems as item (item.id)}
|
||||
|
||||
<!-- 初始渲染调用 -->
|
||||
|
||||
{@render menuItem(item)}
|
||||
|
||||
{/each}
|
||||
|
||||
</ul>
|
||||
<!-- 状态: {sidebarState.isSidebarExpanded ? '展开' : '收起'}-->
|
||||
<!-- <button-->
|
||||
@@ -365,149 +232,90 @@
|
||||
<!-- </button>-->
|
||||
</div>
|
||||
|
||||
|
||||
{#if page.data.user}
|
||||
|
||||
<div class="border-base-content/10 bg-base-200/50 flex-shrink-0 border-t p-3">
|
||||
|
||||
<div class="dropdown dropdown-top dropdown-end w-full">
|
||||
|
||||
<div class="flex-shrink-0 border-t border-base-content/10 bg-base-200/50 p-3">
|
||||
<div class="dropdown dropdown-end dropdown-top w-full">
|
||||
<div
|
||||
|
||||
tabindex="0"
|
||||
|
||||
role="button"
|
||||
|
||||
class="hover:bg-base-300 flex w-full cursor-pointer items-center gap-3 rounded-lg p-2 transition-colors"
|
||||
|
||||
class="flex w-full cursor-pointer items-center gap-3 rounded-lg p-2 transition-colors hover:bg-base-300"
|
||||
>
|
||||
|
||||
<div class="avatar placeholder">
|
||||
|
||||
<div class="bg-neutral text-neutral-content w-10 rounded-full">
|
||||
|
||||
<div class="placeholder avatar">
|
||||
<div class="w-10 rounded-full bg-neutral text-neutral-content">
|
||||
<img src={page.data.user.avatar} alt="avatar" />
|
||||
|
||||
<span class="text-xs">User</span>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex min-w-0 flex-1 flex-col">
|
||||
|
||||
<span class="truncate text-sm font-bold">{page.data.user.nickname}</span>
|
||||
|
||||
<span class="text-base-content/60 truncate text-xs"
|
||||
|
||||
>@{page.data.user.username}</span
|
||||
|
||||
>
|
||||
|
||||
<span class="truncate text-xs text-base-content/60">@{page.data.user.username}</span>
|
||||
</div>
|
||||
|
||||
|
||||
<Icon id="chevron-up-down" size="16" className="opacity-50" />
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<ul
|
||||
|
||||
tabindex="0"
|
||||
|
||||
class="dropdown-content z-[1] menu rounded-box border-base-content/10 mb-2 w-60 border bg-base-100 p-2 shadow-lg"
|
||||
|
||||
class="dropdown-content menu z-[1] mb-2 w-60 rounded-box border border-base-content/10 bg-base-100 p-2 shadow-lg"
|
||||
>
|
||||
|
||||
<li class="menu-title px-4 py-2">我的账户</li>
|
||||
|
||||
<li>
|
||||
|
||||
<a href="/app/user">
|
||||
<Icon id="user-profile" size="16" />
|
||||
个人资料</a>
|
||||
|
||||
个人资料</a
|
||||
>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
|
||||
<a href="/app/settings">
|
||||
<Icon id="settings" size="16" />
|
||||
设置</a>
|
||||
|
||||
设置</a
|
||||
>
|
||||
</li>
|
||||
|
||||
<div class="divider my-1"></div>
|
||||
|
||||
|
||||
<li class="">
|
||||
|
||||
<button
|
||||
|
||||
class="text-error w-full text-left flex items-center gap-2"
|
||||
|
||||
class="flex w-full items-center gap-2 text-left text-error"
|
||||
onclick={() => logoutForm.requestSubmit()}
|
||||
|
||||
>
|
||||
|
||||
<Icon id="sign-out" size="16" />
|
||||
退出登录
|
||||
|
||||
</button>
|
||||
|
||||
</li>
|
||||
|
||||
<form
|
||||
|
||||
action="/auth/logout"
|
||||
|
||||
method="POST"
|
||||
|
||||
use:enhance={handleLogout}
|
||||
|
||||
bind:this={logoutForm}
|
||||
|
||||
hidden
|
||||
|
||||
>
|
||||
|
||||
</form>
|
||||
|
||||
></form>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/if}
|
||||
|
||||
</aside>
|
||||
|
||||
|
||||
<style>
|
||||
/* 保持原有样式 */
|
||||
|
||||
/* 保持原有样式 */
|
||||
.custom-scrollbar::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar {
|
||||
.custom-scrollbar::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
width: 5px;
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(156, 163, 175, 0.3);
|
||||
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-track {
|
||||
|
||||
background: transparent;
|
||||
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||
|
||||
background-color: rgba(156, 163, 175, 0.3);
|
||||
|
||||
border-radius: 20px;
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
border-radius: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
0
src/lib/components/table/DeviceTable.svelte
Normal file
0
src/lib/components/table/DeviceTable.svelte
Normal file
160
src/lib/components/table/UserTable.svelte
Normal file
160
src/lib/components/table/UserTable.svelte
Normal file
@@ -0,0 +1,160 @@
|
||||
<script lang="ts">
|
||||
|
||||
|
||||
import type { PageResult } from '$lib/types/dataTable.ts';
|
||||
import type { RoleResponse, UserProfile } from '$lib/types/user.ts';
|
||||
import { resolve } from '$app/paths';
|
||||
import Icon from '$lib/components/icon/Icon.svelte';
|
||||
|
||||
let { users , roles } = $props<{
|
||||
users: PageResult<UserProfile[]>,
|
||||
roles: RoleResponse[]
|
||||
}>();
|
||||
|
||||
|
||||
|
||||
let x ;
|
||||
|
||||
const handleRoleChange = (e) => {
|
||||
console.log(e.target.value);
|
||||
x = e.target.value;
|
||||
}
|
||||
const newRowTitles = [
|
||||
{ title: 'ID', width: 5}
|
||||
, { title: '用户名', width: 15 }
|
||||
, { title: '昵称', width: 20 }
|
||||
, { title: '头像', width: 10 }
|
||||
, { title: '用户组', width: 45 }
|
||||
];
|
||||
|
||||
console.log("users", users);
|
||||
</script>
|
||||
<div>
|
||||
{#if users.total > 0}
|
||||
<div class="">
|
||||
|
||||
|
||||
|
||||
<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-xs btn-primary">搜索</button>
|
||||
</label>
|
||||
{#if roles}
|
||||
<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)}
|
||||
<input class="btn " type="radio" name="metaframeworks" aria-label="{role.name}" value={role.id} onchange={handleRoleChange} />
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</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>
|
||||
<th style="width: 5%">
|
||||
<label>
|
||||
<input type="checkbox" class="checkbox" />
|
||||
</label>
|
||||
</th>
|
||||
{#each newRowTitles as item,index(index)}
|
||||
<th style="width: {item.width}%" >{item.title}</th>
|
||||
{/each}
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
|
||||
|
||||
{#if users.records}
|
||||
<tbody>
|
||||
{#each users.records as record(record.id)}
|
||||
<tr>
|
||||
<th>
|
||||
<label>
|
||||
<input type="checkbox" class="checkbox" />
|
||||
</label>
|
||||
</th>
|
||||
<td>{record.id}</td>
|
||||
<td>{record.username}</td>
|
||||
<td>{record.nickname}</td>
|
||||
<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 select-none 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 {users.current} of {users.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>
|
||||
|
||||
{/if}
|
||||
|
||||
</table>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{:else }
|
||||
<p>No users found</p>
|
||||
{/if}
|
||||
</div>
|
||||
201
src/lib/components/table/UserTableOld.svelte
Normal file
201
src/lib/components/table/UserTableOld.svelte
Normal file
@@ -0,0 +1,201 @@
|
||||
<script lang="ts">
|
||||
import { resolve } from '$app/paths';
|
||||
import Icon from '$lib/components/icon/Icon.svelte';
|
||||
import type { UserProfile } from '$lib/types/user.ts';
|
||||
|
||||
const { data } = $props();
|
||||
|
||||
console.log("data", data);
|
||||
const newRowTitles = [
|
||||
{ title: 'ID', width: 5}
|
||||
, { title: '用户名', width: 15 }
|
||||
, { title: '昵称', width: 20 }
|
||||
, { title: '头像', width: 10 }
|
||||
, { title: '用户组', width: 45 }
|
||||
];
|
||||
|
||||
let x ;
|
||||
|
||||
const handleRoleChange = (e) => {
|
||||
console.log(e.target.value);
|
||||
x = e.target.value;
|
||||
}
|
||||
|
||||
let users: UserProfile[] ;
|
||||
|
||||
if (data.streamed.userList){
|
||||
users = data.streamed.userList.records;
|
||||
}
|
||||
|
||||
Promise
|
||||
</script>
|
||||
|
||||
<div class=" ">
|
||||
|
||||
<div class="flex justify-between items-center ">
|
||||
<p class="font-bold">用户管理</p>
|
||||
<div class="breadcrumbs ">
|
||||
<ul>
|
||||
<li><a href={resolve('/app/dashboard')}>仪表盘</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/users')}>用户管理</a></li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<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-xs btn-primary">搜索</button>
|
||||
</label>
|
||||
{#await data.streamed.roles}
|
||||
<div></div>
|
||||
{:then roles }
|
||||
<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)}
|
||||
<input class="btn " type="radio" name="metaframeworks" aria-label="{role.name}" value={role.id} onchange={handleRoleChange} />
|
||||
{/each}
|
||||
</div>
|
||||
{/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>
|
||||
<th style="width: 5%">
|
||||
<label>
|
||||
<input type="checkbox" class="checkbox" />
|
||||
</label>
|
||||
</th>
|
||||
{#each newRowTitles as item,index(index)}
|
||||
<th style="width: {item.width}%" >{item.title}</th>
|
||||
{/each}
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
{#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"></div>
|
||||
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
{:then userList}
|
||||
<tbody>
|
||||
{#each userList.records as record(record.id)}
|
||||
<tr>
|
||||
<th>
|
||||
<label>
|
||||
<input type="checkbox" class="checkbox" />
|
||||
</label>
|
||||
</th>
|
||||
<td>{record.id}</td>
|
||||
<td>{record.username}</td>
|
||||
<td>{record.nickname}</td>
|
||||
<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>
|
||||
<tr>
|
||||
<td colspan={newRowTitles.length + 1} class="text-center py-4 ">
|
||||
<div class="min-h-96 flex items-center justify-center">
|
||||
<p class="error">组件加载失败: {error.message}</p>
|
||||
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
{/await}
|
||||
|
||||
</table>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<style lang="scss">
|
||||
.loading {
|
||||
padding: 20px;
|
||||
background: #f0f0f0;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
@@ -24,3 +24,27 @@ export interface LoginSuccess {
|
||||
}
|
||||
|
||||
|
||||
export interface DeviceResponse {
|
||||
id: number;
|
||||
name: string;
|
||||
model: string;
|
||||
typeId: number;
|
||||
locationId: number;
|
||||
snmpCommunity: string;
|
||||
manufacturer: string;
|
||||
purchaseDate: Date;
|
||||
status: number;
|
||||
remark: string;
|
||||
}
|
||||
|
||||
export interface CreateDeviceRequest {
|
||||
name: string;
|
||||
model: string;
|
||||
typeId: number;
|
||||
locationId: number;
|
||||
snmpCommunity: string;
|
||||
manufacturer: string;
|
||||
purchaseDate: Date;
|
||||
status: number;
|
||||
remark: string;
|
||||
}
|
||||
@@ -16,5 +16,6 @@ export type IconId =
|
||||
"user-settings" |
|
||||
"user-profile"|
|
||||
"auth"|
|
||||
"chevron-up-down"
|
||||
"chevron-up-down"|
|
||||
"laptop-settings"
|
||||
;
|
||||
@@ -5,7 +5,7 @@ export interface NavItem {
|
||||
id: string;
|
||||
icon?: IconId;
|
||||
label: string;
|
||||
href: RouteId;
|
||||
href?: RouteId;
|
||||
isActive?: boolean;
|
||||
isDisabled?: boolean;
|
||||
isHidden?: boolean;
|
||||
|
||||
Reference in New Issue
Block a user