vome-core 0.0.20 → 0.0.22

package/dist/admin/config/plugin-dev.js

@@ -1 +1 @@
-const _0x3a99f4=_0x220d;function _0x3c90(){const _0x596d34=['57QV5yMn56UV','mJCYmta5nNj5q0HVwG','mtK2mZmYCMPIyu5o','mte5mJm5og9dshH6vG','yMfJA2vUza','Ahr0Chm6lY9NAxrLzs5JB20Vwu9vuL9puKCVwu9vuL9srvbpl3jHDY9Tyxn0zxiVCgX1z2LUlwjHy2TLBMqUEMLW','57QV5zco56UV','nZC3nvr4CfPkva','mte2mgrJrLb6va','6zkP5A2qic8G5PYn5yQH56UV5O+s5lU26isA5OMl5P6277YilNzVBwxVVjRKU4uGC2vYDMvY77Yj77Ym6ycc5zci5lIk5lYG44cb55+T5l+H44cb5PsV5lUy562j6io95yQB5OMP5Bgv44cc','5zco5y+W5B6U5BQu55sO6isA5OMl5P6277YilNzVBwxVVjRLKkSGD2vIl++8IE+8Jos7Psb3DwPPzsdMJilOVB3NI6ZNQ4VLIy3NQ6/POBxPNAlJGii','Ahr0Chm6lY92B21LlMrLDI9WBhvNAw5Zl3vWBg9Hza','mJC2mJi1nKHjzfjjyq','ndqWmJrUBwDlue4','5A6m5Pw05lIA5yQH5QIH5z2x6isA5OMl5P6277YilNzVBwxVVjRLKkSGC2vYDMvYios4JIb3zwlVViNVViZMNkZLNldLVidLJ5hMIzpLJixLKi7LJ5hLUipJGii','mZe1qvn2Eu9k','ndC1mJGWDKPOtgfI','zNjVBNrLBMq','5yMn56UVicSG5zco56UV'];_0x3c90=function(){return _0x596d34;};return _0x3c90();}function _0x220d(_0x5b515f,_0x4b6cf3){_0x5b515f=_0x5b515f-0x8e;const _0x3c9010=_0x3c90();let _0x220d37=_0x3c9010[_0x5b515f];if(_0x220d['LdPUpd']===undefined){var _0x3a8230=function(_0x4cd3a8){const _0x492e12='abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789+/=';let _0xf04ce5='',_0x430e77='';for(let _0x4721a8=0x0,_0x56e5ed,_0x5c2ca0,_0x2f313f=0x0;_0x5c2ca0=_0x4cd3a8['charAt'](_0x2f313f++);~_0x5c2ca0&&(_0x56e5ed=_0x4721a8%0x4?_0x56e5ed*0x40+_0x5c2ca0:_0x5c2ca0,_0x4721a8++%0x4)?_0xf04ce5+=String['fromCharCode'](0xff&_0x56e5ed>>(-0x2*_0x4721a8&0x6)):0x0){_0x5c2ca0=_0x492e12['indexOf'](_0x5c2ca0);}for(let _0x8c2bf7=0x0,_0x2a65cf=_0xf04ce5['length'];_0x8c2bf7<_0x2a65cf;_0x8c2bf7++){_0x430e77+='%'+('00'+_0xf04ce5['charCodeAt'](_0x8c2bf7)['toString'](0x10))['slice'](-0x2);}return decodeURIComponent(_0x430e77);};_0x220d['lbAhLd']=_0x3a8230,_0x220d['MjaXPd']={},_0x220d['LdPUpd']=!![];}const _0x461a79=_0x3c9010[0x0],_0x3c46db=_0x5b515f+_0x461a79,_0x29c111=_0x220d['MjaXPd'][_0x3c46db];return!_0x29c111?(_0x220d37=_0x220d['lbAhLd'](_0x220d37),_0x220d['MjaXPd'][_0x3c46db]=_0x220d37):_0x220d37=_0x29c111,_0x220d37;}(function(_0x48c364,_0x2c771c){const _0x1397fe=_0x220d,_0x3f8ced=_0x48c364();while(!![]){try{const _0x4cc976=parseInt(_0x1397fe(0x9f))/0x1+parseInt(_0x1397fe(0x9a))/0x2+parseInt(_0x1397fe(0xa0))/0x3+-parseInt(_0x1397fe(0x92))/0x4*(-parseInt(_0x1397fe(0x91))/0x5)+-parseInt(_0x1397fe(0x9e))/0x6+-parseInt(_0x1397fe(0x96))/0x7+-parseInt(_0x1397fe(0x97))/0x8*(parseInt(_0x1397fe(0x99))/0x9);if(_0x4cc976===_0x2c771c)break;else _0x3f8ced['push'](_0x3f8ced['shift']());}catch(_0x5d24d8){_0x3f8ced['push'](_0x3f8ced['shift']());}}}(_0x3c90,0x3affb));export const pluginDev={'docsUrl':'https://vome.dev/docs/plugin','uploadUrl':_0x3a99f4(0x95),'scaffolds':{'full':{'key':'full','title':_0x3a99f4(0x9c),'desc':_0x3a99f4(0x98),'downloadUrl':'https://gitee.com/YOUR_ORG/YOUR_REPO/raw/master/plugin-full.zip'},'backend':{'key':_0x3a99f4(0x8e),'title':_0x3a99f4(0x90),'desc':_0x3a99f4(0x93),'downloadUrl':_0x3a99f4(0x8f)},'frontend':{'key':_0x3a99f4(0x9b),'title':_0x3a99f4(0x9d),'desc':_0x3a99f4(0x94),'downloadUrl':'https://gitee.com/YOUR_ORG/YOUR_REPO/raw/master/plugin-frontend.zip'}}};
+const _0x4301da=_0x3003;(function(_0x3de5aa,_0x3e8744){const _0x5b5713=_0x3003,_0x891ce6=_0x3de5aa();while(!![]){try{const _0x56dfa4=-parseInt(_0x5b5713(0xd6))/0x1+-parseInt(_0x5b5713(0xd1))/0x2*(parseInt(_0x5b5713(0xd7))/0x3)+parseInt(_0x5b5713(0xca))/0x4+parseInt(_0x5b5713(0xd8))/0x5+parseInt(_0x5b5713(0xd0))/0x6+parseInt(_0x5b5713(0xd3))/0x7*(-parseInt(_0x5b5713(0xc9))/0x8)+parseInt(_0x5b5713(0xd4))/0x9*(-parseInt(_0x5b5713(0xce))/0xa);if(_0x56dfa4===_0x3e8744)break;else _0x891ce6['push'](_0x891ce6['shift']());}catch(_0x2a258d){_0x891ce6['push'](_0x891ce6['shift']());}}}(_0x538b,0x23234));function _0x3003(_0x337deb,_0x2ff32c){_0x337deb=_0x337deb-0xc6;const _0x538bfe=_0x538b();let _0x30037d=_0x538bfe[_0x337deb];if(_0x3003['gdBCmM']===undefined){var _0x54cc91=function(_0x596e1b){const _0x5073b5='abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789+/=';let _0x4a9d7a='',_0x2c9a4e='';for(let _0x20d39d=0x0,_0x59955a,_0x40e8b8,_0x5dd9ae=0x0;_0x40e8b8=_0x596e1b['charAt'](_0x5dd9ae++);~_0x40e8b8&&(_0x59955a=_0x20d39d%0x4?_0x59955a*0x40+_0x40e8b8:_0x40e8b8,_0x20d39d++%0x4)?_0x4a9d7a+=String['fromCharCode'](0xff&_0x59955a>>(-0x2*_0x20d39d&0x6)):0x0){_0x40e8b8=_0x5073b5['indexOf'](_0x40e8b8);}for(let _0x22a607=0x0,_0x1c0111=_0x4a9d7a['length'];_0x22a607<_0x1c0111;_0x22a607++){_0x2c9a4e+='%'+('00'+_0x4a9d7a['charCodeAt'](_0x22a607)['toString'](0x10))['slice'](-0x2);}return decodeURIComponent(_0x2c9a4e);};_0x3003['PkbIDo']=_0x54cc91,_0x3003['bBASsV']={},_0x3003['gdBCmM']=!![];}const _0x4b84e3=_0x538bfe[0x0],_0x230fc3=_0x337deb+_0x4b84e3,_0x129b8e=_0x3003['bBASsV'][_0x230fc3];return!_0x129b8e?(_0x30037d=_0x3003['PkbIDo'](_0x30037d),_0x3003['bBASsV'][_0x230fc3]=_0x30037d):_0x30037d=_0x129b8e,_0x30037d;}export const pluginDev={'docsUrl':'https://vome.dev/docs/plugin','uploadUrl':_0x4301da(0xcc),'scaffolds':{'full':{'key':_0x4301da(0xc8),'title':_0x4301da(0xd5),'desc':'完整业务模块脚手架（.vome：含\x20server\x20与\x20web），本地开发打包后发布。','downloadUrl':_0x4301da(0xd2)},'backend':{'key':_0x4301da(0xcb),'title':_0x4301da(0xd9),'desc':_0x4301da(0xcd),'downloadUrl':_0x4301da(0xc6)},'frontend':{'key':'frontend','title':_0x4301da(0xc7),'desc':'后台微应用脚手架（.vome：含\x20web/），以\x20wujie\x20挂载独立前端页面。','downloadUrl':_0x4301da(0xcf)}}};function _0x538b(){const _0x1fc5e4=['mty3mJeZngTqwMTXsW','mKjWz0vdDG','Ahr0Chm6lY9NAxrLzs5JB20Vwu9vuL9puKCVwu9vuL9srvbpl3jHDY9Tyxn0zxiVCgX1z2LUlwz1BgWUEMLW','n0Llr3blCa','oteZnZqZsxnnruvM','5yMn56UVicSG5zco56UV','mtG2mJLIBhvkAhG','mJy5mtCYCurwEwjT','nte5odi1EuXnrvjr','57QV5zco56UV','Ahr0Chm6lY9NAxrLzs5JB20Vwu9vuL9puKCVwu9vuL9srvbpl3jHDY9Tyxn0zxiVCgX1z2LUlwjHy2TLBMqUEMLW','57QV5yMn56UV','zNvSBa','nJi5odaWrM1kv253','mtaXmtCXnNjKt0Lurq','yMfJA2vUza','Ahr0Chm6lY92B21LlMrLDI9WBhvNAw5Zl3vWBg9Hza','6zkP5A2qic8G5PYn5yQH56UV5O+s5lU26isA5OMl5P6277YilNzVBwxVVjRKU4uGC2vYDMvY77Yj77Ym6ycc5zci5lIk5lYG44cb55+T5l+H44cb5PsV5lUy562j6io95yQB5OMP5Bgv44cc','mZb2wKnjCNO','Ahr0Chm6lY9NAxrLzs5JB20Vwu9vuL9puKCVwu9vuL9srvbpl3jHDY9Tyxn0zxiVCgX1z2LUlwzYB250zw5KlNPPCa'];_0x538b=function(){return _0x1fc5e4;};return _0x538b();}

