logo
English
导航

Dashboard Layout

Introduction

The DashboardLayout component is designed for admin dashboards, featuring sidebar navigation and top navbar. It provides a complete management interface framework with responsive design and dark theme support.

Component Features:

  • 🏗️ Complete Framework - Provides sidebar, top navbar, and main content area in a complete layout
  • 📱 Responsive Design - Delivers excellent user experience across different devices
  • 🎨 daisyUI Styling - Uses daisyUI component library for consistent design
  • 🔧 Highly Customizable - Supports custom navigation items, system name, and user information
  • 💾 State Persistence - Remembers user’s sidebar collapse state
  • 🌙 Theme Support - Full support for light and dark theme switching
  • 🔔 Built-in Notifications - Integrated Toast notification system for unified message prompting experience
  • 🔒 Confirm Dialog - Built-in confirm dialog for important action confirmation

Basic Usage

The simplest dashboard layout usage:

最基本的仪表盘布局使用方式

仪表盘布局示例
仪表盘布局示例
3

Toast 演示

点击下面的按钮来触发不同类型的 Toast 通知

总用户数

1,234

今日活跃

567

转化率

45.8%

确认操作

您确定要执行此操作吗？

 
              ---
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="仪表盘布局示例"
  description="这是一个仪表盘布局的示例页面"
  navItems={menuItems}>
  <div class="cosy:flex cosy:flex-col cosy:gap-4">
    <!-- 演示按钮 -->
    <div class="cosy:card cosy:bg-base-100 cosy:shadow-xl">
      <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>

    <!-- 原有的统计卡片 -->
    <div
      class="cosy:grid cosy:grid-cols-1 cosy:md:grid-cols-2 cosy:lg:grid-cols-3 cosy:gap-4">
      <div class="cosy:card cosy:bg-base-100 cosy:shadow-xl">
        <div class="cosy:card-body">
          <h2 class="cosy:card-title">总用户数</h2>
          <p class="cosy:text-4xl cosy:font-bold">1,234</p>
        </div>
      </div>
      <div class="cosy:card cosy:bg-base-100 cosy:shadow-xl">
        <div class="cosy:card-body">
          <h2 class="cosy:card-title">今日活跃</h2>
          <p class="cosy:text-4xl cosy:font-bold">567</p>
        </div>
      </div>
      <div class="cosy:card cosy:bg-base-100 cosy:shadow-xl">
        <div class="cosy:card-body">
          <h2 class="cosy:card-title">转化率</h2>
          <p class="cosy:text-4xl cosy:font-bold">45.8%</p>
        </div>
      </div>
    </div>
  </div>
</DashboardLayout>

Custom Styling

Customize the dashboard appearance using the class attribute:

展示如何使用自定义CSS类来个性化仪表盘的外观

自定义样式仪表盘
自定义样式仪表盘
3
管
管理员
👥
总用户数
31K
↗︎ 400 (22%)
📊
页面浏览量
4,200
↗︎ 40 (2%)
⭐
新用户
1,200
↘︎ 90 (14%)

📈 销售趋势

这个月的销售表现非常优异，达到了预期目标的120%。

🎯 目标完成度

当前季度目标完成度85%，还需要加把劲！

💡

自定义样式提示

这个示例展示了如何使用自定义CSS类来个性化仪表盘的外观。

确认操作

您确定要执行此操作吗？

 
              ---
import { DashboardLayout } from '@coffic/cosy-ui';

const navItems = [
  { href: '/dashboard', icon: 'home', text: '仪表盘' },
  { href: '/dashboard/users', icon: 'users', text: '用户管理', badge: '5' },
  {
    href: '/dashboard/content',
    icon: 'document',
    text: '内容管理',
    items: [
      {
        href: '/dashboard/content/articles',
        icon: 'document',
        text: '文章管理',
      },
      { href: '/dashboard/content/categories', icon: 'star', text: '分类管理' },
    ],
  },
  { href: '/dashboard/settings', icon: 'settings', text: '系统设置' },
];
---

<DashboardLayout
  title="自定义样式仪表盘"
  description="展示自定义样式的仪表盘布局"
  systemName="自定义管理系统"
  navItems={navItems}
  userName="管理员"
  class="cosy:bg-gradient-to-br cosy:from-blue-50 cosy:to-purple-50">
  <div class="cosy:space-y-6">
    <div
      class="stats cosy:shadow-lg cosy:bg-gradient-to-r cosy:from-primary cosy:to-secondary cosy:text-primary-content">
      <div class="stat">
        <div class="stat-figure">
          <span class="cosy:text-3xl">👥</span>
        </div>
        <div class="stat-title cosy:text-primary-content/80">总用户数</div>
        <div class="stat-value">31K</div>
        <div class="stat-desc cosy:text-primary-content/70">↗︎ 400 (22%)</div>
      </div>

      <div class="stat">
        <div class="stat-figure">
          <span class="cosy:text-3xl">📊</span>
        </div>
        <div class="stat-title cosy:text-primary-content/80">页面浏览量</div>
        <div class="stat-value">4,200</div>
        <div class="stat-desc cosy:text-primary-content/70">↗︎ 40 (2%)</div>
      </div>

      <div class="stat">
        <div class="stat-figure">
          <span class="cosy:text-3xl">⭐</span>
        </div>
        <div class="stat-title cosy:text-primary-content/80">新用户</div>
        <div class="stat-value">1,200</div>
        <div class="stat-desc cosy:text-primary-content/70">↘︎ 90 (14%)</div>
      </div>
    </div>

    <div class="cosy:grid cosy:grid-cols-1 cosy:md:grid-cols-2 cosy:gap-6">
      <div
        class="card cosy:bg-gradient-to-br cosy:from-green-50 cosy:to-blue-50 cosy:shadow-xl">
        <div class="card-body">
          <h2 class="card-title cosy:text-green-700">
            <span class="cosy:text-2xl">📈</span>
            销售趋势
          </h2>
          <p class="cosy:text-green-600">
            这个月的销售表现非常优异，达到了预期目标的120%。
          </p>
          <div class="card-actions justify-end">
            <button class="btn btn-primary">查看详情</button>
          </div>
        </div>
      </div>

      <div
        class="card cosy:bg-gradient-to-br cosy:from-purple-50 cosy:to-pink-50 cosy:shadow-xl">
        <div class="card-body">
          <h2 class="card-title cosy:text-purple-700">
            <span class="cosy:text-2xl">🎯</span>
            目标完成度
          </h2>
          <p class="cosy:text-purple-600">
            当前季度目标完成度85%，还需要加把劲！
          </p>
          <div class="card-actions justify-end">
            <button class="btn btn-secondary">查看目标</button>
          </div>
        </div>
      </div>
    </div>

    <div class="alert alert-info cosy:shadow-lg">
      <span class="cosy:text-2xl">💡</span>
      <div>
        <h3 class="cosy:font-bold">自定义样式提示</h3>
        <div class="cosy:text-sm">
          这个示例展示了如何使用自定义CSS类来个性化仪表盘的外观。
        </div>
      </div>
    </div>
  </div>
</DashboardLayout>

DashboardLayout supports four different sidebar sizes to accommodate various design needs:

12rem (192px) - 紧凑布局，移动端友好

侧边栏尺寸 - SM
侧边栏尺寸 - SM
3
演
演示用户

当前配置

侧边栏尺寸

SM

实际宽度

12rem (192px)

适用场景

紧凑布局，移动端友好，适用于简单的导航结构

确认操作

您确定要执行此操作吗？
侧边栏尺寸 - MD
侧边栏尺寸 - MD
3
演
演示用户

当前配置

侧边栏尺寸

MD

实际宽度

16rem (256px)

适用场景

