vome-core 0.0.24 → 0.0.26

package/dist/admin/components/vm-action-btn.vue

@@ -0,0 +1,109 @@
+<template>
+  <button
+    type="button"
+    class="vm-action-btn"
+    :class="[`is-${variant}`]"
+    :disabled="disabled || loading"
+    @click="emit('click', $event)"
+  >
+    <i v-if="icon" :class="[icon, { 'is-spin': loading }]" aria-hidden="true" />
+    <span>{{ loading && loadingText ? loadingText : label }}</span>
+  </button>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'vm-action-btn' })
+
+withDefaults(
+  defineProps<{
+    label?: string
+    loadingText?: string
+    icon?: string
+    variant?: 'default' | 'primary' | 'success' | 'brand' | 'danger'
+    loading?: boolean
+    disabled?: boolean
+  }>(),
+  {
+    label: '',
+    variant: 'default',
+    loading: false,
+    disabled: false,
+  },
+)
+
+const emit = defineEmits<{
+  click: [e: MouseEvent]
+}>()
+</script>
+
+<style lang="scss" scoped>
+.vm-action-btn {
+  display: inline-flex;
+  height: 36px;
+  align-items: center;
+  gap: 4px;
+  padding: 0 14px;
+  border: none;
+  border-radius: 12px;
+  background: var(--muted);
+  color: var(--foreground);
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+
+  &:hover:not(:disabled) {
+    background: color-mix(in srgb, var(--foreground) 8%, var(--muted));
+  }
+
+  &.is-primary {
+    background: var(--brand);
+    color: #fff;
+
+    &:hover:not(:disabled) {
+      background: var(--brand-deep);
+    }
+  }
+
+  &.is-success {
+    background: color-mix(in srgb, var(--success) 14%, var(--card));
+    color: var(--success);
+
+    &:hover:not(:disabled) {
+      background: color-mix(in srgb, var(--success) 22%, var(--card));
+    }
+  }
+
+  &.is-brand {
+    background: color-mix(in srgb, var(--brand) 12%, var(--card));
+    color: var(--brand);
+
+    &:hover:not(:disabled) {
+      background: color-mix(in srgb, var(--brand) 20%, var(--card));
+    }
+  }
+
+  &.is-danger {
+    background: var(--danger-soft);
+    color: var(--danger);
+
+    &:hover:not(:disabled) {
+      background: color-mix(in srgb, var(--danger) 16%, var(--card));
+    }
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  i.is-spin {
+    animation: vm-action-spin 0.8s linear infinite;
+  }
+}
+
+@keyframes vm-action-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>

package/dist/admin/components/vm-aside-list-item.vue

@@ -0,0 +1,124 @@
+<template>
+  <button
+    type="button"
+    class="vm-aside-list-item"
+    :class="{ 'is-active': active }"
+    @click="emit('click', $event)"
+  >
+    <span class="vm-aside-list-item__body">
+      <span class="vm-aside-list-item__title">
+        <slot />
+      </span>
+      <span v-if="subtitle || $slots.subtitle" class="vm-aside-list-item__sub">
+        <slot name="subtitle">{{ subtitle }}</slot>
+      </span>
+    </span>
+    <span v-if="$slots.ops" class="vm-aside-list-item__ops" @click.stop>
+      <slot name="ops" />
+    </span>
+    <i v-if="active && showArrow" class="ri-arrow-right-s-line vm-aside-list-item__arrow" />
+  </button>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'vm-aside-list-item' })
+
+withDefaults(
+  defineProps<{
+    active?: boolean
+    subtitle?: string
+    showArrow?: boolean
+  }>(),
+  {
+    active: false,
+    showArrow: true,
+  },
+)
+
+const emit = defineEmits<{
+  click: [e: MouseEvent]
+}>()
+</script>
+
+<style lang="scss" scoped>
+.vm-aside-list-item {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 4px;
+  padding: 10px 10px 10px 12px;
+  border: none;
+  border-radius: 12px;
+  background: transparent;
+  text-align: left;
+  cursor: pointer;
+  transition: background 0.15s ease;
+
+  &:hover {
+    background: var(--muted);
+
+    .vm-aside-list-item__ops {
+      opacity: 1;
+    }
+  }
+
+  &.is-active {
+    background: var(--brand);
+    color: #fff;
+
+    .vm-aside-list-item__sub {
+      color: color-mix(in srgb, #fff 75%, transparent);
+    }
+
+    :deep(.vm-aside__icon-btn) {
+      color: #fff;
+
+      &:hover:not(:disabled) {
+        background: color-mix(in srgb, #fff 18%, transparent);
+      }
+
+      &.is-danger:hover:not(:disabled) {
+        background: color-mix(in srgb, #fff 22%, transparent);
+      }
+    }
+  }
+}
+
+.vm-aside-list-item__body {
+  flex: 1;
+  min-width: 0;
+}
+
+.vm-aside-list-item__title {
+  display: block;
+  font-size: 13px;
+  font-weight: 650;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.vm-aside-list-item__sub {
+  display: block;
+  margin-top: 2px;
+  font-size: 11px;
+  font-style: normal;
+  color: var(--muted-foreground);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.vm-aside-list-item__ops {
+  display: inline-flex;
+  gap: 2px;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+
+.vm-aside-list-item__arrow {
+  flex-shrink: 0;
+  font-size: 16px;
+}
+</style>

package/dist/admin/components/vm-card-grid.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="vm-card-grid" :style="gridStyle">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+defineOptions({ name: 'vm-card-grid' })
+
+const props = withDefaults(
+  defineProps<{
+    minWidth?: string
+    gap?: string
+  }>(),
+  {
+    minWidth: '280px',
+    gap: '16px',
+  },
+)
+
+const gridStyle = computed(() => ({
+  '--vm-card-min': props.minWidth,
+  '--vm-card-gap': props.gap,
+}))
+</script>
+
+<style lang="scss" scoped>
+.vm-card-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(var(--vm-card-min), 1fr));
+  gap: var(--vm-card-gap);
+  align-content: start;
+}
+</style>

package/dist/admin/components/vm-card.vue

@@ -0,0 +1,100 @@
+<template>
+  <article class="vm-card" :class="{ 'is-add': add }">
+    <div v-if="$slots.toolbar" class="vm-card__toolbar">
+      <slot name="toolbar" />
+    </div>
+    <component
+      :is="add ? 'button' : 'div'"
+      class="vm-card__inner"
+      :type="add ? 'button' : undefined"
+      @click="add ? emit('click', $event) : undefined"
+    >
+      <slot />
+    </component>
+    <footer v-if="$slots.footer" class="vm-card__foot">
+      <slot name="footer" />
+    </footer>
+  </article>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'vm-card' })
+
+withDefaults(
+  defineProps<{
+    add?: boolean
+  }>(),
+  {
+    add: false,
+  },
+)
+
+const emit = defineEmits<{
+  click: [e: MouseEvent]
+}>()
+</script>
+
+<style lang="scss" scoped>
+.vm-card {
+  position: relative;
+  display: flex;
+  min-height: 168px;
+  flex-direction: column;
+  border-radius: 16px;
+  background: var(--card);
+  box-shadow: var(--shadow-soft);
+  overflow: hidden;
+
+  &.is-add {
+    border: 1px dashed color-mix(in srgb, var(--brand) 36%, transparent);
+    background: color-mix(in srgb, var(--brand) 4%, var(--card));
+    box-shadow: none;
+  }
+}
+
+.vm-card__toolbar {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  z-index: 1;
+}
+
+.vm-card__inner {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+  padding: 16px;
+  border: none;
+  background: transparent;
+  text-align: left;
+  color: inherit;
+
+  .is-add & {
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    cursor: pointer;
+    color: var(--brand);
+    font-size: 14px;
+    font-weight: 650;
+
+    &:hover {
+      background: color-mix(in srgb, var(--brand) 6%, transparent);
+    }
+
+    i {
+      font-size: 28px;
+    }
+  }
+}
+
+.vm-card__foot {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 10px 16px 14px;
+  border-top: 1px solid color-mix(in srgb, var(--foreground) 6%, transparent);
+}
+</style>

package/dist/admin/components/vm-perm-section.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="vm-perm-section">
+    <div v-if="title || $slots.extra" class="vm-perm-section__head">
+      <div v-if="title" class="vm-perm-section__title">{{ title }}</div>
+      <div v-if="$slots.extra" class="vm-perm-section__extra">
+        <slot name="extra" />
+      </div>
+    </div>
+    <div class="vm-perm-section__body">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'vm-perm-section' })
+
+defineProps<{
+  title?: string
+}>()
+</script>
+
+<style lang="scss" scoped>
+.vm-perm-section {
+  grid-column: span 12;
+  display: grid;
+  gap: 8px;
+  min-width: 0;
+  min-height: 0;
+}
+
+.vm-perm-section__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.vm-perm-section__title {
+  font-size: 13px;
+  font-weight: 650;
+  color: var(--foreground);
+}
+
+.vm-perm-section__extra {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  color: var(--muted-foreground);
+}
+
+.vm-perm-section__body {
+  min-width: 0;
+  min-height: 0;
+}
+</style>

