vome-core 0.0.23 → 0.0.25

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

@@ -40,6 +40,17 @@
         </template>
       </button>
     </div>
+    <div v-else-if="src && showButton" class="vm-preview-viewer">
+      <button
+        type="button"
+        class="vm-preview-viewer__btn"
+        :disabled="!preview"
+        @click="openViewer"
+      >
+        <i class="ri-file-search-line" aria-hidden="true" />
+        <span>{{ label }}</span>
+      </button>
+    </div>
     <span v-else-if="!src" class="vm-preview-viewer is-empty">—</span>
   </template>
 
@@ -190,15 +201,19 @@ const props = withDefaults(
   defineProps<{
     /** CRUD 列绑定的 URL */
     modelValue?: string | null
-    /** 仅渲染浮层（vm-upload-item / vm-file-preview 内部） */
+    /** 仅渲染浮层（vm-upload-item 内部） */
     embedded?: boolean
     /** embedded 时外部控制开关 */
     open?: boolean
     /** embedded 时可显式传 src */
     src?: string
     fileName?: string
+    /** 按钮触发文案（PDF / Excel 等非缩略图类型） */
+    label?: string
     /** 覆盖 URL 推断的媒体类型 */
     mediaKind?: MediaPreviewKind
+    /** thumb | button | auto：触发方式 */
+    trigger?: 'thumb' | 'button' | 'auto'
     /** image | video | auto（缩略图列） */
     type?: 'image' | 'video' | 'auto'
     size?: number | string
@@ -208,6 +223,8 @@ const props = withDefaults(
   }>(),
   {
     embedded: false,
+    label: '查看',
+    trigger: 'auto',
     type: 'auto',
     size: 40,
     radius: 8,
@@ -242,14 +259,24 @@ const isVideoKind = computed(() => {
 })
 
 const showThumb = computed(() => {
+  if (props.embedded) return false
+  if (props.trigger === 'button') return false
+  if (props.trigger === 'thumb') return !!src.value
   if (props.mediaKind === 'image' || props.mediaKind === 'video') return true
   if (props.mediaKind) return false
   if (props.type === 'image' || props.type === 'video') return true
   if (isVideoKind.value) return true
-  const k = getMediaPreviewKind(src.value)
+  const k = getMediaPreviewKind(props.fileName || src.value)
   return k === 'image' || k === 'video'
 })
 
+const showButton = computed(() => {
+  if (props.embedded || !src.value) return false
+  if (props.trigger === 'button') return true
+  if (props.trigger === 'thumb') return false
+  return !showThumb.value
+})
+
 const kind = computed((): MediaPreviewKind => {
   if (props.mediaKind) return props.mediaKind
   if (props.type === 'video' || isVideoKind.value) return 'video'
@@ -453,6 +480,33 @@ onUnmounted(() => {
     line-height: 1;
   }
 }
+
+.vm-preview-viewer__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>
 
 <style lang="scss">