djm-ui 0.72.0 → 0.73.1

package/dist/djm-ui.css

@@ -1,4 +1,8 @@
-/*! DJM UI v0.72.0 · MIT · 2026-10-26 */
+/*!
+ * DJM UI v0.73.1 · 企业级中后台 Vue 3 组件库
+ * Copyright (c) 2026 上海多聚米科技有限公司. All rights reserved.
+ * MIT License · https://ui.duojumi.com · Build 2026-10-26
+ */
 
 /* ---- tokens.css ---- */
 
@@ -43,6 +47,19 @@
   --djm-hover: #eef3f9;
   --djm-brand-soft: #eaf3fd;
   --djm-glass: rgba(248, 250, 253, 0.96);
+  /* 毛玻璃：默认关闭，data-djm-glass="on" 或 .djm-glass 时生效 */
+  --djm-glass-bg: rgba(255, 255, 255, 0.72);
+  /* 弹窗、抽屉这类大面积阅读面用更实的底色，表单不发灰 */
+  --djm-glass-bg-strong: rgba(255, 255, 255, 0.8);
+  --djm-glass-border: rgba(255, 255, 255, 0.72);
+  --djm-glass-highlight: rgba(255, 255, 255, 0.92);
+  --djm-glass-divider: rgba(16, 40, 70, 0.08);
+  /* 开了毛玻璃后遮罩压淡，页面颜色才透得出来 */
+  --djm-glass-mask: rgba(18, 34, 54, 0.22);
+  --djm-glass-blur: 16px;
+  /* 弹窗、抽屉用更大的模糊半径，背后的表格不会糊成条纹 */
+  --djm-glass-blur-strong: 24px;
+  --djm-glass-shadow: 0 10px 30px -12px rgba(16, 40, 70, 0.28);
   --djm-loading-mask: rgba(255, 255, 255, 0.74);
   --djm-border: #dde6f0;
   --djm-border-strong: #cbd7e5;
@@ -154,6 +171,13 @@
   --djm-hover: #262e38;
   --djm-brand-soft: #1a3049;
   --djm-glass: rgba(20, 25, 31, 0.94);
+  --djm-glass-bg: rgba(25, 31, 38, 0.72);
+  --djm-glass-bg-strong: rgba(30, 37, 46, 0.86);
+  --djm-glass-border: rgba(255, 255, 255, 0.14);
+  --djm-glass-highlight: rgba(255, 255, 255, 0.08);
+  --djm-glass-divider: rgba(255, 255, 255, 0.1);
+  --djm-glass-mask: rgba(0, 0, 0, 0.5);
+  --djm-glass-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.6);
   --djm-loading-mask: rgba(25, 31, 38, 0.78);
   --djm-border: #2b333d;
   --djm-border-strong: #3c4652;