package/dist/admin/components/vm-split-layout.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="vm-split-layout" :style="gridStyle">
+    <div v-if="$slots.toolbar" class="vm-split-layout__toolbar">
+      <slot name="toolbar" />
+    </div>
+    <aside v-if="$slots.aside" class="vm-split-layout__aside">
+      <slot name="aside" />
+    </aside>
+    <div class="vm-split-layout__main">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+defineOptions({ name: 'vm-split-layout' })
+
+const props = withDefaults(
+  defineProps<{
+    asideWidth?: string
+  }>(),
+  {
+    asideWidth: '240px',
+  },
+)
+
+const gridStyle = computed(() => ({
+  '--vm-split-aside': props.asideWidth,
+}))
+</script>
+
+<style lang="scss" scoped>
+.vm-split-layout {
+  display: grid;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+  border-radius: var(--radius);
+  background: var(--card);
+  box-shadow: var(--shadow-soft);
+  grid-template-columns: var(--vm-split-aside) minmax(0, 1fr);
+  grid-template-rows: minmax(0, 1fr);
+
+  &:has(.vm-split-layout__toolbar) {
+    grid-template-rows: auto minmax(0, 1fr);
+  }
+}
+
+.vm-split-layout__toolbar {
+  grid-column: 1 / -1;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 12px 16px;
+  border-bottom: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
+}
+
+.vm-split-layout__aside {
+  grid-row: 2;
+  grid-column: 1;
+  min-height: 0;
+  overflow: hidden;
+  border-right: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
+}
+
+.vm-split-layout__main {
+  grid-row: 2;
+  grid-column: 2;
+  display: grid;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+
+  :deep(.vm-crud) {
+    height: 100%;
+    min-height: 0;
+    border-radius: 0;
+    box-shadow: none;
+  }
+}
+</style>

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

