djm-ui 0.72.0 → 0.73.0

package/dist/mcp/manifest.json

@@ -1,8 +1,8 @@
 {
   "name": "djm-ui",
   "displayName": "DJM UI",
-  "version": "0.72.0",
-  "generatedAt": "2026-10-26T09:23:17.100Z",
+  "version": "0.73.0",
+  "generatedAt": "2026-10-26T09:46:53.848Z",
   "docs": "https://ui.duojumi.com/docs/",
   "homepage": "https://ui.duojumi.com",
   "repository": "https://yohan.cloud:8081/DJM/dimui.git",
@@ -12,7 +12,7 @@
   "stats": {
     "components": 105,
     "categories": 11,
-    "props": 623
+    "props": 632
   },
   "categories": [
     {
@@ -50,7 +50,8 @@
         "affix",
         "splitter",
         "grid",
-        "layout"
+        "layout",
+        "glass"
       ]
     },
     {
@@ -189,7 +190,7 @@
         "title": "2. 浏览器直接引入",
         "text": "UMD 版本复用全局 Vue，不会重复打包 Vue。Vue 必须先加载，再加载组件库和样式。",
         "file": "index.html",
-        "code": "<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/djm-ui@0.72.0/dist/djm-ui.min.css\" />\n<script src=\"https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js\"></script>\n<script src=\"https://cdn.jsdelivr.net/npm/djm-ui@0.72.0/dist/djm-ui.umd.min.js\"></script>\n\n<script>\n  Vue.createApp({\n    template: '<DjmButton variant=\"primary\">按钮</DjmButton>'\n  }).use(DjmUI).mount('#app')\n</script>"
+        "code": "<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/djm-ui@0.73.0/dist/djm-ui.min.css\" />\n<script src=\"https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js\"></script>\n<script src=\"https://cdn.jsdelivr.net/npm/djm-ui@0.73.0/dist/djm-ui.umd.min.js\"></script>\n\n<script>\n  Vue.createApp({\n    template: '<DjmButton variant=\"primary\">按钮</DjmButton>'\n  }).use(DjmUI).mount('#app')\n</script>"
       },
       {
         "title": "3. 全量注册",
@@ -2141,7 +2142,7 @@
       "slug": "progress",
       "title": "Progress 进度条",
       "category": "展示",
-      "description": "横向进度，支持成功 / 警告 / 失败配色与自定义高度。",
+      "description": "横向与环形两种形态，支持成功 / 警告 / 失败配色与自定义高度。",
       "docUrl": "https://ui.duojumi.com/docs/index.html#/progress",
       "aliases": [
         "progress",
@@ -2155,6 +2156,12 @@
           "default": "0",
           "description": "进度百分比，超出自动收敛到 0–100"
         },
+        {
+          "name": "type",
+          "type": "string",
+          "default": "'line'",
+          "description": "line 横向 / circle 环形"
+        },
         {
           "name": "status",
           "type": "string",
@@ -2165,24 +2172,36 @@
           "name": "show-text",
           "type": "boolean",
           "default": "true",
-          "description": "是否显示右侧百分比"
+          "description": "是否显示百分比"
         },
         {
           "name": "stroke-width",
           "type": "number",
           "default": "6",
-          "description": "进度条高度"
+          "description": "进度条粗细"
         },
         {
           "name": "color",
           "type": "string",
           "default": "''",
           "description": "自定义进度色，优先于状态色"
+        },
+        {
+          "name": "size",
+          "type": "number",
+          "default": "96",
+          "description": "环形直径（px）"
+        },
+        {
+          "name": "label",
+          "type": "string",
+          "default": "''",
+          "description": "无障碍名称，默认「进度」"
         }
       ],
       "events": [],
       "slots": [],
-      "example": "<div class=\"djm-docs-stack\">\n        <DjmProgress :percent=\"32\" />\n        <DjmProgress :percent=\"64\" status=\"success\" />\n        <DjmProgress :percent=\"86\" status=\"warning\" />\n        <DjmProgress :percent=\"100\" status=\"error\" />\n      </div>",
+      "example": "<div class=\"djm-docs-stack\">\n        <div class=\"djm-docs-inline\" style=\"gap: 24px; align-items: center\">\n          <DjmProgress type=\"circle\" :percent=\"32\" />\n          <DjmProgress type=\"circle\" :percent=\"64\" status=\"success\" :size=\"80\" />\n          <DjmProgress type=\"circle\" :percent=\"86\" status=\"warning\" :size=\"80\" />\n          <DjmProgress type=\"circle\" :percent=\"100\" status=\"error\" :size=\"80\" />\n        </div>\n        <DjmProgress :percent=\"32\" />\n        <DjmProgress :percent=\"64\" status=\"success\" />\n        <DjmProgress :percent=\"86\" status=\"warning\" />\n        <DjmProgress :percent=\"100\" status=\"error\" />\n      </div>",
       "blocks": [],
       "dsl": {
         "component": "DjmProgress",
@@ -2192,6 +2211,11 @@
             "default": "0",
             "description": "进度百分比，超出自动收敛到 0–100"
           },
+          "type": {
+            "type": "string",
+            "default": "'line'",
+            "description": "line 横向 / circle 环形"
+          },
           "status": {
             "type": "string",
             "default": "''",
@@ -2200,17 +2224,27 @@
           "show-text": {
             "type": "boolean",
             "default": "true",
-            "description": "是否显示右侧百分比"
+            "description": "是否显示百分比"
           },
           "stroke-width": {
             "type": "number",
             "default": "6",
-            "description": "进度条高度"
+            "description": "进度条粗细"
           },
           "color": {
             "type": "string",
             "default": "''",
             "description": "自定义进度色，优先于状态色"
+          },
+          "size": {
+            "type": "number",
+            "default": "96",
+            "description": "环形直径（px）"
+          },
+          "label": {
+            "type": "string",
+            "default": "''",
+            "description": "无障碍名称，默认「进度」"
           }
         },
         "events": [],
@@ -10188,7 +10222,7 @@
       "slug": "spin",
       "title": "Spin 加载中",
       "category": "反馈",
-      "description": "单独使用时是转圈提示，包裹内容时在内容上盖一层遮罩。",
+      "description": "四种形态：环形、点状、柱状、脉冲；支持延迟显示、全屏遮罩与自定义指示器。",
       "docUrl": "https://ui.duojumi.com/docs/index.html#/spin",
       "aliases": [
         "spin",
@@ -10202,6 +10236,12 @@
           "default": "true",
           "description": "包裹模式下是否显示遮罩"
         },
+        {
+          "name": "type",
+          "type": "string",
+          "default": "'ring'",
+          "description": "ring 环形 / dots 点状 / bars 柱状 / pulse 脉冲"
+        },
         {
           "name": "size",
           "type": "string",
@@ -10217,7 +10257,25 @@
           "name": "tip",
           "type": "string",
           "default": "''",
-          "description": "转圈旁的文字"
+          "description": "指示器旁的文字"
+        },
+        {
+          "name": "delay",
+          "type": "number",
+          "default": "0",
+          "description": "延迟多少毫秒后显示，避免快速请求闪一下"
+        },
+        {
+          "name": "fullscreen",
+          "type": "boolean",
+          "default": "false",
+          "description": "遮罩铺满视口"
+        },
+        {
+          "name": "color",
+          "type": "string",
+          "default": "''",
+          "description": "自定义指示器颜色，默认跟随品牌色"
         }
       ],
       "events": [],
