Dashboard Layout
简介
DashboardLayout 组件适用于管理后台的布局，包含侧边栏导航和顶部导航栏。提供了完整的管理界面框架，包括响应式设计和暗色主题支持。
The current version is Beta, which may be unstable. Please use with caution.
基础用法
最简单的仪表盘布局使用方式，并支持主内容区 padding（mainPadding）多种尺寸演示：
主内容区默认 padding (cosy:p-4)
Toast 演示
点击下面的按钮来触发不同类型的 Toast 通知
Toast 演示
点击下面的按钮来触发不同类型的 Toast 通知
Toast 演示
点击下面的按钮来触发不同类型的 Toast 通知
Toast 演示
点击下面的按钮来触发不同类型的 Toast 通知
Toast 演示
点击下面的按钮来触发不同类型的 Toast 通知
---
import { DashboardLayout } from '@coffic/cosy-ui';
import type { NavItem } from '@coffic/cosy-ui';
const menuItems: NavItem[] = [
{ text: '仪表盘', href: '/dashboard', icon: 'dashboard' },
{ text: '用户管理', href: '/dashboard/users', icon: 'users' },
{ text: '设置', href: '/dashboard/settings', icon: 'settings' },
];
---
<DashboardLayout
title="mainPadding=md (默认)"
navItems={menuItems}
mainPadding="md">
<div class="cosy:p-2 cosy:bg-base-200 cosy:rounded">
mainPadding = md (cosy:p-4)
</div>
<!-- 演示按钮 -->
<div class="cosy:card cosy:bg-base-300 cosy:mt-4">
<div class="cosy:card-body">
<h2 class="cosy:card-title">Toast 演示</h2>
<p class="cosy:text-sm cosy:text-base-content/70">
点击下面的按钮来触发不同类型的 Toast 通知
</p>
<div class="cosy:flex cosy:gap-2 cosy:mt-4">
<button
class="cosy:btn cosy:btn-info"
onclick="window.showToast?.({ message: '这是一条信息通知', type: 'info' })">
显示信息
</button>
<button
class="cosy:btn cosy:btn-success"
onclick="window.showToast?.({ message: '操作成功完成！', type: 'success' })">
显示成功
</button>
<button
class="cosy:btn cosy:btn-warning"
onclick="window.showToast?.({ message: '请注意这个警告信息', type: 'warning' })">
显示警告
</button>
<button
class="cosy:btn cosy:btn-error"
onclick="window.showToast?.({ message: '出现了一个错误', type: 'error' })">
显示错误
</button>
</div>
</div>
</div>
</DashboardLayout>
主内容区小号 padding (cosy:p-2)
Toast 演示
点击下面的按钮来触发不同类型的 Toast 通知
Toast 演示
点击下面的按钮来触发不同类型的 Toast 通知
Toast 演示
点击下面的按钮来触发不同类型的 Toast 通知
Toast 演示
点击下面的按钮来触发不同类型的 Toast 通知
Toast 演示
点击下面的按钮来触发不同类型的 Toast 通知
---
import { DashboardLayout } from '@coffic/cosy-ui';
import type { NavItem } from '@coffic/cosy-ui';
const menuItems: NavItem[] = [
{ text: '仪表盘', href: '/dashboard', icon: 'dashboard' },
{ text: '用户管理', href: '/dashboard/users', icon: 'users' },
{ text: '设置', href: '/dashboard/settings', icon: 'settings' },
];
---
<DashboardLayout title="mainPadding=sm" navItems={menuItems} mainPadding="sm">
<div class="cosy:p-2 cosy:bg-base-200 cosy:rounded">
mainPadding = sm (cosy:p-2)
</div>
<!-- 演示按钮 -->
<div class="cosy:card cosy:bg-base-300 cosy:mt-4">
<div class="cosy:card-body">
<h2 class="cosy:card-title">Toast 演示</h2>
<p class="cosy:text-sm cosy:text-base-content/70">
点击下面的按钮来触发不同类型的 Toast 通知
</p>
<div class="cosy:flex cosy:gap-2 cosy:mt-4">
<button
class="cosy:btn cosy:btn-info"
onclick="window.showToast?.({ message: '这是一条信息通知', type: 'info' })">
显示信息
</button>
<button
class="cosy:btn cosy:btn-success"
onclick="window.showToast?.({ message: '操作成功完成！', type: 'success' })">
显示成功
</button>
<button
class="cosy:btn cosy:btn-warning"
onclick="window.showToast?.({ message: '请注意这个警告信息', type: 'warning' })">
显示警告
</button>
<button
class="cosy:btn cosy:btn-error"
onclick="window.showToast?.({ message: '出现了一个错误', type: 'error' })">
显示错误
</button>
</div>
</div>
</div>
</DashboardLayout>
主内容区大号 padding (cosy:p-8)
Toast 演示
点击下面的按钮来触发不同类型的 Toast 通知
Toast 演示
点击下面的按钮来触发不同类型的 Toast 通知
Toast 演示
点击下面的按钮来触发不同类型的 Toast 通知
Toast 演示
点击下面的按钮来触发不同类型的 Toast 通知
Toast 演示
点击下面的按钮来触发不同类型的 Toast 通知
---
import { DashboardLayout } from '@coffic/cosy-ui';
import type { NavItem } from '@coffic/cosy-ui';
const menuItems: NavItem[] = [
{ text: '仪表盘', href: '/dashboard', icon: 'dashboard' },
{ text: '用户管理', href: '/dashboard/users', icon: 'users' },
{ text: '设置', href: '/dashboard/settings', icon: 'settings' },
];
---
<DashboardLayout title="mainPadding=lg" navItems={menuItems} mainPadding="lg">
<div class="cosy:p-2 cosy:bg-base-200 cosy:rounded">
mainPadding = lg (cosy:p-8)
</div>
<!-- 演示按钮 -->
<div class="cosy:card cosy:bg-base-300 cosy:mt-4">
<div class="cosy:card-body">
<h2 class="cosy:card-title">Toast 演示</h2>
<p class="cosy:text-sm cosy:text-base-content/70">
点击下面的按钮来触发不同类型的 Toast 通知
</p>
<div class="cosy:flex cosy:gap-2 cosy:mt-4">
<button
class="cosy:btn cosy:btn-info"
onclick="window.showToast?.({ message: '这是一条信息通知', type: 'info' })">
显示信息
</button>
<button
class="cosy:btn cosy:btn-success"
onclick="window.showToast?.({ message: '操作成功完成！', type: 'success' })">
显示成功
</button>
<button
class="cosy:btn cosy:btn-warning"
onclick="window.showToast?.({ message: '请注意这个警告信息', type: 'warning' })">
显示警告
</button>
<button
class="cosy:btn cosy:btn-error"
onclick="window.showToast?.({ message: '出现了一个错误', type: 'error' })">
显示错误
</button>
</div>
</div>
</div>
</DashboardLayout>
主内容区超大 padding (cosy:p-12)
Toast 演示
点击下面的按钮来触发不同类型的 Toast 通知
Toast 演示
点击下面的按钮来触发不同类型的 Toast 通知
Toast 演示
点击下面的按钮来触发不同类型的 Toast 通知
Toast 演示
点击下面的按钮来触发不同类型的 Toast 通知
Toast 演示
点击下面的按钮来触发不同类型的 Toast 通知
---
import { DashboardLayout } from '@coffic/cosy-ui';
import type { NavItem } from '@coffic/cosy-ui';
const menuItems: NavItem[] = [
{ text: '仪表盘', href: '/dashboard', icon: 'dashboard' },
{ text: '用户管理', href: '/dashboard/users', icon: 'users' },
{ text: '设置', href: '/dashboard/settings', icon: 'settings' },
];
---
<DashboardLayout title="mainPadding=xl" navItems={menuItems} mainPadding="xl">
<div class="cosy:p-2 cosy:bg-base-200 cosy:rounded">
mainPadding = xl (cosy:p-12)
</div>
<!-- 演示按钮 -->
<div class="cosy:card cosy:bg-base-300 cosy:mt-4">
<div class="cosy:card-body">
<h2 class="cosy:card-title">Toast 演示</h2>
<p class="cosy:text-sm cosy:text-base-content/70">
点击下面的按钮来触发不同类型的 Toast 通知
</p>
<div class="cosy:flex cosy:gap-2 cosy:mt-4">
<button
class="cosy:btn cosy:btn-info"
onclick="window.showToast?.({ message: '这是一条信息通知', type: 'info' })">
显示信息
</button>
<button
class="cosy:btn cosy:btn-success"
onclick="window.showToast?.({ message: '操作成功完成！', type: 'success' })">
显示成功
</button>
<button
class="cosy:btn cosy:btn-warning"
onclick="window.showToast?.({ message: '请注意这个警告信息', type: 'warning' })">
显示警告
</button>
<button
class="cosy:btn cosy:btn-error"
onclick="window.showToast?.({ message: '出现了一个错误', type: 'error' })">
显示错误
</button>
</div>
</div>
</div>
</DashboardLayout>
主内容区无 padding
Toast 演示
点击下面的按钮来触发不同类型的 Toast 通知
Toast 演示
点击下面的按钮来触发不同类型的 Toast 通知
Toast 演示
点击下面的按钮来触发不同类型的 Toast 通知
Toast 演示
点击下面的按钮来触发不同类型的 Toast 通知
Toast 演示
点击下面的按钮来触发不同类型的 Toast 通知
---
import { DashboardLayout } from '@coffic/cosy-ui';
import type { NavItem } from '@coffic/cosy-ui';
const menuItems: NavItem[] = [
{ text: '仪表盘', href: '/dashboard', icon: 'dashboard' },
{ text: '用户管理', href: '/dashboard/users', icon: 'users' },
{ text: '设置', href: '/dashboard/settings', icon: 'settings' },
];
---
<DashboardLayout
title="mainPadding=none"
navItems={menuItems}
mainPadding="none">
<div class="cosy:p-2 cosy:bg-base-200 cosy:rounded">
mainPadding = none (无 padding)
</div>
<!-- 演示按钮 -->
<div class="cosy:card cosy:bg-base-300 cosy:mt-4">
<div class="cosy:card-body">
<h2 class="cosy:card-title">Toast 演示</h2>
<p class="cosy:text-sm cosy:text-base-content/70">
点击下面的按钮来触发不同类型的 Toast 通知
</p>
<div class="cosy:flex cosy:gap-2 cosy:mt-4">
<button
class="cosy:btn cosy:btn-info"
onclick="window.showToast?.({ message: '这是一条信息通知', type: 'info' })">
显示信息
</button>
<button
class="cosy:btn cosy:btn-success"
onclick="window.showToast?.({ message: '操作成功完成！', type: 'success' })">
显示成功
</button>
<button
class="cosy:btn cosy:btn-warning"
onclick="window.showToast?.({ message: '请注意这个警告信息', type: 'warning' })">
显示警告
</button>
<button
class="cosy:btn cosy:btn-error"
onclick="window.showToast?.({ message: '出现了一个错误', type: 'error' })">
显示错误
</button>
</div>
</div>
</div>
</DashboardLayout>
侧边栏尺寸
DashboardLayout支持四种不同的侧边栏尺寸，适应不同的设计需求：
12rem (192px) - 紧凑布局，移动端友好
主内容区
这是侧边栏尺寸为 sm (12rem) 的示例。
主内容区
这是侧边栏尺寸为 md (16rem) 的示例。
主内容区
这是侧边栏尺寸为 lg (18rem) 的示例。
主内容区
这是侧边栏尺寸为 xl (20rem) 的示例。
---
import { DashboardLayout } from '@coffic/cosy-ui';
import { navItems, userMenuItems } from './data';
---
<DashboardLayout
title="管理后台 (SM)"
navItems={navItems}
sidebarSize="sm"
userName="演示用户"
userMenuItems={userMenuItems}>
<div class="cosy-prose">
<h1>主内容区</h1>
<p>这是侧边栏尺寸为 sm (12rem) 的示例。</p>
</div>
</DashboardLayout>
16rem (256px) - 默认尺寸，平衡的选择
主内容区
这是侧边栏尺寸为 sm (12rem) 的示例。
主内容区
这是侧边栏尺寸为 md (16rem) 的示例。
主内容区
这是侧边栏尺寸为 lg (18rem) 的示例。
主内容区
这是侧边栏尺寸为 xl (20rem) 的示例。
---
import { DashboardLayout } from '@coffic/cosy-ui';
import { navItems, userMenuItems } from './data';
---
<DashboardLayout
title="管理后台 (MD)"
navItems={navItems}
sidebarSize="md"
userName="演示用户"
userMenuItems={userMenuItems}>
<div class="cosy-prose">
<h1>主内容区</h1>
<p>这是侧边栏尺寸为 md (16rem) 的示例。</p>
</div>
</DashboardLayout>
18rem (288px) - 宽松布局，适合更多内容
主内容区
这是侧边栏尺寸为 sm (12rem) 的示例。
主内容区
这是侧边栏尺寸为 md (16rem) 的示例。
主内容区
这是侧边栏尺寸为 lg (18rem) 的示例。
主内容区
这是侧边栏尺寸为 xl (20rem) 的示例。
---
import { DashboardLayout } from '@coffic/cosy-ui';
import { navItems, userMenuItems } from './data';
---
<DashboardLayout
title="管理后台 (LG)"
navItems={navItems}
sidebarSize="lg"
userName="演示用户"
userMenuItems={userMenuItems}>
<div class="cosy-prose">
<h1>主内容区</h1>
<p>这是侧边栏尺寸为 lg (18rem) 的示例。</p>
</div>
</DashboardLayout>
20rem (320px) - 最宽布局，适合复杂导航
主内容区
这是侧边栏尺寸为 sm (12rem) 的示例。
主内容区
这是侧边栏尺寸为 md (16rem) 的示例。
主内容区
这是侧边栏尺寸为 lg (18rem) 的示例。
主内容区
这是侧边栏尺寸为 xl (20rem) 的示例。
---
import { DashboardLayout } from '@coffic/cosy-ui';
import { navItems, userMenuItems } from './data';
---
<DashboardLayout
title="管理后台 (XL)"
navItems={navItems}
sidebarSize="xl"
userName="演示用户"
userMenuItems={userMenuItems}>
<div class="cosy-prose">
<h1>主内容区</h1>
<p>这是侧边栏尺寸为 xl (20rem) 的示例。</p>
</div>
</DashboardLayout>
侧边栏底部自定义内容
DashboardLayout支持在侧边栏底部添加自定义内容，可用于展示用户信息、版权信息或其他重要信息：
展示如何在侧边栏底部显示用户信息，包括头像、姓名和职位
---
/**
* @component EDashboardLayoutSidebarFooterUserInfo
* @description 展示侧边栏底部用户信息的示例
*/
import { DashboardLayout } from '@coffic/cosy-ui';
const navItems = [
{ href: '/dashboard', icon: 'home', text: '仪表盘' },
{ href: '/dashboard/users', icon: 'users', text: '用户管理', badge: '5' },
{ href: '/dashboard/settings', icon: 'settings', text: '系统设置' },
];
---
<DashboardLayout
title="个人中心"
navItems={navItems}
userName="管理员"
sidebarSize="sm"
class="cosy:h-full">
<div class="cosy:p-4">
<div class="cosy:alert cosy:alert-info">
<span>👤</span>
<div>这里展示了如何在侧边栏底部显示用户信息</div>
</div>
</div>
<!-- 侧边栏底部用户信息 -->
<div slot="sidebar-footer" class="cosy:p-4">
<div class="cosy:flex cosy:items-center cosy:gap-3">
<div class="cosy:avatar">
<div
class="cosy:w-10 cosy:rounded-full cosy:bg-primary cosy:text-primary-content cosy:flex cosy:items-center cosy:justify-center">
<span class="cosy:text-sm cosy:font-bold">张</span>
</div>
</div>
<div>
<div class="cosy:font-semibold cosy:text-sm">张三</div>
<div class="cosy:text-xs cosy:opacity-70">产品经理</div>
</div>
</div>
</div>
</DashboardLayout>
展示如何显示版权信息、版本号和系统状态标识
---
/**
* @component EDashboardLayoutSidebarFooterCopyright
* @description 展示侧边栏底部版权信息的示例
*/
import { DashboardLayout } from '@coffic/cosy-ui';
const navItems = [
{ href: '/dashboard', icon: 'home', text: '仪表盘' },
{ href: '/dashboard/users', icon: 'users', text: '用户管理', badge: '5' },
{ href: '/dashboard/settings', icon: 'settings', text: '系统设置' },
];
---
<DashboardLayout
title="管理系统"
navItems={navItems}
sidebarSize="sm"
class="cosy:h-full">
<div class="cosy:p-4">
<div class="cosy:alert cosy:alert-success">
<span>📄</span>
<div>这里展示了如何显示版权和版本信息</div>
</div>
</div>
<!-- 侧边栏底部版权信息 -->
<div slot="sidebar-footer" class="cosy:p-4 cosy:text-center">
<div class="cosy:text-xs cosy:opacity-60 cosy:space-y-1">
<div>© 2024 您的公司</div>
<div>版本 v1.0.0</div>
<div class="cosy:badge cosy:badge-success cosy:badge-xs">稳定版</div>
</div>
</div>
</DashboardLayout>
展示如何显示实时系统状态信息，如在线用户数、CPU使用率等
---
/**
* @component EDashboardLayoutSidebarFooterStatus
* @description 展示侧边栏底部系统状态的示例
*/
import { DashboardLayout } from '@coffic/cosy-ui';
const navItems = [
{ href: '/dashboard', icon: 'home', text: '仪表盘' },
{ href: '/dashboard/users', icon: 'users', text: '用户管理', badge: '5' },
{ href: '/dashboard/settings', icon: 'settings', text: '系统设置' },
];
---
<DashboardLayout
title="监控面板"
navItems={navItems}
sidebarSize="sm"
class="cosy:h-full">
<div class="cosy:p-4">
<div class="cosy:alert cosy:alert-warning">
<span>📊</span>
<div>这里展示了如何显示系统状态信息</div>
</div>
</div>
<!-- 侧边栏底部系统状态 -->
<div slot="sidebar-footer" class="cosy:p-3">
<div class="cosy:space-y-2">
<div class="cosy:flex cosy:justify-between cosy:items-center">
<span class="cosy:text-xs cosy:opacity-70">系统状态</span>
<span class="cosy:badge cosy:badge-success cosy:badge-xs">正常</span>
</div>
<div class="cosy:flex cosy:justify-between cosy:items-center">
<span class="cosy:text-xs cosy:opacity-70">在线用户</span>
<span class="cosy:text-xs cosy:font-mono">1,234</span>
</div>
<div class="cosy:flex cosy:justify-between cosy:items-center">
<span class="cosy:text-xs cosy:opacity-70">CPU使用率</span>
<span class="cosy:text-xs cosy:font-mono">23%</span>
</div>
</div>
</div>
</DashboardLayout>
内容超长滚动
当主区域的内容超过视口高度时，DashboardLayout
会自动显示一个垂直滚动条，以确保所有内容都可访问。下面的示例使用了一个固定高度的容器来演示这个效果。
这是一段很长的内容
当主区域的内容超过视口高度时，`DashboardLayout` 会自动显示一个垂直滚动条，以确保所有内容都可访问。下面的示例文本是为了撑开高度，演示这个效果。
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam.
Duis bibendum, lectus ut viverra rhoncus, dolor nunc faucibus libero, eget suscipit nibh est vel metus. Aliquam erat volutpat. Integer a sem. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
更多内容
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.
Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.
---
import { DashboardLayout } from '@coffic/cosy-ui';
import { navItems } from './data';
---
<DashboardLayout title="内容超长" navItems={navItems}>
<div class="prose cosy:max-w-none">
<h2>这是一段很长的内容</h2>
<p>
当主区域的内容超过视口高度时，`DashboardLayout`
会自动显示一个垂直滚动条，以确保所有内容都可访问。下面的示例文本是为了撑开高度，演示这个效果。
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.
Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies
sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a,
semper congue, euismod non, mi. Proin porttitor, orci nec nonummy
molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat.
Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a,
enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor.
Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent
blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque
fermentum. Maecenas adipiscing ante non diam.
</p>
<p>
Duis bibendum, lectus ut viverra rhoncus, dolor nunc faucibus libero, eget
suscipit nibh est vel metus. Aliquam erat volutpat. Integer a sem. Nam
libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit
quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda
est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis
debitis aut rerum necessitatibus saepe eveniet ut et voluptates
repudiandae sint et molestiae non recusandae. Itaque earum rerum hic
tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias
consequatur aut perferendis doloribus asperiores repellat.
</p>
<h3>更多内容</h3>
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo
inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut
fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem
sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit
amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
</p>
<p>
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis
suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem
vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil
molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla
pariatur? At vero eos et accusamus et iusto odio dignissimos ducimus qui
blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et
quas molestias excepturi sint occaecati cupiditate non provident,
similique sunt in culpa qui officia deserunt mollitia animi, id est
laborum et dolorum fuga.
</p>
<p>
Et harum quidem rerum facilis est et expedita distinctio. Nam libero
tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo
minus id quod maxime placeat facere possimus, omnis voluptas assumenda
est, omnis dolor repellendus.
</p>
</div>
</DashboardLayout>
Toast 通知系统
DashboardLayout 内置了完整的 Toast 通知系统，无需额外配置即可使用全局通知功能：
// 简单用法
showToast('操作成功！');
// 带类型的用法
showToast({
message: '数据保存成功',
type: 'success',
duration: 3000
});
// 四种消息类型
showToast({ message: '操作成功', type: 'success' });
showToast({ message: '网络错误', type: 'error' });
showToast({ message: '请注意', type: 'warning' });
showToast({ message: '系统消息', type: 'info' });
// 手动控制
const toastId = showToast('正在处理...');
setTimeout(() => closeToast(toastId), 2000);
// 清除所有通知
clearAllToasts();确认对话框
DashboardLayout 内置了确认对话框功能，用于重要操作的二次确认：
// 触发确认对话框
document.getElementById('dashboard-confirm').showModal();
// 处理确认事件
document.addEventListener('confirm-dialog-confirm', (e) => {
const { dialogId } = e.detail;
if (dialogId === 'dashboard-confirm') {
// 处理确认操作
console.log('用户确认了操作');
}
});使用方式：
通过按钮触发：
<button data-confirm-dialog-target="dashboard-confirm">
删除
</button>