djm-ui 0.67.4 → 0.73.0

package/src/styles/components/rich-editor.css

@@ -3,6 +3,8 @@
 /* ---------------- 富文本编辑器 ---------------- */
 
 .djm-rich-editor {
+  display: flex;
+  flex-direction: column;
   border: 1px solid var(--djm-border-strong);
   border-radius: 4px;
   overflow: hidden;
@@ -14,11 +16,26 @@
   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);
@@ -26,9 +43,9 @@
 
 .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);
 }
 
@@ -36,10 +53,92 @@
   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;
@@ -122,11 +221,93 @@
   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;
+  color: var(--djm-text);
+  line-height: 1.5;
+}
+
+.djm-rich-editor-content h1 {
+  font-size: 20px;
+}
+
+.djm-rich-editor-content h2 {
   font-size: 16px;
 }
 
+.djm-rich-editor-content h3 {
+  font-size: 14px;
+}
+
+.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-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;
 }
@@ -154,6 +335,24 @@
   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;

package/src/styles/components/skin.css

@@ -18,6 +18,60 @@
   color: var(--djm-text-3);
 }
 
+/* 预设方案：一排小卡片，配色条直接预览效果 */
+.djm-skin-presets {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 6px;
+}
+
+.djm-skin-preset {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  padding: 5px;
+  border: 1px solid var(--djm-border);
+  border-radius: var(--djm-radius);
+  background: var(--djm-surface);
+  color: var(--djm-text-2);
+  font-size: 11.5px;
+  cursor: pointer;
+}
+
+.djm-skin-preset:hover {
+  border-color: var(--djm-border-strong);
+  color: var(--djm-text);
+}
+
+.djm-skin-preset.djm-is-active {
+  border-color: var(--djm-brand-500);
+  box-shadow: var(--djm-ring);
+  color: var(--djm-brand-700);
+}
+
+.djm-skin-swatch {
+  height: 22px;
+  border: 1px solid var(--djm-border);
+  border-radius: 3px;
+}
+
+.djm-skin-preset-label {
+  text-align: center;
+}
+
+.djm-skin-hint {
+  margin: 0;
+  font-size: 11.5px;
+  color: var(--djm-text-3);
+}
+
+.djm-skin-preset:focus-visible,
+.djm-skin-seg-btn:focus-visible,
+.djm-skin-color:focus-visible {
+  outline: 2px solid var(--djm-brand-500);
+  outline-offset: 1px;
+}
+
 /* 分段按钮：用两个按钮表达互斥选择，避免额外角色语义 */
 .djm-skin-seg {
   display: flex;

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/components/template.css

@@ -194,6 +194,11 @@
   color: #fff;
 }
 
+/* 暗色下品牌色阶整体提亮，白字压不住，单独换深蓝渐变 */
+[data-djm-theme="dark"] .djm-login-brand {
+  background: linear-gradient(150deg, #0d2236, #123c5f 62%, #17527f);
+}
+
 .djm-login-brand-inner {
   max-width: 380px;
   display: flex;

package/src/styles/index.css

@@ -75,6 +75,7 @@
 @import './components/query-filter.css';
 @import './components/filter-tags.css';
 @import './components/media-picker.css';
+@import './components/content.css';
 @import './components/kanban.css';
 @import './components/attachment-list.css';
 @import './components/notification.css';
@@ -106,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;
@@ -38,6 +41,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);
 

package/src/styles/tokens.css

@@ -15,6 +15,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;
@@ -34,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;
@@ -66,6 +76,9 @@
   /* 彩色底上的文字（两主题均为白色） */
   --djm-text-inverse: #fff;
 
+  /* 文字提示的深底：暗色主题改用略亮的灰，避免和页面背景糊在一起 */
+  --djm-tooltip-bg: #1f2a37;
+
   /* 盖在图片等媒体内容上的蒙层，不随主题变化 */
   --djm-media-mask: rgba(9, 20, 33, 0.55);
 

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 = [
@@ -139,6 +142,46 @@ export function setPrimaryColor (hex) {
   }
 }
 
+/* 相对亮度与对比度：侧栏选中态按色相自动找合适的明度 */
+function luminance (hex) {
+  const text = String(hex).replace('#', '')
+  const rgb = [0, 2, 4].map((i) => parseInt(text.slice(i, i + 2), 16) / 255)
+  const [r, g, b] = rgb.map((v) => (v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4))
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b
+}
+
+function contrastRatio (a, b) {
+  const l1 = luminance(a)
+  const l2 = luminance(b)
+  return (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05)
+}
+
+/**
+ * 侧栏单独配色时用：按主色生成一套色阶
+ * 侧栏可能和页面主题反向（浅色页 + 深色侧栏），所以由调用方指定明暗
+ */
+export function sidebarShades (hex, dark) {
+  const shades = buildShades(hex || '#1a6fc4', dark)
+  if (dark) {
+    const { h, s } = hexToHsl(hex || '#1a6fc4')
+    const sat = Math.min(Math.max(s, 20), 92)
+    const bgSat = Math.min(78, sat * 0.85)
+    // 选中文字固定在亮档，背景从 36% 明度往下压，直到对比度过 4.5
+    // 这样青碧、橙、墨绿不会再选出一团看不清的深色
+    const text = hslToHex(h, Math.min(90, sat), 86)
+    let bgL = 36
+    let bg = hslToHex(h, bgSat, bgL)
+    while (bgL > 18 && contrastRatio(bg, text) < 4.6) {
+      bgL -= 2
+      bg = hslToHex(h, bgSat, bgL)
+    }
+    shades['--djm-sider-active'] = bg
+    shades['--djm-sider-active-hover'] = hslToHex(h, bgSat, Math.max(14, bgL - 4))
+    shades['--djm-sider-active-text'] = text
+  }
+  return shades
+}
+
 export function resetPrimaryColor () {
   setPrimaryColor('')
 }
@@ -160,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 = ''
@@ -180,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)
 }