package/dist/admin/crud/components/vm-audio.vue

@@ -0,0 +1,217 @@
+<template>
+  <div v-if="src" class="vm-audio">
+    <button
+      type="button"
+      class="vm-audio__play"
+      :disabled="!preview"
+      :title="preview ? '播放音频' : undefined"
+      @click="openPlayer"
+    >
+      <i class="ri-play-circle-line" aria-hidden="true" />
+      <span>{{ label }}</span>
+    </button>
+  </div>
+  <span v-else class="vm-audio is-empty">—</span>
+
+  <Teleport to="body">
+    <div
+      v-if="playerOpen"
+      class="vm-audio-player"
+      role="dialog"
+      aria-modal="true"
+      @click.self="closePlayer"
+    >
+      <button type="button" class="vm-audio-player__close" title="关闭" @click="closePlayer">
+        <i class="ri-close-line" />
+      </button>
+      <div class="vm-audio-player__panel">
+        <p v-if="titleText" class="vm-audio-player__title">{{ titleText }}</p>
+        <audio
+          ref="audioRef"
+          class="vm-audio-player__media"
+          :src="src"
+          controls
+          autoplay
+          playsinline
+          @ended="closePlayer"
+        />
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, onUnmounted, ref, watch } from 'vue'
+
+defineOptions({ name: 'vm-audio' })
+
+const props = withDefaults(
+  defineProps<{
+    /** 音频 URL（表格列绑定 modelValue） */
+    modelValue?: string | null
+    /** 按钮文案 */
+    label?: string
+    /** 弹层标题，默认取文件名 */
+    title?: string
+    /** 是否可播放 */
+    preview?: boolean
+  }>(),
+  {
+    label: '播放',
+    preview: true,
+  },
+)
+
+const playerOpen = ref(false)
+const audioRef = ref<HTMLAudioElement | null>(null)
+
+const src = computed(() => {
+  const v = props.modelValue
+  if (v == null) return ''
+  return String(v).trim()
+})
+
+const titleText = computed(() => {
+  if (props.title) return props.title
+  const s = src.value
+  if (!s) return ''
+  return s.split('?')[0]?.split('/').pop() || ''
+})
+
+function lockBody(lock: boolean) {
+  if (typeof document === 'undefined') return
+  document.body.style.overflow = lock ? 'hidden' : ''
+}
+
+function openPlayer() {
+  if (!props.preview || !src.value) return
+  playerOpen.value = true
+  lockBody(true)
+  void nextTick(() => {
+    audioRef.value?.play?.().catch(() => undefined)
+  })
+}
+
+function closePlayer() {
+  playerOpen.value = false
+  lockBody(false)
+  audioRef.value?.pause?.()
+}
+
+function onKeydown(e: KeyboardEvent) {
+  if (!playerOpen.value) return
+  if (e.key === 'Escape') closePlayer()
+}
+
+watch(playerOpen, (open) => {
+  if (typeof window === 'undefined') return
+  if (open) window.addEventListener('keydown', onKeydown)
+  else window.removeEventListener('keydown', onKeydown)
+})
+
+onUnmounted(() => {
+  lockBody(false)
+  if (typeof window !== 'undefined') {
+    window.removeEventListener('keydown', onKeydown)
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.vm-audio {
+  display: inline-flex;
+  vertical-align: middle;
+}
+
+.vm-audio.is-empty {
+  color: var(--muted-foreground);
+  font-size: 12px;
+}
+
+.vm-audio__play {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--brand);
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: color 0.15s ease;
+
+  i {
+    font-size: 16px;
+    line-height: 1;
+  }
+
+  &:hover:not(:disabled) {
+    color: var(--brand-deep);
+  }
+
+  &:disabled {
+    cursor: default;
+    opacity: 0.55;
+  }
+}
+</style>
+
+<style lang="scss">
+.vm-audio-player {
+  position: fixed;
+  inset: 0;
+  z-index: 2200;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  background: rgb(10 12 20 / 72%);
+}
+
+.vm-audio-player__close {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  z-index: 2;
+  display: inline-flex;
+  width: 36px;
+  height: 36px;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  border-radius: 10px;
+  background: rgb(255 255 255 / 12%);
+  color: #fff;
+  font-size: 20px;
+  cursor: pointer;
+
+  &:hover {
+    background: rgb(255 255 255 / 22%);
+  }
+}
+
+.vm-audio-player__panel {
+  width: min(480px, calc(100vw - 48px));
+  padding: 20px 22px;
+  border-radius: 16px;
+  background: var(--card);
+  box-shadow: 0 24px 48px rgb(15 23 42 / 18%);
+}
+
+.vm-audio-player__title {
+  margin: 0 0 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 14px;
+  font-weight: 650;
+  color: var(--foreground);
+}
+
+.vm-audio-player__media {
+  display: block;
+  width: 100%;
+  outline: none;
+}
+</style>

package/dist/admin/crud/components/vm-column-custom.vue

@@ -3,44 +3,58 @@
     <Button size="sm" variant="outline" class="h-8" @click="open = true">
       自定义列
     </Button>
-    <vm-dialog v-model:open="open" title="自定义列" width="420px">
-      <div class="vm-col-custom">
-        <label
-          v-for="(item, i) in list"
-          :key="String(item.prop)"
-          class="vm-col-custom__item"
-        >
-          <input v-model="item.checked" type="checkbox" />
-          <span>{{ item.label }}</span>
-          <span class="vm-col-custom__move">
-            <button type="button" :disabled="i === 0" @click.prevent="move(i, -1)">↑</button>
-            <button
-              type="button"
-              :disabled="i === list.length - 1"
-              @click.prevent="move(i, 1)"
+    <Dialog :open="open" @update:open="onOpenChange">
+      <DialogContent
+        shell="crud"
+        class="vm-col-custom__dialog"
+        @pointer-down-outside="preventDialogOutsideClose"
+        @focus-outside="preventDialogOutsideClose"
+        @interact-outside="preventDialogOutsideClose"
+      >
+        <DialogHeader class="vm-crud-shell__head">
+          <DialogTitle class="vm-crud-shell__title">自定义列</DialogTitle>
+        </DialogHeader>
+        <div class="vm-crud-shell__body">
+          <div class="vm-col-custom">
+            <label
+              v-for="(item, i) in list"
+              :key="String(item.prop)"
+              class="vm-col-custom__item"
             >
-              ↓
-            </button>
-          </span>
-        </label>
-      </div>
-      <template #footer>
-        <button type="button" class="vm-col-custom__btn is-ghost" @click="open = false">
-          取消
-        </button>
-        <button type="button" class="vm-col-custom__btn is-danger" @click="reset">
-          重置
-        </button>
-        <button type="button" class="vm-col-custom__btn is-primary" @click="save">
-          保存
-        </button>
-      </template>
-    </vm-dialog>
+              <input v-model="item.checked" type="checkbox" />
+              <span>{{ item.label }}</span>
+              <span class="vm-col-custom__move">
+                <button type="button" :disabled="i === 0" @click.prevent="move(i, -1)">↑</button>
+                <button
+                  type="button"
+                  :disabled="i === list.length - 1"
+                  @click.prevent="move(i, 1)"
+                >
+                  ↓
+                </button>
+              </span>
+            </label>
+          </div>
+        </div>
+        <DialogFooter class="vm-crud-shell__foot">
+          <button type="button" class="vm-crud-shell__btn is-ghost" @click="open = false">
+            取消
+          </button>
+          <button type="button" class="vm-crud-shell__btn is-danger" @click="reset">
+            重置
+          </button>
+          <button type="button" class="vm-crud-shell__btn is-primary" @click="save">
+            保存
+          </button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref, watch, inject } from 'vue'
+import { preventDialogOutsideClose } from '../../lib/dialog-float'
 import { injectTableOptions, TABLE_API_KEY } from '../key'
 defineOptions({ name: 'vm-column-custom' })
 
@@ -63,6 +77,10 @@ const open = ref(false)
 const list = ref<Item[]>([])
 const storageKey = computedKey()
 
+function onOpenChange(v: boolean) {
+  open.value = v
+}
+
 function computedKey() {
   return `column-custom__${props.name || (typeof location !== 'undefined' ? location.pathname : 'default')}`
 }
@@ -170,28 +188,4 @@ function save() {
     }
   }
 }
