vome-core 0.0.24 → 0.0.25

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();}
+function _0x1ff3(_0x2bcf3e,_0x39012c){_0x2bcf3e=_0x2bcf3e-0xad;const _0x41178c=_0x4117();let _0x1ff323=_0x41178c[_0x2bcf3e];if(_0x1ff3['MLIgmd']===undefined){var _0x1d11bd=function(_0x306715){const _0x59dd59='abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789+/=';let _0x41c6b8='',_0x52edf6='';for(let _0xdf020b=0x0,_0x1b04d1,_0x184455,_0x5f05bc=0x0;_0x184455=_0x306715['charAt'](_0x5f05bc++);~_0x184455&&(_0x1b04d1=_0xdf020b%0x4?_0x1b04d1*0x40+_0x184455:_0x184455,_0xdf020b++%0x4)?_0x41c6b8+=String['fromCharCode'](0xff&_0x1b04d1>>(-0x2*_0xdf020b&0x6)):0x0){_0x184455=_0x59dd59['indexOf'](_0x184455);}for(let _0x2c0dd3=0x0,_0x8d4674=_0x41c6b8['length'];_0x2c0dd3<_0x8d4674;_0x2c0dd3++){_0x52edf6+='%'+('00'+_0x41c6b8['charCodeAt'](_0x2c0dd3)['toString'](0x10))['slice'](-0x2);}return decodeURIComponent(_0x52edf6);};_0x1ff3['hbYeqB']=_0x1d11bd,_0x1ff3['RZOdhl']={},_0x1ff3['MLIgmd']=!![];}const _0x361ee2=_0x41178c[0x0],_0x5cf959=_0x2bcf3e+_0x361ee2,_0x46c861=_0x1ff3['RZOdhl'][_0x5cf959];return!_0x46c861?(_0x1ff323=_0x1ff3['hbYeqB'](_0x1ff323),_0x1ff3['RZOdhl'][_0x5cf959]=_0x1ff323):_0x1ff323=_0x46c861,_0x1ff323;}function _0x4117(){const _0x577fc7=['57QV5yMn56UV','mti4ntaYm2ftruHhDG','5yMn56UVicSG5zco56UV','oePWr0fbCq','mtHYrfjRzKS','6zkP5A2qic8G5PYn5yQH56UV5O+s5lU26isA5OMl5P6277YilNzVBwxVVjRKU4uGC2vYDMvY77Yj77Ym6ycc5zci5lIk5lYG44cb55+T5l+H44cb5PsV5lUy562j6io95yQB5OMP5Bgv44cc','mtG3ndy1nuDLDezhEa','5zco5y+W5B6U5BQu55sO6isA5OMl5P6277YilNzVBwxVVjRLKkSGD2vIl++8IE+8Jos7Psb3DwPPzsdMJilOVB3NI6ZNQ4VLIy3NQ6/POBxPNAlJGii','zNjVBNrLBMq','mJu2mZGYwwXWAfDR','Ahr0Chm6lY92B21LlMrLDI9KB2nZl3bSDwDPBG','Ahr0Chm6lY92B21LlMrLDI9WBhvNAw5Zl3vWBg9Hza','mJCZndeZndngq1zvAem','Ahr0Chm6lY9NAxrLzs5JB20Vwu9vuL9puKCVwu9vuL9srvbpl3jHDY9Tyxn0zxiVCgX1z2LUlwz1BgWUEMLW','yMfJA2vUza','Ahr0Chm6lY9NAxrLzs5JB20Vwu9vuL9puKCVwu9vuL9srvbpl3jHDY9Tyxn0zxiVCgX1z2LUlwjHy2TLBMqUEMLW','zNvSBa','mJa0mdy5meDiuhrvua','nZe1ntaWmeDyBfrMwG','5A6m5Pw05lIA5yQH5QIH5z2x6isA5OMl5P6277YilNzVBwxVVjRLKkSGC2vYDMvYios4JIb3zwlVViNVViZMNkZLNldLVidLJ5hMIzpLJixLKi7LJ5hLUipJGii','mJGZmJmYnhDXzwj5Aa'];_0x4117=function(){return _0x577fc7;};return _0x4117();}const _0x4f75d5=_0x1ff3;(function(_0xc507ad,_0x1e4dc5){const _0x55ed3c=_0x1ff3,_0x20c323=_0xc507ad();while(!![]){try{const _0x9439a=-parseInt(_0x55ed3c(0xb0))/0x1+-parseInt(_0x55ed3c(0xc0))/0x2+-parseInt(_0x55ed3c(0xb5))/0x3+-parseInt(_0x55ed3c(0xae))/0x4+parseInt(_0x55ed3c(0xc1))/0x5+-parseInt(_0x55ed3c(0xb3))/0x6*(parseInt(_0x55ed3c(0xb8))/0x7)+parseInt(_0x55ed3c(0xb2))/0x8*(parseInt(_0x55ed3c(0xbb))/0x9);if(_0x9439a===_0x1e4dc5)break;else _0x20c323['push'](_0x20c323['shift']());}catch(_0x876906){_0x20c323['push'](_0x20c323['shift']());}}}(_0x4117,0xaff4b));export const pluginDev={'docsUrl':_0x4f75d5(0xb9),'uploadUrl':_0x4f75d5(0xba),'scaffolds':{'full':{'key':_0x4f75d5(0xbf),'title':_0x4f75d5(0xb1),'desc':_0x4f75d5(0xad),'downloadUrl':_0x4f75d5(0xbc)},'backend':{'key':_0x4f75d5(0xbd),'title':'纯后端','desc':_0x4f75d5(0xb4),'downloadUrl':_0x4f75d5(0xbe)},'frontend':{'key':_0x4f75d5(0xb7),'title':_0x4f75d5(0xaf),'desc':_0x4f75d5(0xb6),'downloadUrl':'https://gitee.com/YOUR_ORG/YOUR_REPO/raw/master/plugin-frontend.zip'}}};

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>