djm-ui 0.72.0 → 0.73.0

package/src/styles/components/glass.css

@@ -0,0 +1,58 @@
+/* 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;
+}
+
+/* 组件级开关：Modal / Drawer 的 glass 属性 */
+.djm-modal.djm-is-glass,
+.djm-drawer.djm-is-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);
+}
+
+/* 全局开关：弹窗、抽屉、浮层、面板与卡片 */
+: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-glass-bg);
+  border-color: 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);
+}
+
+/* 浏览器不支持 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);
+  }
+}

package/src/styles/components/spin.css

@@ -1,11 +1,18 @@
 /* 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;
@@ -17,13 +24,35 @@
   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-inline {
+/* 全屏模式：遮罩铺满视口 */
+.djm-spin-fullscreen {
+  position: fixed;
+  inset: 0;
+  z-index: var(--djm-z-toast);
+  display: flex;
+}
+
+.djm-spin-indicator {
   display: inline-flex;
   align-items: center;
-  gap: 8px;
+  justify-content: center;
+  gap: 4px;
+  color: inherit;
 }
 
 .djm-spin-tip {
@@ -31,6 +60,8 @@
   color: var(--djm-text-2);
 }
 
+/* ---------------- 尺寸 ---------------- */
+
 .djm-spin-sm .djm-spinner {
   width: 11px;
   height: 11px;
@@ -42,3 +73,124 @@
   height: 22px;
   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;
+  }
+}

package/src/styles/index.css

@@ -107,4 +107,5 @@
 @import './components/grid.css';
 @import './components/frame.css';
 @import './components/charts.css';
+@import './components/glass.css';
 @import './components/responsive.css';

package/src/styles/theme-dark.css

@@ -29,6 +29,9 @@
   --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-border: rgba(255, 255, 255, 0.12);
+  --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;

package/src/styles/tokens.css

@@ -39,6 +39,11 @@
   --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-border: rgba(255, 255, 255, 0.6);
+  --djm-glass-blur: 16px;
+  --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;

package/src/theme/index.js

@@ -2,8 +2,11 @@ import { ref } from 'vue'
 
 const KEY = 'djm-theme'
 const COLOR_KEY = 'djm-primary'
+const GLASS_KEY = 'djm-glass'
 
 export const theme = ref('light')
+// 毛玻璃开关：写入 data-djm-glass，组件样式按需切换
+export const glass = ref(false)
 
 /** 预设主题色：色值取自常见后台品牌色 */
 export const PRESET_COLORS = [
@@ -200,6 +203,18 @@ export function toggleTheme () {
   setTheme(theme.value === 'dark' ? 'light' : 'dark')
 }
 
+/** 毛玻璃开关：默认关闭，开启后弹窗、抽屉、浮层与卡片换半透明底 */
+export function setGlass (enabled) {
+  glass.value = !!enabled
+  document.documentElement.dataset.djmGlass = glass.value ? 'on' : ''
+  try {
+    if (glass.value) localStorage.setItem(GLASS_KEY, '1')
+    else localStorage.removeItem(GLASS_KEY)
+  } catch (error) {
+    // localStorage 不可用时只影响持久化
+  }
+}
+
 /** 应用启动时恢复上次选择；?theme=dark 可临时覆盖，方便截图与分享 */
 export function initTheme () {
   let saved = ''
@@ -220,7 +235,14 @@ export function initTheme () {
   } catch (error) {
     color = ''
   }
+  let glassSaved = false
+  try {
+    glassSaved = localStorage.getItem(GLASS_KEY) === '1'
+  } catch (error) {
+    glassSaved = false
+  }
   if (color) primaryColor.value = color
   const next = param === 'dark' || param === 'light' ? param : saved || 'light'
   setTheme(next)
+  setGlass(glassSaved)
 }

package/types/index.d.ts

@@ -133,10 +133,13 @@ export const DjmCard: DefineComponent<{
 
 export const DjmProgress: DefineComponent<{
   percent?: number
+  type?: 'line' | 'circle'
   status?: '' | 'success' | 'error' | 'warning'
   showText?: boolean
   strokeWidth?: number
   color?: string
+  size?: number
+  label?: string
 }>
 
 export const DjmSkeleton: DefineComponent<{
@@ -312,7 +315,11 @@ export const DjmAlert: DefineComponent<{
 export const DjmSpin: DefineComponent<{
   spinning?: boolean
   size?: string
+  type?: 'ring' | 'dots' | 'bars' | 'pulse'
   tip?: string
+  delay?: number
+  fullscreen?: boolean
+  color?: string
 }>
 
 export const DjmPopconfirm: DefineComponent<{
@@ -944,6 +951,7 @@ export const DjmModal: DefineComponent<{
   showClose?: boolean
   closeOnEsc?: boolean
   fullscreen?: boolean
+  glass?: boolean
 }, {}, {}, {}, {}, {}, {}, DjmModalEmits>
 
 export const DjmDrawer: DefineComponent<{
@@ -954,6 +962,7 @@ export const DjmDrawer: DefineComponent<{
   maskClosable?: boolean
   showClose?: boolean
   closeOnEsc?: boolean
+  glass?: boolean
 }, {}, {}, {}, {}, {}, {}, DjmModalEmits>
 
 export type DjmConfirmDialogEmits = {