默认尺寸，平衡的选择，适用于大多数应用场景

确认操作

您确定要执行此操作吗？
侧边栏尺寸 - LG
侧边栏尺寸 - LG
3
演
演示用户

当前配置

侧边栏尺寸

LG

实际宽度

18rem (288px)

适用场景

宽松布局，适合更多内容，可显示更详细的导航信息

确认操作

您确定要执行此操作吗？
侧边栏尺寸 - XL
侧边栏尺寸 - XL
3
演
演示用户

当前配置

侧边栏尺寸

XL

实际宽度

20rem (320px)

适用场景

最宽布局，适合复杂导航，可容纳丰富的导航层级

确认操作

您确定要执行此操作吗？

 
              <DashboardLayout
  title="管理后台"
  navItems={navItems}
  sidebarSize="sm"
  userName="演示用户"
>
  <!-- 你的内容 -->
</DashboardLayout>

16rem (256px) - 默认尺寸，平衡的选择

侧边栏尺寸 - SM
侧边栏尺寸 - SM
3
演
演示用户

当前配置

侧边栏尺寸

SM

实际宽度

12rem (192px)

适用场景

紧凑布局，移动端友好，适用于简单的导航结构

确认操作

您确定要执行此操作吗？
侧边栏尺寸 - MD
侧边栏尺寸 - MD
3
演
演示用户

当前配置

侧边栏尺寸

MD

实际宽度

16rem (256px)

适用场景

默认尺寸，平衡的选择，适用于大多数应用场景

确认操作

您确定要执行此操作吗？
侧边栏尺寸 - LG
侧边栏尺寸 - LG
3
演
演示用户

当前配置

侧边栏尺寸

LG

实际宽度

18rem (288px)

适用场景

宽松布局，适合更多内容，可显示更详细的导航信息

确认操作

您确定要执行此操作吗？
侧边栏尺寸 - XL
侧边栏尺寸 - XL
3
演
演示用户

当前配置

侧边栏尺寸

XL

实际宽度

20rem (320px)

适用场景

最宽布局，适合复杂导航，可容纳丰富的导航层级

确认操作

您确定要执行此操作吗？

 
              <DashboardLayout
  title="管理后台"
  navItems={navItems}
  sidebarSize="md"
  userName="演示用户"
>
  <!-- 你的内容 -->
</DashboardLayout>

18rem (288px) - 宽松布局，适合更多内容

侧边栏尺寸 - SM
侧边栏尺寸 - SM
3
演
演示用户

当前配置

侧边栏尺寸

SM

实际宽度

12rem (192px)

适用场景

紧凑布局，移动端友好，适用于简单的导航结构

确认操作

您确定要执行此操作吗？
侧边栏尺寸 - MD
侧边栏尺寸 - MD
3
演
演示用户

当前配置

侧边栏尺寸

MD

实际宽度

16rem (256px)

适用场景

默认尺寸，平衡的选择，适用于大多数应用场景

确认操作

您确定要执行此操作吗？
侧边栏尺寸 - LG
侧边栏尺寸 - LG
3
演
演示用户

当前配置

侧边栏尺寸

LG

实际宽度

18rem (288px)

适用场景

宽松布局，适合更多内容，可显示更详细的导航信息

确认操作

您确定要执行此操作吗？
侧边栏尺寸 - XL
侧边栏尺寸 - XL
3
演
演示用户

当前配置

侧边栏尺寸

XL

实际宽度

20rem (320px)

适用场景

最宽布局，适合复杂导航，可容纳丰富的导航层级

确认操作

您确定要执行此操作吗？

 
              <DashboardLayout
  title="管理后台"
  navItems={navItems}
  sidebarSize="lg"
  userName="演示用户"
>
  <!-- 你的内容 -->
</DashboardLayout>

20rem (320px) - 最宽布局，适合复杂导航

侧边栏尺寸 - SM
侧边栏尺寸 - SM
3
演
演示用户

当前配置

侧边栏尺寸

SM

实际宽度

12rem (192px)

适用场景

紧凑布局，移动端友好，适用于简单的导航结构

确认操作

您确定要执行此操作吗？
侧边栏尺寸 - MD
侧边栏尺寸 - MD
3
演
演示用户

当前配置

侧边栏尺寸

MD

实际宽度

16rem (256px)

适用场景

默认尺寸，平衡的选择，适用于大多数应用场景

确认操作

您确定要执行此操作吗？
侧边栏尺寸 - LG
侧边栏尺寸 - LG
3
演
演示用户

当前配置

侧边栏尺寸

LG

实际宽度

18rem (288px)

适用场景

宽松布局，适合更多内容，可显示更详细的导航信息

确认操作

您确定要执行此操作吗？
侧边栏尺寸 - XL
侧边栏尺寸 - XL
3
演
演示用户

当前配置

侧边栏尺寸

XL

实际宽度

20rem (320px)

适用场景

最宽布局，适合复杂导航，可容纳丰富的导航层级

确认操作

您确定要执行此操作吗？

 
              <DashboardLayout
  title="管理后台"
  navItems={navItems}
  sidebarSize="xl"
  userName="演示用户"
>
  <!-- 你的内容 -->
</DashboardLayout>

DashboardLayout supports 10 different sidebar theme colors to meet various application scenarios’ visual requirements:

通用场景，平衡的视觉效果

默认主题演示
默认主题演示
3
管
管理员
ℹ️

默认主题

通用场景的最佳选择，使用 base-300 背景色，平衡的视觉效果

今日访问
1,234
↗︎ 12% (较昨日)
活跃用户
567
↗︎ 8% (较上周)

确认操作

您确定要执行此操作吗？
品牌主色主题演示
品牌主色主题演示
3
品
品牌经理
🎨

品牌主色主题

使用企业主色调，强化品牌识别度，适合品牌展示和企业内部系统

品牌曝光

89.5%

本月品牌认知度提升

客户满意度

4.8/5.0

基于 1,245 条反馈

确认操作

您确定要执行此操作吗？
健康管理系统
健康管理系统
3
健
健康顾问
✅

成功绿色主题

积极正面的视觉效果，适合健康管理、财务成长等正向内容展示

健康指数

92分

较上月提升 8 分

运动目标

完成

本周已达成 85%

体重管理

-2.5kg

已达预期目标

确认操作

您确定要执行此操作吗？
监控预警系统
监控预警系统
3
运
运维工程师
⚠️

警告黄色主题

谨慎的提醒色调，适合监控系统、待处理状态等需要用户注意的场景

待处理告警

12

需要立即关注

系统负载

78%

接近阈值，需监控

📊
有 3 个服务器状态异常，建议立即检查

确认操作

您确定要执行此操作吗？

 
              ---
import { DashboardLayout } from '@coffic/cosy-ui';
import type { NavItem } from '@coffic/cosy-ui';

const navItems: NavItem[] = [
  { text: '仪表盘', href: '/dashboard' },
  { text: '用户管理', href: '/dashboard/users' },
  { text: '数据分析', href: '/dashboard/analytics' },
  { text: '系统设置', href: '/dashboard/settings' },
];
---

<DashboardLayout
  title="默认主题演示"
  description="使用默认主题的管理界面"
  navItems={navItems}
  sidebarTheme="default"
  userName="管理员">
  <div class="cosy:space-y-4">
    <div class="cosy:alert cosy:alert-info">
      <span>ℹ️</span>
      <div>
        <h4 class="cosy:font-semibold">默认主题</h4>
        <p>通用场景的最佳选择，使用 base-300 背景色，平衡的视觉效果</p>
      </div>
    </div>

    <div class="cosy:stats cosy:shadow">
      <div class="cosy:stat">
        <div class="cosy:stat-title">今日访问</div>
        <div class="cosy:stat-value">1,234</div>
        <div class="cosy:stat-desc">↗︎ 12% (较昨日)</div>
      </div>
      <div class="cosy:stat">
        <div class="cosy:stat-title">活跃用户</div>
        <div class="cosy:stat-value">567</div>
        <div class="cosy:stat-desc">↗︎ 8% (较上周)</div>
      </div>
    </div>
  </div>
