@coffic/cosy-ui 0.7.2 → 0.8.6

package/dist/layout-dashboard/DashboardLayout.astro

@@ -1,671 +0,0 @@
----
-/**
- * @component DashboardLayout
- *
- * @description
- * DashboardLayout 组件适用于管理后台的布局，包含侧边栏导航和顶部导航栏。
- * 提供了完整的管理界面框架，包括响应式设计和暗色主题支持。
- *
- * @design
- * 设计理念：
- * 1. 清晰的信息层次 - 通过侧边栏和顶部导航提供明确的导航结构
- * 2. 响应式布局 - 在不同设备上提供良好的用户体验
- * 3. 可定制性 - 支持自定义导航项、系统名称和用户信息
- * 4. 状态保持 - 记住用户的侧边栏折叠状态
- *
- * @example
- * ```astro
- * ---
- * import DashboardLayout from '../layouts/DashboardLayout.astro';
- *
- * const navItems = [
- *   { href: "/dashboard", icon: "home", text: "仪表盘" },
- *   { href: "/dashboard/users", icon: "user", text: "用户管理" },
- *   { href: "/dashboard/settings", icon: "settings", text: "系统设置" }
- * ];
- * ---
- *
- * <DashboardLayout
- *   title="管理后台"
- *   navItems={navItems}
- *   userName="管理员"
- * >
- *   <h1>仪表盘内容</h1>
- *   <p>这是仪表盘的主要内容</p>
- * </DashboardLayout>
- * ```
- */
-
-import { BaseLayout } from '../index';
-import '../style.ts';
-
-export interface NavItem {
-	href: string;
-	icon: string;
-	text: string;
-	badge?: string | number;
-	items?: NavItem[];
-}
-
-export interface Props {
-	/**
-	 * 页面标题
-	 */
-	title: string;
-
-	/**
-	 * 页面描述
-	 */
-	description?: string;
-
-	/**
-	 * 系统名称
-	 * @default "管理系统"
-	 */
-	systemName?: string;
-
-	/**
-	 * 导航项目
-	 */
-	navItems: NavItem[];
-
-	/**
-	 * 用户名
-	 */
-	userName?: string;
-
-	/**
-	 * 用户头像
-	 */
-	userAvatar?: string;
-
-	/**
-	 * 是否折叠侧边栏
-	 * @default false
-	 */
-	sidebarCollapsed?: boolean;
-
-	/**
-	 * 自定义头部内容
-	 */
-	head?: astroHTML.JSX.Element;
-
-	/**
-	 * 页面类名
-	 */
-	class?: string;
-
-	/**
-	 * 类名列表
-	 */
-	'class:list'?: any;
-}
-
-const {
-	title,
-	description,
-	systemName = '管理系统',
-	navItems,
-	userName,
-	userAvatar,
-	sidebarCollapsed = false,
-	head,
-	class: className,
-	'class:list': classList,
-	...rest
-} = Astro.props;
-
-const currentPath = Astro.url.pathname;
-
-// 图标映射
-const iconMap: Record<string, string> = {
-	home: '🏠',
-	user: '👤',
-	users: '👥',
-	settings: '⚙️',
-	chart: '📊',
-	document: '📄',
-	calendar: '📅',
-	notification: '🔔',
-	message: '💬',
-	search: '🔍',
-	star: '⭐',
-	heart: '❤️',
-	menu: '☰',
-};
----
-
-<BaseLayout
-	title={title}
-	description={description || ''}
-	head={head}
-	keywords=""
-	author=""
-	robots=""
-	class="dashboard-layout"
-	{...rest}>
-	<div class:list={['dashboard-container', { collapsed: sidebarCollapsed }]}>
-		<!-- 侧边栏 -->
-		<aside class="sidebar">
-			<div class="sidebar-header">
-				<a href="/dashboard" class="logo">
-					<span class="logo-icon">⚡</span>
-					<span class="logo-text">{systemName}</span>
-				</a>
-				<button class="collapse-button" id="collapse-sidebar">
-					<span class="collapse-icon">{iconMap.menu}</span>
-				</button>
-			</div>
-
-			<nav class="sidebar-nav">
-				<ul class="nav-list">
-					{
-						navItems.map((item: NavItem) => {
-							const isActive =
-								currentPath === item.href ||
-								(item.items && item.items.some((subitem: NavItem) => currentPath === subitem.href));
-
-							return (
-								<li class:list={['nav-item', { active: isActive }]}>
-									<a href={item.href} class="nav-link">
-										<span class="nav-icon">{iconMap[item.icon] || '📁'}</span>
-										<span class="nav-text">{item.text}</span>
-										{item.badge && <span class="nav-badge">{item.badge}</span>}
-									</a>
-
-									{item.items && (
-										<ul class="subnav-list">
-											{item.items.map((subitem: NavItem) => {
-												const isSubActive = currentPath === subitem.href;
-												return (
-													<li class:list={['subnav-item', { active: isSubActive }]}>
-														<a href={subitem.href} class="subnav-link">
-															<span class="subnav-icon">{iconMap[subitem.icon] || '📄'}</span>
-															<span class="subnav-text">{subitem.text}</span>
-															{subitem.badge && <span class="subnav-badge">{subitem.badge}</span>}
-														</a>
-													</li>
-												);
-											})}
-										</ul>
-									)}
-								</li>
-							);
-						})
-					}
-				</ul>
-			</nav>
-		</aside>
-
-		<!-- 主内容区 -->
-		<div class="main-content">
-			<!-- 顶部导航栏 -->
-			<header class="top-navbar">
-				<div class="navbar-left">
-					<button class="menu-button" id="toggle-sidebar">
-						<span class="menu-icon">{iconMap.menu}</span>
-					</button>
-
-					<div class="breadcrumb">
-						<span class="breadcrumb-item">{title}</span>
-					</div>
-				</div>
-
-				<div class="navbar-right">
-					<div class="search-box">
-						<input type="text" placeholder="搜索..." class="search-input" />
-						<span class="search-icon">{iconMap.search}</span>
-					</div>
-
-					<button class="notification-button">
-						<span class="notification-icon">{iconMap.notification}</span>
-						<span class="notification-badge">3</span>
-					</button>
-
-					{
-						userName && (
-							<div class="user-dropdown">
-								<button class="user-button">
-									{userAvatar ? (
-										<img src={userAvatar} alt={userName} class="user-avatar" />
-									) : (
-										<span class="user-avatar-placeholder">{userName.charAt(0)}</span>
-									)}
-									<span class="user-name">{userName}</span>
-								</button>
-							</div>
-						)
-					}
-				</div>
-			</header>
-
-			<!-- 页面内容 -->
-			<main class="page-content">
-				<div class="content-container">
-					<slot />
-				</div>
-			</main>
-		</div>
-	</div>
-</BaseLayout>
-
-<script>
-	// 侧边栏折叠/展开功能
-	document.addEventListener('DOMContentLoaded', () => {
-		const toggleSidebarBtn = document.getElementById('toggle-sidebar');
-		const collapseSidebarBtn = document.getElementById('collapse-sidebar');
-		const dashboardContainer = document.querySelector('.dashboard-container');
-
-		if (toggleSidebarBtn && dashboardContainer) {
-			toggleSidebarBtn.addEventListener('click', () => {
-				dashboardContainer.classList.toggle('collapsed');
-				// 保存状态到本地存储
-				localStorage.setItem(
-					'sidebarCollapsed',
-					dashboardContainer.classList.contains('collapsed') ? 'true' : 'false'
-				);
-			});
-		}
-
-		if (collapseSidebarBtn && dashboardContainer) {
-			collapseSidebarBtn.addEventListener('click', () => {
-				dashboardContainer.classList.toggle('collapsed');
-				// 保存状态到本地存储
-				localStorage.setItem(
-					'sidebarCollapsed',
-					dashboardContainer.classList.contains('collapsed') ? 'true' : 'false'
-				);
-			});
-		}
-
-		// 从本地存储恢复状态
-		const savedState = localStorage.getItem('sidebarCollapsed');
-		if (savedState === 'true' && dashboardContainer) {
-			dashboardContainer.classList.add('collapsed');
-		}
-	});
-</script>
-
-<style>
-	/* 基础布局 */
-	.dashboard-layout {
-		min-height: 100vh;
-		background-color: #f5f7fa;
-	}
-
-	.dashboard-container {
-		display: flex;
-		min-height: 100vh;
-	}
-
-	/* 侧边栏 */
-	.sidebar {
-		width: 260px;
-		background-color: #1e293b;
-		color: #e2e8f0;
-		transition: width 0.3s ease;
-		display: flex;
-		flex-direction: column;
-		position: fixed;
-		top: 0;
-		left: 0;
-		bottom: 0;
-		z-index: 50;
-		overflow-y: auto;
-	}
-
-	.sidebar-header {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		padding: 1rem;
-		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-	}
-
-	.logo {
-		display: flex;
-		align-items: center;
-		gap: 0.75rem;
-		color: #fff;
-		text-decoration: none;
-	}
-
-	.logo-icon {
-		font-size: 1.5rem;
-	}
-
-	.logo-text {
-		font-size: 1.25rem;
-		font-weight: 600;
-		white-space: nowrap;
-	}
-
-	.collapse-button {
-		background: none;
-		border: none;
-		color: #e2e8f0;
-		cursor: pointer;
-		padding: 0.5rem;
-		border-radius: 0.375rem;
-	}
-
-	.collapse-button:hover {
-		background-color: rgba(255, 255, 255, 0.1);
-	}
-
-	.sidebar-nav {
-		flex: 1;
-		padding: 1rem 0;
-	}
-
-	.nav-list {
-		list-style: none;
-		padding: 0;
-		margin: 0;
-	}
-
-	.nav-item {
-		margin-bottom: 0.25rem;
-	}
-
-	.nav-link {
-		display: flex;
-		align-items: center;
-		padding: 0.75rem 1rem;
-		color: #e2e8f0;
-		text-decoration: none;
-		border-radius: 0.375rem;
-		margin: 0 0.5rem;
-		gap: 0.75rem;
-	}
-
-	.nav-link:hover {
-		background-color: rgba(255, 255, 255, 0.1);
-	}
-
-	.nav-item.active .nav-link {
-		background-color: rgba(59, 130, 246, 0.5);
-		color: #fff;
-	}
-
-	.nav-icon {
-		font-size: 1.25rem;
-		width: 1.5rem;
-		text-align: center;
-	}
-
-	.nav-text {
-		flex: 1;
-		white-space: nowrap;
-	}
-
-	.nav-badge {
-		background-color: #ef4444;
-		color: #fff;
-		font-size: 0.75rem;
-		padding: 0.125rem 0.375rem;
-		border-radius: 9999px;
-	}
-
-	.subnav-list {
-		list-style: none;
-		padding: 0;
-		margin: 0.25rem 0 0.5rem 2.5rem;
-	}
-
-	.subnav-link {
-		display: flex;
-		align-items: center;
-		padding: 0.5rem 1rem;
-		color: #cbd5e1;
-		text-decoration: none;
-		border-radius: 0.375rem;
-		gap: 0.5rem;
-		font-size: 0.875rem;
-	}
-
-	.subnav-link:hover {
-		background-color: rgba(255, 255, 255, 0.05);
-	}
-
-	.subnav-item.active .subnav-link {
-		color: #3b82f6;
-		font-weight: 500;
-	}
-
-	.subnav-icon {
-		font-size: 1rem;
-		width: 1.25rem;
-		text-align: center;
-	}
-
-	/* 主内容区 */
-	.main-content {
-		flex: 1;
-		margin-left: 260px;
-		transition: margin-left 0.3s ease;
-		display: flex;
-		flex-direction: column;
-		min-height: 100vh;
-	}
-
-	/* 顶部导航栏 */
-	.top-navbar {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		padding: 0.75rem 1.5rem;
-		background-color: #fff;
-		border-bottom: 1px solid #e2e8f0;
-		height: 64px;
-		position: sticky;
-		top: 0;
-		z-index: 40;
-	}
-
-	.navbar-left {
-		display: flex;
-		align-items: center;
-		gap: 1rem;
-	}
-
-	.menu-button {
-		background: none;
-		border: none;
-		color: #64748b;
-		cursor: pointer;
-		padding: 0.5rem;
-		border-radius: 0.375rem;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-	}
-
-	.menu-button:hover {
-		background-color: #f1f5f9;
-	}
-
-	.breadcrumb {
-		color: #64748b;
-		font-size: 0.875rem;
-	}
-
-	.navbar-right {
-		display: flex;
-		align-items: center;
-		gap: 1rem;
-	}
-
-	.search-box {
-		position: relative;
-	}
-
-	.search-input {
-		padding: 0.5rem 1rem 0.5rem 2.5rem;
-		border: 1px solid #e2e8f0;
-		border-radius: 0.375rem;
-		background-color: #f8fafc;
-		width: 240px;
-		font-size: 0.875rem;
-	}
-
-	.search-icon {
-		position: absolute;
-		left: 0.75rem;
-		top: 50%;
-		transform: translateY(-50%);
-		color: #94a3b8;
-	}
-
-	.notification-button {
-		background: none;
-		border: none;
-		color: #64748b;
-		cursor: pointer;
-		padding: 0.5rem;
-		border-radius: 0.375rem;
-		position: relative;
-	}
-
-	.notification-button:hover {
-		background-color: #f1f5f9;
-	}
-
-	.notification-badge {
-		position: absolute;
-		top: 0;
-		right: 0;
-		background-color: #ef4444;
-		color: #fff;
-		font-size: 0.75rem;
-		width: 1rem;
-		height: 1rem;
-		border-radius: 9999px;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-	}
-
-	.user-dropdown {
-		position: relative;
-	}
-
-	.user-button {
-		display: flex;
-		align-items: center;
-		gap: 0.5rem;
-		background: none;
-		border: none;
-		cursor: pointer;
-		padding: 0.5rem;
-		border-radius: 0.375rem;
-	}
-
-	.user-button:hover {
-		background-color: #f1f5f9;
-	}
-
-	.user-avatar {
-		width: 2rem;
-		height: 2rem;
-		border-radius: 9999px;
-		object-fit: cover;
-	}
-
-	.user-avatar-placeholder {
-		width: 2rem;
-		height: 2rem;
-		border-radius: 9999px;
-		background-color: #3b82f6;
-		color: #fff;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		font-weight: 600;
-	}
-
-	.user-name {
-		color: #334155;
-		font-weight: 500;
-	}
-
-	/* 页面内容 */
-	.page-content {
-		flex: 1;
-		padding: 1.5rem;
-	}
-
-	.content-container {
-		background-color: #fff;
-		border-radius: 0.5rem;
-		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-		padding: 1.5rem;
-	}
-
-	/* 折叠状态 */
-	.dashboard-container.collapsed .sidebar {
-		width: 80px;
-	}
-
-	.dashboard-container.collapsed .logo-text,
-	.dashboard-container.collapsed .nav-text,
-	.dashboard-container.collapsed .nav-badge,
-	.dashboard-container.collapsed .subnav-list {
-		display: none;
-	}
-
-	.dashboard-container.collapsed .nav-link {
-		justify-content: center;
-		padding: 0.75rem;
-	}
-
-	.dashboard-container.collapsed .nav-icon {
-		margin: 0;
-	}
-
-	.dashboard-container.collapsed .main-content {
-		margin-left: 80px;
-	}
-
-	/* 响应式调整 */
-	@media (max-width: 1024px) {
-		.sidebar {
-			transform: translateX(-100%);
-			width: 260px;
-		}
-
-		.main-content {
-			margin-left: 0;
-		}
-
-		.dashboard-container.collapsed .sidebar {
-			transform: translateX(0);
-		}
-
-		.dashboard-container:not(.collapsed) .sidebar {
-			transform: translateX(-100%);
-		}
-	}
-
-	@media (max-width: 640px) {
-		.search-box {
-			display: none;
-		}
-
-		.user-name {
-			display: none;
-		}
-
-		.top-navbar {
-			padding: 0.75rem 1rem;
-		}
-
-		.page-content {
-			padding: 1rem;
-		}
-
-		.content-container {
-			padding: 1rem;
-		}
-	}
-</style>

package/dist/layout-dashboard/DashboardLayoutBasic.astro

@@ -1,48 +0,0 @@
----
-import DashboardLayout from './DashboardLayout.astro';
-import type { IMenuItem } from '../types/menu';
-
-const menuItems: IMenuItem[] = [
-	{
-		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: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>
-</DashboardLayout>