vome-core 0.0.24 → 0.0.26

package/dist/admin/crud/components/vm-copy-btn.vue

@@ -0,0 +1,101 @@
+<template>
+  <button
+    type="button"
+    class="vm-copy-btn"
+    :class="[`is-${size}`]"
+    :disabled="disabled || copying || !text"
+    @click="copy"
+  >
+    <i :class="copying ? 'ri-loader-4-line is-spin' : icon" aria-hidden="true" />
+    <span>{{ copying ? copyingText : label }}</span>
+  </button>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+defineOptions({ name: 'vm-copy-btn' })
+
+const props = withDefaults(
+  defineProps<{
+    text?: string
+    label?: string
+    copyingText?: string
+    icon?: string
+    size?: 'sm' | 'md'
+    disabled?: boolean
+  }>(),
+  {
+    label: '复制',
+    copyingText: '复制中…',
+    icon: 'ri-file-copy-line',
+    size: 'md',
+    disabled: false,
+  },
+)
+
+const emit = defineEmits<{
+  copied: []
+  error: [e: unknown]
+}>()
+
+const copying = ref(false)
+
+async function copy() {
+  if (!props.text || copying.value) return
+  copying.value = true
+  try {
+    await navigator.clipboard.writeText(props.text)
+    emit('copied')
+  } catch (e) {
+    emit('error', e)
+  } finally {
+    copying.value = false
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.vm-copy-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  border: none;
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--brand) 10%, var(--card));
+  color: var(--brand);
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+
+  &:hover:not(:disabled) {
+    background: color-mix(in srgb, var(--brand) 18%, var(--card));
+  }
+
+  &:disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+  }
+
+  &.is-md {
+    height: 32px;
+    padding: 0 12px;
+  }
+
+  &.is-sm {
+    height: 28px;
+    padding: 0 10px;
+    font-size: 11px;
+  }
+
+  i.is-spin {
+    animation: vm-copy-spin 0.8s linear infinite;
+  }
+}
+
+@keyframes vm-copy-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>

package/dist/admin/crud/components/vm-datetime-picker.vue

@@ -0,0 +1,9 @@
+<template>
+  <vm-date-picker v-bind="$attrs" type="datetime" />
+</template>
+
+<script setup lang="ts">
+import VmDatePicker from './vm-date-picker.vue'
+
+defineOptions({ name: 'vm-datetime-picker', inheritAttrs: false })
+</script>

package/dist/admin/crud/components/vm-ellipsis-text.vue

@@ -0,0 +1,34 @@
+<template>
+  <span class="vm-ellipsis-text" :title="titleText">{{ text }}</span>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+defineOptions({ name: 'vm-ellipsis-text' })
+
+const props = defineProps<{
+  modelValue?: unknown
+  title?: string
+}>()
+
+const text = computed(() => {
+  const v = props.modelValue
+  if (v == null || v === '') return '—'
+  return String(v)
+})
+
+const titleText = computed(() => props.title ?? (text.value === '—' ? undefined : text.value))
+</script>
+
+<style lang="scss" scoped>
+.vm-ellipsis-text {
+  display: inline-block;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 12px;
+  color: var(--muted-foreground);
+}
+</style>

package/dist/admin/crud/components/vm-form-hint.vue