@@ -3252,12 +3276,19 @@ button.djm-breadcrumb-text {
 
 /* DJM UI · 加载中 */
 
+.djm-spin {
+  display: inline-flex;
+  align-items: center;
+  color: var(--djm-brand-600);
+}
+
+/* 包裹模式：内容上方盖一层遮罩 */
 .djm-spin-wrap {
   position: relative;
+  display: block;
   min-height: 60px;
 }
 
-/* 遮罩铺满被包裹内容，圆角跟随容器 */
 .djm-spin-mask {
   position: absolute;
   inset: 0;
@@ -3269,13 +3300,35 @@ button.djm-breadcrumb-text {
   gap: 8px;
   border-radius: inherit;
   background: var(--djm-loading-mask);
-  backdrop-filter: blur(1px);
+  -webkit-backdrop-filter: blur(2px);
+  backdrop-filter: blur(2px);
+}
+
+/* 内联模式：指示器与文字并排，不铺底 */
+.djm-spin-inline .djm-spin-mask {
+  position: static;
+  flex-direction: row;
+  gap: 8px;
+  border-radius: 0;
+  background: none;
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+}
+
+/* 全屏模式：遮罩铺满视口 */
+.djm-spin-fullscreen {
+  position: fixed;
+  inset: 0;
+  z-index: var(--djm-z-toast);
+  display: flex;
 }
 
-.djm-spin-inline {
+.djm-spin-indicator {
   display: inline-flex;
   align-items: center;
-  gap: 8px;
+  justify-content: center;
+  gap: 4px;
+  color: inherit;
 }
 
 .djm-spin-tip {
@@ -3283,6 +3336,8 @@ button.djm-breadcrumb-text {
   color: var(--djm-text-2);
 }
 
+/* ---------------- 尺寸 ---------------- */
+
 .djm-spin-sm .djm-spinner {
   width: 11px;
   height: 11px;
@@ -3295,6 +3350,127 @@ button.djm-breadcrumb-text {
   border-width: 2.5px;
 }
 
+/* ---------------- 形态 ---------------- */
+
+/* 环形：颜色跟随 color 属性 */
+.djm-spin-ring .djm-spinner {
+  border-top-color: currentColor;
+}
+
+/* 点状：三点依次弹起 */
+.djm-spin-dots i {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: currentColor;
+  animation: djm-spin-dot 1s ease-in-out infinite;
+}
+
+.djm-spin-dots i:nth-child(2) {
+  animation-delay: 0.15s;
+}
+
+.djm-spin-dots i:nth-child(3) {
+  animation-delay: 0.3s;
+}
+
+.djm-spin-sm .djm-spin-dots i {
+  width: 4px;
+  height: 4px;
+}
+
+.djm-spin-lg .djm-spin-dots i {
+  width: 8px;
+  height: 8px;
+}
+
+@keyframes djm-spin-dot {
+  0%,
+  80%,
+  100% {
+    transform: scale(0.55);
+    opacity: 0.45;
+  }
+  40% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+/* 柱状：四根竖条错峰伸缩 */
+.djm-spin-bars i {
+  width: 3px;
+  height: 14px;
+  border-radius: 2px;
+  background: currentColor;
+  animation: djm-spin-bar 1s ease-in-out infinite;
+}
+
+.djm-spin-bars i:nth-child(2) {
+  animation-delay: 0.12s;
+}
+
+.djm-spin-bars i:nth-child(3) {
+  animation-delay: 0.24s;
+}
+
+.djm-spin-bars i:nth-child(4) {
+  animation-delay: 0.36s;
+}
+
+.djm-spin-sm .djm-spin-bars i {
+  width: 2.5px;
+  height: 10px;
+}
+
+.djm-spin-lg .djm-spin-bars i {
+  width: 4px;
+  height: 18px;
+}
+
+@keyframes djm-spin-bar {
+  0%,
+  100% {
+    transform: scaleY(0.45);
+    opacity: 0.5;
+  }
+  50% {
+    transform: scaleY(1);
+    opacity: 1;
+  }
+}
+
+/* 脉冲：实心圆呼吸 */
+.djm-spin-pulse .djm-spin-core {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: currentColor;
+  animation: djm-spin-pulse 1.2s ease-in-out infinite;
+}
+
+.djm-spin-sm .djm-spin-pulse .djm-spin-core {
+  width: 12px;
+  height: 12px;
+}
+
+.djm-spin-lg .djm-spin-pulse .djm-spin-core {
+  width: 22px;
+  height: 22px;
+}
+
+@keyframes djm-spin-pulse {
+  0%,
+  100% {
+    transform: scale(0.65);
+    opacity: 0.45;
+  }
+  50% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
 /* ---- components/popconfirm.css ---- */
 
 /* DJM UI · 气泡确认 */
@@ -5971,6 +6147,52 @@ input[type="date"] {
   background: var(--djm-amber);
 }
 
+/* 环形进度：SVG 逆时针起点在顶部，进度用 dashoffset 控制 */
+.djm-progress-circle {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.djm-progress-circle svg {
+  width: 100%;
+  height: 100%;
+  transform: rotate(-90deg);
+}
+
+.djm-progress-circle-track {
+  stroke: var(--djm-border);
+}
+
+.djm-progress-circle-bar {
+  stroke: var(--djm-brand-600);
+  transition: stroke-dashoffset 0.3s;
+}
+
+.djm-progress-circle.djm-is-success .djm-progress-circle-bar {
+  stroke: var(--djm-green-strong);
+}
+
+.djm-progress-circle.djm-is-error .djm-progress-circle-bar {
+  stroke: var(--djm-red-strong);
+}
+
+.djm-progress-circle.djm-is-warning .djm-progress-circle-bar {
+  stroke: var(--djm-amber);
+}
+
+.djm-progress-circle-label {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--djm-text);
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+
 /* 骨架屏组件：头像 + 正文的行结构 */
 .djm-skeleton-block {
   display: flex;
@@ -12550,3 +12772,96 @@ input[type="date"] {
   color: var(--djm-green);
   font-size: 10px;
 }
+
+/* ---- components/glass.css ---- */
+
+/* DJM UI · 毛玻璃 */
+
+/* 工具类：直接加在任意容器上 */
+.djm-glass {
+  background: var(--djm-glass-bg);
+  border: 1px solid var(--djm-glass-border);
+  box-shadow: var(--djm-glass-shadow);
+  -webkit-backdrop-filter: blur(var(--djm-glass-blur)) saturate(1.4);
+  backdrop-filter: blur(var(--djm-glass-blur)) saturate(1.4);
+}
+
+/* 模糊半径两档 */
+.djm-glass-strong {
+  --djm-glass-blur: 26px;
+}
+
+.djm-glass-soft {
+  --djm-glass-blur: 8px;
+}
+
+/* 弹窗 / 抽屉：面积大、要读表单，底色更实，并加一道顶边高光 */
+.djm-modal.djm-is-glass,
+.djm-drawer.djm-is-glass,
+:root[data-djm-glass='on'] .djm-modal,
+:root[data-djm-glass='on'] .djm-drawer {
+  background: var(--djm-glass-bg-strong);
+  border: 1px solid var(--djm-glass-border);
+  box-shadow: var(--djm-glass-shadow), inset 0 1px 0 var(--djm-glass-highlight);
+  -webkit-backdrop-filter: blur(var(--djm-glass-blur-strong)) saturate(1.4);
+  backdrop-filter: blur(var(--djm-glass-blur-strong)) saturate(1.4);
+}
+
+/* 浮层与面板：面积小，透一点更好看 */
+:root[data-djm-glass='on'] .djm-popover-panel,
+:root[data-djm-glass='on'] .djm-dropdown-menu,
+:root[data-djm-glass='on'] .djm-panel,
+:root[data-djm-glass='on'] .djm-card {
+  background: var(--djm-glass-bg);
+  border-color: var(--djm-glass-border);
+  box-shadow: var(--djm-glass-shadow), inset 0 1px 0 var(--djm-glass-highlight);
+  -webkit-backdrop-filter: blur(var(--djm-glass-blur)) saturate(1.4);
+  backdrop-filter: blur(var(--djm-glass-blur)) saturate(1.4);
+}
+
+/* 玻璃容器里的头尾不再另起底色，和主体连成一片 */
+.djm-modal.djm-is-glass .djm-modal-head,
+:root[data-djm-glass='on'] .djm-modal .djm-modal-head,
+.djm-drawer.djm-is-glass .djm-drawer-head,
+:root[data-djm-glass='on'] .djm-drawer .djm-drawer-head {
+  border-bottom-color: var(--djm-glass-divider);
+}
+
+.djm-modal.djm-is-glass .djm-modal-foot,
+:root[data-djm-glass='on'] .djm-modal .djm-modal-foot,
+.djm-drawer.djm-is-glass .djm-drawer-foot,
+:root[data-djm-glass='on'] .djm-drawer .djm-drawer-foot {
+  background: transparent;
+  border-top-color: var(--djm-glass-divider);
+}
+
+/* 遮罩压淡，页面颜色透上来，玻璃才像玻璃而不是灰板 */
+:root[data-djm-glass='on'] .djm-modal-mask,
+:root[data-djm-glass='on'] .djm-drawer-mask {
+  background: var(--djm-glass-mask);
+}
+
+/* 浏览器不支持 backdrop-filter 时退回实心底，保证内容可读 */
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  .djm-glass,
+  .djm-modal.djm-is-glass,
+  .djm-drawer.djm-is-glass,
+  :root[data-djm-glass='on'] .djm-modal,
+  :root[data-djm-glass='on'] .djm-drawer,
+  :root[data-djm-glass='on'] .djm-popover-panel,
+  :root[data-djm-glass='on'] .djm-dropdown-menu,
+  :root[data-djm-glass='on'] .djm-panel,
+  :root[data-djm-glass='on'] .djm-card {
+    background: var(--djm-surface);
+  }
+
+  :root[data-djm-glass='on'] .djm-modal-mask,
+  :root[data-djm-glass='on'] .djm-drawer-mask {
+    background: var(--djm-mask);
+  }
+
+  :root[data-djm-glass='on'] .djm-modal .djm-modal-foot,
+  .djm-modal.djm-is-glass .djm-modal-foot {
+    background: var(--djm-surface-2);
+  }
+}