djm-ui 0.67.4 → 0.72.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/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';

package/src/styles/theme-dark.css

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

package/src/theme/index.js

@@ -139,6 +139,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('')
 }

package/src/utils/sanitize-html.js

@@ -17,7 +17,13 @@ const TAGS = new Set([
 ])
 
 // 通用属性
-const GLOBAL_ATTRS = new Set(['class', 'title'])
+const GLOBAL_ATTRS = new Set(['class', 'title', 'style'])
+
+// 富文本用到的内联样式白名单：只放行排版类属性，避免靠样式做定位或引外部资源
+const STYLE_PROPS = new Set([
+  'color', 'background-color', 'font-size', 'font-weight', 'font-style',
+  'text-decoration', 'text-align', 'text-indent', 'line-height'
+])
 
 // 各标签额外允许的属性
 const TAG_ATTRS = {
@@ -28,13 +34,39 @@ const TAG_ATTRS = {
   td: new Set(['colspan', 'rowspan'])
 }
 
+// 逐条过滤样式声明，丢掉白名单之外的属性与可疑取值
+function cleanStyle (value) {
+  return String(value || '')
+    .split(';')
+    .map((item) => {
+      const index = item.indexOf(':')
+      if (index === -1) return ''
+      const name = item.slice(0, index).trim().toLowerCase()
+      const val = item.slice(index + 1).trim()
+      if (!STYLE_PROPS.has(name)) return ''
+      if (/url\s*\(|expression\s*\(|javascript:/i.test(val)) return ''
+      return name + ': ' + val
+    })
+    .filter(Boolean)
+    .join('; ')
+}
+
+// 允许的协议：相对地址没有协议，直接放行
+const SAFE_SCHEMES = new Set(['http', 'https', 'mailto', 'tel'])
+
 function safeUrl (value, tag) {
   // 浏览器解析 URL 时会忽略换行、制表符等控制字符，先去掉再判断协议
-  const url = String(value || '').replace(/[\u0000-\u0020]+/g, '').toLowerCase()
-  if (url.startsWith('javascript:') || url.startsWith('vbscript:')) return false
-  // data: 只允许图片，且只能用于 img，避免链接跳到可执行的 SVG
-  if (url.startsWith('data:')) return tag === 'img' && url.startsWith('data:image/')
-  return true
+  const url = String(value || '').replace(/[\u0000-\u0020]+/g, '')
+  const scheme = url.match(/^([a-z][a-z0-9+.-]*):/i)
+  if (!scheme) return true
+  const name = scheme[1].toLowerCase()
+  if (SAFE_SCHEMES.has(name)) return true
+  // 图片额外允许 blob 与 data:image；data:text/html 这类一律拒绝
+  if (tag === 'img') {
+    if (name === 'blob') return true
+    if (name === 'data' && /^data:image\//i.test(url)) return true
+  }
+  return false
 }
 
 function cleanNode (node) {
@@ -63,6 +95,12 @@ function cleanNode (node) {
         child.removeAttribute(attr.name)
         return
       }
+      if (name === 'style') {
+        const style = cleanStyle(attr.value)
+        if (style) child.setAttribute('style', style)
+        else child.removeAttribute('style')
+        return
+      }
       if ((name === 'href' || name === 'src') && !safeUrl(attr.value, tag)) {
         child.removeAttribute(attr.name)
       }

package/types/index.d.ts

@@ -1117,6 +1117,7 @@ export const DjmTreeSelect: DefineComponent<{
 
 export type DjmRichEditorEmits = {
   'update:modelValue': (html: string) => void
+  'upload-error': (payload: { file: File, message: string }) => void
 }
 
 export const DjmRichEditor: DefineComponent<{
@@ -1125,6 +1126,13 @@ export const DjmRichEditor: DefineComponent<{
   minHeight?: number
   sanitize?: boolean
   disabled?: boolean
+  toolbar?: 'simple' | 'basic' | 'full' | Array<'history' | 'format' | 'inline' | 'color' | 'align' | 'list' | 'insert' | 'view'>
+  uploadImage?: ((file: File) => Promise<string | { url: string }>) | null
+  media?: Array<string | { id?: string | number, url: string, name?: string }>
+  accept?: string
+  maxImageSize?: number
+  multiple?: boolean
+  showCount?: boolean
 }, {}, {}, {}, {}, {}, {}, DjmRichEditorEmits>
 
 /* ---------------- 业务组件 ---------------- */