</DashboardLayout>

强调品牌特色，醒目突出

默认主题演示
默认主题演示
3
管
管理员
ℹ️

默认主题

通用场景的最佳选择，使用 base-300 背景色，平衡的视觉效果

今日访问
1,234
↗︎ 12% (较昨日)
活跃用户
567
↗︎ 8% (较上周)

确认操作

您确定要执行此操作吗？
品牌主色主题演示
品牌主色主题演示
3
品
品牌经理
🎨

品牌主色主题

使用企业主色调，强化品牌识别度，适合品牌展示和企业内部系统

品牌曝光

89.5%

本月品牌认知度提升

客户满意度

4.8/5.0

基于 1,245 条反馈

确认操作

您确定要执行此操作吗？
健康管理系统
健康管理系统
3
健
健康顾问
✅

成功绿色主题

积极正面的视觉效果，适合健康管理、财务成长等正向内容展示

健康指数

92分

较上月提升 8 分

运动目标

完成

本周已达成 85%

体重管理

-2.5kg

已达预期目标

确认操作

您确定要执行此操作吗？
监控预警系统
监控预警系统
3
运
运维工程师
⚠️

警告黄色主题

谨慎的提醒色调，适合监控系统、待处理状态等需要用户注意的场景

待处理告警

12

需要立即关注

系统负载

78%

接近阈值，需监控

📊
有 3 个服务器状态异常，建议立即检查

确认操作

您确定要执行此操作吗？

 
              ---
import { DashboardLayout } from '@coffic/cosy-ui';
import type { NavItem } from '@coffic/cosy-ui';

const navItems: NavItem[] = [
  { text: '品牌中心', href: '/dashboard' },
  { text: '客户管理', href: '/dashboard/customers' },
  { text: '营销活动', href: '/dashboard/campaigns' },
  { text: '品牌设置', href: '/dashboard/settings' },
];
---

<DashboardLayout
  title="品牌主色主题演示"
  description="突出品牌特色的管理界面"
  navItems={navItems}
  sidebarTheme="primary"
  userName="品牌经理">
  <div class="cosy:space-y-4">
    <div class="cosy:alert cosy:alert-success">
      <span>🎨</span>
      <div>
        <h4 class="cosy:font-semibold">品牌主色主题</h4>
        <p>使用企业主色调，强化品牌识别度，适合品牌展示和企业内部系统</p>
      </div>
    </div>

    <div class="cosy:grid cosy:grid-cols-1 cosy:md:grid-cols-2 cosy:gap-4">
      <div class="cosy:card cosy:bg-base-100 cosy:shadow">
        <div class="cosy:card-body">
          <h3 class="cosy:card-title cosy:text-primary">品牌曝光</h3>
          <p class="cosy:text-2xl cosy:font-bold">89.5%</p>
          <p class="cosy:text-sm cosy:opacity-70">本月品牌认知度提升</p>
        </div>
      </div>
      <div class="cosy:card cosy:bg-base-100 cosy:shadow">
        <div class="cosy:card-body">
          <h3 class="cosy:card-title cosy:text-primary">客户满意度</h3>
          <p class="cosy:text-2xl cosy:font-bold">4.8/5.0</p>
          <p class="cosy:text-sm cosy:opacity-70">基于 1,245 条反馈</p>
        </div>
      </div>
    </div>
  </div>
</DashboardLayout>

积极正面，适合健康财务类应用

默认主题演示
默认主题演示
3
管
管理员
ℹ️

默认主题

通用场景的最佳选择，使用 base-300 背景色，平衡的视觉效果

今日访问
1,234
↗︎ 12% (较昨日)
活跃用户
567
↗︎ 8% (较上周)

确认操作

您确定要执行此操作吗？
品牌主色主题演示
品牌主色主题演示
3
品
品牌经理
🎨

品牌主色主题

使用企业主色调，强化品牌识别度，适合品牌展示和企业内部系统

品牌曝光

89.5%

本月品牌认知度提升

客户满意度

4.8/5.0

基于 1,245 条反馈

确认操作

您确定要执行此操作吗？
健康管理系统
健康管理系统
3
健
健康顾问
✅

成功绿色主题

积极正面的视觉效果，适合健康管理、财务成长等正向内容展示

健康指数

92分

较上月提升 8 分

运动目标

完成

本周已达成 85%

体重管理

-2.5kg

已达预期目标

确认操作

您确定要执行此操作吗？
监控预警系统
监控预警系统
3
运
运维工程师
⚠️

警告黄色主题

谨慎的提醒色调，适合监控系统、待处理状态等需要用户注意的场景

待处理告警

12

需要立即关注

系统负载

78%

接近阈值，需监控

📊
有 3 个服务器状态异常，建议立即检查

确认操作

您确定要执行此操作吗？

 
              ---
import { DashboardLayout } from '@coffic/cosy-ui';
import type { NavItem } from '@coffic/cosy-ui';

const navItems: NavItem[] = [
  { text: '健康概览', href: '/dashboard' },
  { text: '体检报告', href: '/dashboard/reports' },
  { text: '健康计划', href: '/dashboard/plans' },
  { text: '系统设置', href: '/dashboard/settings' },
];
---

<DashboardLayout
  title="健康管理系统"
  description="成功主题适合健康、财务等正面应用"
  navItems={navItems}
  sidebarTheme="success"
  userName="健康顾问">
  <div class="cosy:space-y-4">
    <div class="cosy:alert cosy:alert-success">
      <span>✅</span>
      <div>
        <h4 class="cosy:font-semibold">成功绿色主题</h4>
        <p>积极正面的视觉效果，适合健康管理、财务成长等正向内容展示</p>
      </div>
    </div>

    <div class="cosy:grid cosy:grid-cols-1 cosy:md:grid-cols-3 cosy:gap-4">
      <div class="cosy:card cosy:bg-base-100 cosy:shadow">
        <div class="cosy:card-body">
          <h3 class="cosy:card-title cosy:text-success">健康指数</h3>
          <p class="cosy:text-2xl cosy:font-bold cosy:text-success">92分</p>
          <p class="cosy:text-sm cosy:opacity-70">较上月提升 8 分</p>
        </div>
      </div>
      <div class="cosy:card cosy:bg-base-100 cosy:shadow">
        <div class="cosy:card-body">
          <h3 class="cosy:card-title cosy:text-success">运动目标</h3>
          <p class="cosy:text-2xl cosy:font-bold cosy:text-success">完成</p>
          <p class="cosy:text-sm cosy:opacity-70">本周已达成 85%</p>
        </div>
      </div>
      <div class="cosy:card cosy:bg-base-100 cosy:shadow">
        <div class="cosy:card-body">
          <h3 class="cosy:card-title cosy:text-success">体重管理</h3>
          <p class="cosy:text-2xl cosy:font-bold cosy:text-success">-2.5kg</p>
          <p class="cosy:text-sm cosy:opacity-70">已达预期目标</p>
        </div>
      </div>
    </div>
  </div>
</DashboardLayout>

谨慎提醒，适合监控预警系统

默认主题演示
默认主题演示
3
管
管理员
ℹ️

默认主题

通用场景的最佳选择，使用 base-300 背景色，平衡的视觉效果

今日访问
1,234
↗︎ 12% (较昨日)
活跃用户
567
↗︎ 8% (较上周)

