djm-ui 0.67.3 → 0.72.0

package/src/index.js

@@ -345,7 +345,7 @@ const components = [
   DjmPageTabs
 ]
 
-export const version = '0.67.3'
+export const version = '0.72.0'
 
 export function install (app, options = {}) {
   if (options.locale) setLocale(options.locale)

package/src/locale/en-US.js

@@ -128,7 +128,6 @@ export default {
   'richEditor.italic': 'Italic',
   'richEditor.underline': 'Underline',
   'richEditor.strike': 'Strikethrough',
-  'richEditor.heading': 'Heading 2',
   'richEditor.paragraph': 'Paragraph',
   'richEditor.bulletList': 'Bullet list',
   'richEditor.numberList': 'Numbered list',
@@ -139,6 +138,39 @@ export default {
   'richEditor.redo': 'Redo',
   'richEditor.source': 'Source',
   'richEditor.visual': 'Visual',
+  'richEditor.toolbar': 'Formatting toolbar',
+  'richEditor.block': 'Paragraph style',
+  'richEditor.heading1': 'Heading 1',
+  'richEditor.heading2': 'Heading 2',
+  'richEditor.heading3': 'Heading 3',
+  'richEditor.quote': 'Quote',
+  'richEditor.codeBlock': 'Code block',
+  'richEditor.fontSize': 'Font size',
+  'richEditor.defaultSize': 'Default',
+  'richEditor.inlineCode': 'Inline code',
+  'richEditor.textColor': 'Text color',
+  'richEditor.bgColor': 'Background color',
+  'richEditor.alignLeft': 'Align left',
+  'richEditor.alignCenter': 'Align center',
+  'richEditor.alignRight': 'Align right',
+  'richEditor.alignJustify': 'Justify',
+  'richEditor.outdent': 'Decrease indent',
+  'richEditor.indent': 'Increase indent',
+  'richEditor.unlink': 'Remove link',
+  'richEditor.image': 'Insert image',
+  'richEditor.singleImage': 'Insert single image',
+  'richEditor.multiImage': 'Insert multiple images',
+  'richEditor.mediaLibrary': 'Choose from media library',
+  'richEditor.hr': 'Divider',
+  'richEditor.fullscreen': 'Fullscreen',
+  'richEditor.exitFullscreen': 'Exit fullscreen',
+  'richEditor.wordCount': '{count} characters',
+  'richEditor.uploading': 'Uploading {count} image(s)…',
+  'richEditor.uploadFailed': 'Image upload failed',
+  'richEditor.imageTypeError': 'Only image files are allowed',
+  'richEditor.imageSizeError': 'Image must be smaller than {size}MB',
+  'richEditor.imageUrlInvalid': 'Invalid image URL, insertion rejected',
+  'richEditor.linkInvalid': 'Only http(s), mailto, tel or relative URLs are allowed',
 
   'approval.start': 'Started',
   'approval.cc': 'CC',

package/src/locale/zh-CN.js

@@ -128,7 +128,6 @@ export default {
   'richEditor.italic': '斜体',
   'richEditor.underline': '下划线',
   'richEditor.strike': '删除线',
-  'richEditor.heading': '二级标题',
   'richEditor.paragraph': '正文',
   'richEditor.bulletList': '无序列表',
   'richEditor.numberList': '有序列表',
@@ -139,6 +138,39 @@ export default {
   'richEditor.redo': '重做',
   'richEditor.source': '源码',
   'richEditor.visual': '可视化',
+  'richEditor.toolbar': '编辑工具栏',
+  'richEditor.block': '段落格式',
+  'richEditor.heading1': '标题 1',
+  'richEditor.heading2': '标题 2',
+  'richEditor.heading3': '标题 3',
+  'richEditor.quote': '引用',
+  'richEditor.codeBlock': '代码块',
+  'richEditor.fontSize': '字号',
+  'richEditor.defaultSize': '默认',
+  'richEditor.inlineCode': '行内代码',
+  'richEditor.textColor': '文字颜色',
+  'richEditor.bgColor': '背景色',
+  'richEditor.alignLeft': '左对齐',
+  'richEditor.alignCenter': '居中',
+  'richEditor.alignRight': '右对齐',
+  'richEditor.alignJustify': '两端对齐',
+  'richEditor.outdent': '减少缩进',
+  'richEditor.indent': '增加缩进',
+  'richEditor.unlink': '取消链接',
+  'richEditor.image': '插入图片',
+  'richEditor.singleImage': '插入单图',
+  'richEditor.multiImage': '插入多图',
+  'richEditor.mediaLibrary': '从素材库选择',
+  'richEditor.hr': '分割线',
+  'richEditor.fullscreen': '全屏',
+  'richEditor.exitFullscreen': '退出全屏',
+  'richEditor.wordCount': '共 {count} 字',
+  'richEditor.uploading': '正在上传 {count} 张图片…',
+  'richEditor.uploadFailed': '图片上传失败',
+  'richEditor.imageTypeError': '只能上传图片文件',
+  'richEditor.imageSizeError': '图片不能超过 {size}MB',
+  'richEditor.imageUrlInvalid': '图片地址不合法，已拒绝插入',
+  'richEditor.linkInvalid': '链接只支持 http(s)、mailto、tel 或站内相对地址',
 
   'approval.start': '发起',
   'approval.cc': '抄送',

package/src/styles/base.css

@@ -13,8 +13,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;
@@ -95,7 +94,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;
 }

package/src/styles/components/button.css

@@ -141,7 +141,8 @@
   background: none;
   padding: 0;
   font-size: 12px;
-  color: var(--djm-brand-600);
+  /* 品牌深色档：浅色底与暗色底都能过 4.5:1 */
+  color: var(--djm-brand-700);
   white-space: nowrap;
 }
 

package/src/styles/components/console.css

@@ -204,6 +204,11 @@
   font-weight: 600;
 }
 
+.djm-dict-item.djm-is-active .djm-dict-key {
+  /* 选中底色是浅蓝，灰字对比不够，跟着标题一起换成品牌深色 */
+  color: var(--djm-brand-700);
+}
+
 .djm-dict-item.djm-is-active .djm-dict-count {
   border: 1px solid var(--djm-brand-200);
   background: var(--djm-surface);

package/src/styles/components/content.css

@@ -0,0 +1,517 @@
+/* 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));
+  }
+}

package/src/styles/components/form.css

@@ -432,6 +432,11 @@ input[type="date"] {
   font-size: 11.5px;
   margin-right: 2px;
 }
+
+/* 表格工具栏的操作提示：选中行后自动隐藏 */
+.djm-toolbar-tip {
+  font-size: 11.5px;
+}
 /* ---------------- 表单 ---------------- */
 
 .djm-form-grid {