@@ -10225,9 +10283,13 @@
         {
           "name": "default",
           "description": "被包裹的内容，传入即为包裹模式"
+        },
+        {
+          "name": "indicator",
+          "description": "自定义加载指示器"
         }
       ],
-      "example": "<div class=\"djm-demo-stack\">\n        <div class=\"djm-docs-inline\">\n          <DjmSpin />\n          <DjmSpin size=\"sm\" />\n          <DjmSpin size=\"lg\" />\n          <DjmSpin tip=\"正在加载\" />\n        </div>\n        <div class=\"djm-docs-inline\">\n          <DjmSpin :spinning=\"loading\" tip=\"加载中\">\n            <div class=\"djm-spin-demo\">\n              <div class=\"djm-demo-note\">\n                <strong>组织架构同步</strong>\n                <p>最近一次同步：2026-10-24 09:30，共 128 条记录。</p>\n              </div>\n            </div>\n          </DjmSpin>\n          <DjmButton size=\"sm\" @click=\"loading = !loading\">{{ loading ? '结束加载' : '开始加载' }}</DjmButton>\n        </div>\n      </div>",
+      "example": "<div class=\"djm-demo-stack\">\n        <div class=\"djm-docs-inline\">\n          <DjmSpin />\n          <DjmSpin type=\"dots\" />\n          <DjmSpin type=\"bars\" />\n          <DjmSpin type=\"pulse\" />\n          <DjmSpin tip=\"正在加载\" />\n          <DjmSpin type=\"dots\" color=\"#12855a\" tip=\"同步中\" />\n        </div>\n        <div class=\"djm-docs-inline\">\n          <DjmSpin size=\"sm\" />\n          <DjmSpin size=\"sm\" type=\"dots\" />\n          <DjmSpin size=\"lg\" type=\"bars\" />\n          <DjmSpin size=\"lg\" type=\"pulse\" />\n        </div>\n        <div class=\"djm-docs-inline\">\n          <DjmSpin :spinning=\"loading\" tip=\"加载中\" type=\"dots\">\n            <div class=\"djm-spin-demo\">\n              <div class=\"djm-demo-note\">\n                <strong>组织架构同步</strong>\n                <p>最近一次同步：2026-10-24 09:30，共 128 条记录。</p>\n              </div>\n            </div>\n          </DjmSpin>\n          <DjmButton size=\"sm\" @click=\"loading = !loading\">{{ loading ? '结束加载' : '开始加载' }}</DjmButton>\n          <DjmButton size=\"sm\" @click=\"showFullscreen\">全屏加载</DjmButton>\n          <DjmSpin :spinning=\"fullscreen\" fullscreen tip=\"正在准备数据\" type=\"bars\" />\n        </div>\n      </div>",
       "blocks": [],
       "dsl": {
         "component": "DjmSpin",
@@ -10237,6 +10299,11 @@
             "default": "true",
             "description": "包裹模式下是否显示遮罩"
           },
