@robot-admin/naive-ui-components 0.13.9 → 0.14.0

package/dist/C_NotificationCenter.css

@@ -1,294 +1,171 @@
-/* unplugin-vue-components disabled */.notification-badge[data-v-51516250] {
-  position: relative;
+: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 */.c-notification-center[data-v-a06c4b3a] {
   display: inline-flex;
   align-items: center;
 }
-.notification-badge__trigger[data-v-51516250] {
-  appearance: none;
-  border: 0;
-  background: transparent;
-  color: inherit;
-  font: inherit;
-  position: relative;
-  display: inline-flex;
+.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: center;
-  cursor: pointer;
-  padding: 4px;
-  border-radius: 6px;
-  transition: all var(--c-transition, 0.2s ease);
+  justify-content: space-between;
+  padding: 14px 16px 10px;
+  border-bottom: 1px solid var(--c-border);
 }
-.notification-badge__trigger[data-v-51516250]:hover {
-  background-color: var(--c-border);
+.c-notification-center__title[data-v-a06c4b3a] {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--c-text-1);
 }
-.notification-badge__trigger:hover .notification-badge__icon[data-v-51516250] {
-  color: var(--c-primary);
+.c-notification-center__header-extra[data-v-a06c4b3a] {
+  display: flex;
+  align-items: center;
+  gap: 8px;
 }
-.notification-badge__trigger[data-v-51516250]:focus-visible {
-  outline: 2px solid var(--c-primary);
-  outline-offset: 2px;
+.c-notification-center__ws-dot[data-v-a06c4b3a] {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  transition: background-color var(--c-transition, 0.2s ease);
 }
-.notification-badge__icon[data-v-51516250] {
-  color: var(--c-text-2);
-  transition: 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);
 }
-.notification-badge__count[data-v-51516250] {
-  position: absolute;
-  top: -2px;
-  right: -4px;
-  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;
-  white-space: nowrap;
-  pointer-events: none;
-  box-shadow: 0 0 0 2px var(--c-bg);
+.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;
 }
-.notification-badge__pulse[data-v-51516250] {
-  position: absolute;
-  top: -2px;
-  right: -4px;
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  background: rgba(245, 34, 45, 0.4);
-  animation: pulse-ring-51516250 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
-  pointer-events: none;
+.c-notification-center__ws-dot--disconnected[data-v-a06c4b3a] {
+  background: var(--c-text-4);
 }
-@keyframes pulse-ring-51516250 {
-0% {
-    transform: scale(0.8);
+@keyframes status-blink-a06c4b3a {
+0%, 100% {
     opacity: 1;
 }
-100% {
-    transform: scale(2.2);
-    opacity: 0;
+50% {
+    opacity: 0.3;
 }
 }
-.badge-bounce-enter-active[data-v-51516250] {
-  animation: badge-in-51516250 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+/* ─── 切换过渡 ───────────────────────────────── */
+.slide-fade-enter-active[data-v-a06c4b3a] {
+  transition: all 0.25s ease-out;
 }
-.badge-bounce-leave-active[data-v-51516250] {
-  animation: badge-in-51516250 0.2s ease reverse;
+.slide-fade-leave-active[data-v-a06c4b3a] {
+  transition: all 0.2s ease-in;
 }
-@keyframes badge-in-51516250 {
-0% {
-    transform: scale(0);
-    opacity: 0;
+.slide-fade-enter-from[data-v-a06c4b3a] {
+  opacity: 0;
+  transform: translateY(8px);
 }
-100% {
-    transform: scale(1);
-    opacity: 1;
+.slide-fade-leave-to[data-v-a06c4b3a] {
+  opacity: 0;
+  transform: translateY(-8px);
 }
+/* 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 */
 /* 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);}
+.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 */.notification-item[data-v-2f1c8e96] {
+/* 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 */
+/* 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-list__tabs[data-v-d366768f] {
   display: flex;
-  align-items: flex-start;
-  gap: 10px;
-  padding: 12px 16px;
-  cursor: pointer;
-  transition: background-color var(--c-transition, 0.2s ease);
   border-bottom: 1px solid var(--c-border);
+  padding: 0 4px;
 }
-.notification-item[data-v-2f1c8e96]:last-child {
-  border-bottom: none;
-}
-.notification-item[data-v-2f1c8e96]:hover {
-  background-color: var(--c-bg-card);
-}
-.notification-item:hover .notification-item__actions[data-v-2f1c8e96] {
-  opacity: 1;
-}
-.notification-item--unread[data-v-2f1c8e96] {
-  background-color: color-mix(in srgb, var(--c-primary) 4%, transparent);
-}
-.notification-item--unread[data-v-2f1c8e96]:hover {
-  background-color: color-mix(in srgb, var(--c-primary) 8%, transparent);
-}
-.notification-item--urgent[data-v-2f1c8e96] {
-  border-left: 3px solid #f5222d;
-  padding-left: 13px;
-}
-.notification-item[data-v-2f1c8e96] {
-  /* ─── 子元素 ──────────────────────────── */
-}
-.notification-item__indicator[data-v-2f1c8e96] {
-  flex-shrink: 0;
-  width: 8px;
+.notification-list__tab[data-v-d366768f] {
+  position: relative;
   display: flex;
   align-items: center;
-  padding-top: 14px;
+  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-item__dot[data-v-2f1c8e96] {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: var(--c-primary);
+.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-item__dot--urgent[data-v-2f1c8e96] {
-  background: #f5222d;
-  box-shadow: 0 0 4px rgba(245, 34, 45, 0.5);
+.notification-list__tab[data-v-d366768f]:hover {
+  color: var(--c-text-1);
 }
-.notification-item__dot--high[data-v-2f1c8e96] {
-  background: #fa8c16;
+.notification-list__tab--active[data-v-d366768f] {
+  color: var(--c-primary);
+  font-weight: 500;
 }
-.notification-item__dot--normal[data-v-2f1c8e96] {
-  background: var(--c-primary);
-}
-.notification-item__dot--low[data-v-2f1c8e96] {
-  background: var(--c-text-4);
-}
-.notification-item__avatar[data-v-2f1c8e96] {
-  flex-shrink: 0;
-}
-.notification-item__avatar-placeholder[data-v-2f1c8e96] {
-  width: 36px;
-  height: 36px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 16px;
-  color: #fff;
-}
-.notification-item__avatar-placeholder--system[data-v-2f1c8e96] {
-  background: linear-gradient(135deg, #667eea, #764ba2);
-}
-.notification-item__avatar-placeholder--business[data-v-2f1c8e96] {
-  background: linear-gradient(135deg, #43e97b, #38f9d7);
-  color: #0d1425;
-}
-.notification-item__avatar-placeholder--alarm[data-v-2f1c8e96] {
-  background: linear-gradient(135deg, #f093fb, #f5576c);
-}
-.notification-item__body[data-v-2f1c8e96] {
-  flex: 1;
-  min-width: 0;
-}
-.notification-item__header[data-v-2f1c8e96] {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  margin-bottom: 4px;
-}
-.notification-item__title[data-v-2f1c8e96] {
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--c-text-1);
-  line-height: 1.4;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.notification-item__summary[data-v-2f1c8e96] {
-  font-size: 12px;
-  color: var(--c-text-2);
-  line-height: 1.5;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-.notification-item__meta[data-v-2f1c8e96] {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-top: 6px;
-}
-.notification-item__time[data-v-2f1c8e96], .notification-item__sender[data-v-2f1c8e96] {
-  font-size: 11px;
-  color: var(--c-text-4);
-}
-.notification-item__sender[data-v-2f1c8e96]::before {
-  content: "·";
-  margin-right: 8px;
-}
-.notification-item__actions[data-v-2f1c8e96] {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  opacity: 0;
-  transition: opacity var(--c-transition, 0.2s ease);
-}
-.notification-item__action[data-v-2f1c8e96] {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  padding: 2px;
-  border-radius: 4px;
-  cursor: pointer;
-  color: var(--c-text-4);
-  transition: all var(--c-transition, 0.2s ease);
-}
-.notification-item__action[data-v-2f1c8e96]:hover {
-  color: var(--c-primary);
-  background-color: var(--c-border);
-}
-/* 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;}
-
-/* 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 {
+.notification-list__tab--active[data-v-d366768f]::after {
   background: var(--c-primary);
 }
 .notification-list__tab-count[data-v-d366768f] {
@@ -358,12 +235,14 @@
 }
 /* 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;}
+.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 */.notification-detail[data-v-8e02b6cd] {
   display: flex;
@@ -435,124 +314,247 @@
   display: flex;
   justify-content: flex-end;
 }
-/* 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 */.c-notification-center[data-v-a06c4b3a] {
+/* unplugin-vue-components disabled */.notification-badge[data-v-51516250] {
+  position: relative;
   display: inline-flex;
   align-items: center;
 }
-.c-notification-center__panel[data-v-a06c4b3a] {
-  display: flex;
-  flex-direction: column;
-  max-height: 560px;
+.notification-badge__trigger[data-v-51516250] {
+  appearance: none;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 6px;
+  transition: all var(--c-transition, 0.2s ease);
 }
-.c-notification-center__header[data-v-a06c4b3a] {
+.notification-badge__trigger[data-v-51516250]:hover {
+  background-color: var(--c-border);
+}
+.notification-badge__trigger:hover .notification-badge__icon[data-v-51516250] {
+  color: var(--c-primary);
+}
+.notification-badge__trigger[data-v-51516250]:focus-visible {
+  outline: 2px solid var(--c-primary);
+  outline-offset: 2px;
+}
+.notification-badge__icon[data-v-51516250] {
+  color: var(--c-text-2);
+  transition: color var(--c-transition, 0.2s ease);
+}
+.notification-badge__count[data-v-51516250] {
+  position: absolute;
+  top: -2px;
+  right: -4px;
+  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;
+  white-space: nowrap;
+  pointer-events: none;
+  box-shadow: 0 0 0 2px var(--c-bg);
+}
+.notification-badge__pulse[data-v-51516250] {
+  position: absolute;
+  top: -2px;
+  right: -4px;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: rgba(245, 34, 45, 0.4);
+  animation: pulse-ring-51516250 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
+  pointer-events: none;
+}
+@keyframes pulse-ring-51516250 {
+0% {
+    transform: scale(0.8);
+    opacity: 1;
+}
+100% {
+    transform: scale(2.2);
+    opacity: 0;
+}
+}
+.badge-bounce-enter-active[data-v-51516250] {
+  animation: badge-in-51516250 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+.badge-bounce-leave-active[data-v-51516250] {
+  animation: badge-in-51516250 0.2s ease reverse;
+}
+@keyframes badge-in-51516250 {
+0% {
+    transform: scale(0);
+    opacity: 0;
+}
+100% {
+    transform: scale(1);
+    opacity: 1;
+}
+}
+/* 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;}
+
+/* unplugin-vue-components disabled */.notification-item[data-v-2f1c8e96] {
   display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 14px 16px 10px;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 12px 16px;
+  cursor: pointer;
+  transition: background-color var(--c-transition, 0.2s ease);
   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);
+.notification-item[data-v-2f1c8e96]:last-child {
+  border-bottom: none;
 }
-.c-notification-center__header-extra[data-v-a06c4b3a] {
+.notification-item[data-v-2f1c8e96]:hover {
+  background-color: var(--c-bg-card);
+}
+.notification-item:hover .notification-item__actions[data-v-2f1c8e96] {
+  opacity: 1;
+}
+.notification-item--unread[data-v-2f1c8e96] {
+  background-color: color-mix(in srgb, var(--c-primary) 4%, transparent);
+}
+.notification-item--unread[data-v-2f1c8e96]:hover {
+  background-color: color-mix(in srgb, var(--c-primary) 8%, transparent);
+}
+.notification-item--urgent[data-v-2f1c8e96] {
+  border-left: 3px solid #f5222d;
+  padding-left: 13px;
+}
+.notification-item[data-v-2f1c8e96] {
+  /* ─── 子元素 ──────────────────────────── */
+}
+.notification-item__indicator[data-v-2f1c8e96] {
+  flex-shrink: 0;
+  width: 8px;
   display: flex;
   align-items: center;
-  gap: 8px;
+  padding-top: 14px;
 }
-.c-notification-center__ws-dot[data-v-a06c4b3a] {
-  width: 8px;
-  height: 8px;
+.notification-item__dot[data-v-2f1c8e96] {
+  width: 6px;
+  height: 6px;
   border-radius: 50%;
-  transition: background-color var(--c-transition, 0.2s ease);
+  background: var(--c-primary);
 }
-.c-notification-center__ws-dot--connected[data-v-a06c4b3a] {
-  background: #52c41a;
-  box-shadow: 0 0 4px rgba(82, 196, 26, 0.5);
+.notification-item__dot--urgent[data-v-2f1c8e96] {
+  background: #f5222d;
+  box-shadow: 0 0 4px rgba(245, 34, 45, 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;
+.notification-item__dot--high[data-v-2f1c8e96] {
+  background: #fa8c16;
 }
-.c-notification-center__ws-dot--disconnected[data-v-a06c4b3a] {
+.notification-item__dot--normal[data-v-2f1c8e96] {
+  background: var(--c-primary);
+}
+.notification-item__dot--low[data-v-2f1c8e96] {
   background: var(--c-text-4);
 }
-@keyframes status-blink-a06c4b3a {
-0%, 100% {
-    opacity: 1;
+.notification-item__avatar[data-v-2f1c8e96] {
+  flex-shrink: 0;
 }
-50% {
-    opacity: 0.3;
+.notification-item__avatar-placeholder[data-v-2f1c8e96] {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  color: #fff;
 }
+.notification-item__avatar-placeholder--system[data-v-2f1c8e96] {
+  background: linear-gradient(135deg, #667eea, #764ba2);
 }
-/* ─── 切换过渡 ───────────────────────────────── */
-.slide-fade-enter-active[data-v-a06c4b3a] {
-  transition: all 0.25s ease-out;
+.notification-item__avatar-placeholder--business[data-v-2f1c8e96] {
+  background: linear-gradient(135deg, #43e97b, #38f9d7);
+  color: #0d1425;
 }
-.slide-fade-leave-active[data-v-a06c4b3a] {
-  transition: all 0.2s ease-in;
+.notification-item__avatar-placeholder--alarm[data-v-2f1c8e96] {
+  background: linear-gradient(135deg, #f093fb, #f5576c);
 }
-.slide-fade-enter-from[data-v-a06c4b3a] {
-  opacity: 0;
-  transform: translateY(8px);
+.notification-item__body[data-v-2f1c8e96] {
+  flex: 1;
+  min-width: 0;
 }
-.slide-fade-leave-to[data-v-a06c4b3a] {
-  opacity: 0;
-  transform: translateY(-8px);
+.notification-item__header[data-v-2f1c8e96] {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 4px;
 }
-/* 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;
+.notification-item__title[data-v-2f1c8e96] {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--c-text-1);
+  line-height: 1.4;
   overflow: hidden;
-  box-shadow: var(--c-shadow, 0 12px 32px rgba(0, 0, 0, 0.1)) !important;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
-/* 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);}
-
+.notification-item__summary[data-v-2f1c8e96] {
+  font-size: 12px;
+  color: var(--c-text-2);
+  line-height: 1.5;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.notification-item__meta[data-v-2f1c8e96] {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 6px;
+}
+.notification-item__time[data-v-2f1c8e96], .notification-item__sender[data-v-2f1c8e96] {
+  font-size: 11px;
+  color: var(--c-text-4);
+}
+.notification-item__sender[data-v-2f1c8e96]::before {
+  content: "·";
+  margin-right: 8px;
+}
+.notification-item__actions[data-v-2f1c8e96] {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  opacity: 0;
+  transition: opacity var(--c-transition, 0.2s ease);
+}
+.notification-item__action[data-v-2f1c8e96] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 2px;
+  border-radius: 4px;
+  cursor: pointer;
+  color: var(--c-text-4);
+  transition: all var(--c-transition, 0.2s ease);
+}
+.notification-item__action[data-v-2f1c8e96]:hover {
+  color: var(--c-primary);
+  background-color: var(--c-border);
+}