@expcat/tigercat-vue 1.2.23 → 1.2.30

package/dist/{chunk-V6YR7CPK.js → chunk-F4FPIIVT.js}

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
 
-var _chunkOW5D4LU6js = require('./chunk-OW5D4LU6.js');
+var _chunkDPHLBHJYjs = require('./chunk-DPHLBHJY.js');
 
 
 var _chunkBGMAWKWVjs = require('./chunk-BGMAWKWV.js');
@@ -197,7 +197,8 @@ var DataTableWithToolbar = _vue.defineComponent.call(void 0, {
     const bulkLabel = _vue.computed.call(void 0, () => _nullishCoalesce(_optionalChain([props, 'access', _27 => _27.toolbar, 'optionalAccess', _28 => _28.bulkActionsLabel]), () => ( "\u5DF2\u9009\u62E9")));
     const wrapperClasses = _vue.computed.call(void 0, 
       () => _tigercatcore.classNames.call(void 0, 
-        "tiger-data-table-with-toolbar flex flex-col gap-3",
+        "tiger-data-table-with-toolbar flex flex-col",
+        props.bordered ? "border border-[var(--tiger-border,#e5e7eb)] rounded-[var(--tiger-radius-md,0.5rem)] overflow-hidden bg-[var(--tiger-surface,#ffffff)] shadow-sm" : "gap-3.5",
         props.className,
         _tigercatcore.coerceClassValue.call(void 0, attrs.class)
       )
@@ -248,26 +249,49 @@ var DataTableWithToolbar = _vue.defineComponent.call(void 0, {
         leftNodes.push(
           _vue.h.call(void 0, 
             "div",
-            { class: "flex items-center gap-2 w-full sm:w-auto sm:min-w-[200px] sm:max-w-[320px]" },
+            { class: "flex items-center gap-2 w-full sm:w-auto sm:min-w-[220px] sm:max-w-[320px]" },
             [
-              _vue.h.call(void 0, _chunkBYNMOQBBjs.Input, {
-                type: "search",
-                size: "sm",
-                modelValue: searchValue.value,
-                placeholder: _nullishCoalesce(_optionalChain([props, 'access', _35 => _35.toolbar, 'optionalAccess', _36 => _36.searchPlaceholder]), () => ( "\u641C\u7D22")),
-                "onUpdate:modelValue": (value) => handleSearchChange(String(_nullishCoalesce(value, () => ( "")))),
-                onKeydown: (event) => {
-                  if (event.key === "Enter") {
-                    handleSearchSubmit();
+              _vue.h.call(void 0, 
+                _chunkBYNMOQBBjs.Input,
+                {
+                  type: "search",
+                  size: "sm",
+                  modelValue: searchValue.value,
+                  placeholder: _nullishCoalesce(_optionalChain([props, 'access', _35 => _35.toolbar, 'optionalAccess', _36 => _36.searchPlaceholder]), () => ( "\u641C\u7D22")),
+                  "onUpdate:modelValue": (value) => handleSearchChange(String(_nullishCoalesce(value, () => ( "")))),
+                  onKeydown: (event) => {
+                    if (event.key === "Enter") {
+                      handleSearchSubmit();
+                    }
                   }
+                },
+                {
+                  prefix: () => _vue.h.call(void 0, 
+                    "svg",
+                    {
+                      class: "w-3.5 h-3.5 text-[var(--tiger-text-secondary,#6b7280)] shrink-0",
+                      fill: "none",
+                      stroke: "currentColor",
+                      "stroke-width": "2",
+                      viewBox: "0 0 24 24",
+                      "aria-hidden": "true"
+                    },
+                    [
+                      _vue.h.call(void 0, "path", {
+                        "stroke-linecap": "round",
+                        "stroke-linejoin": "round",
+                        d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+                      })
+                    ]
+                  )
                 }
-              }),
+              ),
               showButton ? _vue.h.call(void 0, 
                 _chunk4VLNT2EDjs.Button,
                 {
                   size: "sm",
                   variant: "primary",
-                  class: "whitespace-nowrap shrink-0",
+                  class: "whitespace-nowrap shrink-0 rounded-[var(--tiger-radius-md,0.5rem)] px-3",
                   onClick: handleSearchSubmit,
                   disabled: !canSearch.value
                 },
@@ -305,9 +329,16 @@ var DataTableWithToolbar = _vue.defineComponent.call(void 0, {
         if (selectedCount.value > 0) {
           bulkChildren.push(
             _vue.h.call(void 0, 
-              "span",
-              { class: "text-sm text-[var(--tiger-text-muted,#6b7280)]" },
-              `${bulkLabel.value} ${selectedCount.value} \u9879`
+              "div",
+              {
+                class: "flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-[var(--tiger-primary,#2563eb)]/10 text-[var(--tiger-primary,#2563eb)] text-xs font-medium border border-[var(--tiger-primary,#2563eb)]/15 shrink-0 transition-all duration-300"
+              },
+              [
+                _vue.h.call(void 0, "span", {
+                  class: "w-1.5 h-1.5 rounded-full bg-[var(--tiger-primary,#2563eb)] animate-pulse"
+                }),
+                _vue.h.call(void 0, "span", null, `${bulkLabel.value} ${selectedCount.value} \u9879`)
+              ]
             )
           );
         }
@@ -331,15 +362,18 @@ var DataTableWithToolbar = _vue.defineComponent.call(void 0, {
       return _vue.h.call(void 0, 
         "div",
         {
-          class: "tiger-data-table-toolbar flex flex-wrap items-center gap-2 pb-3",
+          class: _tigercatcore.classNames.call(void 0, 
+            "tiger-data-table-toolbar flex flex-wrap items-center gap-3",
+            props.bordered ? "bg-[var(--tiger-surface-muted,#f9fafb)] dark:bg-gray-800/10 px-4 py-3.5 border-b border-[var(--tiger-border,#e5e7eb)]" : "bg-[var(--tiger-surface-muted,#f9fafb)]/80 dark:bg-gray-800/30 px-4 py-3.5 border border-[var(--tiger-border,#e5e7eb)] rounded-[var(--tiger-radius-md,0.5rem)] shadow-sm"
+          ),
           role: "toolbar",
           "aria-label": "\u6570\u636E\u8868\u683C\u5DE5\u5177\u680F"
         },
         [
-          _vue.h.call(void 0, "div", { class: "flex items-center gap-2 flex-wrap flex-1 min-w-0" }, leftNodes),
+          _vue.h.call(void 0, "div", { class: "flex items-center gap-3 flex-wrap flex-1 min-w-0" }, leftNodes),
           hasBulkActions.value ? _vue.h.call(void 0, 
             "div",
-            { class: "flex items-center gap-2 flex-wrap ml-auto shrink-0" },
+            { class: "flex items-center gap-2.5 flex-wrap ml-auto shrink-0" },
             bulkChildren
           ) : null
         ]
@@ -369,6 +403,7 @@ var DataTableWithToolbar = _vue.defineComponent.call(void 0, {
         stickyHeader: props.stickyHeader,
         maxHeight: props.maxHeight,
         tableLayout: props.tableLayout,
+        class: props.bordered ? "border-none rounded-none shadow-none" : void 0,
         onSelectionChange: (keys) => emit("selection-change", keys),
         onPageChange: handleTablePageChange
       };
@@ -379,7 +414,7 @@ var DataTableWithToolbar = _vue.defineComponent.call(void 0, {
           style: wrapperStyle.value,
           "data-tiger-data-table-with-toolbar": ""
         },
-        [renderToolbar(), _vue.h.call(void 0, _chunkOW5D4LU6js.Table, tableProps)]
+        [renderToolbar(), _vue.h.call(void 0, _chunkDPHLBHJYjs.Table, tableProps)]
       );
     };
   }

package/dist/{chunk-CN7HFUFN.mjs → chunk-F5S26BR3.mjs}

@@ -188,7 +188,7 @@ var TaskBoard = defineComponent({
       const cardClasses = classNames(
         taskBoardCardClasses,
         isDragging && taskBoardCardDraggingClasses,
-        isKbGrabbed && "ring-2 ring-[var(--tiger-primary,#2563eb)]"
+        isKbGrabbed && "ring-2 ring-[var(--tiger-primary,#2563eb)] ring-offset-2 shadow-[0_0_12px_rgba(37,99,235,0.25)]"
       );
       const cardAttrs = {
         key: String(card.id),
@@ -240,7 +240,10 @@ var TaskBoard = defineComponent({
           props.showCardCount && cardCount ? null : column.wipLimit != null ? h(
             "span",
             {
-              class: "ml-2 text-xs font-normal opacity-70",
+              class: classNames(
+                "ml-2 text-xs font-normal transition-all duration-200 px-1.5 py-0.5 rounded",
+                wipOver ? "bg-red-50 dark:bg-red-950/30 text-[var(--tiger-error,#ef4444)] font-semibold border border-red-200/30 dark:border-red-900/30 shadow-xs" : "opacity-70 bg-[var(--tiger-border,#e5e7eb)]/20 text-[var(--tiger-text-secondary,#6b7280)]"
+              ),
               title: resolveLocaleText(
                 labels.value.wipLimitText.replace("{limit}", String(column.wipLimit))
               )
@@ -248,7 +251,7 @@ var TaskBoard = defineComponent({
             `(${column.cards.length}/${column.wipLimit})`
           ) : h(
             "span",
-            { class: "ml-2 text-xs font-normal opacity-50" },
+            { class: "ml-2 text-xs font-normal px-1.5 py-0.5 rounded bg-[var(--tiger-border,#e5e7eb)]/20 text-[var(--tiger-text-secondary,#6b7280)] opacity-70" },
             String(column.cards.length)
           )
         ]),
@@ -258,7 +261,7 @@ var TaskBoard = defineComponent({
           {
             class: classNames(
               kanbanCardCountClasses,
-              wipOver && taskBoardWipExceededClasses
+              wipOver && `${taskBoardWipExceededClasses} bg-red-50 dark:bg-red-950/30 border border-red-200/50 dark:border-red-900/30 font-semibold shadow-xs`
             )
           },
           cardCount.limit ? `${cardCount.count}/${cardCount.limit}` : `${cardCount.count}`

package/dist/{chunk-YCBLL5K3.js → chunk-FKLK6RHZ.js}

@@ -45,9 +45,11 @@ var renderAction = (item, action, index) => {
       key,
       size: "sm",
       variant: "primary",
+      underline: false,
       href: action.href,
       target: action.target,
       disabled: action.disabled,
+      className: "inline-flex items-center px-2.5 py-1 rounded-lg hover:bg-blue-50/50 dark:hover:bg-blue-950/20 text-xs font-semibold transition-all duration-200",
       onClick: () => _optionalChain([action, 'access', _ => _.onClick, 'optionalCall', _2 => _2(item, action)])
     },
     {
@@ -138,7 +140,7 @@ var ActivityFeed = _vue.defineComponent.call(void 0, {
       return _vue.h.call(void 0, 
         "div",
         {
-          class: _tigercatcore.activityItemClasses
+          class: _tigercatcore.classNames.call(void 0, _tigercatcore.activityItemClasses, "p-4 rounded-2xl border border-gray-100/70 dark:border-gray-800/40 bg-white/40 dark:bg-gray-900/15 backdrop-blur-sm shadow-sm transition-all duration-300 hover:shadow-md hover:shadow-gray-100/30 dark:hover:shadow-none hover:bg-white dark:hover:bg-gray-900/30 hover:-translate-y-0.5 w-full")
         },
         [
           _vue.h.call(void 0, "div", { class: _tigercatcore.activityItemLayoutClasses }, [
@@ -146,14 +148,14 @@ var ActivityFeed = _vue.defineComponent.call(void 0, {
               size: "sm",
               src: item.user.avatar,
               text: item.user.name,
-              className: "shrink-0"
+              className: "shrink-0 ring-2 ring-white dark:ring-gray-900 shadow-sm transition-transform hover:scale-105 duration-200"
             }) : null,
             _vue.h.call(void 0, "div", { class: _tigercatcore.activityItemBodyClasses }, [
               _vue.h.call(void 0, "div", { class: _tigercatcore.activityItemHeaderClasses }, [
                 _vue.h.call(void 0, "div", { class: _tigercatcore.activityItemTitleGroupClasses }, [
                   titleText ? _vue.h.call(void 0, 
                     _chunkTGHB5XSTjs.Text,
-                    { tag: "div", size: "sm", weight: "medium", class: "truncate" },
+                    { tag: "div", size: "sm", weight: "semibold", class: "text-gray-900 dark:text-gray-100 hover:text-blue-600 dark:hover:text-blue-400 transition-colors cursor-pointer truncate" },
                     { default: () => titleText }
                   ) : null,
                   item.status ? _vue.h.call(void 0, 
@@ -161,7 +163,7 @@ var ActivityFeed = _vue.defineComponent.call(void 0, {
                     {
                       variant: _nullishCoalesce(item.status.variant, () => ( "default")),
                       size: "sm",
-                      className: "shrink-0"
+                      className: "shrink-0 rounded-full px-2 py-0.5 text-[10px] font-semibold tracking-wide uppercase border border-current bg-opacity-10 shadow-sm"
                     },
                     { default: () => _optionalChain([item, 'access', _6 => _6.status, 'optionalAccess', _7 => _7.label]) }
                   ) : null
@@ -172,7 +174,7 @@ var ActivityFeed = _vue.defineComponent.call(void 0, {
                     tag: "div",
                     size: "xs",
                     color: "muted",
-                    class: "shrink-0 whitespace-nowrap"
+                    class: "shrink-0 whitespace-nowrap font-medium text-gray-400 dark:text-gray-500"
                   },
                   { default: () => timeText }
                 ) : null
@@ -183,11 +185,11 @@ var ActivityFeed = _vue.defineComponent.call(void 0, {
                   tag: "div",
                   size: "sm",
                   color: "muted",
-                  class: _tigercatcore.activityItemDescriptionClasses
+                  class: _tigercatcore.classNames.call(void 0, _tigercatcore.activityItemDescriptionClasses, "text-gray-600 dark:text-gray-300 leading-relaxed pl-0.5 mt-1")
                 },
                 { default: () => descriptionText }
               ) : null,
-              _optionalChain([actionNodes, 'optionalAccess', _8 => _8.length]) ? _vue.h.call(void 0, "div", { class: _tigercatcore.activityItemActionsClasses }, actionNodes) : null
+              _optionalChain([actionNodes, 'optionalAccess', _8 => _8.length]) ? _vue.h.call(void 0, "div", { class: _tigercatcore.classNames.call(void 0, _tigercatcore.activityItemActionsClasses, "mt-2.5") }, actionNodes) : null
             ])
           ])
         ]
@@ -200,7 +202,7 @@ var ActivityFeed = _vue.defineComponent.call(void 0, {
     const feedAriaBusy = _vue.computed.call(void 0, () => _nullishCoalesce(attrs["aria-busy"], () => ( (props.loading ? "true" : void 0))));
     return () => {
       if (props.loading) {
-        const loadingNode = slots.loading ? slots.loading() : _vue.h.call(void 0, _chunk2LNNB55Ejs.Loading, { text: props.loadingText });
+        const loadingNode = slots.loading ? slots.loading() : _vue.h.call(void 0, _chunk2LNNB55Ejs.Loading, { text: props.loadingText, class: "text-blue-500 dark:text-blue-400 font-medium" });
         return _vue.h.call(void 0, 
           "div",
           {
@@ -215,16 +217,35 @@ var ActivityFeed = _vue.defineComponent.call(void 0, {
           [
             _vue.h.call(void 0, 
               _chunkXGXGAK27js.Card,
-              { variant: "bordered", size: "sm", className: "tiger-activity-feed-loading" },
               {
-                default: () => _vue.h.call(void 0, "div", { class: "flex items-center justify-center py-4" }, loadingNode)
+                variant: "bordered",
+                size: "sm",
+                className: "tiger-activity-feed-loading bg-white/40 dark:bg-gray-900/20 border-gray-100 dark:border-gray-800/80 backdrop-blur-sm rounded-2xl shadow-sm overflow-hidden"
+              },
+              {
+                default: () => _vue.h.call(void 0, "div", { class: "flex items-center justify-center py-8" }, loadingNode)
               }
             )
           ]
         );
       }
       if (resolvedGroups.value.length === 0) {
-        const emptyNode = slots.empty ? slots.empty() : _vue.h.call(void 0, _chunkTGHB5XSTjs.Text, { tag: "div", size: "sm", color: "muted" }, { default: () => props.emptyText });
+        const emptyNode = slots.empty ? slots.empty() : _vue.h.call(void 0, "div", { class: "flex flex-col items-center justify-center py-12 px-4" }, [
+          _vue.h.call(void 0, "svg", {
+            class: "w-12 h-12 text-gray-300 dark:text-gray-600 mb-3 animate-pulse",
+            fill: "none",
+            viewBox: "0 0 24 24",
+            stroke: "currentColor",
+            strokeWidth: "1.5"
+          }, [
+            _vue.h.call(void 0, "path", {
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              d: "M12 7.5h1.5m-1.5 3h1.5m-7.5 3h10.5m-10.5 3h10.5m-13.5-9h16.5M3 5.25h18M3 18.75h18"
+            })
+          ]),
+          _vue.h.call(void 0, _chunkTGHB5XSTjs.Text, { tag: "div", size: "sm", color: "muted", class: "font-medium" }, { default: () => props.emptyText })
+        ]);
         return _vue.h.call(void 0, 
           "div",
           {
@@ -238,9 +259,13 @@ var ActivityFeed = _vue.defineComponent.call(void 0, {
           [
             _vue.h.call(void 0, 
               _chunkXGXGAK27js.Card,
-              { variant: "bordered", size: "sm", className: "tiger-activity-feed-empty" },
               {
-                default: () => _vue.h.call(void 0, "div", { class: "flex items-center justify-center py-6" }, emptyNode)
+                variant: "bordered",
+                size: "sm",
+                className: "tiger-activity-feed-empty bg-white/40 dark:bg-gray-900/20 border-gray-100 dark:border-gray-800/80 backdrop-blur-sm rounded-2xl shadow-sm overflow-hidden"
+              },
+              {
+                default: () => emptyNode
               }
             )
           ]
@@ -261,14 +286,46 @@ var ActivityFeed = _vue.defineComponent.call(void 0, {
           const groupTitle = group.title;
           const timelineItems = _tigercatcore.toActivityTimelineItems.call(void 0, group.items);
           return _vue.h.call(void 0, "div", { key: _nullishCoalesce(group.key, () => ( groupIndex)), class: "space-y-3" }, [
-            props.showGroupTitle && groupTitle ? _nullishCoalesce(headerNode, () => ( _vue.h.call(void 0, 
-              _chunkTGHB5XSTjs.Text,
-              { tag: "div", size: "sm", weight: "medium", color: "muted" },
-              { default: () => groupTitle }
-            ))) : null,
+            props.showGroupTitle && groupTitle ? _nullishCoalesce(headerNode, () => ( _vue.h.call(void 0, "div", { class: "flex items-center gap-2 mb-2" }, [
+              _vue.h.call(void 0, "span", { class: "w-1.5 h-3.5 bg-blue-500 rounded-full dark:bg-blue-400 shadow-sm shadow-blue-500/20" }),
+              _vue.h.call(void 0, 
+                _chunkTGHB5XSTjs.Text,
+                { tag: "span", size: "sm", weight: "bold", class: "text-gray-900 dark:text-gray-100 uppercase tracking-wider" },
+                { default: () => groupTitle }
+              )
+            ]))) : null,
             _vue.h.call(void 0, 
               _chunk27T3QDSFjs.Timeline,
-              { items: timelineItems },
+              {
+                items: timelineItems,
+                style: {
+                  "--tiger-border": "rgba(156, 163, 175, 0.18)"
+                },
+                renderDot: (timelineItem) => {
+                  const activity = timelineItem.activity;
+                  const statusVariant = _nullishCoalesce(_optionalChain([activity, 'optionalAccess', _9 => _9.status, 'optionalAccess', _10 => _10.variant]), () => ( "default"));
+                  const baseDotClass = "w-3 h-3 rounded-full border-2 border-white dark:border-gray-950 shadow-sm";
+                  let colorClass = "bg-gray-300 dark:bg-gray-700";
+                  let pulseClass = "";
+                  if (statusVariant === "success") {
+                    colorClass = "bg-emerald-500";
+                    pulseClass = "bg-emerald-500/30";
+                  } else if (statusVariant === "warning") {
+                    colorClass = "bg-amber-500";
+                    pulseClass = "bg-amber-500/30";
+                  } else if (statusVariant === "error" || statusVariant === "danger") {
+                    colorClass = "bg-rose-500";
+                    pulseClass = "bg-rose-500/30";
+                  } else if (statusVariant === "primary" || statusVariant === "info") {
+                    colorClass = "bg-blue-500";
+                    pulseClass = "bg-blue-500/30";
+                  }
+                  return _vue.h.call(void 0, "div", { class: "relative flex items-center justify-center w-4 h-4" }, [
+                    pulseClass ? _vue.h.call(void 0, "span", { class: `absolute inline-flex h-full w-full rounded-full animate-ping opacity-75 ${pulseClass}` }) : null,
+                    _vue.h.call(void 0, "span", { class: `${baseDotClass} ${colorClass} relative z-10` })
+                  ]);
+                }
+              },
               {
                 item: ({ item, index }) => {
                   const activity = item.activity;

package/dist/{chunk-U5S3ZEYZ.js → chunk-H5JDEKIV.js}

@@ -285,7 +285,7 @@ var NotificationCenter = _vue.defineComponent.call(void 0, {
       return _vue.h.call(void 0, 
         "div",
         {
-          class: "inline-flex self-start rounded-[var(--tiger-radius-sm,0.375rem)] border border-[var(--tiger-border,#e5e7eb)] overflow-hidden"
+          class: "inline-flex items-center gap-0.5 p-0.5 rounded-lg bg-gray-100/80 dark:bg-gray-800/60 self-start"
         },
         options.map(
           (option) => _vue.h.call(void 0, 
@@ -293,9 +293,8 @@ var NotificationCenter = _vue.defineComponent.call(void 0, {
             {
               key: option.key,
               class: _tigercatcore.classNames.call(void 0, 
-                "px-3 py-1 text-xs font-medium transition-colors",
-                "border-r border-[var(--tiger-border,#e5e7eb)] last:border-r-0",
-                currentReadFilter.value === option.key ? "bg-[var(--tiger-primary,#2563eb)] text-white" : "bg-[var(--tiger-surface,#ffffff)] text-[var(--tiger-text-muted,#6b7280)] hover:bg-[var(--tiger-surface-muted,#f9fafb)]"
+                "px-3.5 py-1 text-xs font-semibold rounded-md transition-all duration-200",
+                currentReadFilter.value === option.key ? "bg-white dark:bg-gray-700 text-gray-900 dark:text-white shadow-sm scale-102" : "text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white"
               ),
               onClick: () => handleReadFilterChange(option.key)
             },
@@ -311,26 +310,32 @@ var NotificationCenter = _vue.defineComponent.call(void 0, {
         "div",
         {
           class: _tigercatcore.classNames.call(void 0, 
-            "flex items-start gap-3 w-full py-0.5 transition-colors",
-            !isRead && "border-l-2 border-l-[var(--tiger-primary,#2563eb)] -ml-[2px] pl-[calc(0.75rem-2px)]"
+            "group relative flex items-start gap-3.5 w-full p-3.5 rounded-xl transition-all duration-300 hover:bg-gray-50/60 dark:hover:bg-gray-800/30",
+            !isRead ? "bg-blue-50/20 dark:bg-blue-950/5 hover:bg-blue-50/40 dark:hover:bg-blue-950/10 border-l-[3px] border-l-blue-500/80 -ml-[3px] pl-[calc(0.875rem-3px)]" : "border-l-[3px] border-l-transparent -ml-[3px] pl-[calc(0.875rem-3px)]"
           )
         },
         [
           _vue.h.call(void 0, "div", { class: "flex-1 min-w-0" }, [
             _vue.h.call(void 0, "div", { class: "flex items-baseline justify-between gap-2" }, [
-              _vue.h.call(void 0, 
-                _chunkTGHB5XSTjs.Text,
-                {
-                  tag: "span",
-                  size: "sm",
-                  weight: isRead ? "normal" : "semibold"
-                },
-                { default: () => item.title }
-              ),
+              _vue.h.call(void 0, "div", { class: "flex items-center gap-1.5" }, [
+                _vue.h.call(void 0, 
+                  _chunkTGHB5XSTjs.Text,
+                  {
+                    tag: "span",
+                    size: "sm",
+                    weight: isRead ? "normal" : "semibold",
+                    class: isRead ? "text-gray-600 dark:text-gray-400" : "text-gray-900 dark:text-gray-100"
+                  },
+                  { default: () => item.title }
+                ),
+                !isRead ? _vue.h.call(void 0, "span", {
+                  class: "w-1.5 h-1.5 rounded-full bg-blue-500 dark:bg-blue-400 shrink-0 shadow-sm shadow-blue-500/40 animate-pulse"
+                }) : null
+              ]),
               timeText ? _vue.h.call(void 0, 
                 "span",
                 {
-                  class: "text-xs text-[var(--tiger-text-muted,#6b7280)] whitespace-nowrap flex-shrink-0"
+                  class: "text-[11px] text-gray-400 dark:text-gray-500 font-medium whitespace-nowrap flex-shrink-0 self-center"
                 },
                 timeText
               ) : null
@@ -338,7 +343,10 @@ var NotificationCenter = _vue.defineComponent.call(void 0, {
             item.description ? _vue.h.call(void 0, 
               "div",
               {
-                class: "mt-0.5 text-xs text-[var(--tiger-text-muted,#6b7280)] line-clamp-2 leading-relaxed"
+                class: _tigercatcore.classNames.call(void 0, 
+                  "mt-1 text-xs leading-relaxed line-clamp-2",
+                  isRead ? "text-gray-500 dark:text-gray-400" : "text-gray-600 dark:text-gray-300"
+                )
               },
               item.description
             ) : null
@@ -348,6 +356,7 @@ var NotificationCenter = _vue.defineComponent.call(void 0, {
             {
               size: "sm",
               variant: "ghost",
+              class: "opacity-0 group-hover:opacity-100 focus:opacity-100 rounded-full px-2.5 py-1 text-[11px] font-semibold transition-all duration-200 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 border-0 flex-shrink-0 self-center",
               onClick: (event) => {
                 event.stopPropagation();
                 handleItemReadChange(item, !isRead);
@@ -358,20 +367,65 @@ var NotificationCenter = _vue.defineComponent.call(void 0, {
         ]
       );
     };
-    const renderList = (items) => _vue.h.call(void 0, 
-      _chunkS6Q7TD6Hjs.List,
-      {
-        dataSource: items,
-        split: true,
-        bordered: "divided",
-        hoverable: true,
-        emptyText: props.emptyText,
-        onItemClick: handleItemClick
-      },
-      {
-        renderItem: ({ item, index }) => renderListItem(item, index)
+    const renderList = (items) => {
+      if (items.length === 0) {
+        return _vue.h.call(void 0, 
+          "div",
+          { class: "flex flex-col items-center justify-center py-14 px-4 text-center" },
+          [
+            _vue.h.call(void 0, 
+              "div",
+              {
+                class: "p-3.5 bg-gray-50 dark:bg-gray-900 rounded-full mb-3 shadow-inner"
+              },
+              [
+                _vue.h.call(void 0, 
+                  "svg",
+                  {
+                    class: "w-8 h-8 text-gray-400 dark:text-gray-600 animate-pulse",
+                    fill: "none",
+                    viewBox: "0 0 24 24",
+                    stroke: "currentColor",
+                    strokeWidth: "1.5"
+                  },
+                  [
+                    _vue.h.call(void 0, "path", {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      d: "M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0"
+                    })
+                  ]
+                )
+              ]
+            ),
+            _vue.h.call(void 0, 
+              _chunkTGHB5XSTjs.Text,
+              {
+                tag: "div",
+                size: "sm",
+                color: "muted",
+                class: "font-semibold text-gray-400 dark:text-gray-500"
+              },
+              { default: () => props.emptyText }
+            )
+          ]
+        );
       }
-    );
+      return _vue.h.call(void 0, 
+        _chunkS6Q7TD6Hjs.List,
+        {
+          dataSource: items,
+          split: true,
+          bordered: "divided",
+          hoverable: true,
+          emptyText: props.emptyText,
+          onItemClick: handleItemClick
+        },
+        {
+          renderItem: ({ item, index }) => renderListItem(item, index)
+        }
+      );
+    };
     const renderTabs = () => _vue.h.call(void 0, 
       _chunk44N7LE3Qjs.Tabs,
       {
@@ -404,11 +458,15 @@ var NotificationCenter = _vue.defineComponent.call(void 0, {
       const header = _vue.h.call(void 0, "div", { class: "flex flex-col gap-3" }, [
         _vue.h.call(void 0, "div", { class: "flex items-center justify-between" }, [
           _vue.h.call(void 0, "div", { class: "flex items-center gap-2.5" }, [
-            _vue.h.call(void 0, _chunkTGHB5XSTjs.Text, { tag: "div", size: "base", weight: "bold" }, { default: () => props.title }),
+            _vue.h.call(void 0, 
+              _chunkTGHB5XSTjs.Text,
+              { tag: "div", size: "base", weight: "bold", class: "text-gray-900 dark:text-gray-100" },
+              { default: () => props.title }
+            ),
             totalUnread.value > 0 ? _vue.h.call(void 0, 
               "span",
               {
-                class: "inline-flex items-center justify-center min-w-[20px] h-5 px-1.5 text-xs font-semibold rounded-full bg-[var(--tiger-primary,#2563eb)] text-white"
+                class: "inline-flex items-center justify-center min-w-[20px] h-5 px-1.5 text-[11px] font-bold rounded-full bg-gradient-to-r from-blue-500 to-indigo-600 text-white shadow-sm shadow-blue-500/20 animate-pulse"
               },
               String(totalUnread.value)
             ) : null
@@ -419,6 +477,10 @@ var NotificationCenter = _vue.defineComponent.call(void 0, {
               size: "sm",
               variant: "ghost",
               disabled: !hasUnread.value,
+              class: _tigercatcore.classNames.call(void 0, 
+                "text-xs font-semibold transition-colors duration-200",
+                hasUnread.value ? "text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300" : "text-gray-400 dark:text-gray-600"
+              ),
               onClick: handleMarkAllRead
             },
             { default: () => props.markAllReadText }
@@ -426,8 +488,8 @@ var NotificationCenter = _vue.defineComponent.call(void 0, {
         ]),
         renderReadFilterButtons()
       ]);
-      const content = props.loading ? _vue.h.call(void 0, "div", { class: "flex items-center justify-center py-12" }, [
-        _vue.h.call(void 0, _chunk2LNNB55Ejs.Loading, { text: props.loadingText })
+      const content = props.loading ? _vue.h.call(void 0, "div", { class: "flex items-center justify-center py-16" }, [
+        _vue.h.call(void 0, _chunk2LNNB55Ejs.Loading, { text: props.loadingText, class: "text-blue-500 dark:text-blue-400 font-medium" })
       ]) : resolvedGroups.value.length > 0 ? _vue.h.call(void 0, "div", { class: "-mx-4 -mb-4" }, [renderTabs()]) : _vue.h.call(void 0, "div", { class: "-mx-4 -mb-4 max-h-[380px] overflow-y-auto" }, [
         renderList(filteredFlatItems.value)
       ]);
@@ -445,7 +507,10 @@ var NotificationCenter = _vue.defineComponent.call(void 0, {
         [
           _vue.h.call(void 0, 
             _chunkXGXGAK27js.Card,
-            { variant: "bordered", className: "w-full" },
+            {
+              variant: "bordered",
+              className: "w-full rounded-2xl border border-gray-100/80 dark:border-gray-800/80 bg-white/95 dark:bg-gray-950/90 backdrop-blur-md shadow-[0_8px_30px_rgb(0,0,0,0.04)] dark:shadow-[0_8px_30px_rgb(0,0,0,0.2)] transition-all duration-300 overflow-hidden"
+            },
             {
               header: () => header,
               default: () => content