确认操作

您确定要执行此操作吗？
品牌主色主题演示
品牌主色主题演示
3
品
品牌经理
🎨

品牌主色主题

使用企业主色调，强化品牌识别度，适合品牌展示和企业内部系统

品牌曝光

89.5%

本月品牌认知度提升

客户满意度

4.8/5.0

基于 1,245 条反馈

确认操作

您确定要执行此操作吗？
健康管理系统
健康管理系统
3
健
健康顾问
✅

成功绿色主题

积极正面的视觉效果，适合健康管理、财务成长等正向内容展示

健康指数

92分

较上月提升 8 分

运动目标

完成

本周已达成 85%

体重管理

-2.5kg

已达预期目标

确认操作

您确定要执行此操作吗？
监控预警系统
监控预警系统
3
运
运维工程师
⚠️

警告黄色主题

谨慎的提醒色调，适合监控系统、待处理状态等需要用户注意的场景

待处理告警

12

需要立即关注

系统负载

78%

接近阈值，需监控

📊
有 3 个服务器状态异常，建议立即检查

确认操作

您确定要执行此操作吗？

 
              ---
import { DashboardLayout } from '@coffic/cosy-ui';
import type { NavItem } from '@coffic/cosy-ui';

const navItems: NavItem[] = [
  { text: '监控中心', href: '/dashboard' },
  { text: '告警管理', href: '/dashboard/alerts' },
  { text: '待处理事项', href: '/dashboard/pending' },
  { text: '系统配置', href: '/dashboard/settings' },
];
---

<DashboardLayout
  title="监控预警系统"
  description="警告主题适合监控、预警类系统"
  navItems={navItems}
  sidebarTheme="warning"
  userName="运维工程师">
  <div class="cosy:space-y-4">
    <div class="cosy:alert cosy:alert-warning">
      <span>⚠️</span>
      <div>
        <h4 class="cosy:font-semibold">警告黄色主题</h4>
        <p>谨慎的提醒色调，适合监控系统、待处理状态等需要用户注意的场景</p>
      </div>
    </div>

    <div class="cosy:grid cosy:grid-cols-1 cosy:md:grid-cols-2 cosy:gap-4">
      <div class="cosy:card cosy:bg-base-100 cosy:shadow">
        <div class="cosy:card-body">
          <h3 class="cosy:card-title cosy:text-warning">待处理告警</h3>
          <p class="cosy:text-2xl cosy:font-bold cosy:text-warning">12</p>
          <p class="cosy:text-sm cosy:opacity-70">需要立即关注</p>
        </div>
      </div>
      <div class="cosy:card cosy:bg-base-100 cosy:shadow">
        <div class="cosy:card-body">
          <h3 class="cosy:card-title cosy:text-warning">系统负载</h3>
          <p class="cosy:text-2xl cosy:font-bold cosy:text-warning">78%</p>
          <p class="cosy:text-sm cosy:opacity-70">接近阈值，需监控</p>
        </div>
      </div>
    </div>

    <div class="cosy:alert cosy:alert-warning">
      <span>📊</span>
      <div>有 3 个服务器状态异常，建议立即检查</div>
    </div>
  </div>
</DashboardLayout>

Sidebar Footer Custom Content

DashboardLayout supports adding custom content to the sidebar footer, which can be used to display user information, copyright information, or other important details:

展示如何在侧边栏底部显示用户信息，包括头像、姓名和职位

个人中心
个人中心
3
管
管理员
👤
这里展示了如何在侧边栏底部显示用户信息

确认操作

您确定要执行此操作吗？
管理系统
管理系统
3
📄
这里展示了如何显示版权和版本信息

确认操作

您确定要执行此操作吗？
监控面板
监控面板
3
📊
这里展示了如何显示系统状态信息

确认操作

您确定要执行此操作吗？

 
              ---
/**
 * @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: '系统设置' },
];
---

<div class="cosy:h-96">
  <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>
</div>

展示如何显示版权信息、版本号和系统状态标识

个人中心
个人中心
3
管
管理员
👤
这里展示了如何在侧边栏底部显示用户信息

确认操作

您确定要执行此操作吗？
管理系统
管理系统
3
📄
这里展示了如何显示版权和版本信息

确认操作

您确定要执行此操作吗？
监控面板
监控面板
3
📊
这里展示了如何显示系统状态信息

确认操作

您确定要执行此操作吗？

 
              ---
/**
 * @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: '系统设置' },
];
---

<div class="cosy:h-96">
  <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>
</div>

展示如何显示实时系统状态信息，如在线用户数、CPU使用率等

个人中心
个人中心
3
管
管理员
👤
这里展示了如何在侧边栏底部显示用户信息

确认操作

您确定要执行此操作吗？
管理系统
管理系统
3
📄
这里展示了如何显示版权和版本信息

确认操作

您确定要执行此操作吗？
监控面板
监控面板
3
📊
这里展示了如何显示系统状态信息

确认操作

您确定要执行此操作吗？

 
              ---
/**
 * @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: '系统设置' },
];
---

<div class="cosy:h-96">
  <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>
</div>

Main Content Area Background

DashboardLayout supports setting backgrounds for the main content area, providing rich visual effect options:

默认的透明背景，与外层背景完美融合，适合大多数常规场景

透明背景示例
透明背景示例
3

透明背景

默认的透明背景，与外层背景完美融合，适合大多数常规场景。

特点
简洁
适用性
通用

确认操作

您确定要执行此操作吗？
基础背景示例
基础背景示例
3

基础背景色

使用 base-200 浅灰色背景，营造稳重的商务氛围，适合企业管理系统。

特点
稳重
场景
商务

确认操作

您确定要执行此操作吗？
主题色背景示例
主题色背景示例
3

主题色背景

使用品牌主色作为背景，强化企业识别度，适合品牌展示和营销页面。

特点
品牌
场景
展示

确认操作

您确定要执行此操作吗？
成功色背景示例
成功色背景示例
3

成功色背景

使用成功绿色背景，传达积极正面的体验，适合健康管理、财务增长等应用。

特点
积极
场景
健康

确认操作

您确定要执行此操作吗？
信息色背景示例
信息色背景示例
3

信息色背景

使用明亮的信息蓝色背景，传达专业可信的感觉，适合数据分析和报告展示。

特点
专业
场景
分析

确认操作

您确定要执行此操作吗？
暖色渐变背景示例
暖色渐变背景示例
3

暖色渐变背景

橙色到红色再到粉色的温暖渐变，营造温馨友好的氛围，适合社交和生活类应用。

特点
温暖
场景
社交

确认操作

您确定要执行此操作吗？
冷色渐变背景示例
冷色渐变背景示例
3

冷色渐变背景

蓝色到青色再到绿色的清新渐变，营造专业现代的感觉，适合科技和创意工具。

特点
现代
场景
科技

确认操作

您确定要执行此操作吗？
日落渐变背景示例
日落渐变背景示例
3

日落渐变背景

从深蓝到橙黄的日落色彩渐变，营造浪漫温馨的黄昏氛围，适合创意和娱乐应用。

特点
浪漫
场景
创意

确认操作

您确定要执行此操作吗？

 
              ---
/**
 * @component EDashboardLayoutMainBackgroundTransparent
 * @description 展示透明背景的示例
 */

import { DashboardLayout } from '@coffic/cosy-ui';

const navItems = [
  { href: '/dashboard', icon: 'home', text: '仪表盘' },
  { href: '/dashboard/users', icon: 'users', text: '用户管理' },
  { href: '/dashboard/settings', icon: 'settings', text: '系统设置' },
];
---