@@ -0,0 +1,63 @@
+<template>
+  <p class="vm-form-hint" :class="[`is-${variant}`]">
+    <i v-if="icon" :class="icon" aria-hidden="true" />
+    <slot>{{ text }}</slot>
+  </p>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'vm-form-hint' })
+
+withDefaults(
+  defineProps<{
+    text?: string
+    variant?: 'info' | 'warn' | 'success'
+    icon?: string
+  }>(),
+  {
+    text: '',
+    variant: 'info',
+    icon: 'ri-information-line',
+  },
+)
+</script>
+
+<style lang="scss" scoped>
+.vm-form-hint {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  margin: 0;
+  padding: 10px 12px;
+  border-radius: 10px;
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--muted-foreground);
+  background: color-mix(in srgb, var(--brand) 8%, var(--card));
+
+  i {
+    flex-shrink: 0;
+    margin-top: 2px;
+    font-size: 15px;
+    color: var(--brand);
+  }
+
+  &.is-warn {
+    background: color-mix(in srgb, #f59e0b 10%, var(--card));
+    color: color-mix(in srgb, var(--foreground) 72%, #d97706);
+
+    i {
+      color: #d97706;
+    }
+  }
+
+  &.is-success {
+    background: var(--success-soft);
+    color: var(--success);
+
+    i {
+      color: var(--success);
+    }
+  }
+}
+</style>

package/dist/admin/crud/components/vm-json-code.vue

@@ -0,0 +1,40 @@
+<template>
+  <pre class="vm-json-code vm-scroll">{{ body }}</pre>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { prettyJson } from '../../lib/json'
+
+defineOptions({ name: 'vm-json-code' })
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: unknown
+    empty?: string
+  }>(),
+  {
+    empty: '（空）',
+  },
+)
+
+const body = computed(() => prettyJson(props.modelValue, props.empty))
+</script>
+
+<style lang="scss" scoped>
+.vm-json-code {
+  flex: 1;
+  margin: 0;
+  min-height: 0;
+  overflow: auto;
+  padding: 16px 22px;
+  border-radius: var(--radius);
+  background: var(--muted);
+  color: var(--foreground);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 12px;
+  line-height: 1.55;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+</style>

package/dist/admin/crud/components/vm-json-editor.vue

@@ -0,0 +1,128 @@
+<template>
+  <div class="vm-json-editor">
+    <textarea
+      class="vm-json-editor__input vm-scroll"
+      :class="{ 'is-error': Boolean(error) }"
+      :value="inner"
+      :disabled="disabled"
+      :placeholder="placeholder"
+      :rows="rows"
+      @input="onInput"
+      @blur="validate"
+    />
+    <p v-if="error" class="vm-json-editor__error">{{ error }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { parseJsonInput, prettyJson, textOfJson } from '../../lib/json'
+
+defineOptions({ name: 'vm-json-editor' })
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: unknown
+    placeholder?: string
+    rows?: number
+    disabled?: boolean
+    /** blur 时自动格式化 */
+    formatOnBlur?: boolean
+  }>(),
+  {
+    placeholder: '请输入 JSON',
+    rows: 8,
+    formatOnBlur: true,
+  },
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [v: unknown]
+  change: [v: unknown]
+  error: [msg: string]
+}>()
+
+const inner = ref('')
+const error = ref('')
+
+function syncFromModel() {
+  inner.value = prettyJson(props.modelValue, '')
+  error.value = ''
+}
+
+watch(
+  () => props.modelValue,
+  () => syncFromModel(),
+  { immediate: true },
+)
+
+function onInput(e: Event) {
+  inner.value = (e.target as HTMLTextAreaElement).value
+  error.value = ''
+}
+
+function validate() {
+  const parsed = parseJsonInput(inner.value)
+  if (!parsed.ok) {
+    error.value = parsed.error
+    emit('error', parsed.error)
+    return
+  }
+  if (props.formatOnBlur) {
+    inner.value = prettyJson(parsed.value, '')
+  }
+  error.value = ''
+  emit('update:modelValue', parsed.value)
+  emit('change', parsed.value)
+}
+
+defineExpose({
+  validate,
+  getText: () => inner.value,
+  setText: (v: unknown) => {
+    inner.value = textOfJson(v)
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+.vm-json-editor {
+  display: grid;
+  gap: 6px;
+  min-width: 0;
+}
+
+.vm-json-editor__input {
+  width: 100%;
+  min-height: 120px;
+  padding: 10px 12px;
+  border: 1px solid var(--border);
+  border-radius: var(--vm-control-radius);
+  background: var(--muted);
+  color: var(--foreground);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 12px;
+  line-height: 1.55;
+  resize: vertical;
+  outline: none;
+
+  &:focus {
+    border-color: var(--focus-border, var(--brand));
+  }
+
+  &.is-error {
+    border-color: var(--danger);
+  }
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+}
+
+.vm-json-editor__error {
+  margin: 0;
+  font-size: 12px;
+  color: var(--danger);
+}
+</style>

package/dist/admin/crud/components/vm-json-viewer.vue

@@ -0,0 +1,147 @@
+<template>
+  <template v-if="mode === 'code'">
+    <vm-json-code :model-value="modelValue" :empty="empty" />
+  </template>
+  <template v-else>
+    <vm-text-link
+      v-if="hasContent"
+      :label="label"
+      @click="open = true"
+    />
+    <span v-else class="vm-json-viewer is-empty">—</span>
+  </template>
+
+  <Teleport to="body">
+    <div
+      v-if="open"
+      class="vm-json-viewer__dialog"
+      role="dialog"
+      aria-modal="true"
+      @click.self="open = false"
+    >
+      <header class="vm-json-viewer__head">
+        <span class="vm-json-viewer__title">{{ title }}</span>
+        <div class="vm-json-viewer__actions">
+          <vm-copy-btn :text="body" size="sm" label="复制" />
+          <button type="button" class="vm-json-viewer__close" title="关闭" @click="open = false">
+            <i class="ri-close-line" />
+          </button>
+        </div>
+      </header>
+      <div class="vm-json-viewer__body vm-scroll">
+        <vm-json-code :model-value="modelValue" :empty="empty" />
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { hasJsonContent, prettyJson } from '../../lib/json'
+import VmJsonCode from './vm-json-code.vue'
+import VmTextLink from './vm-text-link.vue'
+import VmCopyBtn from './vm-copy-btn.vue'
+
+defineOptions({ name: 'vm-json-viewer' })
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: unknown
+    title?: string
+    label?: string
+    /** button 打开浮层；code 仅渲染代码块（upsert fill） */
+    mode?: 'button' | 'code'
+    empty?: string
+  }>(),
+  {
+    title: 'JSON',
+    label: '查看',
+    mode: 'button',
+    empty: '（空）',
+  },
+)
+
+const open = ref(false)
+const hasContent = computed(() => hasJsonContent(props.modelValue))
+const body = computed(() => prettyJson(props.modelValue, props.empty))
+</script>
+
+<style lang="scss" scoped>
+.vm-json-viewer.is-empty {
+  color: var(--muted-foreground);
+}
+
+.vm-json-viewer__dialog {
+  position: fixed;
+  inset: 0;
+  z-index: 5200;
+  display: flex;
+  flex-direction: column;
+  padding: 24px;
+  background: color-mix(in srgb, var(--foreground) 42%, transparent);
+}
+
+.vm-json-viewer__head {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin: 0 auto;
+  width: min(960px, 100%);
+  padding: 12px 16px;
+  border-radius: 14px 14px 0 0;
+  background: var(--card);
+  border: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
+  border-bottom: none;
+}
+
+.vm-json-viewer__title {
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--foreground);
+}
+
+.vm-json-viewer__actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.vm-json-viewer__close {
+  display: inline-flex;
+  width: 32px;
+  height: 32px;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--muted-foreground);
+  cursor: pointer;
+
+  &:hover {
+    background: var(--muted);
+    color: var(--foreground);
+  }
+}
+
+.vm-json-viewer__body {
+  flex: 1;
+  min-height: 0;
+  margin: 0 auto;
+  width: min(960px, 100%);
+  display: flex;
+  flex-direction: column;
+  border-radius: 0 0 14px 14px;
+  background: var(--card);
+  border: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
+  border-top: none;
+  overflow: hidden;
+
+  :deep(.vm-json-code) {
+    border-radius: 0;
+    background: var(--muted);
+  }
+}
+</style>

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