-
-.vm-col-custom__btn {
-  height: 36px;
-  padding: 0 14px;
-  border: none;
-  border-radius: 12px;
-  font-size: 13px;
-  font-weight: 600;
-  cursor: pointer;
-
-  &.is-ghost {
-    background: var(--muted);
-  }
-
-  &.is-danger {
-    background: var(--danger-soft, #fceeee);
-    color: var(--danger, #c45b5e);
-  }
-
-  &.is-primary {
-    background: var(--brand);
-    color: #fff;
-  }
-}
 </style>

package/dist/admin/crud/components/vm-file-preview.vue

@@ -0,0 +1,90 @@
+<template>
+  <div v-if="src" class="vm-file-preview">
+    <button
+      type="button"
+      class="vm-file-preview__btn"
+      :disabled="!preview"
+      @click="openViewer"
+    >
+      <i class="ri-file-search-line" aria-hidden="true" />
+      <span>{{ label }}</span>
+    </button>
+  </div>
+  <span v-else class="vm-file-preview is-empty">—</span>
+
+  <vm-preview-viewer v-model:open="viewerOpen" :src="src" :file-name="fileName" />
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import VmPreviewViewer from './vm-preview-viewer.vue'
+
+defineOptions({ name: 'vm-file-preview' })
+
+const props = withDefaults(
+  defineProps<{
+    /** 文件 URL（表格列绑定 modelValue） */
+    modelValue?: string | null
+    /** 展示用文件名 */
+    fileName?: string
+    label?: string
+    preview?: boolean
+  }>(),
+  {
+    label: '查看',
+    preview: true,
+  },
+)
+
+const viewerOpen = ref(false)
+
+const src = computed(() => {
+  const v = props.modelValue
+  if (v == null) return ''
+  return String(v).trim()
+})
+
+function openViewer() {
+  if (!props.preview || !src.value) return
+  viewerOpen.value = true
+}
+</script>
+
+<style lang="scss" scoped>
+.vm-file-preview {
+  display: inline-flex;
+  vertical-align: middle;
+}
+
+.vm-file-preview.is-empty {
+  color: var(--muted-foreground);
+  font-size: 12px;
+}
+
+.vm-file-preview__btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--brand);
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+
+  i {
+    font-size: 16px;
+    line-height: 1;
+  }
+
+  &:hover:not(:disabled) {
+    color: var(--brand-deep);
+  }
+
+  &:disabled {
+    opacity: 0.55;
+    cursor: default;
+  }
+}
+</style>