<div
  class="cosy:h-96 cosy:border cosy:border-base-300 cosy:rounded cosy:overflow-hidden">
  <DashboardLayout
    title="透明背景示例"
    navItems={navItems}
    sidebarSize="sm"
    mainBackgroundTheme="transparent"
    class="cosy:h-full">
    <div class="cosy:p-6">
      <div class="cosy:card cosy:bg-base-100 cosy:shadow">
        <div class="cosy:card-body">
          <h3 class="cosy:card-title">透明背景</h3>
          <p>默认的透明背景，与外层背景完美融合，适合大多数常规场景。</p>
          <div
            class="cosy:stats cosy:stats-horizontal cosy:shadow cosy:text-xs">
            <div class="cosy:stat">
              <div class="cosy:stat-title cosy:text-xs">特点</div>
              <div class="cosy:stat-value cosy:text-sm">简洁</div>
            </div>
            <div class="cosy:stat">
              <div class="cosy:stat-title cosy:text-xs">适用性</div>
              <div class="cosy:stat-value cosy:text-sm">通用</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </DashboardLayout>
</div>

使用 base-200 浅灰色背景，营造稳重的商务氛围

透明背景示例
透明背景示例
3

透明背景

默认的透明背景，与外层背景完美融合，适合大多数常规场景。

特点
简洁
适用性
通用

确认操作

您确定要执行此操作吗？
基础背景示例
基础背景示例
3

基础背景色

使用 base-200 浅灰色背景，营造稳重的商务氛围，适合企业管理系统。

特点
稳重
场景
商务

确认操作

您确定要执行此操作吗？
主题色背景示例
主题色背景示例
3

主题色背景

使用品牌主色作为背景，强化企业识别度，适合品牌展示和营销页面。

特点
品牌
场景
展示

确认操作

您确定要执行此操作吗？
成功色背景示例
成功色背景示例
3

成功色背景

使用成功绿色背景，传达积极正面的体验，适合健康管理、财务增长等应用。

特点
积极
场景
健康

确认操作

您确定要执行此操作吗？
信息色背景示例
信息色背景示例
3

信息色背景

使用明亮的信息蓝色背景，传达专业可信的感觉，适合数据分析和报告展示。

特点
专业
场景
分析

确认操作

您确定要执行此操作吗？
暖色渐变背景示例
暖色渐变背景示例
3

暖色渐变背景

橙色到红色再到粉色的温暖渐变，营造温馨友好的氛围，适合社交和生活类应用。

特点
温暖
场景
社交

确认操作

您确定要执行此操作吗？
冷色渐变背景示例
冷色渐变背景示例
3

冷色渐变背景

蓝色到青色再到绿色的清新渐变，营造专业现代的感觉，适合科技和创意工具。

特点
现代
场景
科技

确认操作

您确定要执行此操作吗？
日落渐变背景示例
日落渐变背景示例
3

日落渐变背景

从深蓝到橙黄的日落色彩渐变，营造浪漫温馨的黄昏氛围，适合创意和娱乐应用。

特点
浪漫
场景
创意

确认操作

您确定要执行此操作吗？

 
              ---
/**
 * @component EDashboardLayoutMainBackgroundBase
 * @description 展示基础背景色的示例
 */

import { DashboardLayout } from '@coffic/cosy-ui';

const navItems = [
  { href: '/dashboard', icon: 'home', text: '仪表盘' },
  { href: '/dashboard/users', icon: 'users', text: '用户管理' },
  { href: '/dashboard/settings', icon: 'settings', text: '系统设置' },
];
---

<div
  class="cosy:h-96 cosy:border cosy:border-base-300 cosy:rounded cosy:overflow-hidden">
  <DashboardLayout
    title="基础背景示例"
    navItems={navItems}
    sidebarSize="sm"
    mainBackgroundTheme="base-200"
    class="cosy:h-full">
    <div class="cosy:p-6">
      <div class="cosy:card cosy:bg-base-100 cosy:shadow">
        <div class="cosy:card-body">
          <h3 class="cosy:card-title">基础背景色</h3>
          <p>
            使用 base-200 浅灰色背景，营造稳重的商务氛围，适合企业管理系统。
          </p>
          <div
            class="cosy:stats cosy:stats-horizontal cosy:shadow cosy:text-xs">
            <div class="cosy:stat">
              <div class="cosy:stat-title cosy:text-xs">特点</div>
              <div class="cosy:stat-value cosy:text-sm">稳重</div>
            </div>
            <div class="cosy:stat">
              <div class="cosy:stat-title cosy:text-xs">场景</div>
              <div class="cosy:stat-value cosy:text-sm">商务</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </DashboardLayout>
</div>

使用品牌主色作为背景，强化企业识别度，适合品牌展示

透明背景示例
透明背景示例
3

透明背景

默认的透明背景，与外层背景完美融合，适合大多数常规场景。

特点
简洁
适用性
通用

确认操作

您确定要执行此操作吗？
基础背景示例
基础背景示例
3

基础背景色

使用 base-200 浅灰色背景，营造稳重的商务氛围，适合企业管理系统。

特点
稳重
场景
商务

确认操作

您确定要执行此操作吗？
主题色背景示例
主题色背景示例
3

主题色背景

使用品牌主色作为背景，强化企业识别度，适合品牌展示和营销页面。

特点
品牌
场景
展示

确认操作

您确定要执行此操作吗？
成功色背景示例
成功色背景示例
3

成功色背景

使用成功绿色背景，传达积极正面的体验，适合健康管理、财务增长等应用。

特点
积极
场景
健康

确认操作

您确定要执行此操作吗？
信息色背景示例
信息色背景示例
3

信息色背景

使用明亮的信息蓝色背景，传达专业可信的感觉，适合数据分析和报告展示。

特点
专业
场景
分析

确认操作

您确定要执行此操作吗？
暖色渐变背景示例
暖色渐变背景示例
3

暖色渐变背景

橙色到红色再到粉色的温暖渐变，营造温馨友好的氛围，适合社交和生活类应用。

特点
温暖
场景
社交

确认操作

您确定要执行此操作吗？
冷色渐变背景示例
冷色渐变背景示例
3

冷色渐变背景

蓝色到青色再到绿色的清新渐变，营造专业现代的感觉，适合科技和创意工具。

特点
现代
场景
科技

确认操作

您确定要执行此操作吗？
日落渐变背景示例
日落渐变背景示例
3

日落渐变背景

从深蓝到橙黄的日落色彩渐变，营造浪漫温馨的黄昏氛围，适合创意和娱乐应用。

特点
浪漫
场景
创意

确认操作

您确定要执行此操作吗？

 
              ---
/**
 * @component EDashboardLayoutMainBackgroundPrimary
 * @description 展示主题色背景的示例
 */

import { DashboardLayout } from '@coffic/cosy-ui';

const navItems = [
  { href: '/dashboard', icon: 'home', text: '仪表盘' },
  { href: '/dashboard/users', icon: 'users', text: '用户管理' },
  { href: '/dashboard/settings', icon: 'settings', text: '系统设置' },
];
---

<div
  class="cosy:h-96 cosy:border cosy:border-base-300 cosy:rounded cosy:overflow-hidden">
  <DashboardLayout
    title="主题色背景示例"
    navItems={navItems}
    sidebarSize="sm"
    mainBackgroundTheme="primary"
    class="cosy:h-full">
    <div class="cosy:p-6">
      <div class="cosy:card cosy:bg-base-100/90 cosy:backdrop-blur cosy:shadow">
        <div class="cosy:card-body">
          <h3 class="cosy:card-title">主题色背景</h3>
          <p>使用品牌主色作为背景，强化企业识别度，适合品牌展示和营销页面。</p>
          <div
            class="cosy:stats cosy:stats-horizontal cosy:shadow cosy:text-xs">
            <div class="cosy:stat">
              <div class="cosy:stat-title cosy:text-xs">特点</div>
              <div class="cosy:stat-value cosy:text-sm">品牌</div>
            </div>
            <div class="cosy:stat">
              <div class="cosy:stat-title cosy:text-xs">场景</div>
              <div class="cosy:stat-value cosy:text-sm">展示</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </DashboardLayout>
