djm-ui 0.67.4 → 0.73.0

package/dist/djm-ui.css

@@ -1,4 +1,4 @@
-/*! DJM UI v0.67.4 · MIT · 2026-10-26 */
+/*! DJM UI v0.73.0 · MIT · 2026-10-26 */
 
 /* ---- tokens.css ---- */
 
@@ -19,6 +19,11 @@
 :root {
   color-scheme: light;
 
+  /* 字体族：宿主页面可通过覆盖这两个变量统一换字体 */
+  --djm-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
+    "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
+  --djm-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+
   --djm-brand-50: #eef6fe;
   --djm-brand-100: #dcebfb;
   --djm-brand-200: #b9d7f6;
@@ -38,6 +43,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;
@@ -70,6 +80,9 @@
   /* 彩色底上的文字（两主题均为白色） */
   --djm-text-inverse: #fff;
 
+  /* 文字提示的深底：暗色主题改用略亮的灰，避免和页面背景糊在一起 */
+  --djm-tooltip-bg: #1f2a37;
+
   /* 盖在图片等媒体内容上的蒙层，不随主题变化 */
   --djm-media-mask: rgba(9, 20, 33, 0.55);
 
@@ -146,6 +159,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;
@@ -155,6 +171,8 @@
   --djm-text-side: #c2ccd8;
   --djm-text-2: #a6b2c0;
   --djm-text-3: #8492a1;
+  /* 暗色下提示框比页面背景亮一档，白字仍有足够对比 */
+  --djm-tooltip-bg: #3a4652;
   /* 暗色下水印改用浅色，保持可辨识 */
   --djm-watermark: rgba(232, 237, 243, 0.12);
 
@@ -211,8 +229,7 @@ body {
 body {
   background: var(--djm-bg);
   color: var(--djm-text);
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
-    "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
+  font-family: var(--djm-font-sans);
   font-size: 13px;
   line-height: 1.5;
   -webkit-font-smoothing: antialiased;
@@ -293,7 +310,7 @@ a {
 }
 
 .djm-mono {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-family: var(--djm-font-mono);
   font-size: 11.5px;
   font-variant-numeric: tabular-nums;
 }
@@ -2120,7 +2137,8 @@ button.djm-breadcrumb-text {
   height: 16px;
   padding: 0 4px;
   border-radius: 8px;
-  background: var(--djm-red);
+  /* 红点底色用实色档，暗色主题下白字才够清楚 */
+  background: var(--djm-red-strong);
   color: var(--djm-text-inverse);
   font-size: 10px;
   font-style: normal;
@@ -3242,12 +3260,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;
@@ -3259,13 +3284,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 {
@@ -3273,6 +3320,8 @@ button.djm-breadcrumb-text {
   color: var(--djm-text-2);
 }
 
+/* ---------------- 尺寸 ---------------- */
+
 .djm-spin-sm .djm-spinner {
   width: 11px;
   height: 11px;
@@ -3285,6 +3334,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 · 气泡确认 */
@@ -3484,7 +3654,8 @@ button.djm-breadcrumb-text {
   background: none;
   padding: 0;
   font-size: 12px;
-  color: var(--djm-brand-600);
+  /* 品牌深色档：浅色底与暗色底都能过 4.5:1 */
+  color: var(--djm-brand-700);
   white-space: nowrap;
 }
 
@@ -4015,6 +4186,11 @@ input[type="date"] {
   font-size: 11.5px;
   margin-right: 2px;
 }
+
+/* 表格工具栏的操作提示：选中行后自动隐藏 */
+.djm-toolbar-tip {
+  font-size: 11.5px;
+}
 /* ---------------- 表单 ---------------- */
 
 .djm-form-grid {
@@ -5955,6 +6131,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;
@@ -6704,6 +6926,8 @@ input[type="date"] {
 /* ---------------- 富文本编辑器 ---------------- */
 
 .djm-rich-editor {
+  display: flex;
+  flex-direction: column;
   border: 1px solid var(--djm-border-strong);
   border-radius: 4px;
   overflow: hidden;
@@ -6715,11 +6939,26 @@ input[type="date"] {
   box-shadow: var(--djm-ring);
 }
 
+/* 全屏：铺满视口，内容区自己滚动 */
+.djm-rich-editor.djm-is-fullscreen {
+  position: fixed;
+  inset: 0;
+  z-index: 1200;
+  border: 0;
+  border-radius: 0;
+}
+
+.djm-rich-editor.djm-is-fullscreen .djm-rich-editor-content,
+.djm-rich-editor.djm-is-fullscreen .djm-rich-editor-source {
+  flex: 1;
+  max-height: none;
+}
+
 .djm-rich-editor-toolbar {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
-  gap: 4px;
+  gap: 2px;
   padding: 5px 6px;
   border-bottom: 1px solid var(--djm-border);
   background: var(--djm-surface-2);
@@ -6727,9 +6966,9 @@ input[type="date"] {
 
 .djm-rich-editor-group {
   display: flex;
-  gap: 2px;
-  padding-right: 5px;
-  margin-right: 3px;
+  gap: 1px;
+  padding-right: 4px;
+  margin-right: 2px;
   border-right: 1px solid var(--djm-border);
 }
 
@@ -6737,10 +6976,92 @@ input[type="date"] {
   border-right: 0;
 }
 
+/* 段落格式 / 字号下拉 */
+.djm-rich-editor-select {
+  height: 26px;
+  padding: 0 2px;
+  border: 1px solid var(--djm-border);
+  border-radius: 3px;
+  background: var(--djm-surface);
+  color: var(--djm-text-2);
+  font: inherit;
+  font-size: 11.5px;
+  cursor: pointer;
+}
+
+.djm-rich-editor-select-size {
+  width: 64px;
+}
+
+.djm-rich-editor-select:focus-visible {
+  outline: 2px solid var(--djm-brand-500);
+  outline-offset: -1px;
+}
+
+.djm-rich-editor-select:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* 颜色按钮：字母底部带当前色，背景色按钮直接把颜色铺在字母上 */
+.djm-rich-editor-color {
+  position: relative;
+}
+
+.djm-rich-editor-letter {
+  display: inline-block;
+  padding-bottom: 1px;
+  border-bottom: 2px solid var(--djm-text);
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1;
+}
+
+.djm-rich-editor-letter-bg {
+  padding: 0 3px;
+  border-bottom: 0;
+  border-radius: 2px;
+  color: var(--djm-text);
+}
+
+.djm-rich-editor-panel {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  z-index: 5;
+  display: grid;
+  grid-template-columns: repeat(4, 20px);
+  gap: 4px;
+  padding: 6px;
+  border: 1px solid var(--djm-border);
+  border-radius: 6px;
+  background: var(--djm-surface);
+  box-shadow: var(--djm-shadow-md);
+}
+
+.djm-rich-editor-swatch {
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border: 1px solid var(--djm-border);
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.djm-rich-editor-swatch:hover {
+  border-color: var(--djm-brand-500);
+}
+
+/* 素材库按钮：媒体选择器默认是块级 span，塞进工具栏里要收成行内 */
+.djm-rich-editor-picker {
+  display: inline-flex;
+  align-items: center;
+}
+
 .djm-rich-editor-btn {
-  min-width: 26px;
+  min-width: 24px;
   height: 26px;
-  padding: 0 6px;
+  padding: 0 4px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -6823,42 +7144,142 @@ input[type="date"] {
   color: var(--djm-text-3);
 }
 
-.djm-rich-editor-content h2 {
+.djm-rich-editor-content h1,
+.djm-rich-editor-content h2,
+.djm-rich-editor-content h3 {
   margin: 0 0 8px;
-  font-size: 16px;
+  color: var(--djm-text);
+  line-height: 1.5;
 }
 
-.djm-rich-editor-content p {
-  margin: 0 0 8px;
+.djm-rich-editor-content h1 {
+  font-size: 20px;
 }
 
-.djm-rich-editor-content ul,
-.djm-rich-editor-content ol {
-  margin: 0 0 8px;
-  padding-left: 22px;
+.djm-rich-editor-content h2 {
+  font-size: 16px;
 }
 
-.djm-rich-editor-content a {
-  color: var(--djm-brand-600);
-  text-decoration: underline;
+.djm-rich-editor-content h3 {
+  font-size: 14px;
 }
 
-.djm-rich-editor-source {
-  width: 100%;
-  padding: 12px 14px;
-  border: 0;
-  outline: none;
-  resize: vertical;
+.djm-rich-editor-content blockquote {
+  margin: 0 0 8px;
+  padding: 4px 10px;
+  border-left: 3px solid var(--djm-brand-500);
+  background: var(--djm-surface-2);
   color: var(--djm-text-2);
+}
+
+.djm-rich-editor-content pre {
+  margin: 0 0 8px;
+  padding: 10px 12px;
+  overflow: auto;
+  border-radius: 4px;
+  background: var(--djm-surface-3);
   font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
   font-size: 12px;
   line-height: 1.7;
+  white-space: pre-wrap;
+  word-break: break-word;
 }
 
-.djm-editor-bar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
+.djm-rich-editor-content code {
+  padding: 1px 4px;
+  border-radius: 3px;
+  background: var(--djm-surface-3);
+  color: var(--djm-brand-700);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 12px;
+}
+
+.djm-rich-editor-content pre code {
+  padding: 0;
+  background: none;
+  color: inherit;
+}
+
+.djm-rich-editor-content hr {
+  margin: 12px 0;
+  border: 0;
+  border-top: 1px solid var(--djm-border);
+}
+
+/* 图片：单图、多图统一限宽，避免撑破内容区 */
+.djm-rich-editor-content img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 4px;
+  vertical-align: bottom;
+}
+
+/* 上传插入的图片之间留一点间距，多图并排时不粘在一起 */
+.djm-rich-editor-img {
+  margin: 2px 4px 2px 0;
+}
+
+/* 上传中的占位块，上传完成后被图片替换 */
+.djm-rich-editor-uploading {
+  display: inline-flex;
+  align-items: center;
+  padding: 4px 10px;
+  border: 1px dashed var(--djm-border-strong);
+  border-radius: 4px;
+  background: var(--djm-surface-2);
+  color: var(--djm-text-3);
+  font-size: 12px;
+}
+
+.djm-rich-editor-content p {
+  margin: 0 0 8px;
+}
+
+.djm-rich-editor-content ul,
+.djm-rich-editor-content ol {
+  margin: 0 0 8px;
+  padding-left: 22px;
+}
+
+.djm-rich-editor-content a {
+  color: var(--djm-brand-600);
+  text-decoration: underline;
+}
+
+.djm-rich-editor-source {
+  width: 100%;
+  padding: 12px 14px;
+  border: 0;
+  outline: none;
+  resize: vertical;
+  color: var(--djm-text-2);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 12px;
+  line-height: 1.7;
+}
+
+/* 底部状态：上传提示与字数 */
+.djm-rich-editor-foot {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 12px;
+  padding: 4px 12px;
+  border-top: 1px solid var(--djm-border);
+  background: var(--djm-surface-2);
+  color: var(--djm-text-3);
+  font-size: 11px;
+}
+
+/* 文件选择框只作为上传入口，不显示 */
+.djm-rich-editor-file {
+  display: none;
+}
+
+.djm-editor-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   gap: 12px;
   flex-wrap: wrap;
   margin-top: 12px;
@@ -7611,7 +8032,7 @@ input[type="date"] {
   /* 打开在弹窗 / 抽屉里时也要压在遮罩之上 */
   z-index: var(--djm-z-popper, 1450);
   border: 1px solid var(--djm-border);
-  border-radius: var(--djm-radius-md, 4px);
+  border-radius: var(--djm-radius);
   background: var(--djm-surface);
   box-shadow: var(--djm-shadow-md, 0 6px 20px rgba(0, 0, 0, 0.12));
 }
@@ -8232,7 +8653,7 @@ input[type="date"] {
   padding: 0 10px;
   height: 30px;
   border: 1px solid var(--djm-border);
-  border-radius: var(--djm-radius-md, 4px);
+  border-radius: var(--djm-radius);
   background: var(--djm-surface);
   color: var(--djm-text-3);
 }
@@ -8265,14 +8686,14 @@ input[type="date"] {
 
 .djm-media-item {
   border: 1px solid var(--djm-border);
-  border-radius: var(--djm-radius-md, 4px);
+  border-radius: var(--djm-radius);
   overflow: hidden;
   cursor: pointer;
   background: var(--djm-surface);
 }
 
 .djm-media-item:hover {
-  border-color: var(--djm-brand-400, #79a9d6);
+  border-color: var(--djm-brand-500);
 }
 
 .djm-media-item:focus-visible {
@@ -8356,6 +8777,526 @@ input[type="date"] {
   font-style: normal;
 }
 
+/* ---- components/content.css ---- */
+
+/* DJM UI · 内容管理：文件管理器 / 图片相册 */
+
+/* ---------------- 文件管理器 ---------------- */
+
+.djm-fm {
+  display: grid;
+  grid-template-columns: 208px minmax(0, 1fr);
+  border: 1px solid var(--djm-border);
+  border-radius: var(--djm-radius-lg);
+  overflow: hidden;
+  background: var(--djm-surface);
+}
+
+.djm-fm-side {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 10px;
+  border-right: 1px solid var(--djm-border);
+  background: var(--djm-surface-2);
+}
+
+.djm-fm-side-title {
+  padding: 4px 8px 8px;
+  color: var(--djm-text-3);
+  font-size: 10.5px;
+  letter-spacing: 0.5px;
+}
+
+.djm-fm-folder {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 32px;
+  padding: 0 8px;
+  border: 0;
+  border-radius: 4px;
+  background: none;
+  color: var(--djm-text-2);
+  font-size: 12.5px;
+  text-align: left;
+  cursor: pointer;
+}
+
+.djm-fm-folder:hover {
+  background: var(--djm-brand-soft);
+  color: var(--djm-brand-700);
+}
+
+.djm-fm-folder.djm-is-active {
+  background: var(--djm-brand-50);
+  color: var(--djm-brand-700);
+  font-weight: 600;
+}
+
+.djm-fm-folder-count {
+  margin-left: auto;
+  color: var(--djm-text-3);
+  font-size: 10.5px;
+}
+
+.djm-fm-storage {
+  margin-top: auto;
+  padding: 12px 8px 4px;
+  border-top: 1px solid var(--djm-border);
+  color: var(--djm-text-3);
+  font-size: 11px;
+}
+
+.djm-fm-storage-head {
+  display: flex;
+  justify-content: space-between;
+  gap: 6px;
+  margin-bottom: 6px;
+  color: var(--djm-text-2);
+}
+
+.djm-fm-bar {
+  height: 5px;
+  overflow: hidden;
+  border-radius: 3px;
+  background: var(--djm-surface-3);
+}
+
+.djm-fm-bar i {
+  display: block;
+  height: 100%;
+  background: linear-gradient(90deg, var(--djm-brand-500), var(--djm-brand-600));
+}
+
+.djm-fm-storage p {
+  margin: 8px 0 0;
+  line-height: 1.6;
+}
+
+.djm-fm-main {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.djm-fm-path {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 8px 14px;
+  border-bottom: 1px solid var(--djm-border);
+  background: var(--djm-surface-2);
+}
+
+.djm-fm-crumb {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--djm-text);
+  font-size: 12.5px;
+  font-weight: 600;
+}
+
+.djm-fm-crumb em {
+  color: var(--djm-text-3);
+  font-size: 11px;
+  font-style: normal;
+  font-weight: 400;
+}
+
+.djm-fm-search {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  height: 28px;
+  padding: 0 8px;
+  border: 1px solid var(--djm-border);
+  border-radius: 4px;
+  background: var(--djm-surface);
+  color: var(--djm-text-3);
+}
+
+.djm-fm-search:focus-within {
+  border-color: var(--djm-brand-500);
+}
+
+.djm-fm-search input {
+  width: 160px;
+  border: 0;
+  outline: none;
+  background: none;
+  color: var(--djm-text-2);
+  font-size: 12px;
+}
+
+.djm-fm-all {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding-right: 2px;
+  color: var(--djm-text-2);
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.djm-fm-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
+  gap: 12px;
+  padding: 14px;
+}
+
+.djm-fm-card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 8px;
+  border: 1px solid var(--djm-border);
+  border-radius: 6px;
+  background: var(--djm-surface);
+}
+
+.djm-fm-card.djm-is-selected {
+  border-color: var(--djm-brand-500);
+  box-shadow: 0 0 0 2px var(--djm-brand-soft);
+}
+
+.djm-fm-check {
+  position: absolute;
+  top: 8px;
+  left: 8px;
+  z-index: 1;
+  padding: 2px;
+  border-radius: 4px;
+  background: var(--djm-surface);
+}
+
+.djm-fm-thumb {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 96px;
+  padding: 0;
+  overflow: hidden;
+  border: 0;
+  border-radius: 4px;
+  background: var(--djm-surface-3);
+  cursor: zoom-in;
+}
+
+.djm-fm-thumb img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.djm-fm-doc {
+  color: var(--djm-text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.4px;
+}
+
+.djm-fm-name {
+  margin-top: 2px;
+  overflow: hidden;
+  color: var(--djm-text);
+  font-size: 12.5px;
+  font-weight: 500;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.djm-fm-meta {
+  color: var(--djm-text-3);
+  font-size: 11px;
+}
+
+.djm-fm-empty {
+  margin: 40px 14px;
+}
+
+.djm-fm-loading {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 14px;
+  color: var(--djm-text-3);
+  font-size: 12px;
+}
+
+/* 上传用的隐藏输入 */
+.djm-fm-file {
+  display: none;
+}
+
+.djm-fm-preview-img {
+  display: block;
+  width: 100%;
+  max-height: 420px;
+  border-radius: 6px;
+  background: var(--djm-surface-3);
+  object-fit: contain;
+}
+
+.djm-fm-preview-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 40px;
+  border-radius: 6px;
+  background: var(--djm-surface-2);
+  color: var(--djm-text-3);
+  font-size: 12px;
+}
+
+.djm-fm-preview-meta {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 10px;
+  margin-top: 12px;
+}
+
+.djm-fm-preview-meta div {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  color: var(--djm-text-3);
+  font-size: 11.5px;
+}
+
+.djm-fm-preview-meta b {
+  color: var(--djm-text-2);
+  font-size: 12px;
+  font-weight: 500;
+}
+
+/* ---------------- 图片相册 ---------------- */
+
+.djm-album-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--djm-border);
+  background: var(--djm-surface-2);
+}
+
+.djm-album-tabs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.djm-album-tab {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 28px;
+  padding: 0 10px;
+  border: 1px solid var(--djm-border);
+  border-radius: 14px;
+  background: var(--djm-surface);
+  color: var(--djm-text-2);
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.djm-album-tab span {
+  color: var(--djm-text-3);
+  font-size: 10.5px;
+}
+
+.djm-album-tab:hover {
+  border-color: var(--djm-brand-500);
+  color: var(--djm-brand-700);
+}
+
+.djm-album-tab.djm-is-active {
+  border-color: var(--djm-brand-500);
+  background: var(--djm-brand-soft);
+  color: var(--djm-brand-700);
+  font-weight: 600;
+}
+
+.djm-album-tab.djm-is-active span {
+  color: var(--djm-brand-700);
+}
+
+.djm-album-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.djm-album-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 14px;
+  padding: 14px;
+}
+
+.djm-album-card {
+  position: relative;
+  margin: 0;
+  overflow: hidden;
+  border: 1px solid var(--djm-border);
+  border-radius: 6px;
+  background: var(--djm-surface);
+}
+
+.djm-album-card.djm-is-selected {
+  border-color: var(--djm-brand-500);
+  box-shadow: 0 0 0 2px var(--djm-brand-soft);
+}
+
+.djm-album-thumb {
+  position: relative;
+  display: block;
+  width: 100%;
+  aspect-ratio: 4 / 3;
+  padding: 0;
+  overflow: hidden;
+  border: 0;
+  background: var(--djm-surface-3);
+  cursor: zoom-in;
+}
+
+.djm-album-thumb img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.2s ease;
+}
+
+.djm-album-thumb:hover img {
+  transform: scale(1.04);
+}
+
+.djm-album-zoom {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px;
+  border-radius: 12px;
+  background: rgba(15, 23, 32, 0.62);
+  color: #fff;
+  font-size: 11px;
+  opacity: 0;
+  pointer-events: none;
+  transform: translate(-50%, -50%);
+  transition: opacity 0.2s ease;
+}
+
+.djm-album-thumb:hover .djm-album-zoom {
+  opacity: 1;
+}
+
+.djm-album-check {
+  position: absolute;
+  top: 8px;
+  left: 8px;
+  padding: 3px;
+  border-radius: 4px;
+  background: rgba(255, 255, 255, 0.9);
+}
+
+.djm-album-card figcaption {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 8px 10px 10px;
+}
+
+.djm-album-card figcaption strong {
+  overflow: hidden;
+  font-size: 12.5px;
+  font-weight: 500;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.djm-album-card figcaption span {
+  color: var(--djm-text-3);
+  font-size: 11px;
+}
+
+.djm-album-empty {
+  padding: 60px 20px;
+}
+
+.djm-album-viewer img {
+  display: block;
+  width: 100%;
+  max-height: 520px;
+  border-radius: 6px;
+  background: var(--djm-surface-3);
+  object-fit: contain;
+}
+
+.djm-album-viewer-meta {
+  display: flex;
+  justify-content: space-between;
+  gap: 10px;
+  margin-top: 8px;
+  color: var(--djm-text-3);
+  font-size: 11.5px;
+}
+
+@media (max-width: 860px) {
+  .djm-fm {
+    grid-template-columns: 1fr;
+  }
+
+  .djm-fm-side {
+    border-right: 0;
+    border-bottom: 1px solid var(--djm-border);
+  }
+
+  .djm-fm-folder {
+    height: 30px;
+  }
+
+  /* 窄屏：路径与搜索各占一行，避免文字被挤成两行 */
+  .djm-fm-path {
+    flex-wrap: wrap;
+  }
+
+  .djm-fm-search {
+    flex: 1 1 100%;
+  }
+
+  .djm-fm-search input {
+    width: 100%;
+  }
+
+  .djm-fm-crumb em {
+    display: none;
+  }
+
+  .djm-fm-storage {
+    display: none;
+  }
+
+  .djm-fm-grid,
+  .djm-album-grid {
+    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+  }
+
+  .djm-fm-preview-meta {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
 /* ---- components/kanban.css ---- */
 
 /* 看板：横向列排布，列内纵向卡片流，超宽横向滚动 */
@@ -11815,3 +12756,64 @@ 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;
+}
+
+/* 组件级开关：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);
+  }
+}