@@ -45,10 +45,11 @@
         type="button"
         class="vm-preview-viewer__btn"
         :disabled="!preview"
+        :title="preview ? triggerTitle : undefined"
         @click="openViewer"
       >
-        <i class="ri-file-search-line" aria-hidden="true" />
-        <span>{{ label }}</span>
+        <i :class="triggerIcon" aria-hidden="true" />
+        <span>{{ displayLabel }}</span>
       </button>
     </div>
     <span v-else-if="!src" class="vm-preview-viewer is-empty">—</span>
@@ -132,9 +133,12 @@
 
         <audio
           v-else-if="kind === 'audio'"
+          ref="audioRef"
           class="vm-file-preview-viewer__audio"
           :src="src"
           controls
+          autoplay
+          playsinline
         />
 
         <iframe
@@ -214,8 +218,8 @@ const props = withDefaults(
     mediaKind?: MediaPreviewKind
     /** thumb | button | auto：触发方式 */
     trigger?: 'thumb' | 'button' | 'auto'
-    /** image | video | auto（缩略图列） */
-    type?: 'image' | 'video' | 'auto'
+    /** image | video | audio | auto（缩略图列或类型覆盖） */
+    type?: 'image' | 'video' | 'audio' | 'auto'
     size?: number | string
     radius?: number | string
     preview?: boolean
@@ -243,6 +247,7 @@ const excelHtml = ref('')
 const scale = ref(1)
 const rotate = ref(0)
 const videoRef = ref<HTMLVideoElement | null>(null)
+const audioRef = ref<HTMLAudioElement | null>(null)
 
 const src = computed(() => {
   const raw = props.embedded ? props.src : props.modelValue
@@ -252,12 +257,19 @@ const src = computed(() => {
 
 const isVideoKind = computed(() => {
   if (props.mediaKind === 'video') return true
-  if (props.mediaKind === 'image') return false
+  if (props.mediaKind === 'image' || props.mediaKind === 'audio') return false
   if (props.type === 'video') return true
-  if (props.type === 'image') return false
+  if (props.type === 'image' || props.type === 'audio') return false
   return VIDEO_EXT.test(src.value)
 })
 
+const isAudioKind = computed(() => {
+  if (props.mediaKind === 'audio') return true
+  if (props.type === 'audio') return true
+  if (props.mediaKind || props.type === 'image' || props.type === 'video') return false
+  return getMediaPreviewKind(props.fileName || src.value) === 'audio'
+})
+
 const showThumb = computed(() => {
   if (props.embedded) return false
   if (props.trigger === 'button') return false
@@ -279,11 +291,26 @@ const showButton = computed(() => {
 
 const kind = computed((): MediaPreviewKind => {
   if (props.mediaKind) return props.mediaKind
+  if (props.type === 'audio' || isAudioKind.value) return 'audio'
   if (props.type === 'video' || isVideoKind.value) return 'video'
   if (props.type === 'image') return 'image'
   return getMediaPreviewKind(props.fileName || src.value)
 })
 
+const displayLabel = computed(() => {
+  if (props.label !== '查看') return props.label
+  if (kind.value === 'audio') return '播放'
+  return props.label
+})
+
+const triggerIcon = computed(() =>
+  kind.value === 'audio' ? 'ri-play-circle-line' : 'ri-file-search-line',
+)
+
+const triggerTitle = computed(() =>
+  kind.value === 'audio' ? '播放音频' : '查看文件',
+)
+
 const kindLabel = computed(() => KIND_LABEL[kind.value])
 
 const displayName = computed(() =>
@@ -399,6 +426,11 @@ watch(viewerOpen, (open) => {
         videoRef.value?.play?.().catch(() => undefined)
       })
     }
+    if (kind.value === 'audio') {
+      void nextTick(() => {
+        audioRef.value?.play?.().catch(() => undefined)
+      })
+    }
   } else {
     window.removeEventListener('keydown', onKeydown)
     loading.value = false
@@ -406,6 +438,7 @@ watch(viewerOpen, (open) => {
     textContent.value = ''
     excelHtml.value = ''
     videoRef.value?.pause?.()
+    audioRef.value?.pause?.()
   }
 })