</div>

使用成功绿色背景，传达积极正面的体验，适合健康管理应用

透明背景示例
透明背景示例
3

透明背景

默认的透明背景，与外层背景完美融合，适合大多数常规场景。

特点
简洁
适用性
通用

确认操作

您确定要执行此操作吗？
基础背景示例
基础背景示例
3

基础背景色

使用 base-200 浅灰色背景，营造稳重的商务氛围，适合企业管理系统。

特点
稳重
场景
商务

确认操作

您确定要执行此操作吗？
主题色背景示例
主题色背景示例
3

主题色背景

使用品牌主色作为背景，强化企业识别度，适合品牌展示和营销页面。

特点
品牌
场景
展示

确认操作

您确定要执行此操作吗？
成功色背景示例
成功色背景示例
3

成功色背景

使用成功绿色背景，传达积极正面的体验，适合健康管理、财务增长等应用。

特点
积极
场景
健康

确认操作

您确定要执行此操作吗？
信息色背景示例
信息色背景示例
3

信息色背景

使用明亮的信息蓝色背景，传达专业可信的感觉，适合数据分析和报告展示。

特点
专业
场景
分析

确认操作

您确定要执行此操作吗？
暖色渐变背景示例
暖色渐变背景示例
3

暖色渐变背景

橙色到红色再到粉色的温暖渐变，营造温馨友好的氛围，适合社交和生活类应用。

特点
温暖
场景
社交

确认操作

您确定要执行此操作吗？
冷色渐变背景示例
冷色渐变背景示例
3

冷色渐变背景

蓝色到青色再到绿色的清新渐变，营造专业现代的感觉，适合科技和创意工具。

特点
现代
场景
科技

确认操作

您确定要执行此操作吗？
日落渐变背景示例
日落渐变背景示例
3

日落渐变背景

从深蓝到橙黄的日落色彩渐变，营造浪漫温馨的黄昏氛围，适合创意和娱乐应用。

特点
浪漫
场景
创意

确认操作

您确定要执行此操作吗？

 
              ---
/**
 * @component EDashboardLayoutMainBackgroundSuccess
 * @description 展示成功色背景的示例
 */

import { DashboardLayout } from '@coffic/cosy-ui';

const navItems = [
  { href: '/dashboard', icon: 'home', text: '仪表盘' },
  { href: '/dashboard/users', icon: 'users', text: '用户管理' },
  { href: '/dashboard/settings', icon: 'settings', text: '系统设置' },
];
---

<div
  class="cosy:h-96 cosy:border cosy:border-base-300 cosy:rounded cosy:overflow-hidden">
  <DashboardLayout
    title="成功色背景示例"
    navItems={navItems}
    sidebarSize="sm"
    mainBackgroundTheme="success"
    class="cosy:h-full">
    <div class="cosy:p-6">
      <div class="cosy:card cosy:bg-base-100/90 cosy:backdrop-blur cosy:shadow">
        <div class="cosy:card-body">
          <h3 class="cosy:card-title">成功色背景</h3>
          <p>
            使用成功绿色背景，传达积极正面的体验，适合健康管理、财务增长等应用。
          </p>
          <div
            class="cosy:stats cosy:stats-horizontal cosy:shadow cosy:text-xs">
            <div class="cosy:stat">
              <div class="cosy:stat-title cosy:text-xs">特点</div>
              <div class="cosy:stat-value cosy:text-sm">积极</div>
            </div>
            <div class="cosy:stat">
              <div class="cosy:stat-title cosy:text-xs">场景</div>
              <div class="cosy:stat-value cosy:text-sm">健康</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </DashboardLayout>
</div>

使用明亮的信息蓝色背景，传达专业可信的感觉，适合数据分析

透明背景示例
透明背景示例
3

透明背景

默认的透明背景，与外层背景完美融合，适合大多数常规场景。

特点
简洁
适用性
通用

确认操作

您确定要执行此操作吗？
基础背景示例
基础背景示例
3

基础背景色

使用 base-200 浅灰色背景，营造稳重的商务氛围，适合企业管理系统。

特点
稳重
场景
商务

确认操作

您确定要执行此操作吗？
主题色背景示例
主题色背景示例
3

主题色背景

使用品牌主色作为背景，强化企业识别度，适合品牌展示和营销页面。

特点
品牌
场景
展示

确认操作

您确定要执行此操作吗？
成功色背景示例
成功色背景示例
3

成功色背景

使用成功绿色背景，传达积极正面的体验，适合健康管理、财务增长等应用。

特点
积极
场景
健康

确认操作

您确定要执行此操作吗？
信息色背景示例
信息色背景示例
3

信息色背景

使用明亮的信息蓝色背景，传达专业可信的感觉，适合数据分析和报告展示。

特点
专业
场景
分析

确认操作

您确定要执行此操作吗？
暖色渐变背景示例
暖色渐变背景示例
3

暖色渐变背景

橙色到红色再到粉色的温暖渐变，营造温馨友好的氛围，适合社交和生活类应用。

特点
温暖
场景
社交

确认操作

您确定要执行此操作吗？
冷色渐变背景示例
冷色渐变背景示例
3

冷色渐变背景

蓝色到青色再到绿色的清新渐变，营造专业现代的感觉，适合科技和创意工具。

特点
现代
场景
科技

确认操作

您确定要执行此操作吗？
日落渐变背景示例
日落渐变背景示例
3

日落渐变背景

从深蓝到橙黄的日落色彩渐变，营造浪漫温馨的黄昏氛围，适合创意和娱乐应用。

特点
浪漫
场景
创意

确认操作

您确定要执行此操作吗？

 
              ---
/**
 * @component EDashboardLayoutMainBackgroundInfo
 * @description 展示信息蓝色背景的示例
 */

import { DashboardLayout } from '@coffic/cosy-ui';

const navItems = [
  { href: '/dashboard', icon: 'home', text: '仪表盘' },
  { href: '/dashboard/users', icon: 'users', text: '用户管理' },
  { href: '/dashboard/settings', icon: 'settings', text: '系统设置' },
];
---

<div
  class="cosy:h-96 cosy:border cosy:border-base-300 cosy:rounded cosy:overflow-hidden">
  <DashboardLayout
    title="信息色背景示例"
    navItems={navItems}
    sidebarSize="sm"
    mainBackgroundTheme="info"
    class="cosy:h-full">
    <div class="cosy:p-6">
      <div class="cosy:card cosy:bg-base-100/90 cosy:backdrop-blur cosy:shadow">
        <div class="cosy:card-body">
          <h3 class="cosy:card-title">信息色背景</h3>
          <p>
            使用明亮的信息蓝色背景，传达专业可信的感觉，适合数据分析和报告展示。
          </p>
          <div
            class="cosy:stats cosy:stats-horizontal cosy:shadow cosy:text-xs">
            <div class="cosy:stat">
              <div class="cosy:stat-title cosy:text-xs">特点</div>
              <div class="cosy:stat-value cosy:text-sm">专业</div>
            </div>
            <div class="cosy:stat">
              <div class="cosy:stat-title cosy:text-xs">场景</div>
              <div class="cosy:stat-value cosy:text-sm">分析</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </DashboardLayout>
</div>

橙色到红色再到粉色的温暖渐变，营造温馨友好的氛围

透明背景示例
透明背景示例
3

透明背景