+          "type": {
+            "type": "string",
+            "default": "'ring'",
+            "description": "ring 环形 / dots 点状 / bars 柱状 / pulse 脉冲"
+          },
           "size": {
             "type": "string",
             "default": "'md'",
@@ -10250,12 +10317,28 @@
           "tip": {
             "type": "string",
             "default": "''",
-            "description": "转圈旁的文字"
+            "description": "指示器旁的文字"
+          },
+          "delay": {
+            "type": "number",
+            "default": "0",
+            "description": "延迟多少毫秒后显示，避免快速请求闪一下"
+          },
+          "fullscreen": {
+            "type": "boolean",
+            "default": "false",
+            "description": "遮罩铺满视口"
+          },
+          "color": {
+            "type": "string",
+            "default": "''",
+            "description": "自定义指示器颜色，默认跟随品牌色"
           }
         },
         "events": [],
         "slots": [
-          "default"
+          "default",
+          "indicator"
         ]
       }
     },
@@ -10603,6 +10686,12 @@
           "type": "boolean",
           "default": "false",
           "description": "全屏铺满，内容区撑满剩余高度"
+        },
+        {
+          "name": "glass",
+          "type": "boolean",
+          "default": "false",
+          "description": "毛玻璃底，需要透出背后页面时使用"
         }
       ],
       "events": [
@@ -10675,6 +10764,11 @@
             "type": "boolean",
             "default": "false",
             "description": "全屏铺满，内容区撑满剩余高度"
+          },
+          "glass": {
+            "type": "boolean",
+            "default": "false",
+            "description": "毛玻璃底，需要透出背后页面时使用"
           }
         },
         "events": [
@@ -10855,6 +10949,12 @@
           "type": "boolean",
           "default": "true",
           "description": "允许 Esc 关闭"
+        },
+        {
+          "name": "glass",
+          "type": "boolean",
+          "default": "false",
+          "description": "毛玻璃底"
         }
       ],
       "events": [
@@ -10931,6 +11031,11 @@
             "type": "boolean",
             "default": "true",
             "description": "允许 Esc 关闭"
+          },
+          "glass": {
+            "type": "boolean",
+            "default": "false",
+            "description": "毛玻璃底"
           }
         },
         "events": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "djm-ui",
