Dashboard Layout

简介

DashboardLayout 组件适用于管理后台的布局，包含侧边栏导航和顶部导航栏。提供了完整的管理界面框架，包括响应式设计和暗色主题支持。

组件特性：

🏗️ 完整框架 - 提供侧边栏、顶部导航栏和主内容区的完整布局
📱 响应式设计 - 在不同设备上提供良好的用户体验
🎨 daisyUI样式 - 使用daisyUI组件库提供一致的设计风格
🔧 高度可定制 - 支持自定义导航项、系统名称和用户信息
💾 状态保持 - 记住用户的侧边栏折叠状态
🌙 主题支持 - 完整支持明暗主题切换
🔔 内置通知 - 集成 Toast 通知系统，提供统一的消息提示体验
🔒 确认对话框 - 内置确认对话框，用于重要操作的二次确认

基础用法

最简单的仪表盘布局使用方式：

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

仪表盘布局示例

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>

自定义样式

通过class属性自定义仪表盘的外观样式：

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

自定义样式仪表盘

👥

总用户数

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支持四种不同的侧边栏尺寸，适应不同的设计需求：

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

侧边栏尺寸 - SM

当前配置

侧边栏尺寸

实际宽度

12rem (192px)

适用场景

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

侧边栏尺寸 - MD

当前配置

侧边栏尺寸

实际宽度

16rem (256px)

适用场景

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

侧边栏尺寸 - LG

当前配置

侧边栏尺寸

实际宽度

18rem (288px)

适用场景

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

侧边栏尺寸 - XL

当前配置

侧边栏尺寸

实际宽度

20rem (320px)

适用场景

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

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

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

侧边栏尺寸 - SM

当前配置

侧边栏尺寸

实际宽度

12rem (192px)

适用场景

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

侧边栏尺寸 - MD

当前配置

侧边栏尺寸

实际宽度

16rem (256px)

适用场景

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

侧边栏尺寸 - LG

当前配置

侧边栏尺寸

实际宽度

18rem (288px)

适用场景

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

侧边栏尺寸 - XL

当前配置

侧边栏尺寸

实际宽度

20rem (320px)

适用场景

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

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

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

侧边栏尺寸 - SM

当前配置

侧边栏尺寸

实际宽度

12rem (192px)

适用场景

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

侧边栏尺寸 - MD

当前配置

侧边栏尺寸

实际宽度

16rem (256px)

适用场景

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

侧边栏尺寸 - LG

当前配置

侧边栏尺寸

实际宽度

18rem (288px)

适用场景

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

侧边栏尺寸 - XL

当前配置

侧边栏尺寸

实际宽度

20rem (320px)

适用场景

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

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

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

侧边栏尺寸 - SM

当前配置

侧边栏尺寸

实际宽度

12rem (192px)

适用场景

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

侧边栏尺寸 - MD

当前配置

侧边栏尺寸

实际宽度

16rem (256px)

适用场景

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

侧边栏尺寸 - LG

当前配置

侧边栏尺寸

实际宽度

18rem (288px)

适用场景

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

侧边栏尺寸 - XL

当前配置

侧边栏尺寸

实际宽度

20rem (320px)

适用场景

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

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

侧边栏主题

DashboardLayout支持10种不同的侧边栏主题色彩，满足各种应用场景的视觉需求：

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

默认主题演示

ℹ️

默认主题

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

今日访问

1,234

↗︎ 12% (较昨日)

活跃用户

567

↗︎ 8% (较上周)

品牌主色主题演示

🎨

品牌主色主题

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

品牌曝光

89.5%

本月品牌认知度提升

客户满意度

4.8/5.0

基于 1,245 条反馈

健康管理系统

✅

成功绿色主题

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

健康指数

92分

较上月提升 8 分

运动目标

完成

本周已达成 85%

体重管理

-2.5kg

已达预期目标

监控预警系统

⚠️

警告黄色主题

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

待处理告警

需要立即关注

系统负载

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>

强调品牌特色，醒目突出

默认主题演示

ℹ️

默认主题

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

今日访问

1,234

↗︎ 12% (较昨日)

活跃用户

567

↗︎ 8% (较上周)

品牌主色主题演示

🎨

品牌主色主题

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

品牌曝光

89.5%

本月品牌认知度提升

客户满意度

4.8/5.0

基于 1,245 条反馈

健康管理系统

✅

成功绿色主题

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

健康指数

92分

较上月提升 8 分

运动目标

完成

本周已达成 85%

体重管理

-2.5kg

已达预期目标

监控预警系统

⚠️

警告黄色主题

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

待处理告警

需要立即关注

系统负载

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>

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

默认主题演示

ℹ️

默认主题

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

今日访问

1,234

↗︎ 12% (较昨日)

活跃用户

567

↗︎ 8% (较上周)

品牌主色主题演示

🎨

品牌主色主题

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

品牌曝光

89.5%

本月品牌认知度提升

客户满意度

4.8/5.0

基于 1,245 条反馈

健康管理系统

✅

成功绿色主题

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

健康指数

92分

较上月提升 8 分

运动目标

完成