默认的透明背景，与外层背景完美融合，适合大多数常规场景。

特点
简洁
适用性
通用

确认操作

您确定要执行此操作吗？
基础背景示例
基础背景示例
3

基础背景色

使用 base-200 浅灰色背景，营造稳重的商务氛围，适合企业管理系统。

特点
稳重
场景
商务

确认操作

您确定要执行此操作吗？
主题色背景示例
主题色背景示例
3

主题色背景

使用品牌主色作为背景，强化企业识别度，适合品牌展示和营销页面。

特点
品牌
场景
展示

确认操作

您确定要执行此操作吗？
成功色背景示例
成功色背景示例
3

成功色背景

使用成功绿色背景，传达积极正面的体验，适合健康管理、财务增长等应用。

特点
积极
场景
健康

确认操作

您确定要执行此操作吗？
信息色背景示例
信息色背景示例
3

信息色背景

使用明亮的信息蓝色背景，传达专业可信的感觉，适合数据分析和报告展示。

特点
专业
场景
分析

确认操作

您确定要执行此操作吗？
暖色渐变背景示例
暖色渐变背景示例
3

暖色渐变背景

橙色到红色再到粉色的温暖渐变，营造温馨友好的氛围，适合社交和生活类应用。

特点
温暖
场景
社交

确认操作

您确定要执行此操作吗？
冷色渐变背景示例
冷色渐变背景示例
3

冷色渐变背景

蓝色到青色再到绿色的清新渐变，营造专业现代的感觉，适合科技和创意工具。

特点
现代
场景
科技

确认操作

您确定要执行此操作吗？
日落渐变背景示例
日落渐变背景示例
3

日落渐变背景

从深蓝到橙黄的日落色彩渐变，营造浪漫温馨的黄昏氛围，适合创意和娱乐应用。

特点
浪漫
场景
创意

确认操作

您确定要执行此操作吗？

 
              ---
/**
 * @component EDashboardLayoutMainBackgroundGradientWarm
 * @description 展示暖色渐变背景的示例
 */

import { DashboardLayout } from '@coffic/cosy-ui';

const navItems = [
  { href: '/dashboard', icon: 'home', text: '仪表盘' },
  { href: '/dashboard/users', icon: 'users', text: '用户管理' },
  { href: '/dashboard/settings', icon: 'settings', text: '系统设置' },
];
---

<div
  class="cosy:h-96 cosy:border cosy:border-base-300 cosy:rounded cosy:overflow-hidden">
  <DashboardLayout
    title="暖色渐变背景示例"
    navItems={navItems}
    sidebarSize="sm"
    mainBackgroundTheme="gradient-warm"
    class="cosy:h-full">
    <div class="cosy:p-6">
      <div class="cosy:card cosy:bg-base-100/90 cosy:backdrop-blur cosy:shadow">
        <div class="cosy:card-body">
          <h3 class="cosy:card-title">暖色渐变背景</h3>
          <p>
            橙色到红色再到粉色的温暖渐变，营造温馨友好的氛围，适合社交和生活类应用。
          </p>
          <div
            class="cosy:stats cosy:stats-horizontal cosy:shadow cosy:text-xs">
            <div class="cosy:stat">
              <div class="cosy:stat-title cosy:text-xs">特点</div>
              <div class="cosy:stat-value cosy:text-sm">温暖</div>
            </div>
            <div class="cosy:stat">
              <div class="cosy:stat-title cosy:text-xs">场景</div>
              <div class="cosy:stat-value cosy:text-sm">社交</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </DashboardLayout>
</div>

蓝色到青色再到绿色的清新渐变，营造专业现代的感觉

透明背景示例
透明背景示例
3

透明背景

默认的透明背景，与外层背景完美融合，适合大多数常规场景。

特点
简洁
适用性
通用

确认操作

您确定要执行此操作吗？
基础背景示例
基础背景示例
3

基础背景色

使用 base-200 浅灰色背景，营造稳重的商务氛围，适合企业管理系统。

特点
稳重
场景
商务

确认操作

您确定要执行此操作吗？
主题色背景示例
主题色背景示例
3

主题色背景

使用品牌主色作为背景，强化企业识别度，适合品牌展示和营销页面。

特点
品牌
场景
展示

确认操作

您确定要执行此操作吗？
成功色背景示例
成功色背景示例
3

成功色背景

使用成功绿色背景，传达积极正面的体验，适合健康管理、财务增长等应用。

特点
积极
场景
健康

确认操作

您确定要执行此操作吗？
信息色背景示例
信息色背景示例
3

信息色背景

使用明亮的信息蓝色背景，传达专业可信的感觉，适合数据分析和报告展示。

特点
专业
场景
分析

确认操作

您确定要执行此操作吗？
暖色渐变背景示例
暖色渐变背景示例
3

暖色渐变背景

橙色到红色再到粉色的温暖渐变，营造温馨友好的氛围，适合社交和生活类应用。

特点
温暖
场景
社交

确认操作

您确定要执行此操作吗？
冷色渐变背景示例
冷色渐变背景示例
3

冷色渐变背景

蓝色到青色再到绿色的清新渐变，营造专业现代的感觉，适合科技和创意工具。

特点
现代
场景
科技

确认操作

您确定要执行此操作吗？
日落渐变背景示例
日落渐变背景示例
3

日落渐变背景

从深蓝到橙黄的日落色彩渐变，营造浪漫温馨的黄昏氛围，适合创意和娱乐应用。

特点
浪漫
场景
创意

确认操作

您确定要执行此操作吗？

 
              ---
/**
 * @component EDashboardLayoutMainBackgroundGradientCool
 * @description 展示冷色渐变背景的示例
 */

import { DashboardLayout } from '@coffic/cosy-ui';

const navItems = [
  { href: '/dashboard', icon: 'home', text: '仪表盘' },
  { href: '/dashboard/users', icon: 'users', text: '用户管理' },
  { href: '/dashboard/settings', icon: 'settings', text: '系统设置' },
];
---

<div
  class="cosy:h-96 cosy:border cosy:border-base-300 cosy:rounded cosy:overflow-hidden">
  <DashboardLayout
    title="冷色渐变背景示例"
    navItems={navItems}
    sidebarSize="sm"
    mainBackgroundTheme="gradient-cool"
    class="cosy:h-full">
    <div class="cosy:p-6">
      <div class="cosy:card cosy:bg-base-100/90 cosy:backdrop-blur cosy:shadow">
        <div class="cosy:card-body">
          <h3 class="cosy:card-title">冷色渐变背景</h3>
          <p>
            蓝色到青色再到绿色的清新渐变，营造专业现代的感觉，适合科技和创意工具。
          </p>
          <div
            class="cosy:stats cosy:stats-horizontal cosy:shadow cosy:text-xs">
            <div class="cosy:stat">
              <div class="cosy:stat-title cosy:text-xs">特点</div>
              <div class="cosy:stat-value cosy:text-sm">现代</div>
            </div>
            <div class="cosy:stat">
              <div class="cosy:stat-title cosy:text-xs">场景</div>
              <div class="cosy:stat-value cosy:text-sm">科技</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </DashboardLayout>
</div>

从深蓝到橙黄的日落色彩渐变，营造浪漫温馨的黄昏氛围

透明背景示例
透明背景示例
3

透明背景

默认的透明背景，与外层背景完美融合，适合大多数常规场景。

特点
简洁
适用性
通用

确认操作

您确定要执行此操作吗？
基础背景示例
基础背景示例
3

基础背景色

使用 base-200 浅灰色背景，营造稳重的商务氛围，适合企业管理系统。

特点
稳重
场景
商务

确认操作

您确定要执行此操作吗？
主题色背景示例
主题色背景示例
3

