djm-ui 0.67.4 → 0.73.0

package/src/components/spin/index.js

@@ -1,42 +1,89 @@
 /**
- * 加载中：单独使用是转圈提示；包裹内容时在内容上盖一层遮罩
- * 用法：<DjmSpin /> / <DjmSpin :spinning="loading" tip="加载中"><Table /></DjmSpin>
+ * 加载中：支持环形、点状、柱状、脉冲四种形态
+ * 用法：<DjmSpin /> / <DjmSpin type="dots" /> / <DjmSpin :spinning="loading" tip="加载中"><Table /></DjmSpin>
+ * 延迟显示：<DjmSpin :delay="300" />，避免快速请求时闪一下
  */
+import { onBeforeUnmount, ref, watch } from 'vue'
+
 export default {
   name: 'DjmSpin',
   props: {
     spinning: { type: Boolean, default: true },
-    size: { type: String, default: 'md' }, // sm | md | lg
-    tip: { type: String, default: '' }
+    // sm | md | lg
+    size: { type: String, default: 'md' },
+    // ring 环形 / dots 点状 / bars 柱状 / pulse 脉冲
+    type: { type: String, default: 'ring' },
+    tip: { type: String, default: '' },
+    // 延迟多少毫秒后显示，0 表示立即
+    delay: { type: Number, default: 0 },
+    // 全屏加载：遮罩铺满视口
+    fullscreen: { type: Boolean, default: false },
+    // 自定义指示器颜色，默认跟随品牌色
+    color: { type: String, default: '' }
+  },
+  setup (props) {
+    const visible = ref(false)
+    let timer = null
+
+    function sync () {
+      window.clearTimeout(timer)
+      timer = null
+      if (!props.spinning) {
+        visible.value = false
+        return
+      }
+      if (props.delay > 0) {
+        timer = window.setTimeout(() => { visible.value = true }, props.delay)
+      } else {
+        visible.value = true
+      }
+    }
+
+    watch(() => [props.spinning, props.delay], sync, { immediate: true })
+    onBeforeUnmount(() => window.clearTimeout(timer))
+
+    return { visible }
   },
   computed: {
-    // 有默认插槽即为包裹模式
     wrapped () {
       return !!this.$slots.default
+    },
+    rootClass () {
+      return [
+        'djm-spin',
+        'djm-spin-' + this.size,
+        {
+          'djm-spin-wrap': this.wrapped && !this.fullscreen,
+          'djm-spin-inline': !this.wrapped && !this.fullscreen,
+          'djm-spin-fullscreen': this.fullscreen
+        }
+      ]
     }
   },
   template: `
     <div
-      v-if="wrapped"
-      class="djm-spin-wrap"
-      :class="'djm-spin-' + size"
-      :aria-busy="String(spinning)"
+      v-if="fullscreen || wrapped || visible"
+      :class="rootClass"
+      :aria-busy="String(visible)"
+      :role="visible ? 'status' : undefined"
+      :aria-label="!wrapped && !fullscreen && !tip && visible ? '加载中' : undefined"
     >
-      <slot />
-      <div v-if="spinning" class="djm-spin-mask" role="status">
-        <span class="djm-spinner"></span>
+      <slot v-if="wrapped && !fullscreen" />
+      <div v-if="visible" class="djm-spin-mask">
+        <span class="djm-spin-indicator" :class="'djm-spin-' + type" :style="color ? { color } : null">
+          <slot name="indicator">
+            <i v-if="type === 'ring'" class="djm-spinner"></i>
+            <template v-else-if="type === 'dots'">
+              <i></i><i></i><i></i>
+            </template>
+            <template v-else-if="type === 'bars'">
+              <i></i><i></i><i></i><i></i>
+            </template>
+            <i v-else class="djm-spin-core"></i>
+          </slot>
+        </span>
         <span v-if="tip" class="djm-spin-tip">{{ tip }}</span>
       </div>
     </div>
-    <span
-      v-else
-      class="djm-spin-inline"
-      :class="'djm-spin-' + size"
-      role="status"
-      :aria-label="tip ? undefined : '加载中'"
-    >
-      <span class="djm-spinner"></span>
-      <span v-if="tip" class="djm-spin-tip">{{ tip }}</span>
-    </span>
   `
 }

package/src/index.js

@@ -228,6 +228,7 @@ export { moveRows } from './utils/row-move.js'
 export { setLocale, getLocale, t, localeState } from './locale/index.js'
 export {
   theme, setTheme, toggleTheme, initTheme,
+  glass, setGlass,
   primaryColor, PRESET_COLORS, setPrimaryColor, resetPrimaryColor
 } from './theme/index.js'
 export { setPermissions, addPermissions, clearPermissions, hasPermission, vPermission } from './utils/permission.js'
@@ -345,7 +346,7 @@ const components = [
   DjmPageTabs
 ]
 
-export const version = '0.67.4'
+export const version = '0.73.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);