-  "version": "0.72.0",
+  "version": "0.73.0",
   "description": "DJM UI — 企业级中后台 Vue 3 组件库",
   "homepage": "https://ui.duojumi.com",
   "repository": {

package/src/components/drawer/index.js

@@ -23,7 +23,9 @@ export default {
     // 点击遮罩关闭
     maskClosable: { type: Boolean, default: true },
     showClose: { type: Boolean, default: true },
-    closeOnEsc: { type: Boolean, default: true }
+    closeOnEsc: { type: Boolean, default: true },
+    // 毛玻璃底
+    glass: { type: Boolean, default: false }
   },
   emits: ['update:modelValue', 'open', 'close'],
   setup (props, { emit }) {
@@ -96,7 +98,7 @@ export default {
           <aside
             ref="panelRef"
             class="djm-drawer"
-            :class="'djm-drawer-' + placement"
+            :class="['djm-drawer-' + placement, { 'djm-is-glass': glass }]"
             :style="panelStyle"
             role="dialog"
             aria-modal="true"

package/src/components/modal/index.js

@@ -19,7 +19,9 @@ export default {
     // 是否允许 Esc 关闭
     closeOnEsc: { type: Boolean, default: true },
     // 全屏铺满，适合配置类大表单
-    fullscreen: { type: Boolean, default: false }
+    fullscreen: { type: Boolean, default: false },
+    // 毛玻璃底：需要显示背后页面时使用
+    glass: { type: Boolean, default: false }
   },
   emits: ['update:modelValue', 'open', 'close'],
   setup (props, { emit }) {
@@ -97,7 +99,7 @@ export default {
           <div
             ref="dialogRef"
             class="djm-modal"
-            :class="{ 'djm-is-fullscreen': fullscreen }"
+            :class="{ 'djm-is-fullscreen': fullscreen, 'djm-is-glass': glass }"
             :style="dialogStyle"
             role="dialog"
             aria-modal="true"

package/src/components/progress/index.js

@@ -1,17 +1,24 @@
 /**
- * 进度条：横向进度，支持语义状态与自定义高度
+ * 进度条：横向与环形两种形态，支持语义状态与自定义高度
  * 用法：<DjmProgress :percent="60" status="success" />
+ *       <DjmProgress type="circle" :percent="72" :size="96" />
  */
 export default {
   name: 'DjmProgress',
   props: {
     percent: { type: Number, default: 0 },
+    // line 横向 / circle 环形
+    type: { type: String, default: 'line' },
     // '' / success / error / warning
     status: { type: String, default: '' },
     showText: { type: Boolean, default: true },
     strokeWidth: { type: Number, default: 6 },
     // 自定义进度色，不传由状态决定
-    color: { type: String, default: '' }
+    color: { type: String, default: '' },
+    // 环形直径（px）
+    size: { type: Number, default: 96 },
+    // 无障碍名称，默认「进度」
+    label: { type: String, default: '' }
   },
   computed: {
     safePercent () {
@@ -24,10 +31,72 @@ export default {
     },
     trackStyle () {
       return { height: this.strokeWidth + 'px' }
+    },
+    circleSize () {
+      return Math.max(48, Number(this.size) || 96)
+    },
+    circleRadius () {
+      return (this.circleSize - this.strokeWidth) / 2
+    },
+    circleLength () {
+      return 2 * Math.PI * this.circleRadius
+    },
+    circleOffset () {
+      return this.circleLength * (1 - this.safePercent / 100)
+    },
+    circleStyle () {
+      return { width: this.circleSize + 'px', height: this.circleSize + 'px' }
+    },
+    circleLabelStyle () {
+      return { fontSize: Math.max(12, Math.round(this.circleSize / 5)) + 'px' }
     }
   },
   template: `
-    <div class="djm-progress-line" :class="status ? 'djm-is-' + status : ''">
+    <div
+      v-if="type === 'circle'"
+      class="djm-progress-circle"
+      :class="status ? 'djm-is-' + status : ''"
+      :style="circleStyle"
+      role="progressbar"
+      :aria-label="label || '进度'"
+      :aria-valuenow="safePercent"
+      aria-valuemin="0"
+      aria-valuemax="100"
+    >
+      <svg :viewBox="'0 0 ' + circleSize + ' ' + circleSize" aria-hidden="true">
+        <circle
+          class="djm-progress-circle-track"
+          :cx="circleSize / 2"
+          :cy="circleSize / 2"
+          :r="circleRadius"
+          :stroke-width="strokeWidth"
+          fill="none"
+        />
+        <circle
+          class="djm-progress-circle-bar"
+          :cx="circleSize / 2"
+          :cy="circleSize / 2"
+          :r="circleRadius"
+          :stroke-width="strokeWidth"
+          fill="none"
+          stroke-linecap="round"
+          :stroke-dasharray="circleLength"
+          :stroke-dashoffset="circleOffset"
+          :style="color ? { stroke: color } : null"
+        />
+      </svg>
+      <span v-if="showText" class="djm-progress-circle-label" :style="circleLabelStyle">{{ safePercent }}%</span>
+    </div>
+    <div
+      v-else
+      class="djm-progress-line"
+      :class="status ? 'djm-is-' + status : ''"
+      role="progressbar"
+      :aria-label="label || '进度'"
+      :aria-valuenow="safePercent"
+      aria-valuemin="0"
+      aria-valuemax="100"
+    >
       <div class="djm-progress" :style="trackStyle">
         <div class="djm-progress-bar" :style="barStyle"></div>
       </div>

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.72.0'
+export const version = '0.73.0'
 
 export function install (app, options = {}) {
   if (options.locale) setLocale(options.locale)

package/src/styles/components/feedback.css

@@ -194,6 +194,52 @@
   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;