主题色背景

使用品牌主色作为背景，强化企业识别度，适合品牌展示和营销页面。

特点
品牌
场景
展示

确认操作

您确定要执行此操作吗？
成功色背景示例
成功色背景示例
3

成功色背景

使用成功绿色背景，传达积极正面的体验，适合健康管理、财务增长等应用。

特点
积极
场景
健康

确认操作

您确定要执行此操作吗？
信息色背景示例
信息色背景示例
3

信息色背景

使用明亮的信息蓝色背景，传达专业可信的感觉，适合数据分析和报告展示。

特点
专业
场景
分析

确认操作

您确定要执行此操作吗？
暖色渐变背景示例
暖色渐变背景示例
3

暖色渐变背景

橙色到红色再到粉色的温暖渐变，营造温馨友好的氛围，适合社交和生活类应用。

特点
温暖
场景
社交

确认操作

您确定要执行此操作吗？
冷色渐变背景示例
冷色渐变背景示例
3

冷色渐变背景

蓝色到青色再到绿色的清新渐变，营造专业现代的感觉，适合科技和创意工具。

特点
现代
场景
科技

确认操作

您确定要执行此操作吗？
日落渐变背景示例
日落渐变背景示例
3

日落渐变背景

从深蓝到橙黄的日落色彩渐变，营造浪漫温馨的黄昏氛围，适合创意和娱乐应用。

特点
浪漫
场景
创意

确认操作

您确定要执行此操作吗？

 
              ---
/**
 * @component EDashboardLayoutMainBackgroundGradientSunset
 * @description 展示日落渐变背景的示例
 */

import { DashboardLayout } from '@coffic/cosy-ui';

const navItems = [
  { href: '/dashboard', icon: 'home', text: '仪表盘' },
  { href: '/dashboard/users', icon: 'users', text: '用户管理' },
  { href: '/dashboard/settings', icon: 'settings', text: '系统设置' },
];
---

<div
  class="cosy:h-96 cosy:border cosy:border-base-300 cosy:rounded cosy:overflow-hidden">
  <DashboardLayout
    title="日落渐变背景示例"
    navItems={navItems}
    sidebarSize="sm"
    mainBackgroundTheme="gradient-sunset"
    class="cosy:h-full">
    <div class="cosy:p-6">
      <div class="cosy:card cosy:bg-base-100/90 cosy:backdrop-blur cosy:shadow">
        <div class="cosy:card-body">
          <h3 class="cosy:card-title">日落渐变背景</h3>
          <p>
            从深蓝到橙黄的日落色彩渐变，营造浪漫温馨的黄昏氛围，适合创意和娱乐应用。
          </p>
          <div
            class="cosy:stats cosy:stats-horizontal cosy:shadow cosy:text-xs">
            <div class="cosy:stat">
              <div class="cosy:stat-title cosy:text-xs">特点</div>
              <div class="cosy:stat-value cosy:text-sm">浪漫</div>
            </div>
            <div class="cosy:stat">
              <div class="cosy:stat-title cosy:text-xs">场景</div>
              <div class="cosy:stat-value cosy:text-sm">创意</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </DashboardLayout>
</div>

Toast Notification System

DashboardLayout has a built-in complete Toast notification system that can use global notification functionality without additional configuration:

// Simple usage
showToast('Operation successful!');

// Usage with type
showToast({
  message: 'Data saved successfully',
  type: 'success',
  duration: 3000
});

// Four message types
showToast({ message: 'Operation successful', type: 'success' });
showToast({ message: 'Network error', type: 'error' });
showToast({ message: 'Please note', type: 'warning' });
showToast({ message: 'System message', type: 'info' });

// Manual control
const toastId = showToast('Processing...');
setTimeout(() => closeToast(toastId), 2000);

// Clear all notifications
clearAllToasts();

Toast Features:

  • ✅ Out of the box - DashboardLayout automatically enables, no additional configuration required
  • 🎯 Four types - success, error, warning, info
  • ⏱️ Auto-dismiss - Support for custom display duration
  • 🎨 Elegant animations - Smooth slide-in and slide-out effects
  • 🔧 Batch management - Support for displaying multiple notifications simultaneously and batch clearing

Confirm Dialog

DashboardLayout has a built-in confirm dialog functionality for important action confirmation:

// Trigger confirm dialog
document.getElementById('dashboard-confirm').showModal();

// Handle confirmation event
document.addEventListener('confirm-dialog-confirm', (e) => {
  const { dialogId } = e.detail;
  if (dialogId === 'dashboard-confirm') {
    // Handle confirmation action
    console.log('User confirmed the action');
  }
});

Usage Methods:

  1. Trigger via button:
<button data-confirm-dialog-target="dashboard-confirm">
  Delete
</button>
  1. Trigger via navigation item:
const navItems = [
  {
    text: 'Logout',
    href: '#',
    icon: 'logout',
    onClick: "document.getElementById('dashboard-confirm').showModal()"
  }
];

Confirm Dialog Features:

  • ✅ Out of the box - DashboardLayout automatically enables, no additional configuration required
  • 🎯 Unified Experience - Provides consistent confirmation interaction pattern
  • ⌨️ Keyboard Support - Supports keyboard operation and Esc to close
  • 🎨 Elegant Animations - Smooth fade-in and fade-out effects
  • 🔧 Customizable - Supports custom title, message, and button text

Props Reference

DashboardLayout Props

PropertyTypeRequiredDefaultDescription
titlestring✅-Page title
descriptionstring❌-Page description
systemNamestring❌“Management System”System name displayed in sidebar
navItemsNavItem[]✅-Navigation items array
userNamestring❌-Username displayed in top navbar
userAvatarstring❌-User avatar URL
userMenuItemsUserMenuItem[]❌Default menuUser dropdown menu items with auto icon matching
sidebarCollapsedboolean❌falseWhether to collapse sidebar
sidebarSize'sm' | 'md' | 'lg' | 'xl'❌'md'Sidebar size configuration
sidebarThemeSidebarTheme❌'default'Sidebar theme color
mainBackgroundThemeMainBackgroundTheme❌'transparent'Main content area background theme
enableToastboolean❌trueWhether to enable Toast notification functionality
enableConfirmDialogboolean❌trueWhether to enable confirm dialog functionality
headastroHTML.JSX.Element❌-Custom head content
classstring❌-Page class name
class:listany❌-Class list
interface NavItem {
  href: string;           // Link URL
  icon?: string;          // Icon name, optional, supports auto-matching
  text: string;           // Display text
  badge?: string | number; // Optional badge display
  items?: NavItem[];      // Sub-menu items
}

UserMenuItem Interface

interface UserMenuItem {
  href: string;           // Link URL
  text: string;           // Display text
  icon?: string;          // Icon name, optional, supports auto-matching
}

Automatic Icon Matching

The component supports automatic icon matching based on href paths, including:

Navigation Related:

  • dashboard, home, index → 🏠 Home icon
  • user, profile, account → 👤 User icon
  • users, member, team → 👥 Users icon
  • settings, config, admin → ⚙️ Settings icon

Function Related:

  • chart, analytics, report → 📊 Chart icon
  • document, doc, file → 📄 Document icon
  • calendar, schedule, event → 📅 Calendar icon
  • notification → 🔔 Notification icon
  • message, chat → 💬 Message icon
  • search, find → 🔍 Search icon
  • logout, signout, exit → 🚪 Logout icon
  • help, support → ❓ Help icon

Usage Instructions:

  • If an icon attribute is explicitly specified, the specified icon will be used first
  • If no icon is specified, the system will automatically match icons based on the href path
  • For NavItem, the folder icon is used when matching fails
  • For UserMenuItem, the user icon is used when matching fails