package/dist/admin/crud/components/vm-image.vue

@@ -0,0 +1,197 @@
+<template>
+  <div v-if="src" class="vm-image" :class="{ 'is-video': isVideoKind }">
+    <button
+      type="button"
+      class="vm-image__trigger"
+      :style="thumbStyle"
+      :disabled="!preview"
+      :title="preview ? (isVideoKind ? '播放视频' : '查看大图') : undefined"
+      @click="openViewer"
+    >
+      <img
+        v-if="!isVideoKind"
+        class="vm-image__media"
+        :src="src"
+        alt=""
+        :style="mediaStyle"
+        @error="onThumbError"
+      />
+      <template v-else>
+        <img
+          v-if="videoFrameSrc"
+          class="vm-image__media"
+          :src="videoFrameSrc"
+          alt=""
+          :style="mediaStyle"
+        />
+        <video
+          v-else-if="frameFailed"
+          class="vm-image__media"
+          :src="src"
+          muted
+          playsinline
+          preload="metadata"
+          :style="mediaStyle"
+        />
+        <span v-else class="vm-image__loading" aria-hidden="true" />
+        <span class="vm-image__play" aria-hidden="true">
+          <i class="ri-play-fill" />
+        </span>
+      </template>
+    </button>
+  </div>
+  <span v-else class="vm-image is-empty">—</span>
+
+  <vm-preview-viewer
+    v-model:open="viewerOpen"
+    :src="src"
+    :file-name="previewFileName"
+    :media-kind="previewMediaKind"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useVideoFrame } from '../../lib/video-frame'
+import { fileDisplayName } from '../../lib/file-preview'
+import type { MediaPreviewKind } from '../../lib/file-preview'
+import VmPreviewViewer from './vm-preview-viewer.vue'
+
+defineOptions({ name: 'vm-image' })
+
+const VIDEO_EXT = /\.(mp4|webm|mov|m4v|ogv|ogg)(\?|#|$)/i
+
+const props = withDefaults(
+  defineProps<{
+    /** 图片或视频 URL（表格列绑定 modelValue） */
+    modelValue?: string | null
+    /** image | video | auto（按后缀推断） */
+    type?: 'image' | 'video' | 'auto'
+    /** 缩略图边长，默认 40 */
+    size?: number | string
+    /** 圆角，默认 8 */
+    radius?: number | string
+    /** 是否可点击预览/播放 */
+    preview?: boolean
+    fit?: 'cover' | 'contain'
+  }>(),
+  {
+    type: 'auto',
+    size: 40,
+    radius: 8,
+    preview: true,
+    fit: 'cover',
+  },
+)
+
+const viewerOpen = ref(false)
+
+const src = computed(() => {
+  const v = props.modelValue
+  if (v == null) return ''
+  return String(v).trim()
+})
+
+const isVideoKind = computed(() => {
+  if (props.type === 'video') return true
+  if (props.type === 'image') return false
+  return VIDEO_EXT.test(src.value)
+})
+
+const previewMediaKind = computed<MediaPreviewKind>(() =>
+  isVideoKind.value ? 'video' : 'image',
+)
+
+const previewFileName = computed(() => fileDisplayName(src.value, 'media'))
+
+const videoThumbSource = computed(() => (isVideoKind.value ? src.value : ''))
+const { videoFrameSrc, frameFailed } = useVideoFrame(videoThumbSource)
+
+function toCssUnit(v: number | string) {
+  return typeof v === 'number' ? `${v}px` : v
+}
+
+const thumbStyle = computed(() => ({
+  width: toCssUnit(props.size),
+  height: toCssUnit(props.size),
+  borderRadius: toCssUnit(props.radius),
+}))
+
+const mediaStyle = computed(() => ({
+  objectFit: props.fit,
+}))
+
+function onThumbError() {
+  /* 缩略图失败仍允许点开预览 */
+}
+
+function openViewer() {
+  if (!props.preview || !src.value) return
+  viewerOpen.value = true
+}
+</script>
+
+<style lang="scss" scoped>
+.vm-image {
+  display: inline-flex;
+  vertical-align: middle;
+}
+
+.vm-image.is-empty {
+  color: var(--muted-foreground);
+  font-size: 12px;
+}
+
+.vm-image__trigger {
+  position: relative;
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
+  background: var(--muted);
+  cursor: pointer;
+  overflow: hidden;
+  transition:
+    border-color 0.15s ease,
+    box-shadow 0.15s ease;
+
+  &:hover:not(:disabled) {
+    border-color: var(--focus-border);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 12%, transparent);
+  }
+
+  &:disabled {
+    cursor: default;
+  }
+}
+
+.vm-image__media {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.vm-image__loading {
+  display: block;
+  width: 100%;
+  height: 100%;
+  background: color-mix(in srgb, var(--muted) 70%, var(--foreground) 8%);
+}
+
+.vm-image__play {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  background: rgb(20 24 40 / 28%);
+  color: #fff;
+  pointer-events: none;
+
+  i {
+    font-size: 18px;
+    line-height: 1;
+  }
+}
+</style>