@coffic/cosy-ui 0.9.2 → 0.9.4

package/dist/index-astro.ts

@@ -12,6 +12,7 @@ export * from './src-astro/code-panel';
 export * from './src-astro/install-tabs';
 export * from './src-astro/contact';
 export * from './src-astro/container';
+export * from './src-astro/empty-state';
 export * from './src-astro/errors';
 export * from './src-astro/flex';
 export * from './src-astro/footer';

package/dist/src-astro/code-container/ButtonCodeToggle.astro

@@ -1,5 +1,5 @@
 ---
-import { CodeIcon } from '../icons';
+import { CodeIcon } from '../icons/index';
 const { isCodeView = false } = Astro.props;
 ---
 

package/dist/src-astro/code-container/ButtonCopyCode.astro

@@ -1,5 +1,5 @@
 ---
-import { ClipboardIcon } from '../icons';
+import { ClipboardIcon } from '../icons/index';
 ---
 
 <button

package/dist/src-astro/empty-state/EmptyState.astro

@@ -0,0 +1,100 @@
+---
+/**
+ * @component EmptyState
+ * @description 一个用于表示空状态的组件，通常在列表、搜索结果或任何需要数据的区域为空时使用。
+ *
+ * @usage
+ * ```astro
+ * <EmptyState
+ *   icon="users"
+ *   title="没有找到用户"
+ *   description="尝试更改筛选条件或创建一个新用户。"
+ * >
+ *   <Button>创建用户</Button>
+ * </EmptyState>
+ * ```
+ *
+ * @props
+ * - icon?: string - 在标题上方显示的图标名称。
+ * - title: string - 主标题，用于描述空状态。
+ * - description?: string - 对空状态的详细描述。
+ *
+ * @slots
+ * - default - 用于放置操作按钮，如"创建"或"返回"。
+ */
+import '../../style.ts';
+import * as Icons from '../icons';
+import type { EmptyStateProps, IconName } from './types';
+
+const { title, description, icon, ...rest } = Astro.props;
+
+const iconMap: Record<IconName, any> = {
+  SocialIcon: Icons.SocialIcon,
+  TwitterIcon: Icons.TwitterIcon,
+  UserIcon: Icons.UserIcon,
+  WarningIcon: Icons.WarningIcon,
+  XCircle: Icons.XCircle,
+  InfoIcon: Icons.InfoIcon,
+  LinkIcon: Icons.LinkIcon,
+  LinkedinIcon: Icons.LinkedinIcon,
+  MenuIcon: Icons.MenuIcon,
+  RefreshIcon: Icons.RefreshIcon,
+  SearchIcon: Icons.SearchIcon,
+  SuccessIcon: Icons.SuccessIcon,
+  SunCloudyIcon: Icons.SunCloudyIcon,
+  AlertTriangle: Icons.AlertTriangle,
+  CalendarIcon: Icons.CalendarIcon,
+  CheckCircle: Icons.CheckCircle,
+  CheckIcon: Icons.CheckIcon,
+  ClipboardIcon: Icons.ClipboardIcon,
+  CloseIcon: Icons.CloseIcon,
+  CodeIcon: Icons.CodeIcon,
+  DeleteIcon: Icons.DeleteIcon,
+  ErrorIcon: Icons.ErrorIcon,
+  GithubIcon: Icons.GithubIcon,
+  InfoCircle: Icons.InfoCircle,
+  InboxArchive: Icons.InboxArchive,
+  SettingsIcon: Icons.SettingsIcon,
+  ChevronDownIcon: Icons.ChevronDownIcon,
+  HomeIcon: Icons.HomeIcon,
+  DashboardIcon: Icons.DashboardIcon,
+  ChartIcon: Icons.ChartIcon,
+  DocumentIcon: Icons.DocumentIcon,
+  NotificationIcon: Icons.NotificationIcon,
+  UsersIcon: Icons.UsersIcon,
+  MessageIcon: Icons.MessageIcon,
+  MailIcon: Icons.MailIcon,
+  FolderIcon: Icons.FolderIcon,
+  StarIcon: Icons.StarIcon,
+  HeartIcon: Icons.HeartIcon,
+  SaveIcon: Icons.SaveIcon,
+  EditIcon: Icons.EditIcon,
+  ToolsIcon: Icons.ToolsIcon,
+  WalletIcon: Icons.WalletIcon,
+  ReportIcon: Icons.ReportIcon,
+  SecurityIcon: Icons.SecurityIcon,
+  UploadIcon: Icons.UploadIcon,
+  DownloadIcon: Icons.DownloadIcon,
+  LogOut: Icons.LogOut,
+  AppStoreIcon: Icons.AppStoreIcon,
+  WebsiteIcon: Icons.WebsiteIcon,
+};
+
+const IconComponent =
+  icon && iconMap[icon as IconName] ? iconMap[icon as IconName] : null;
+---
+
+<div class="cosy:text-center cosy:py-16 cosy:px-6" {...rest}>
+  {IconComponent && <IconComponent class="cosy:mx-auto cosy:h-12 cosy:w-12" />}
+  {title && <h3 class="cosy:mt-2 cosy:text-2xl cosy:font-bold">{title}</h3>}
+  {
+    description && (
+      <p class="cosy:mt-1 cosy:text-sm cosy:text-base-content/80">
+        {description}
+      </p>
+    )
+  }
+  <div class="cosy:mt-6 cosy:flex cosy:justify-center cosy:gap-4">
+    <slot />
+  </div>
+</div>