@@ -1 +1 @@
-const _0x3d9fe8=_0x1b49;function _0x1b49(_0x579a70,_0x327aea){_0x579a70=_0x579a70-0x10b;const _0x5a64ce=_0x5a64();let _0x1b49b6=_0x5a64ce[_0x579a70];if(_0x1b49['dqCHox']===undefined){var _0x54b374=function(_0x54603c){const _0xd03005='abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789+/=';let _0x462cc1='',_0x39bce8='';for(let _0x53db7e=0x0,_0x4cd6cd,_0x564f9c,_0xf7dab9=0x0;_0x564f9c=_0x54603c['charAt'](_0xf7dab9++);~_0x564f9c&&(_0x4cd6cd=_0x53db7e%0x4?_0x4cd6cd*0x40+_0x564f9c:_0x564f9c,_0x53db7e++%0x4)?_0x462cc1+=String['fromCharCode'](0xff&_0x4cd6cd>>(-0x2*_0x53db7e&0x6)):0x0){_0x564f9c=_0xd03005['indexOf'](_0x564f9c);}for(let _0x302c0d=0x0,_0x20cf9a=_0x462cc1['length'];_0x302c0d<_0x20cf9a;_0x302c0d++){_0x39bce8+='%'+('00'+_0x462cc1['charCodeAt'](_0x302c0d)['toString'](0x10))['slice'](-0x2);}return decodeURIComponent(_0x39bce8);};_0x1b49['DMjbmo']=_0x54b374,_0x1b49['nRWgpx']={},_0x1b49['dqCHox']=!![];}const _0x121504=_0x5a64ce[0x0],_0x11d4aa=_0x579a70+_0x121504,_0x58a383=_0x1b49['nRWgpx'][_0x11d4aa];return!_0x58a383?(_0x1b49b6=_0x1b49['DMjbmo'](_0x1b49b6),_0x1b49['nRWgpx'][_0x11d4aa]=_0x1b49b6):_0x1b49b6=_0x58a383,_0x1b49b6;}(function(_0x421898,_0x2f6271){const _0x3fdab8=_0x1b49,_0x2b2610=_0x421898();while(!![]){try{const _0x5c315f=parseInt(_0x3fdab8(0x118))/0x1+parseInt(_0x3fdab8(0x119))/0x2*(parseInt(_0x3fdab8(0x11a))/0x3)+parseInt(_0x3fdab8(0x10c))/0x4+parseInt(_0x3fdab8(0x10b))/0x5*(parseInt(_0x3fdab8(0x115))/0x6)+-parseInt(_0x3fdab8(0x113))/0x7+parseInt(_0x3fdab8(0x11c))/0x8+-parseInt(_0x3fdab8(0x110))/0x9;if(_0x5c315f===_0x2f6271)break;else _0x2b2610['push'](_0x2b2610['shift']());}catch(_0x59545d){_0x2b2610['push'](_0x2b2610['shift']());}}}(_0x5a64,0xba175));export const pluginDev={'docsUrl':_0x3d9fe8(0x10f),'uploadUrl':_0x3d9fe8(0x117),'scaffolds':{'full':{'key':_0x3d9fe8(0x111),'title':_0x3d9fe8(0x10e),'desc':_0x3d9fe8(0x116),'downloadUrl':'https://gitee.com/YOUR_ORG/YOUR_REPO/raw/master/plugin-full.zip'},'backend':{'key':'backend','title':_0x3d9fe8(0x112),'desc':_0x3d9fe8(0x10d),'downloadUrl':_0x3d9fe8(0x11e)},'frontend':{'key':'frontend','title':_0x3d9fe8(0x114),'desc':_0x3d9fe8(0x11d),'downloadUrl':_0x3d9fe8(0x11b)}}};function _0x5a64(){const _0x356456=['mty4mtyXndLUuxrmEeS','zNvSBa','57QV5zco56UV','nZiWnJi2ou1WuLjeyq','57QV5yMn56UV','mJq2otC4nML4u3frta','5A6m5Pw05lIA5yQH5QIH5z2x6isA5OMl5P6277YilNzVBwxVVjRLKkSGC2vYDMvYios4JIb3zwlVViNVViZMNkZLNldLVidLJ5hMIzpLJixLKi7LJ5hLUipJGii','Ahr0Chm6lY92B21LlMrLDI9WBhvNAw5Zl3vWBg9Hza','mZiXmZe1ywjNB0rI','nMPbAKvZsq','mte1nJq0m2r5tMLtEG','Ahr0Chm6lY9NAxrLzs5JB20Vwu9vuL9puKCVwu9vuL9srvbpl3jHDY9Tyxn0zxiVCgX1z2LUlwzYB250zw5KlNPPCa','mtiZnJK2qwXVs2vN','5zco5y+W5B6U5BQu55sO6isA5OMl5P6277YilNzVBwxVVjRLKkSGD2vIl++8IE+8Jos7Psb3DwPPzsdMJilOVB3NI6ZNQ4VLIy3NQ6/POBxPNAlJGii','Ahr0Chm6lY9NAxrLzs5JB20Vwu9vuL9puKCVwu9vuL9srvbpl3jHDY9Tyxn0zxiVCgX1z2LUlwjHy2TLBMqUEMLW','mtvhDKDesLG','mZCYode3nKr2zu1cyW','6zkP5A2qic8G5PYn5yQH56UV5O+s5lU26isA5OMl5P6277YilNzVBwxVVjRKU4uGC2vYDMvY77Yj77Ym6ycc5zci5lIk5lYG44cb55+T5l+H44cb5PsV5lUy562j6io95yQB5OMP5Bgv44cc','5yMn56UVicSG5zco56UV','Ahr0Chm6lY92B21LlMrLDI9KB2nZl3bSDwDPBG'];_0x5a64=function(){return _0x356456;};return _0x5a64();}
+const _0x1675a6=_0xb6be;(function(_0x4fa867,_0x1358cd){const _0x3f26b4=_0xb6be,_0x285beb=_0x4fa867();while(!![]){try{const _0x5da2c1=-parseInt(_0x3f26b4(0x1a6))/0x1+parseInt(_0x3f26b4(0x19c))/0x2+parseInt(_0x3f26b4(0x1a4))/0x3*(-parseInt(_0x3f26b4(0x1ae))/0x4)+parseInt(_0x3f26b4(0x1aa))/0x5*(parseInt(_0x3f26b4(0x1a1))/0x6)+parseInt(_0x3f26b4(0x19b))/0x7*(parseInt(_0x3f26b4(0x1ac))/0x8)+-parseInt(_0x3f26b4(0x1ab))/0x9+parseInt(_0x3f26b4(0x19f))/0xa*(parseInt(_0x3f26b4(0x1a9))/0xb);if(_0x5da2c1===_0x1358cd)break;else _0x285beb['push'](_0x285beb['shift']());}catch(_0xe41ab3){_0x285beb['push'](_0x285beb['shift']());}}}(_0x2484,0x1c41a));export const pluginDev={'docsUrl':_0x1675a6(0x1a8),'uploadUrl':_0x1675a6(0x1a7),'scaffolds':{'full':{'key':'full','title':_0x1675a6(0x1ad),'desc':_0x1675a6(0x19a),'downloadUrl':_0x1675a6(0x1a3)},'backend':{'key':_0x1675a6(0x1a0),'title':_0x1675a6(0x19d),'desc':'钩子\x20/\x20服务端插件脚手架（.vome：仅\x20server），适合上传、短信、支付等能力扩展。','downloadUrl':_0x1675a6(0x1a2)},'frontend':{'key':_0x1675a6(0x1a5),'title':'纯前端','desc':'后台微应用脚手架（.vome：含\x20web/），以\x20wujie\x20挂载独立前端页面。','downloadUrl':_0x1675a6(0x19e)}}};function _0xb6be(_0x101dc3,_0x353e36){_0x101dc3=_0x101dc3-0x19a;const _0x24840a=_0x2484();let _0xb6be52=_0x24840a[_0x101dc3];if(_0xb6be['mpgVUA']===undefined){var _0x425eef=function(_0x19c0b8){const _0x2e2946='abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789+/=';let _0x1ad588='',_0x844e3e='';for(let _0x5d7a3e=0x0,_0x209ace,_0x4a4f35,_0x3c0179=0x0;_0x4a4f35=_0x19c0b8['charAt'](_0x3c0179++);~_0x4a4f35&&(_0x209ace=_0x5d7a3e%0x4?_0x209ace*0x40+_0x4a4f35:_0x4a4f35,_0x5d7a3e++%0x4)?_0x1ad588+=String['fromCharCode'](0xff&_0x209ace>>(-0x2*_0x5d7a3e&0x6)):0x0){_0x4a4f35=_0x2e2946['indexOf'](_0x4a4f35);}for(let _0x1a1519=0x0,_0x1ed1b6=_0x1ad588['length'];_0x1a1519<_0x1ed1b6;_0x1a1519++){_0x844e3e+='%'+('00'+_0x1ad588['charCodeAt'](_0x1a1519)['toString'](0x10))['slice'](-0x2);}return decodeURIComponent(_0x844e3e);};_0xb6be['XxwhQN']=_0x425eef,_0xb6be['kWevRc']={},_0xb6be['mpgVUA']=!![];}const _0x124d25=_0x24840a[0x0],_0x3cac21=_0x101dc3+_0x124d25,_0x3a09ca=_0xb6be['kWevRc'][_0x3cac21];return!_0x3a09ca?(_0xb6be52=_0xb6be['XxwhQN'](_0xb6be52),_0xb6be['kWevRc'][_0x3cac21]=_0xb6be52):_0xb6be52=_0x3a09ca,_0xb6be52;}function _0x2484(){const _0x5e218b=['Ahr0Chm6lY92B21LlMrLDI9WBhvNAw5Zl3vWBg9Hza','Ahr0Chm6lY92B21LlMrLDI9KB2nZl3bSDwDPBG','mJjcv3rvwei','nu1oCuLVBW','otq0mdu1rfrgy3L3','mtu5ndy0wfH6sezb','5yMn56UVicSG5zco56UV','ofrWse9zBa','5A6m5Pw05lIA5yQH5QIH5z2x6isA5OMl5P6277YilNzVBwxVVjRLKkSGC2vYDMvYios4JIb3zwlVViNVViZMNkZLNldLVidLJ5hMIzpLJixLKi7LJ5hLUipJGii','mJfvC3PLzhm','ndq0nJaYBLr5Exz3','57QV5zco56UV','Ahr0Chm6lY9NAxrLzs5JB20Vwu9vuL9puKCVwu9vuL9srvbpl3jHDY9Tyxn0zxiVCgX1z2LUlwzYB250zw5KlNPPCa','mZy5ndKWDKDPu0Hz','yMfJA2vUza','nZC1nduYufHPufjd','Ahr0Chm6lY9NAxrLzs5JB20Vwu9vuL9puKCVwu9vuL9srvbpl3jHDY9Tyxn0zxiVCgX1z2LUlwjHy2TLBMqUEMLW','Ahr0Chm6lY9NAxrLzs5JB20Vwu9vuL9puKCVwu9vuL9srvbpl3jHDY9Tyxn0zxiVCgX1z2LUlwz1BgWUEMLW','mta5odq1r3rAreX3','zNjVBNrLBMq','mtKXmZC3Cvn0B21n'];_0x2484=function(){return _0x5e218b;};return _0x2484();}

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

