vome-core 0.3.65 → 0.3.66

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

@@ -1,313 +1,313 @@
-<template>
-  <div
-    class="vm-richtext"
-    :class="{
-      'is-readonly': readOnlyMode,
-      'is-disabled': disabled,
-    }"
-    :style="shellStyle"
-  >
-    <div
-      v-if="readOnlyMode"
-      class="vm-richtext__html"
-      v-html="safeHtml"
-    />
-
-    <div
-      v-else
-      class="vm-richtext__shell"
-    >
-      <Toolbar
-        class="vm-richtext__toolbar"
-        :editor="editorRef"
-        :default-config="toolbarConfig"
-        mode="default"
-      />
-      <Editor
-        class="vm-richtext__editor"
-        v-model="html"
-        :default-config="editorConfig"
-        mode="default"
-        @onCreated="handleCreated"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import '@wangeditor/editor/dist/css/style.css'
-import { crudLabel } from '../style'
-import { computed, onBeforeUnmount, shallowRef, watch } from 'vue'
-import DOMPurify from 'dompurify'
-import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
-import type { IDomEditor, IEditorConfig, IToolbarConfig } from '@wangeditor/editor'
-import { useUpload } from '../../hooks/useUpload'
-
-defineOptions({ name: 'vm-richtext' })
-
-const RICH_TAGS = [
-  'p', 'br', 'div', 'span', 'strong', 'b', 'em', 'i', 'u', 's', 'del', 'strike', 'a',
-  'ul', 'ol', 'li', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'blockquote', 'code', 'pre',
-  'img', 'video', 'source', 'table', 'thead', 'tbody', 'tr', 'th', 'td', 'hr', 'sup', 'sub',
-  'mark',
-]
-
-const props = withDefaults(
-  defineProps<{
-    modelValue?: string | null
-    readonly?: boolean
-    disabled?: boolean
-    placeholder?: string
-    height?: number | string
-    uploadImage?: (file: File) => Promise<string>
-    uploadPrefixPath?: string
-    autoUpload?: boolean
-  }>(),
-  {
-    readonly: false,
-    placeholder: undefined,
-    height: 400,
-    uploadPrefixPath: 'app/public/richtext',
-    autoUpload: true,
-  },
-)
-
-const emit = defineEmits<{ 'update:modelValue': [v: string] }>()
-
-const { toUpload } = useUpload()
-const editorRef = shallowRef<IDomEditor>()
-const syncing = shallowRef(false)
-
-const readOnlyMode = computed(() => props.readonly)
-const uploadEnabled = computed(() => Boolean(props.uploadImage) || props.autoUpload !== false)
-
-/** 编辑区高度至少 400px，保证工具栏浮层（表情等）有空间；弹窗不够时由 upsert body 滚动 */
-function resolveEditorHeight(): string {
-  const h = props.height
-  if (typeof h === 'number') return `${Math.max(h, 400)}px`
-  const s = String(h ?? '400').trim()
-  if (/^\d+(\.\d+)?$/.test(s)) return `${Math.max(Number(s), 400)}px`
-  if (/^\d+(\.\d+)?px$/i.test(s)) return `${Math.max(parseFloat(s), 400)}px`
-  return s || '400px'
-}
-
-const shellStyle = computed(() => {
-  return { '--vm-richtext-height': resolveEditorHeight() } as Record<string, string>
-})
-
-function sanitize(html: string) {
-  return DOMPurify.sanitize(html, {
-    ALLOWED_TAGS: RICH_TAGS,
-    ALLOWED_ATTR: [
-      'href', 'target', 'rel', 'class', 'src', 'alt', 'title', 'width', 'height',
-      'colspan', 'rowspan', 'align', 'controls', 'style', 'data-color',
-    ],
-  })
-}
-
-function normalizeHtml(html: string) {
-  const safe = sanitize(html)
-  const text = safe.replace(/<[^>]+>/g, '').replace(/&nbsp;/g, ' ').trim()
-  return text ? safe : ''
-}
-
-const safeHtml = computed(() => sanitize(String(props.modelValue || '')))
-
-const html = shallowRef(normalizeHtml(String(props.modelValue || '')) || '<p><br></p>')
-
-async function resolveUpload(file: File): Promise<string> {
-  if (props.uploadImage) return props.uploadImage(file)
-  if (props.autoUpload === false) throw new Error(crudLabel('noUploadImage'))
-  const res = await toUpload(file, { prefixPath: props.uploadPrefixPath })
-  return res.url
-}
-
-const toolbarConfig = computed<Partial<IToolbarConfig>>(() => ({
-  excludeKeys: uploadEnabled.value ? [] : ['uploadImage', 'uploadVideo'],
-}))
-
-const editorConfig = computed<Partial<IEditorConfig>>(() => ({
-  placeholder: props.placeholder ?? crudLabel('richtextPlaceholder'),
-  MENU_CONF: {
-    uploadImage: {
-      async customUpload(file: File, insertFn: (url: string, alt: string, href: string) => void) {
-        const url = await resolveUpload(file)
-        insertFn(url, file.name || 'image', url)
-      },
-    },
-    uploadVideo: {
-      async customUpload(file: File, insertFn: (url: string, poster: string) => void) {
-        const url = await resolveUpload(file)
-        insertFn(url, '')
-      },
-    },
-  },
-}))
-
-function handleCreated(editor: IDomEditor) {
-  editorRef.value = editor
-  if (props.disabled) editor.disable()
-  else editor.enable()
-}
-
-watch(html, (v) => {
-  if (syncing.value || readOnlyMode.value) return
-  emit('update:modelValue', normalizeHtml(String(v || '')))
-})
-
-watch(
-  () => props.modelValue,
-  (next) => {
-    if (readOnlyMode.value) return
-    const n = normalizeHtml(String(next || ''))
-    const cur = normalizeHtml(String(html.value || ''))
-    if (n === cur) return
-    syncing.value = true
-    html.value = n || '<p><br></p>'
-    syncing.value = false
-  },
-)
-
-watch(
-  () => props.disabled,
-  (v) => {
-    const ed = editorRef.value
-    if (!ed) return
-    if (v) ed.disable()
-    else ed.enable()
-  },
-)
-
-onBeforeUnmount(() => {
-  const ed = editorRef.value
-  if (!ed) return
-  ed.destroy()
-  editorRef.value = undefined
-})
-</script>
-
-<style lang="scss" scoped>
-.vm-richtext {
-  width: 100%;
-  min-width: 0;
-}
-
-.vm-richtext.is-disabled {
-  opacity: 0.65;
-  pointer-events: none;
-}
-
-.vm-richtext__shell {
-  display: flex;
-  flex-direction: column;
-  /* visible：表情/下拉挂在工具栏下，勿被 shell 裁切；弹窗不够高时靠 upsert body 滚动 */
-  overflow: visible;
-  border: 1px solid var(--border);
-  border-radius: var(--radius, 8px);
-  background: var(--card);
-}
-
-.vm-richtext__toolbar {
-  position: relative;
-  z-index: 2;
-  overflow: visible;
-  border-bottom: 1px solid var(--border) !important;
-  background: var(--muted) !important;
-}
-
-.vm-richtext__editor {
-  position: relative;
-  z-index: 1;
-  flex-shrink: 0;
-  height: var(--vm-richtext-height, 400px) !important;
-  min-height: 400px !important;
-  overflow-y: hidden;
-  background: var(--card);
-}
-
-.vm-richtext__html {
-  padding: 0;
-  color: var(--foreground);
-  font-size: 14px;
-  line-height: 1.65;
-  word-break: break-word;
-
-  :deep(p) { margin: 0.5em 0; }
-  :deep(strong), :deep(b) { font-weight: 800; }
-  :deep(ul) {
-    margin: 0.5em 0;
-    padding-left: 1.5em;
-    list-style-type: disc;
-    list-style-position: outside;
-  }
-  :deep(ul ul) { list-style-type: circle; }
-  :deep(ul ul ul) { list-style-type: square; }
-  :deep(ol) {
-    margin: 0.5em 0;
-    padding-left: 1.5em;
-    list-style-type: decimal;
-    list-style-position: outside;
-  }
-  :deep(ol ol) { list-style-type: lower-alpha; }
-  :deep(ol ol ol) { list-style-type: lower-roman; }
-  :deep(li) { display: list-item; }
-  :deep(a) { color: var(--brand); text-decoration: underline; }
-  :deep(img), :deep(video) { max-width: 100%; height: auto; margin: 8px 0; border-radius: 8px; }
-  :deep(table) { width: 100%; border-collapse: collapse; margin: 8px 0; }
-  :deep(th), :deep(td) { border: 1px solid var(--border); padding: 6px 8px; }
-  :deep(blockquote) {
-    margin: 0.5em 0;
-    padding-left: 12px;
-    border-left: 3px solid var(--border);
-    color: var(--muted-foreground);
-  }
-  :deep(h1), :deep(h2), :deep(h3), :deep(h4) {
-    margin: 0.65em 0 0.35em;
-    font-weight: 650;
-    line-height: 1.35;
-  }
-}
-
-.vm-richtext.is-readonly .vm-richtext__html {
-  padding: 0;
-  border: none;
-  background: transparent;
-}
-
-:deep(.w-e-toolbar) {
-  border: none !important;
-  background: transparent !important;
-}
-
-:deep(.w-e-text-container) {
-  border: none !important;
-  background: var(--card) !important;
-}
-
-:deep(.w-e-scroll) {
-  height: var(--vm-richtext-height, 400px) !important;
-  min-height: 400px !important;
-}
-
-:deep(.w-e-text-container [data-slate-editor]) {
-  min-height: calc(var(--vm-richtext-height, 400px) - 16px) !important;
-  color: var(--foreground);
-  font-size: 14px;
-  line-height: 1.65;
-
-  strong, b { font-weight: 800; }
-}
-</style>
-
-<style lang="scss">
-/* wangEditor 浮层挂到 body，需高于 Dialog */
-.w-e-bar-item-menus-container,
-.w-e-select-list,
-.w-e-drop-panel,
-.w-e-modal,
-.w-e-panel-content-emotion,
-.w-e-panel-content-color,
-.w-e-panel-content-table {
-  z-index: 10050 !important;
-}
-</style>
+<template>
+  <div
+    class="vm-richtext"
+    :class="{
+      'is-readonly': readOnlyMode,
+      'is-disabled': disabled,
+    }"
+    :style="shellStyle"
+  >
+    <div
+      v-if="readOnlyMode"
+      class="vm-richtext__html"
+      v-html="safeHtml"
+    />
+
+    <div
+      v-else
+      class="vm-richtext__shell"
+    >
+      <Toolbar
+        class="vm-richtext__toolbar"
+        :editor="editorRef"
+        :default-config="toolbarConfig"
+        mode="default"
+      />
+      <Editor
+        class="vm-richtext__editor"
+        v-model="html"
+        :default-config="editorConfig"
+        mode="default"
+        @onCreated="handleCreated"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import '@wangeditor/editor/dist/css/style.css'
+import { crudLabel } from '../style'
+import { computed, onBeforeUnmount, shallowRef, watch } from 'vue'
+import DOMPurify from 'dompurify'
+import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
+import type { IDomEditor, IEditorConfig, IToolbarConfig } from '@wangeditor/editor'
+import { useUpload } from '../../hooks/useUpload'
+
+defineOptions({ name: 'vm-richtext' })
+
+const RICH_TAGS = [
+  'p', 'br', 'div', 'span', 'strong', 'b', 'em', 'i', 'u', 's', 'del', 'strike', 'a',
+  'ul', 'ol', 'li', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'blockquote', 'code', 'pre',
+  'img', 'video', 'source', 'table', 'thead', 'tbody', 'tr', 'th', 'td', 'hr', 'sup', 'sub',
+  'mark',
+]
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string | null
+    readonly?: boolean
+    disabled?: boolean
+    placeholder?: string
+    height?: number | string
+    uploadImage?: (file: File) => Promise<string>
+    uploadPrefixPath?: string
+    autoUpload?: boolean
+  }>(),
+  {
+    readonly: false,
+    placeholder: undefined,
+    height: 400,
+    uploadPrefixPath: 'app/public/richtext',
+    autoUpload: true,
+  },
+)
+
+const emit = defineEmits<{ 'update:modelValue': [v: string] }>()
+
+const { toUpload } = useUpload()
+const editorRef = shallowRef<IDomEditor>()
+const syncing = shallowRef(false)
+
+const readOnlyMode = computed(() => props.readonly)
+const uploadEnabled = computed(() => Boolean(props.uploadImage) || props.autoUpload !== false)
+
+/** 编辑区高度至少 400px，保证工具栏浮层（表情等）有空间；弹窗不够时由 upsert body 滚动 */
+function resolveEditorHeight(): string {
+  const h = props.height
+  if (typeof h === 'number') return `${Math.max(h, 400)}px`
+  const s = String(h ?? '400').trim()
+  if (/^\d+(\.\d+)?$/.test(s)) return `${Math.max(Number(s), 400)}px`
+  if (/^\d+(\.\d+)?px$/i.test(s)) return `${Math.max(parseFloat(s), 400)}px`
+  return s || '400px'
+}
+
+const shellStyle = computed(() => {
+  return { '--vm-richtext-height': resolveEditorHeight() } as Record<string, string>
+})
+
+function sanitize(html: string) {
+  return DOMPurify.sanitize(html, {
+    ALLOWED_TAGS: RICH_TAGS,
+    ALLOWED_ATTR: [
+      'href', 'target', 'rel', 'class', 'src', 'alt', 'title', 'width', 'height',
+      'colspan', 'rowspan', 'align', 'controls', 'style', 'data-color',
+    ],
+  })
+}
+
+function normalizeHtml(html: string) {
+  const safe = sanitize(html)
+  const text = safe.replace(/<[^>]+>/g, '').replace(/&nbsp;/g, ' ').trim()
+  return text ? safe : ''
+}
+
+const safeHtml = computed(() => sanitize(String(props.modelValue || '')))
+
+const html = shallowRef(normalizeHtml(String(props.modelValue || '')) || '<p><br></p>')
+
+async function resolveUpload(file: File): Promise<string> {
+  if (props.uploadImage) return props.uploadImage(file)
+  if (props.autoUpload === false) throw new Error(crudLabel('noUploadImage'))
+  const res = await toUpload(file, { prefixPath: props.uploadPrefixPath })
+  return res.url
+}
+
+const toolbarConfig = computed<Partial<IToolbarConfig>>(() => ({
+  excludeKeys: uploadEnabled.value ? [] : ['uploadImage', 'uploadVideo'],
+}))
+
+const editorConfig = computed<Partial<IEditorConfig>>(() => ({
+  placeholder: props.placeholder ?? crudLabel('richtextPlaceholder'),
+  MENU_CONF: {
+    uploadImage: {
+      async customUpload(file: File, insertFn: (url: string, alt: string, href: string) => void) {
+        const url = await resolveUpload(file)
+        insertFn(url, file.name || 'image', url)
+      },
+    },
+    uploadVideo: {
+      async customUpload(file: File, insertFn: (url: string, poster: string) => void) {
+        const url = await resolveUpload(file)
+        insertFn(url, '')
+      },
+    },
+  },
+}))
+
+function handleCreated(editor: IDomEditor) {
+  editorRef.value = editor
+  if (props.disabled) editor.disable()
+  else editor.enable()
+}
+
+watch(html, (v) => {
+  if (syncing.value || readOnlyMode.value) return
+  emit('update:modelValue', normalizeHtml(String(v || '')))
+})
+
+watch(
+  () => props.modelValue,
+  (next) => {
+    if (readOnlyMode.value) return
+    const n = normalizeHtml(String(next || ''))
+    const cur = normalizeHtml(String(html.value || ''))
+    if (n === cur) return
+    syncing.value = true
+    html.value = n || '<p><br></p>'
+    syncing.value = false
+  },
+)
+
+watch(
+  () => props.disabled,
+  (v) => {
+    const ed = editorRef.value
+    if (!ed) return
+    if (v) ed.disable()
+    else ed.enable()
+  },
+)
+
+onBeforeUnmount(() => {
+  const ed = editorRef.value
+  if (!ed) return
+  ed.destroy()
+  editorRef.value = undefined
+})
+</script>
+
+<style lang="scss" scoped>
+.vm-richtext {
+  width: 100%;
+  min-width: 0;
+}
+
+.vm-richtext.is-disabled {
+  opacity: 0.65;
+  pointer-events: none;
+}
+
+.vm-richtext__shell {
+  display: flex;
+  flex-direction: column;
+  /* visible：表情/下拉挂在工具栏下，勿被 shell 裁切；弹窗不够高时靠 upsert body 滚动 */
+  overflow: visible;
+  border: 1px solid var(--border);
+  border-radius: var(--radius, 8px);
+  background: var(--card);
+}
+
+.vm-richtext__toolbar {
+  position: relative;
+  z-index: 2;
+  overflow: visible;
+  border-bottom: 1px solid var(--border) !important;
+  background: var(--muted) !important;
+}
+
+.vm-richtext__editor {
+  position: relative;
+  z-index: 1;
+  flex-shrink: 0;
+  height: var(--vm-richtext-height, 400px) !important;
+  min-height: 400px !important;
+  overflow-y: hidden;
+  background: var(--card);
+}
+
+.vm-richtext__html {
+  padding: 0;
+  color: var(--foreground);
+  font-size: 14px;
+  line-height: 1.65;
+  word-break: break-word;
+
+  :deep(p) { margin: 0.5em 0; }
+  :deep(strong), :deep(b) { font-weight: 800; }
+  :deep(ul) {
+    margin: 0.5em 0;
+    padding-left: 1.5em;
+    list-style-type: disc;
+    list-style-position: outside;
+  }
+  :deep(ul ul) { list-style-type: circle; }
+  :deep(ul ul ul) { list-style-type: square; }
+  :deep(ol) {
+    margin: 0.5em 0;
+    padding-left: 1.5em;
+    list-style-type: decimal;
+    list-style-position: outside;
+  }
+  :deep(ol ol) { list-style-type: lower-alpha; }
+  :deep(ol ol ol) { list-style-type: lower-roman; }
+  :deep(li) { display: list-item; }
+  :deep(a) { color: var(--brand); text-decoration: underline; }
+  :deep(img), :deep(video) { max-width: 100%; height: auto; margin: 8px 0; border-radius: 8px; }
+  :deep(table) { width: 100%; border-collapse: collapse; margin: 8px 0; }
+  :deep(th), :deep(td) { border: 1px solid var(--border); padding: 6px 8px; }
+  :deep(blockquote) {
+    margin: 0.5em 0;
+    padding-left: 12px;
+    border-left: 3px solid var(--border);
+    color: var(--muted-foreground);
+  }
+  :deep(h1), :deep(h2), :deep(h3), :deep(h4) {
+    margin: 0.65em 0 0.35em;
+    font-weight: 650;
+    line-height: 1.35;
+  }
+}
+
+.vm-richtext.is-readonly .vm-richtext__html {
+  padding: 0;
+  border: none;
+  background: transparent;
+}
+
+:deep(.w-e-toolbar) {
+  border: none !important;
+  background: transparent !important;
+}
+
+:deep(.w-e-text-container) {
+  border: none !important;
+  background: var(--card) !important;
+}
+
+:deep(.w-e-scroll) {
+  height: var(--vm-richtext-height, 400px) !important;
+  min-height: 400px !important;
+}
+
+:deep(.w-e-text-container [data-slate-editor]) {
+  min-height: calc(var(--vm-richtext-height, 400px) - 16px) !important;
+  color: var(--foreground);
+  font-size: 14px;
+  line-height: 1.65;
+
+  strong, b { font-weight: 800; }
+}
+</style>
+
+<style lang="scss">
+/* wangEditor 浮层挂到 body，需高于 Dialog */
+.w-e-bar-item-menus-container,
+.w-e-select-list,
+.w-e-drop-panel,
+.w-e-modal,
+.w-e-panel-content-emotion,
+.w-e-panel-content-color,
+.w-e-panel-content-table {
+  z-index: 10050 !important;
+}
+</style>