package/dist/src-astro/empty-state/index.ts

@@ -0,0 +1,2 @@
+export { default as EmptyState } from './EmptyState.astro';
+export type { EmptyStateProps, IconName } from './types'; 

package/dist/src-astro/empty-state/types.ts

@@ -0,0 +1,70 @@
+import type { HTMLAttributes } from 'astro/types';
+
+export const iconNames = [
+    'SocialIcon',
+    'TwitterIcon',
+    'UserIcon',
+    'WarningIcon',
+    'XCircle',
+    'InfoIcon',
+    'LinkIcon',
+    'LinkedinIcon',
+    'MenuIcon',
+    'RefreshIcon',
+    'SearchIcon',
+    'SuccessIcon',
+    'SunCloudyIcon',
+    'AlertTriangle',
+    'CalendarIcon',
+    'CheckCircle',
+    'CheckIcon',
+    'ClipboardIcon',
+    'CloseIcon',
+    'CodeIcon',
+    'DeleteIcon',
+    'ErrorIcon',
+    'GithubIcon',
+    'InfoCircle',
+    'InboxArchive',
+    'SettingsIcon',
+    'ChevronDownIcon',
+    'HomeIcon',
+    'DashboardIcon',
+    'ChartIcon',
+    'DocumentIcon',
+    'NotificationIcon',
+    'UsersIcon',
+    'MessageIcon',
+    'MailIcon',
+    'FolderIcon',
+    'StarIcon',
+    'HeartIcon',
+    'SaveIcon',
+    'EditIcon',
+    'ToolsIcon',
+    'WalletIcon',
+    'ReportIcon',
+    'SecurityIcon',
+    'UploadIcon',
+    'DownloadIcon',
+    'LogOut',
+    'AppStoreIcon',
+    'WebsiteIcon',
+] as const;
+
+export type IconName = (typeof iconNames)[number];
+
+export interface EmptyStateProps extends HTMLAttributes<'div'> {
+    /**
+     * The title of the empty state.
+     */
+    title?: string;
+    /**
+     * The description of the empty state.
+     */
+    description?: string;
+    /**
+     * The name of the icon to display.
+     */
+    icon?: IconName;
+}

package/dist/src-astro/layout-dashboard/DashboardLayout.astro

@@ -141,8 +141,6 @@
  * - userMenuItems?: UserMenuItem[] - 用户菜单项，默认包含个人资料、设置、退出登录，图标会自动匹配
  * - sidebarCollapsed?: boolean - 是否折叠侧边栏，默认为false
  * - sidebarSize?: 'sm' | 'md' | 'lg' | 'xl' - 侧边栏尺寸，默认为"md"
- * - sidebarTheme?: SidebarTheme - 侧边栏主题，默认为"default"
- * - mainBackgroundTheme?: MainBackgroundTheme - 主内容区域背景主题，默认为"transparent"
  * - head?: astroHTML.JSX.Element - 自定义头部内容
  * - class?: string - 页面类名
  * - class:list?: any - 类名列表
@@ -158,14 +156,7 @@ import DashboardSidebar from './DashboardSidebar.astro';
 import DashboardTopNavbar from './DashboardTopNavbar.astro';
 import { ToastContainer, ConfirmDialog } from '../../index-astro';
 import '../../style.ts';