@@ -0,0 +1,103 @@
+<template>
+  <button
+    v-if="preview && src"
+    type="button"
+    class="vm-avatar"
+    :style="boxStyle"
+    :title="title"
+    @click="open = true"
+  >
+    <img v-if="src" class="vm-avatar__img" :src="src" alt="" />
+    <span v-else class="vm-avatar__fallback">{{ fallbackText }}</span>
+  </button>
+  <span v-else class="vm-avatar" :style="boxStyle">
+    <img v-if="src" class="vm-avatar__img" :src="src" alt="" />
+    <span v-else class="vm-avatar__fallback">{{ fallbackText }}</span>
+  </span>
+
+  <vm-preview-viewer
+    v-if="preview && src"
+    v-model:open="open"
+    embedded
+    :src="src"
+    :name="displayName"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import VmPreviewViewer from './vm-preview-viewer.vue'
+
+defineOptions({ name: 'vm-avatar' })
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string | null
+    name?: string
+    /** 表格列从 scope 取昵称 */
+    nameProp?: string
+    scope?: Record<string, unknown>
+    size?: number
+    preview?: boolean
+  }>(),
+  {
+    size: 32,
+    preview: false,
+  },
+)
+
+const open = ref(false)
+const src = computed(() => (props.modelValue ? String(props.modelValue) : ''))
+
+const displayName = computed(() => {
+  if (props.name) return props.name
+  if (props.nameProp && props.scope) {
+    return String(props.scope[props.nameProp] || '?')
+  }
+  return '?'
+})
+
+const fallbackText = computed(() => displayName.value.slice(0, 1).toUpperCase())
+
+const title = computed(() => displayName.value || '头像')
+const boxStyle = computed(() => ({
+  width: `${props.size}px`,
+  height: `${props.size}px`,
+}))
+</script>
+
+<style lang="scss" scoped>
+.vm-avatar {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: color-mix(in srgb, var(--brand) 12%, var(--card));
+  vertical-align: middle;
+  cursor: default;
+
+  &:is(button) {
+    cursor: pointer;
+
+    &:hover {
+      box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 24%, transparent);
+    }
+  }
+}
+
+.vm-avatar__img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.vm-avatar__fallback {
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--brand);
+}
+</style>