本周已达成 85%

体重管理

-2.5kg

已达预期目标

监控预警系统

⚠️

警告黄色主题

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

待处理告警

需要立即关注

系统负载

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>

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

默认主题演示

ℹ️

默认主题

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

今日访问

1,234

↗︎ 12% (较昨日)

活跃用户

567

↗︎ 8% (较上周)

品牌主色主题演示

🎨

品牌主色主题

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

品牌曝光

89.5%

本月品牌认知度提升

客户满意度

4.8/5.0

基于 1,245 条反馈

健康管理系统

✅

成功绿色主题

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

健康指数

92分

较上月提升 8 分

运动目标

完成

本周已达成 85%

体重管理

-2.5kg

已达预期目标

监控预警系统

⚠️

警告黄色主题

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

待处理告警

需要立即关注

系统负载

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>

侧边栏底部自定义内容

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

<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>

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

个人中心

👤

这里展示了如何在侧边栏底部显示用户信息

管理系统

📄

这里展示了如何显示版权和版本信息

监控面板

📊

这里展示了如何显示系统状态信息

              ---
/**
 * @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使用率等

个人中心

👤

这里展示了如何在侧边栏底部显示用户信息

管理系统

📄

这里展示了如何显示版权和版本信息

监控面板

📊

这里展示了如何显示系统状态信息

              ---
/**
 * @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>

主内容区域背景

DashboardLayout 支持为主内容区域设置背景，提供丰富的视觉效果选择：

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

透明背景示例

透明背景

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

特点

简洁

适用性

通用

基础背景示例

基础背景色

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

特点

稳重

场景

商务

主题色背景示例

主题色背景

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

特点

品牌

场景

展示

成功色背景示例

成功色背景

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

特点

积极

场景

健康

信息色背景示例

信息色背景

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

特点

专业

场景

分析

暖色渐变背景示例

暖色渐变背景

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

特点

温暖

场景

社交

冷色渐变背景示例

冷色渐变背景

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

特点

现代

场景

科技

日落渐变背景示例

日落渐变背景

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

特点

浪漫

场景

创意

              ---
/**
 * @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 浅灰色背景，营造稳重的商务氛围

透明背景示例

透明背景

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

特点

简洁

适用性

通用

基础背景示例

基础背景色

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

特点

稳重

场景

商务

主题色背景示例

主题色背景

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

特点

品牌

场景

展示

成功色背景示例

成功色背景

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

特点

积极

场景

健康

信息色背景示例

信息色背景

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

特点

专业

场景

分析

暖色渐变背景示例

暖色渐变背景

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

特点

温暖

场景

社交

冷色渐变背景示例

冷色渐变背景

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

特点

现代

场景

科技

日落渐变背景示例

日落渐变背景

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

特点

浪漫

场景

创意

              ---
/**
 * @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>

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

透明背景示例

透明背景

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

特点

简洁

适用性

通用

基础背景示例

基础背景色

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

特点

稳重

场景

商务

主题色背景示例

主题色背景

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

特点

品牌

场景

展示

成功色背景示例

成功色背景

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

特点

积极

场景

健康

信息色背景示例

信息色背景

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

特点

专业

场景

分析

暖色渐变背景示例

暖色渐变背景

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

特点

温暖

场景

社交

冷色渐变背景示例

冷色渐变背景

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

特点

现代

场景

科技

日落渐变背景示例

日落渐变背景

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

特点

浪漫

场景

创意

              ---
/**
 * @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>

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

透明背景示例

透明背景

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

特点

简洁

适用性

通用

基础背景示例

基础背景色

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

特点

稳重

场景

商务

主题色背景示例

主题色背景

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

特点

品牌

场景

展示

成功色背景示例

成功色背景

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

特点

积极

场景

健康

信息色背景示例

信息色背景

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

特点

专业

场景

分析

暖色渐变背景示例

暖色渐变背景

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

特点

温暖

场景

社交

冷色渐变背景示例

冷色渐变背景

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

特点

现代

场景

科技

日落渐变背景示例

日落渐变背景

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

特点

浪漫

场景

创意

              ---
/**
 * @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>

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

透明背景示例

透明背景

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

特点

简洁

适用性

通用

基础背景示例

基础背景色

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

特点

稳重

场景

商务

主题色背景示例

主题色背景

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

特点

品牌

场景

展示

成功色背景示例

成功色背景

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

特点

积极

场景

健康

信息色背景示例

信息色背景

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

特点

专业

场景

分析

暖色渐变背景示例

暖色渐变背景

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

特点

温暖

场景

社交

冷色渐变背景示例

冷色渐变背景

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

特点

现代

场景

科技

日落渐变背景示例

日落渐变背景

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

特点

浪漫

场景

创意

              ---
/**
 * @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>

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

透明背景示例

透明背景

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

特点

简洁

适用性

通用

基础背景示例

基础背景色

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

特点

稳重

场景

商务

主题色背景示例

主题色背景

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

特点

品牌

场景

展示

成功色背景示例

成功色背景

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

特点

积极

场景

健康

信息色背景示例

信息色背景

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

特点

专业

场景

分析

暖色渐变背景示例

暖色渐变背景

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

特点

温暖

场景

社交

冷色渐变背景示例

冷色渐变背景

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

特点

现代

场景

科技

日落渐变背景示例

日落渐变背景

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

特点

浪漫

场景

创意

              ---
/**
 * @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>

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

透明背景示例

透明背景

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

特点

简洁

适用性

通用

基础背景示例

基础背景色

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

特点

稳重

场景

商务

主题色背景示例

主题色背景

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

特点

品牌

场景

展示

成功色背景示例

成功色背景

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

特点

积极

场景

健康

信息色背景示例

信息色背景

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

特点

专业

场景

分析

暖色渐变背景示例

暖色渐变背景

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

特点

温暖

场景

社交

冷色渐变背景示例

冷色渐变背景

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

特点

现代

场景

科技

日落渐变背景示例

日落渐变背景

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

特点

浪漫

场景

创意

              ---
/**
 * @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>

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

透明背景示例

透明背景

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

特点

简洁

适用性

通用

基础背景示例

基础背景色

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

特点

稳重

场景

商务

主题色背景示例

主题色背景

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

特点

品牌

场景

展示

成功色背景示例

成功色背景

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

特点

积极

场景

健康

信息色背景示例

信息色背景

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

特点

专业

场景

分析

暖色渐变背景示例

暖色渐变背景

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

特点

温暖

场景

社交

冷色渐变背景示例

冷色渐变背景

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

特点

现代

场景

科技

日落渐变背景示例

日落渐变背景

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

特点

浪漫

场景

创意

              ---
/**
 * @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 通知系统

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();

Toast 特性：

✅ 开箱即用 - DashboardLayout 自动启用，无需额外配置
🎯 四种类型 - success、error、warning、info
⏱️ 自动消失 - 支持自定义显示时长
🎨 优雅动画 - 平滑的滑入滑出效果
🔧 批量管理 - 支持同时显示多个通知和批量清除

确认对话框

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>

确认对话框特性：

✅ 开箱即用 - DashboardLayout 自动启用，无需额外配置
🎯 统一体验 - 提供一致的确认交互模式
⌨️ 键盘支持 - 支持键盘操作和 Esc 关闭
🎨 优雅动画 - 平滑的淡入淡出效果
🔧 可定制 - 支持自定义标题、消息和按钮文本

Props 参考

DashboardLayout Props

属性	类型	必需	默认值	描述
`title`	`string`	✅	-	页面标题
`description`	`string`	❌	-	页面描述
`systemName`	`string`	❌	“管理系统”	系统名称，显示在侧边栏
`navItems`	`NavItem[]`	✅	-	导航项目数组
`userName`	`string`	❌	-	用户名，显示在顶部导航栏
`userAvatar`	`string`	❌	-	用户头像URL
`userMenuItems`	`UserMenuItem[]`	❌	默认菜单	用户下拉菜单项，支持自动图标匹配
`sidebarCollapsed`	`boolean`	❌	`false`	是否折叠侧边栏
`sidebarSize`	`'sm' \| 'md' \| 'lg' \| 'xl'`	❌	`'md'`	侧边栏尺寸大小
`sidebarTheme`	`SidebarTheme`	❌	`'default'`	侧边栏主题色彩
`mainBackgroundTheme`	`MainBackgroundTheme`	❌	`'transparent'`	主内容区域背景主题
`enableToast`	`boolean`	❌	`true`	是否启用 Toast 通知功能
`enableConfirmDialog`	`boolean`	❌	`true`	是否启用确认对话框功能
`head`	`astroHTML.JSX.Element`	❌	-	自定义头部内容
`class`	`string`	❌	-	页面类名
`class:list`	`any`	❌	-	类名列表

NavItem 接口

interface NavItem {
  href: string;           // 链接地址
  icon?: string;          // 图标名称，可选，支持自动匹配
  text: string;           // 显示文本
  badge?: string | number; // 可选的徽章显示
  items?: NavItem[];      // 子菜单项
}

UserMenuItem 接口

interface UserMenuItem {
  href: string;           // 链接地址
  text: string;           // 显示文本
  icon?: string;          // 图标名称，可选，支持自动匹配
}

自动图标匹配

组件支持根据 href 路径自动匹配合适的图标，包括：

导航相关：

dashboard, home, index → 🏠 首页图标
user, profile, account → 👤 用户图标
users, member, team → 👥 用户组图标
settings, config, admin → ⚙️ 设置图标

功能相关：

chart, analytics, report → 📊 图表图标
document, doc, file → 📄 文档图标
calendar, schedule, event → 📅 日历图标
notification → 🔔 通知图标
message, chat → 💬 消息图标
search, find → 🔍 搜索图标
logout, signout, exit → 🚪 退出图标
help, support → ❓ 帮助图标

使用说明：

如果显式指定了 icon 属性，将优先使用指定的图标
如果未指定 icon，系统会根据 href 路径自动匹配图标
对于 NavItem，匹配失败时使用 folder 图标
对于 UserMenuItem，匹配失败时使用 user 图标