-import {
-  type NavItem,
-  type SidebarSize,
-  type SidebarTheme,
-  type MainBackgroundTheme,
-  type UserMenuItem,
-  getMainBackgroundTheme,
-} from './types';
+import { type NavItem, type SidebarSize, type UserMenuItem } from './types';
 
 export interface Props {
   /**
@@ -216,18 +207,6 @@ export interface Props {
    */
   sidebarSize?: SidebarSize;
 
-  /**
-   * 侧边栏主题
-   * @default "default"
-   */
-  sidebarTheme?: SidebarTheme;
-
-  /**
-   * 主内容区域背景主题
-   * @default "transparent"
-   */
-  mainBackgroundTheme?: MainBackgroundTheme;
-
   /**
    * 自定义头部内容
    */
@@ -278,8 +257,6 @@ const {
   userMenuItems,
   sidebarCollapsed = false,
   sidebarSize = 'md',
-  sidebarTheme = 'default',
-  mainBackgroundTheme = 'base-100',
   enableToast = true,
   enableConfirmDialog = true,
   head,
@@ -291,7 +268,6 @@ const {
 } = Astro.props;
 
 const currentPath = Astro.url.pathname;
-const mainBackgroundStyles = getMainBackgroundTheme(mainBackgroundTheme);
 
 const mainPaddingMap = {
   none: '',
@@ -325,14 +301,13 @@ const mainPaddingMap = {
         systemName={systemName}
         navItems={navItems}
         currentPath={currentPath}
-        size={sidebarSize}
-        theme={sidebarTheme}>
+        size={sidebarSize}>
         <slot name="sidebar-footer" slot="footer" />
       </DashboardSidebar>
     </div>
 
     <!-- 主内容区 -->
-    <div class="cosy:drawer-content cosy:flex cosy:flex-col">
+    <div class="cosy:drawer-content cosy:flex cosy:flex-col cosy:h-screen">
       <!-- 顶部导航栏 -->
       <DashboardTopNavbar
         title={title}
@@ -345,8 +320,9 @@ const mainPaddingMap = {
       <main
         class:list={[
           'cosy:flex-1',
+          'cosy:overflow-y-auto',
           mainPaddingMap[mainPadding],
-          mainBackgroundStyles,
+          'cosy:bg-base-100',
         ]}>
         <slot />
       </main>

package/dist/src-astro/layout-dashboard/DashboardSidebar.astro

@@ -28,7 +28,6 @@
  * - navItems: NavItem[] - 导航项目
  * - currentPath?: string - 当前路径，用于高亮当前页面
  * - size?: 'sm' | 'md' | 'lg' | 'xl' - 侧边栏尺寸，默认为"md"
- * - theme?: SidebarTheme - 侧边栏主题，默认为"default"
  *
  * @slots
  * - footer - 侧边栏底部自定义内容，可用于展示用户信息等
@@ -38,10 +37,8 @@ import '../../style.ts';
 import {
   getNavItemIcon,
   getSidebarWidth,
-  getSidebarTheme,
   type NavItem,
   type SidebarSize,
-  type SidebarTheme,
 } from './types';
 import AstroIcon from '../icons/AstroIcon.astro';
 
@@ -67,12 +64,6 @@ export interface Props {
    * @default "md"
    */
   size?: SidebarSize;
-
-  /**
-   * 侧边栏主题
-   * @default "default"
-   */
-  theme?: SidebarTheme;
 }
 
 const {
@@ -80,26 +71,16 @@ const {
   navItems,
   currentPath = '',
   size = 'md',
-  theme = 'default',
 } = Astro.props;
-
-const themeStyles = getSidebarTheme(theme);
 ---
 
 <aside
   class:list={[
     getSidebarWidth(size),
-    'cosy:min-h-full cosy:flex cosy:flex-col',
-    themeStyles.bg,
-    themeStyles.textColor,
+    'cosy:min-h-full cosy:flex cosy:flex-col cosy:bg-base-200 cosy:text-base-content',
   ]}>
   <!-- 侧边栏头部 -->
-  <div
-    class:list={[
-      'cosy:navbar cosy:border-b',
-      themeStyles.headerBg,
-      themeStyles.borderColor,
-    ]}>
+  <div class:list={['cosy:navbar cosy:border-b cosy:border-base-300']}>
     <div class="cosy:navbar-start">
       <a
         href="/dashboard"
@@ -118,7 +99,7 @@ const themeStyles = getSidebarTheme(theme);
   <!-- 导航菜单 -->
   <div class="cosy:flex-1 cosy:overflow-y-auto">
     <ul
-      class="cosy:menu cosy:p-4 cosy:space-y-1 cosy:list-none cosy:no-underline">
+      class="cosy:menu cosy:p-4 cosy:space-y-1 cosy:list-none cosy:no-underline cosy:w-full">
       {
         navItems.map((item: NavItem) => {
           const isActive =
@@ -129,7 +110,7 @@ const themeStyles = getSidebarTheme(theme);
               ));
 
           return (
-            <li>
+            <li class="cosy:w-full">
               <a
                 href={item.href}
                 class:list={[
@@ -186,7 +167,7 @@ const themeStyles = getSidebarTheme(theme);
   </div>
 
   <!-- 侧边栏底部自定义内容 -->
-  <div class:list={['cosy:mt-auto cosy:border-t', themeStyles.borderColor]}>
+  <div class:list={['cosy:mt-auto cosy:border-t cosy:border-base-300']}>
     <slot name="footer" />
   </div>
 </aside>

package/dist/src-astro/layout-dashboard/DashboardTopNavbar.astro

@@ -73,7 +73,8 @@ const defaultUserMenuItems: UserMenuItem[] = [
 const menuItems = userMenuItems || defaultUserMenuItems;
 ---
 
-<div class="cosy:navbar cosy:bg-base-100 cosy:shadow-sm">
+<div
+  class="cosy:navbar cosy:bg-base-100 cosy:shadow-2xl cosy:border-b cosy:border-base-300">
   <div class="cosy:navbar-start">
     <label
       for="dashboard-drawer"
@@ -88,31 +89,6 @@ const menuItems = userMenuItems || defaultUserMenuItems;
   </div>
 
   <div class="cosy:navbar-end cosy:gap-2">
-    <!-- 搜索框 -->
-    <div class="cosy:form-control cosy:hidden cosy:lg:flex">
-      <div class="cosy:input-group">
-        <input
-          type="text"
-          placeholder="搜索..."
-          class="cosy:input cosy:input-bordered cosy:input-sm cosy:w-48"
-        />
-        <button class="cosy:btn cosy:btn-square cosy:btn-sm">
-          <AstroIcon name="search" size="16px" stroke="currentColor" />
-        </button>
-      </div>
-    </div>
-
-    <!-- 通知 -->
-    <div class="cosy:indicator">
-      <button class="cosy:btn cosy:btn-ghost cosy:btn-circle">
-        <AstroIcon name="notification" size="18px" stroke="currentColor" />
-      </button>
-      <span
-        class="cosy:badge cosy:badge-xs cosy:badge-primary cosy:indicator-item"
-        >3</span
-      >
-    </div>
-
     <!-- 用户信息 -->
     {
       userName && (

package/dist/src-astro/layout-dashboard/index.ts

@@ -7,11 +7,11 @@ import DashboardSidebar from './DashboardSidebar.astro';
 import DashboardTopNavbar from './DashboardTopNavbar.astro';
 
 export {
-  DashboardLayout,
-  DashboardSidebar,
-  DashboardTopNavbar
+    DashboardLayout,
+    DashboardSidebar,
+    DashboardTopNavbar
 };
 
 // 导出类型和函数
-export type { NavItem, SidebarSize, SidebarTheme, ContentTheme } from './types';
-export { getIconFromHref, getNavItemIcon, getSidebarWidth, getSidebarTheme, getContentTheme } from './types';
+export type { NavItem, SidebarSize, UserMenuItem } from './types';
+export { getIconFromHref, getNavItemIcon, getSidebarWidth } from './types';

package/dist/src-astro/layout-dashboard/types.ts

@@ -43,124 +43,4 @@ export function getSidebarWidth(size: SidebarSize = 'md'): string {
     return sidebarSizeMap[size];
 }
 
-/**
- * 侧边栏背景色主题类型
- */
-export type SidebarTheme = 'default' | 'dark' | 'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error';
-
-/**
- * 侧边栏背景色主题配置映射
- */
-export const sidebarThemeMap: Record<SidebarTheme, { bg: string; headerBg: string; textColor: string; borderColor: string }> = {
-    'default': {
-        bg: 'cosy:bg-base-300',
-        headerBg: 'cosy:bg-base-300',
-        textColor: 'cosy:text-base-content',
-        borderColor: 'cosy:border-base-200'
-    },
-    'dark': {
-        bg: 'cosy:bg-base-100',
-        headerBg: 'cosy:bg-base-100',
-        textColor: 'cosy:text-base-content',
-        borderColor: 'cosy:border-base-200'
-    },
-    'neutral': {
-        bg: 'cosy:bg-neutral',
-        headerBg: 'cosy:bg-neutral',
-        textColor: 'cosy:text-neutral-content',
-        borderColor: 'cosy:border-neutral-focus'
-    },
-    'primary': {
-        bg: 'cosy:bg-primary',
-        headerBg: 'cosy:bg-primary',
-        textColor: 'cosy:text-primary-content',
-        borderColor: 'cosy:border-primary-focus'
-    },
-    'secondary': {
-        bg: 'cosy:bg-secondary',
-        headerBg: 'cosy:bg-secondary',
-        textColor: 'cosy:text-secondary-content',
-        borderColor: 'cosy:border-secondary-focus'
-    },
-    'accent': {
-        bg: 'cosy:bg-accent',
-        headerBg: 'cosy:bg-accent',
-        textColor: 'cosy:text-accent-content',
-        borderColor: 'cosy:border-accent-focus'
-    },
-    'info': {
-        bg: 'cosy:bg-info',
-        headerBg: 'cosy:bg-info',
-        textColor: 'cosy:text-info-content',
-        borderColor: 'cosy:border-info-focus'
-    },
-    'success': {
-        bg: 'cosy:bg-success',
-        headerBg: 'cosy:bg-success',
-        textColor: 'cosy:text-success-content',
-        borderColor: 'cosy:border-success-focus'
-    },
-    'warning': {
-        bg: 'cosy:bg-warning',
-        headerBg: 'cosy:bg-warning',
-        textColor: 'cosy:text-warning-content',
-        borderColor: 'cosy:border-warning-focus'
-    },
-    'error': {
-        bg: 'cosy:bg-error',
-        headerBg: 'cosy:bg-error',
-        textColor: 'cosy:text-error-content',
-        borderColor: 'cosy:border-error-focus'
-    }
-};
-
-/**
- * 获取侧边栏主题样式类
- * @param theme 侧边栏主题
- * @returns 对应的样式配置
- */
-export function getSidebarTheme(theme: SidebarTheme = 'default') {
-    return sidebarThemeMap[theme];
-}
-
-/**
- * 主内容区域背景主题类型
- */
-export type MainBackgroundTheme = 'transparent' | 'base-100' | 'base-200' | 'base-300' | 'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error' | 'gradient-warm' | 'gradient-cool' | 'gradient-rainbow' | 'gradient-sunset' | 'gradient-ocean' | 'gradient-forest';
-
-
-
-/**
- * 主内容区域背景主题配置映射
- */
-export const mainBackgroundThemeMap: Record<MainBackgroundTheme, string> = {
-    'transparent': '',
-    'base-100': 'cosy:bg-base-100',
-    'base-200': 'cosy:bg-base-200',
-    'base-300': 'cosy:bg-base-300',
-    'neutral': 'cosy:bg-neutral',
-    'primary': 'cosy:bg-primary',
-    'secondary': 'cosy:bg-secondary',
-    'accent': 'cosy:bg-accent',
-    'info': 'cosy:bg-info',
-    'success': 'cosy:bg-success',
-    'warning': 'cosy:bg-warning',
-    'error': 'cosy:bg-error',
-    'gradient-warm': 'cosy:bg-gradient-to-br cosy:from-orange-100 cosy:via-red-50 cosy:to-pink-100',
-    'gradient-cool': 'cosy:bg-gradient-to-br cosy:from-blue-100 cosy:via-cyan-50 cosy:to-green-100',
-    'gradient-rainbow': 'cosy:bg-gradient-to-br cosy:from-purple-100 cosy:via-pink-50 cosy:to-blue-100',
-    'gradient-sunset': 'cosy:bg-gradient-to-br cosy:from-yellow-100 cosy:via-orange-50 cosy:to-red-100',
-    'gradient-ocean': 'cosy:bg-gradient-to-br cosy:from-blue-100 cosy:via-teal-50 cosy:to-cyan-100',
-    'gradient-forest': 'cosy:bg-gradient-to-br cosy:from-green-100 cosy:via-emerald-50 cosy:to-teal-100'
-};
-
-/**
- * 获取主内容区域背景主题样式类
- * @param theme 主内容区域背景主题
- * @returns 对应的样式类名
- */
-export function getMainBackgroundTheme(theme: MainBackgroundTheme = 'base-100'): string {
-    return mainBackgroundThemeMap[theme];
-}
-
 export { getIconFromHref, getNavItemIcon, getUserMenuItemIcon } from './tools'; 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coffic/cosy-ui",
-  "version": "0.9.2",
+  "version": "0.9.4",
   "description": "An astro component library",
   "author": {
     "name": "nookery",