@robot-admin/naive-ui-components 0.14.3 → 0.16.0

package/dist/C_NotificationCenter.css

@@ -1,138 +1,6 @@
 :root{--c-primary: var(--primary-color, #2080f0);--c-primary-hover: var(--primary-color-hover, #4098fc);--c-primary-pressed: var(--primary-color-pressed, #1060c9);--c-success: var(--success-color, #18a058);--c-warning: var(--warning-color, #f0a020);--c-error: var(--error-color, #d03050);--c-info: var(--info-color, #2080f0);--c-bg-body: var(--body-color, #ffffff);--c-bg-card: var(--card-color, #ffffff);--c-bg-surface: var(--popover-color, #ffffff);--c-text-1: var(--text-color-1, #262626);--c-text-2: var(--text-color-2, #525252);--c-text-3: var(--text-color-3, #a3a3a3);--c-text-4: var(--text-color-4, #c0c0c0);--c-border: var(--border-color, #e5e7eb);--c-radius-sm: var(--border-radius-small, 4px);--c-radius: var(--border-radius, 6px);--c-transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);--c-transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);--c-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);--c-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);--c-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1)}
 
-/* unplugin-vue-components disabled */
-/* layer: default */
-.flex[data-v-a06c4b3a]{display:flex;}
-.inline-flex[data-v-a06c4b3a]{display:inline-flex;}
-.transform[data-v-a06c4b3a]{transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
-.transition[data-v-a06c4b3a]{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
-.ease-in[data-v-a06c4b3a]{transition-timing-function:cubic-bezier(0.4, 0, 1, 1);}
-.ease-in-out[data-v-a06c4b3a]{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);}
-.ease-out[data-v-a06c4b3a]{transition-timing-function:cubic-bezier(0, 0, 0.2, 1);}
-
-/* unplugin-vue-components disabled *//*
- * NPopover 的 content-class 样式需要在组件外部生效，
- * 因为 NPopover 将内容渲染到 teleport 容器中，scoped 样式无法覆盖。
- */
-.c-notification-center__popover {
-  /*
-   * Popover 被 Teleport 到 body 后无法继承触发器作用域内的 --c-*。
-   * 直接桥接 NPopover 自身随主题注入的变量，确保明暗主题自动适配。
-   */
-  --c-bg-card: var(--n-color, #fff);
-  --c-bg-surface: var(--n-color, #fff);
-  --c-text-1: var(--n-text-color, #262626);
-  --c-text-2: color-mix(
-    in srgb,
-    var(--n-text-color, #262626) 68%,
-    transparent
-  );
-  --c-text-3: color-mix(
-    in srgb,
-    var(--n-text-color, #262626) 50%,
-    transparent
-  );
-  --c-text-4: color-mix(
-    in srgb,
-    var(--n-text-color, #262626) 36%,
-    transparent
-  );
-  --c-border: color-mix(
-    in srgb,
-    var(--n-text-color, #262626) 14%,
-    transparent
-  );
-  color: var(--n-text-color);
-  background-color: var(--n-color);
-  padding: 0 !important;
-  border-radius: 12px !important;
-  overflow: hidden;
-  box-shadow: var(--c-shadow, 0 12px 32px rgba(0, 0, 0, 0.1)) !important;
-}
-/* unplugin-vue-components disabled */.c-notification-center[data-v-a06c4b3a] {
-  display: inline-flex;
-  align-items: center;
-}
-.c-notification-center__panel[data-v-a06c4b3a] {
-  display: flex;
-  flex-direction: column;
-  max-height: 560px;
-}
-.c-notification-center__header[data-v-a06c4b3a] {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 14px 16px 10px;
-  border-bottom: 1px solid var(--c-border);
-}
-.c-notification-center__title[data-v-a06c4b3a] {
-  font-size: 15px;
-  font-weight: 600;
-  color: var(--c-text-1);
-}
-.c-notification-center__header-extra[data-v-a06c4b3a] {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-.c-notification-center__ws-dot[data-v-a06c4b3a] {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  transition: background-color var(--c-transition, 0.2s ease);
-}
-.c-notification-center__ws-dot--connected[data-v-a06c4b3a] {
-  background: #52c41a;
-  box-shadow: 0 0 4px rgba(82, 196, 26, 0.5);
-}
-.c-notification-center__ws-dot--connecting[data-v-a06c4b3a], .c-notification-center__ws-dot--reconnecting[data-v-a06c4b3a] {
-  background: #faad14;
-  animation: status-blink-a06c4b3a 1s ease-in-out infinite;
-}
-.c-notification-center__ws-dot--disconnected[data-v-a06c4b3a] {
-  background: var(--c-text-4);
-}
-@keyframes status-blink-a06c4b3a {
-0%, 100% {
-    opacity: 1;
-}
-50% {
-    opacity: 0.3;
-}
-}
-/* ─── 切换过渡 ───────────────────────────────── */
-.slide-fade-enter-active[data-v-a06c4b3a] {
-  transition: all 0.25s ease-out;
-}
-.slide-fade-leave-active[data-v-a06c4b3a] {
-  transition: all 0.2s ease-in;
-}
-.slide-fade-enter-from[data-v-a06c4b3a] {
-  opacity: 0;
-  transform: translateY(8px);
-}
-.slide-fade-leave-to[data-v-a06c4b3a] {
-  opacity: 0;
-  transform: translateY(-8px);
-}
-/* unplugin-vue-components disabled */
-/* layer: default */
-.absolute[data-v-51516250]{position:absolute;}
-.relative[data-v-51516250]{position:relative;}
-.inline-flex[data-v-51516250]{display:inline-flex;}
-.transform[data-v-51516250]{transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
-.border[data-v-51516250]{border-width:1px;}
-.outline[data-v-51516250]{outline-style:solid;}
-.transition[data-v-51516250]{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
-.ease[data-v-51516250]{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);}
-
-/* unplugin-vue-components disabled */
-/* layer: default */
-.flex[data-v-8e02b6cd]{display:flex;}
-.flex-wrap[data-v-8e02b6cd]{flex-wrap:wrap;}
-.px[data-v-8e02b6cd]{padding-left:1rem;padding-right:1rem;}
-
-/* unplugin-vue-components disabled */.notification-badge[data-v-51516250] {
+.notification-badge[data-v-51516250] {
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -221,7 +89,18 @@
     opacity: 1;
 }
 }
-/* unplugin-vue-components disabled */.notification-detail[data-v-8e02b6cd] {
+
+/* layer: default */
+.absolute[data-v-51516250]{position:absolute;}
+.relative[data-v-51516250]{position:relative;}
+.inline-flex[data-v-51516250]{display:inline-flex;}
+.transform[data-v-51516250]{transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
+.border[data-v-51516250]{border-width:1px;}
+.outline[data-v-51516250]{outline-style:solid;}
+.transition[data-v-51516250]{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
+.ease[data-v-51516250]{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);}
+
+.notification-detail[data-v-8e02b6cd] {
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -291,127 +170,13 @@
   display: flex;
   justify-content: flex-end;
 }
-/* unplugin-vue-components disabled */
-/* layer: default */
-.absolute[data-v-d366768f]{position:absolute;}
-.relative[data-v-d366768f]{position:relative;}
-.flex[data-v-d366768f]{display:flex;}
-.px[data-v-d366768f]{padding-left:1rem;padding-right:1rem;}
-.tab[data-v-d366768f]{-moz-tab-size:4;-o-tab-size:4;tab-size:4;}
-.transition[data-v-d366768f]{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
 
-/* unplugin-vue-components disabled */.notification-list__tabs[data-v-d366768f] {
-  display: flex;
-  border-bottom: 1px solid var(--c-border);
-  padding: 0 4px;
-}
-.notification-list__tab[data-v-d366768f] {
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  padding: 10px 12px;
-  font-size: 13px;
-  color: var(--c-text-2);
-  cursor: pointer;
-  transition: all var(--c-transition, 0.2s ease);
-  user-select: none;
-}
-.notification-list__tab[data-v-d366768f]::after {
-  content: "";
-  position: absolute;
-  bottom: 0;
-  left: 12px;
-  right: 12px;
-  height: 2px;
-  background: transparent;
-  border-radius: 1px;
-  transition: background var(--c-transition, 0.2s ease);
-}
-.notification-list__tab[data-v-d366768f]:hover {
-  color: var(--c-text-1);
-}
-.notification-list__tab--active[data-v-d366768f] {
-  color: var(--c-primary);
-  font-weight: 500;
-}
-.notification-list__tab--active[data-v-d366768f]::after {
-  background: var(--c-primary);
-}
-.notification-list__tab-count[data-v-d366768f] {
-  min-width: 16px;
-  height: 16px;
-  padding: 0 4px;
-  border-radius: 8px;
-  background: #f5222d;
-  color: #fff;
-  font-size: 10px;
-  font-weight: 600;
-  line-height: 16px;
-  text-align: center;
-}
-.notification-list__toolbar[data-v-d366768f] {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 12px;
-  padding: 6px 16px;
-  border-bottom: 1px solid var(--c-border);
-}
-.notification-list__scroll[data-v-d366768f] {
-  flex: 1;
-}
-.notification-list__skeleton[data-v-d366768f] {
-  display: flex;
-  align-items: flex-start;
-  gap: 12px;
-  padding: 14px 16px;
-}
-.notification-list__skeleton-text[data-v-d366768f] {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-.notification-list__load-more[data-v-d366768f] {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  padding: 12px;
-  font-size: 12px;
-  color: var(--c-text-2);
-  cursor: pointer;
-  transition: color var(--c-transition, 0.2s ease);
-}
-.notification-list__load-more[data-v-d366768f]:hover {
-  color: var(--c-primary);
-}
-.notification-list__empty[data-v-d366768f] {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 60px 0;
-  gap: 12px;
-}
-.notification-list__empty-icon[data-v-d366768f] {
-  color: var(--c-text-4);
-  opacity: 0.5;
-}
-.notification-list__empty-text[data-v-d366768f] {
-  font-size: 13px;
-  color: var(--c-text-4);
-}
-/* unplugin-vue-components disabled */
 /* layer: default */
-.hidden[data-v-2f1c8e96]{display:none;}
-.flex[data-v-2f1c8e96]{display:flex;}
-.inline-flex[data-v-2f1c8e96]{display:inline-flex;}
-.flex-shrink[data-v-2f1c8e96]{flex-shrink:1;}
-.transition[data-v-2f1c8e96]{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
+.flex[data-v-8e02b6cd]{display:flex;}
+.flex-wrap[data-v-8e02b6cd]{flex-wrap:wrap;}
+.px[data-v-8e02b6cd]{padding-left:1rem;padding-right:1rem;}
 
-/* unplugin-vue-components disabled */.notification-item[data-v-2f1c8e96] {
+.notification-item[data-v-8a4522f3] {
   display: flex;
   align-items: flex-start;
   gap: 10px;
@@ -420,58 +185,58 @@
   transition: background-color var(--c-transition, 0.2s ease);
   border-bottom: 1px solid var(--c-border);
 }
-.notification-item[data-v-2f1c8e96]:last-child {
+.notification-item[data-v-8a4522f3]:last-child {
   border-bottom: none;
 }
-.notification-item[data-v-2f1c8e96]:hover {
+.notification-item[data-v-8a4522f3]:hover {
   background-color: var(--c-bg-card);
 }
-.notification-item:hover .notification-item__actions[data-v-2f1c8e96] {
+.notification-item:hover .notification-item__actions[data-v-8a4522f3] {
   opacity: 1;
 }
-.notification-item--unread[data-v-2f1c8e96] {
+.notification-item--unread[data-v-8a4522f3] {
   background-color: color-mix(in srgb, var(--c-primary) 4%, transparent);
 }
-.notification-item--unread[data-v-2f1c8e96]:hover {
+.notification-item--unread[data-v-8a4522f3]:hover {
   background-color: color-mix(in srgb, var(--c-primary) 8%, transparent);
 }
-.notification-item--urgent[data-v-2f1c8e96] {
+.notification-item--urgent[data-v-8a4522f3] {
   border-left: 3px solid #f5222d;
   padding-left: 13px;
 }
-.notification-item[data-v-2f1c8e96] {
+.notification-item[data-v-8a4522f3] {
   /* ─── 子元素 ──────────────────────────── */
 }
-.notification-item__indicator[data-v-2f1c8e96] {
+.notification-item__indicator[data-v-8a4522f3] {
   flex-shrink: 0;
   width: 8px;
   display: flex;
   align-items: center;
   padding-top: 14px;
 }
-.notification-item__dot[data-v-2f1c8e96] {
+.notification-item__dot[data-v-8a4522f3] {
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: var(--c-primary);
 }
-.notification-item__dot--urgent[data-v-2f1c8e96] {
+.notification-item__dot--urgent[data-v-8a4522f3] {
   background: #f5222d;
   box-shadow: 0 0 4px rgba(245, 34, 45, 0.5);
 }
-.notification-item__dot--high[data-v-2f1c8e96] {
+.notification-item__dot--high[data-v-8a4522f3] {
   background: #fa8c16;
 }
-.notification-item__dot--normal[data-v-2f1c8e96] {
+.notification-item__dot--normal[data-v-8a4522f3] {
   background: var(--c-primary);
 }
-.notification-item__dot--low[data-v-2f1c8e96] {
+.notification-item__dot--low[data-v-8a4522f3] {
   background: var(--c-text-4);
 }
-.notification-item__avatar[data-v-2f1c8e96] {
+.notification-item__avatar[data-v-8a4522f3] {
   flex-shrink: 0;
 }
-.notification-item__avatar-placeholder[data-v-2f1c8e96] {
+.notification-item__avatar-placeholder[data-v-8a4522f3] {
   width: 36px;
   height: 36px;
   border-radius: 50%;
@@ -481,27 +246,27 @@
   font-size: 16px;
   color: #fff;
 }
-.notification-item__avatar-placeholder--system[data-v-2f1c8e96] {
+.notification-item__avatar-placeholder--system[data-v-8a4522f3] {
   background: linear-gradient(135deg, #667eea, #764ba2);
 }
-.notification-item__avatar-placeholder--business[data-v-2f1c8e96] {
+.notification-item__avatar-placeholder--business[data-v-8a4522f3] {
   background: linear-gradient(135deg, #43e97b, #38f9d7);
   color: #0d1425;
 }
-.notification-item__avatar-placeholder--alarm[data-v-2f1c8e96] {
+.notification-item__avatar-placeholder--alarm[data-v-8a4522f3] {
   background: linear-gradient(135deg, #f093fb, #f5576c);
 }
-.notification-item__body[data-v-2f1c8e96] {
+.notification-item__body[data-v-8a4522f3] {
   flex: 1;
   min-width: 0;
 }
-.notification-item__header[data-v-2f1c8e96] {
+.notification-item__header[data-v-8a4522f3] {
   display: flex;
   align-items: center;
   gap: 6px;
   margin-bottom: 4px;
 }
-.notification-item__title[data-v-2f1c8e96] {
+.notification-item__title[data-v-8a4522f3] {
   font-size: 13px;
   font-weight: 500;
   color: var(--c-text-1);
@@ -510,7 +275,7 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.notification-item__summary[data-v-2f1c8e96] {
+.notification-item__summary[data-v-8a4522f3] {
   font-size: 12px;
   color: var(--c-text-2);
   line-height: 1.5;
@@ -520,21 +285,21 @@
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
-.notification-item__meta[data-v-2f1c8e96] {
+.notification-item__meta[data-v-8a4522f3] {
   display: flex;
   align-items: center;
   gap: 8px;
   margin-top: 6px;
 }
-.notification-item__time[data-v-2f1c8e96], .notification-item__sender[data-v-2f1c8e96] {
+.notification-item__time[data-v-8a4522f3], .notification-item__sender[data-v-8a4522f3] {
   font-size: 11px;
   color: var(--c-text-4);
 }
-.notification-item__sender[data-v-2f1c8e96]::before {
+.notification-item__sender[data-v-8a4522f3]::before {
   content: "·";
   margin-right: 8px;
 }
-.notification-item__actions[data-v-2f1c8e96] {
+.notification-item__actions[data-v-8a4522f3] {
   flex-shrink: 0;
   display: flex;
   align-items: center;
@@ -542,7 +307,10 @@
   opacity: 0;
   transition: opacity var(--c-transition, 0.2s ease);
 }
-.notification-item__action[data-v-2f1c8e96] {
+.notification-item__action[data-v-8a4522f3] {
+  appearance: none;
+  border: 0;
+  background: transparent;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -554,7 +322,274 @@
   color: var(--c-text-4);
   transition: all var(--c-transition, 0.2s ease);
 }
-.notification-item__action[data-v-2f1c8e96]:hover {
+.notification-item__action[data-v-8a4522f3]:hover {
   color: var(--c-primary);
   background-color: var(--c-border);
-}
+}
+.notification-item__action[data-v-8a4522f3]:disabled {
+  cursor: wait;
+  opacity: 0.45;
+}
+
+/* layer: default */
+.hidden[data-v-8a4522f3]{display:none;}
+.flex[data-v-8a4522f3]{display:flex;}
+.inline-flex[data-v-8a4522f3]{display:inline-flex;}
+.flex-shrink[data-v-8a4522f3]{flex-shrink:1;}
+.border[data-v-8a4522f3]{border-width:1px;}
+.transition[data-v-8a4522f3]{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
+
+.notification-list__tabs[data-v-63a2d867] {
+  display: flex;
+  border-bottom: 1px solid var(--c-border);
+  padding: 0 4px;
+}
+.notification-list__tab[data-v-63a2d867] {
+  appearance: none;
+  border: 0;
+  background: transparent;
+  font-family: inherit;
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 10px 12px;
+  font-size: 13px;
+  color: var(--c-text-2);
+  cursor: pointer;
+  transition: all var(--c-transition, 0.2s ease);
+  user-select: none;
+}
+.notification-list__tab[data-v-63a2d867]::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 12px;
+  right: 12px;
+  height: 2px;
+  background: transparent;
+  border-radius: 1px;
+  transition: background var(--c-transition, 0.2s ease);
+}
+.notification-list__tab[data-v-63a2d867]:hover {
+  color: var(--c-text-1);
+}
+.notification-list__tab--active[data-v-63a2d867] {
+  color: var(--c-primary);
+  font-weight: 500;
+}
+.notification-list__tab--active[data-v-63a2d867]::after {
+  background: var(--c-primary);
+}
+.notification-list__tab-count[data-v-63a2d867] {
+  min-width: 16px;
+  height: 16px;
+  padding: 0 4px;
+  border-radius: 8px;
+  background: #f5222d;
+  color: #fff;
+  font-size: 10px;
+  font-weight: 600;
+  line-height: 16px;
+  text-align: center;
+}
+.notification-list__toolbar[data-v-63a2d867] {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 12px;
+  padding: 6px 16px;
+  border-bottom: 1px solid var(--c-border);
+}
+.notification-list__scroll[data-v-63a2d867] {
+  flex: 1;
+}
+.notification-list__skeleton[data-v-63a2d867] {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 14px 16px;
+}
+.notification-list__skeleton-text[data-v-63a2d867] {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.notification-list__load-more[data-v-63a2d867] {
+  appearance: none;
+  border: 0;
+  background: transparent;
+  font-family: inherit;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 12px;
+  font-size: 12px;
+  color: var(--c-text-2);
+  cursor: pointer;
+  transition: color var(--c-transition, 0.2s ease);
+}
+.notification-list__load-more[data-v-63a2d867]:hover {
+  color: var(--c-primary);
+}
+.notification-list__empty[data-v-63a2d867] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 0;
+  gap: 12px;
+}
+.notification-list__empty-icon[data-v-63a2d867] {
+  color: var(--c-text-4);
+  opacity: 0.5;
+}
+.notification-list__empty-text[data-v-63a2d867] {
+  font-size: 13px;
+  color: var(--c-text-4);
+}
+
+/* layer: default */
+.absolute[data-v-63a2d867]{position:absolute;}
+.relative[data-v-63a2d867]{position:relative;}
+.flex[data-v-63a2d867]{display:flex;}
+.border[data-v-63a2d867]{border-width:1px;}
+.px[data-v-63a2d867]{padding-left:1rem;padding-right:1rem;}
+.tab[data-v-63a2d867]{-moz-tab-size:4;-o-tab-size:4;tab-size:4;}
+.transition[data-v-63a2d867]{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
+
+.c-notification-center[data-v-21f127ad] {
+  display: inline-flex;
+  align-items: center;
+}
+.c-notification-center__panel[data-v-21f127ad] {
+  display: flex;
+  flex-direction: column;
+  max-height: 560px;
+}
+.c-notification-center__header[data-v-21f127ad] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 16px 10px;
+  border-bottom: 1px solid var(--c-border);
+}
+.c-notification-center__title[data-v-21f127ad] {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--c-text-1);
+}
+.c-notification-center__header-extra[data-v-21f127ad] {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.c-notification-center__error[data-v-21f127ad] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin: 10px 16px;
+  padding: 10px;
+  color: var(--c-text-1);
+  background: color-mix(in srgb, #d03050 8%, transparent);
+  border-radius: 6px;
+  font-size: 12px;
+}
+.c-notification-center__footer[data-v-21f127ad] {
+  display: flex;
+  justify-content: center;
+  padding: 10px 16px;
+  border-top: 1px solid var(--c-border);
+}
+.c-notification-center__ws-dot[data-v-21f127ad] {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  transition: background-color var(--c-transition, 0.2s ease);
+}
+.c-notification-center__ws-dot--connected[data-v-21f127ad] {
+  background: #52c41a;
+  box-shadow: 0 0 4px rgba(82, 196, 26, 0.5);
+}
+.c-notification-center__ws-dot--connecting[data-v-21f127ad], .c-notification-center__ws-dot--reconnecting[data-v-21f127ad] {
+  background: #faad14;
+  animation: status-blink-21f127ad 1s ease-in-out infinite;
+}
+.c-notification-center__ws-dot--disconnected[data-v-21f127ad] {
+  background: var(--c-text-4);
+}
+@keyframes status-blink-21f127ad {
+0%, 100% {
+    opacity: 1;
+}
+50% {
+    opacity: 0.3;
+}
+}
+/* ─── 切换过渡 ───────────────────────────────── */
+.slide-fade-enter-active[data-v-21f127ad] {
+  transition: all 0.25s ease-out;
+}
+.slide-fade-leave-active[data-v-21f127ad] {
+  transition: all 0.2s ease-in;
+}
+.slide-fade-enter-from[data-v-21f127ad] {
+  opacity: 0;
+  transform: translateY(8px);
+}
+.slide-fade-leave-to[data-v-21f127ad] {
+  opacity: 0;
+  transform: translateY(-8px);
+}
+/*
+ * NPopover 的 content-class 样式需要在组件外部生效，
+ * 因为 NPopover 将内容渲染到 teleport 容器中，scoped 样式无法覆盖。
+ */
+.c-notification-center__popover {
+  /*
+   * Popover 被 Teleport 到 body 后无法继承触发器作用域内的 --c-*。
+   * 直接桥接 NPopover 自身随主题注入的变量，确保明暗主题自动适配。
+   */
+  --c-bg-card: var(--n-color, #fff);
+  --c-bg-surface: var(--n-color, #fff);
+  --c-text-1: var(--n-text-color, #262626);
+  --c-text-2: color-mix(
+    in srgb,
+    var(--n-text-color, #262626) 68%,
+    transparent
+  );
+  --c-text-3: color-mix(
+    in srgb,
+    var(--n-text-color, #262626) 50%,
+    transparent
+  );
+  --c-text-4: color-mix(
+    in srgb,
+    var(--n-text-color, #262626) 36%,
+    transparent
+  );
+  --c-border: color-mix(
+    in srgb,
+    var(--n-text-color, #262626) 14%,
+    transparent
+  );
+  color: var(--n-text-color);
+  background-color: var(--n-color);
+  padding: 0 !important;
+  border-radius: 12px !important;
+  overflow: hidden;
+  box-shadow: var(--c-shadow, 0 12px 32px rgba(0, 0, 0, 0.1)) !important;
+}
+
+/* layer: default */
+.flex[data-v-21f127ad]{display:flex;}
+.inline-flex[data-v-21f127ad]{display:inline-flex;}
+.transform[data-v-21f127ad]{transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
+.transition[data-v-21f127ad]{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
+.ease-in[data-v-21f127ad]{transition-timing-function:cubic-bezier(0.4, 0, 1, 1);}
+.ease-in-out[data-v-21f127ad]{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);}
+.ease-out[data-v-21f127ad]{transition-timing-function:cubic-bezier(0, 0, 0.2, 1);}