oxy-uni-ui 1.2.0 → 2.0.0

package/components/oxy-rich-text/oxy-rich-text.vue

@@ -0,0 +1,642 @@
+<template>
+  <view class="oxy-rich-text" :style="customStyle" :class="{ editable }">
+    <view v-if="editable" class="editor_toolbox">
+      <template v-for="(button, index) in toolButtons" :key="index">
+        <image width="32rpx" height="32rpx" v-if="button.icon" :src="button.icon" alt="" @click="button.tap()" />
+        <oxy-icon v-else size="18" :name="button.name" :class="button.class" @click="button.tap()" />
+      </template>
+    </view>
+    <view class="rich-text-main">
+      <mp-html
+        ref="articleRef"
+        v-bind="$attrs"
+        class="oxy-rich-text__html"
+        :key="mpkey"
+        :editable="editable"
+        :tag-style="tagStyle"
+        :markdown="true"
+        :content="contentAi"
+        @remove="remove"
+      ></mp-html>
+    </view>
+
+    <oxy-popup v-model="dialog" position="bottom" :max-width="popupMaxWidth" closable @close="dialog = false">
+      <view class="oxy-rich-text__popup">
+        <view class="dialog-title">{{ translate('insert' + (dialogType === 'emoji' ? 'Emoji' : 'Template')) }}</view>
+        <template v-if="dialogType === 'emoji'">
+          <view v-for="(line, index) in emojis" :key="index" class="oxy-rich-text__emoji-content">
+            <view class="oxy-rich-text__emoji-block" v-for="(item, index2) in line" :key="index2" @click="insertEmoji(item)">
+              {{ item }}
+            </view>
+          </view>
+        </template>
+        <template v-if="dialogType === 'template'">
+          <view v-for="(item, index) in templates" @click="closeDialog" :key="index">
+            <view @click="insertHtml(item)">
+              <rich-text :nodes="item" />
+              <view class="oxy-rich-text__popup-divider" />
+            </view>
+          </view>
+        </template>
+      </view>
+    </oxy-popup>
+    <oxy-popup v-model="linkDialog" position="bottom" :max-width="popupMaxWidth" closable @close="linkDialog = false">
+      <view class="oxy-rich-text__popup">
+        <view class="dialog-title">{{ translate('insertLink') }}</view>
+        <view class="oxy-rich-text__link-input">
+          <view class="oxy-rich-text__link-label">{{ translate('linkText') }}</view>
+          <oxy-input v-model="linkText" :placeholder="translate('linkTextPlaceholder')" />
+        </view>
+        <view class="oxy-rich-text__link-input">
+          <view class="oxy-rich-text__link-label">{{ translate('linkAddress') }}</view>
+          <oxy-input v-model="linkHref" :placeholder="translate('linkAddressPlaceholder')" />
+        </view>
+        <view class="oxy-rich-text__link-buttons">
+          <oxy-button type="default" @click="linkDialog = false">{{ translate('cancel') }}</oxy-button>
+          <oxy-button type="primary" @click="confirmInsertLink">{{ translate('confirm') }}</oxy-button>
+        </view>
+      </view>
+    </oxy-popup>
+    <oxy-action-sheet
+      v-model="actionSheetShow"
+      :actions="actions"
+      @close="mediaActionClose"
+      @select="actionSelected"
+      :cancel-text="translate('cancel')"
+    />
+    <oxy-message-box />
+    <oxy-message-box selector="oxy-message-box-table">
+      <oxy-input-number v-model="rows" />
+      {{ translate('row') }}
+      <oxy-input-number v-model="cols" />
+      {{ translate('column') }}
+    </oxy-message-box>
+    <oxy-toast />
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'oxy-rich-mardown',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+<script lang="ts" setup>
+import { ref, computed, watch, nextTick, onBeforeMount, onMounted } from 'vue'
+import { uuid } from '../common/util'
+import mpHtml from './mp-html/mp-html.vue'
+import type { MpHtmlComponent } from './mp-html/mp-html.d.js'
+import OxyIcon from '../oxy-icon/oxy-icon.vue'
+import OxyInputNumber from '../oxy-input-number/oxy-input-number.vue'
+import OxyInput from '../oxy-input/oxy-input.vue'
+import OxyButton from '../oxy-button/oxy-button.vue'
+import { useMessage } from '../../index'
+import { useTranslate } from '../composables/useTranslate'
+import { type ActionSheetInfo, type RemoveEvent, richTextProps, type ToolButton } from './types'
+import emjio from './icon/emjio.svg'
+import quote from './icon/quote.svg'
+import text from './icon/text.svg'
+import title from './icon/title.svg'
+
+const props = defineProps(richTextProps)
+
+const emit = defineEmits<{
+  save: [value: string]
+  clear: [void]
+  remove: [event: RemoveEvent]
+}>()
+const { translate } = useTranslate('richText')
+const templates = [
+  '<section style="text-align: center; margin: 0 auto;"><section style="border-radius: 8rpx; border: 1px solid #757576; display: inline-block; padding: 10rpx 40rpx;"><span style="font-size: 36rpx; color: #595959;">标题</span></section></section>',
+  '<div style="width: 100%; box-sizing: border-box; border-radius: 10rpx; background-color: #f6f6f6; padding: 20rpx; margin: 20rpx 0"><div>卡片</div><div style="font-size: 24rpx; color: gray">正文</div></div>',
+  '<div style="border: 1px solid gray; box-shadow: 6rpx 6rpx 0 #cfcfce; padding: 20rpx; margin: 20rpx 0">段落</div>'
+]
+const emojis = [
+  ['😄', '😷', '😂', '😝', '😳', '😱', '😔', '😒', '😉'],
+  ['😎', '😭', '😍', '😘', '🤔', '😕', '🙃', '🤑', '😲'],
+  ['🙄', '😤', '😴', '🤓', '😡', '😑', '😮', '🤒', '🤮']
+]
+const message = useMessage()
+const messageTable = useMessage('oxy-message-box-table')
+const content = ref<string>('')
+const mpkey = ref<string>(uuid())
+const articleRef = ref<MpHtmlComponent | null>(null)
+const dialog = ref<boolean>(false)
+const dialogType = ref<string>('')
+const linkDialog = ref<boolean>(false)
+const linkText = ref<string>('')
+const linkHref = ref<string>('')
+const rows = ref<number>(1)
+const cols = ref<number>(1)
+const actionSheetShow = ref<boolean>(false)
+const actions = ref([
+  {
+    name: translate('localSelect')
+  },
+  {
+    name: translate('remoteLink')
+  }
+])
+
+const customTagStyle = {
+  p: `
+    font-size: 32rpx;
+    color: var(--oxy-rich-text-primary-color, #262626);
+  `,
+  h1: `
+    margin: 36rpx 0 20rpx 0;
+    font-size: 48rpx;
+    font-weight: 700;
+    color: var(--oxy-rich-text-title-color, #000);
+  `,
+  h2: `
+    margin: 28rpx 0 20rpx 0;
+    font-size: 40rpx;
+    font-weight: 600;
+    color: var(--oxy-rich-text-title-color, #000);
+  `,
+  h3: `
+    margin: 24rpx 0 16rpx 0;
+    font-size: 36rpx;
+    font-weight: 600;
+    color: var(--oxy-rich-text-title-color, #000);
+  `,
+  h4: `
+    margin: 24rpx 0 16rpx 0;
+    font-size: 32rpx;
+    font-weight: 600;
+    color: var(--oxy-rich-text-title-color, #000);
+  `,
+  h5: `
+    margin: 20rpx 0 16rpx 0;
+    font-size: 30rpx;
+    font-weight: 600;
+    color: var(--oxy-rich-text-title-color, #000);
+  `,
+  h6: `
+    margin: 16rpx 0;
+    font-size: 28rpx;
+    color: var(--oxy-rich-text-title-color, #000);
+  `,
+  blockquote: `
+    margin: 28rpx 0;
+    padding: 20rpx 24rpx;
+    color: var(--oxy-rich-text-blockquote-color, #555);
+    background: var(--oxy-rich-text-blockquote-bg, #f7f8fa);
+    border-left: 8rpx solid var(--oxy-rich-text-blockquote-border-color, #007AFF);
+  `,
+  'blockquote>p': `
+    margin-block-start: 0;
+    margin-block-end: 0;
+  `,
+  ul: `
+    margin: 0 0 20rpx 0;
+    color: var(--oxy-rich-text-list-color, #444);
+  `,
+  li: `
+    margin: 12rpx 0;
+    line-height: 1.65;
+    color: var(--oxy-rich-text-list-color, #444);
+  `,
+  a: `
+    color: var(--oxy-rich-text-a-color, #007AFF);
+    text-decoration: underline;
+  `,
+  strong: `
+    font-weight: 700;
+    color: var(--oxy-rich-text-strong-color, #222);
+  `,
+  em: `
+    font-style: italic;
+    color: var(--oxy-rich-text-em-color, #222);
+  `,
+  hr: `
+    height: 1px;
+    padding: 0;
+    border: none;
+    background: var(--oxy-rich-text-hr-color, #e5e6eb);
+    margin: 36rpx 0;
+  `,
+  table: `
+    border-spacing: 0;
+    overflow: auto;
+    min-width: 100%;
+    margin: 24rpx 0;
+    border-collapse: collapse;
+  `,
+  th: `
+    border: 1px solid var(--oxy-rich-text-table-border-color, #e5e6eb);
+    background: var(--oxy-rich-text-table-head-bg, #f7f8fa);
+    color: var(--oxy-rich-text-table-head-color, #333);
+    padding: 16rpx 24rpx;
+    font-weight: 600;
+  `,
+  td: `
+    border: 1px solid var(--oxy-rich-text-table-border-color, #e5e6eb);
+    color: var(--oxy-rich-text-table-text-color, #444);
+    padding: 16rpx 24rpx;
+  `,
+  pre: `
+    border-radius: 12rpx;
+    white-space: pre;
+    background: var(--oxy-rich-text-code-bg, #2d2d2d);
+    color: var(--oxy-rich-text-code-color, #f8f8f2);
+    font-size: 26rpx;
+    line-height: 1.65;
+    padding: 24rpx;
+    overflow: auto;
+    position: relative;
+  `
+}
+
+const tagStyle = computed(() => {
+  // Merge customTagStyle with props.tagStyle, with props.tagStyle taking precedence
+  return {
+    ...customTagStyle,
+    ...props.tagStyle
+  }
+})
+
+const contentAi = computed<string>(() => {
+  if (!content.value) {
+    return ''
+  }
+  let htmlString = ''
+  const codeBlocks = content.value.match(/```[\s\S]*?```|```[\s\S]*?$/g) || []
+  const lastBlock = codeBlocks[codeBlocks.length - 1]
+  if (lastBlock && !lastBlock.endsWith('```')) {
+    htmlString = content.value + '\n'
+  } else {
+    htmlString = content.value
+  }
+  return htmlString
+})
+
+watch(
+  () => props.markdown,
+  (val) => {
+    nextTick(() => {
+      content.value = val
+    })
+  },
+  { immediate: true }
+)
+onBeforeMount(() => {
+  content.value = props.markdown
+})
+onMounted(() => {
+  if (articleRef.value) {
+    articleRef.value.getSrc = (type: string, value: any) => {
+      return new Promise((resolve, reject) => {
+        const titleMap: { img: string; video: string; audio: string; link: string; [key: string]: any } = {
+          img: translate('imageLink'),
+          video: translate('videoLink'),
+          audio: translate('audioLink'),
+          link: translate('linkAddress')
+        }
+        let title = titleMap[type] || translate('linkAddress')
+
+        const tapIndex = actionSheetInfo.value.index
+        if (type === 'img' || type === 'video') {
+          if (tapIndex === 0) {
+            // 本地选取
+            if (type === 'img') {
+              uni.chooseImage({
+                count: value === undefined ? 9 : 1, // 2.2.0 版本起插入图片时支持多张（修改图片链接时仅限一张）
+                success: (res) => {
+                  // #ifdef MP-WEIXIN
+                  if (res.tempFilePaths.length == 1 && wx.editImage) {
+                    // 单张图片时进行编辑
+                    wx.editImage({
+                      src: res.tempFilePaths[0],
+                      complete: (res2: any) => {
+                        uni.showLoading({
+                          title: translate('uploading')
+                        })
+                        upload(res2.tempFilePath || res.tempFilePaths[0], type).then((res) => {
+                          uni.hideLoading()
+                          resolve(res)
+                        })
+                      }
+                    })
+                  } else {
+                    // #endif
+                    uni.showLoading({
+                      title: translate('uploading')
+                    })
+                    ;(async () => {
+                      const arr = []
+                      for (let item of res.tempFilePaths) {
+                        // 依次上传
+                        const src = await upload(item, type)
+                        arr.push(src)
+                      }
+                      return arr
+                    })().then((res) => {
+                      uni.hideLoading()
+                      resolve(res)
+                    })
+                    // #ifdef MP-WEIXIN
+                  }
+                  // #endif
+                },
+                fail: reject
+              })
+            } else {
+              uni.chooseVideo({
+                success: (res) => {
+                  uni.showLoading({
+                    title: translate('uploading')
+                  })
+                  upload(res.tempFilePath, type).then((res) => {
+                    uni.hideLoading()
+                    resolve(res)
+                  })
+                },
+                fail: reject
+              })
+            }
+          } else {
+            message
+              .prompt({
+                title: title,
+                inputValue: value
+              })
+              .then((resp) => {
+                resolve(resp.value || '')
+              })
+          }
+        } else {
+          message
+            .prompt({
+              title: title,
+              inputValue: value
+            })
+            .then((resp) => {
+              resolve(resp.value || '')
+            })
+        }
+      })
+    }
+  }
+})
+
+// 上传图片方法
+function upload(src: string, type: string): Promise<string> {
+  if (props.uploadMethod) {
+    return props.uploadMethod(src, type)
+  }
+  return Promise.resolve(src)
+}
+
+function remove(e: RemoveEvent): void {
+  emit('remove', e)
+}
+
+// 处理底部弹窗
+function openDialog(btn: ToolButton): void {
+  dialog.value = true
+  dialogType.value = btn.method || ''
+}
+
+function closeDialog(): void {
+  dialog.value = false
+}
+
+const actionSheetInfo = ref<ActionSheetInfo>({ type: '' })
+
+const openActionSheet = (type: string): void => {
+  actionSheetShow.value = true
+  actionSheetInfo.value = {
+    type: type
+  }
+}
+
+const actionSelected = ({ index }: { index: number }): void => {
+  const type = actionSheetInfo.value.type
+  actionSheetInfo.value.index = index
+
+  if (type === 'insertHtml') {
+    const tagName = ['h1', 'h3', 'h5'][index]
+    if (tagName && articleRef.value) {
+      articleRef.value.insertHtml(`<${tagName}>标题</${tagName}>`)
+    }
+  } else if (type === 'code') {
+    const lan = ['css', 'javascript', 'json'][index]
+    if (lan && articleRef.value) {
+      articleRef.value.insertHtml(`<pre><code class="language-${lan}">${lan} code</code></pre>`)
+    }
+  } else {
+    articleRef.value?.[type]()
+  }
+}
+
+const mediaActionClose = (): void => {
+  actionSheetInfo.value = { type: '' }
+}
+
+// 清空编辑器内容
+const clear = (): void => {
+  message
+    .confirm({
+      msg: translate('clearConfirm'),
+      title: translate('confirm')
+    })
+    .then(() => {
+      articleRef.value?.clear()
+      content.value = ''
+      emit('clear')
+    })
+}
+
+// 保存编辑器内容
+const save = (): void => {
+  setTimeout(() => {
+    if (props.editable && articleRef.value) {
+      const contentHtml = articleRef.value.getContent()
+      emit('save', contentHtml)
+    }
+  }, 50)
+}
+
+// 撤销操作
+const undo = (): void => {
+  articleRef.value?.undo()
+}
+
+// 重做操作
+const redo = (): void => {
+  articleRef.value?.redo()
+}
+
+// 插入图片
+const insertImg = (): void => {
+  actions.value = [
+    {
+      name: translate('localSelect')
+    },
+    {
+      name: translate('remoteLink')
+    }
+  ]
+  openActionSheet('insertImg')
+}
+
+// 插入视频
+const insertVideo = (): void => {
+  actions.value = [
+    {
+      name: translate('localSelect')
+    },
+    {
+      name: translate('remoteLink')
+    }
+  ]
+  openActionSheet('insertVideo')
+}
+
+// 插入链接
+const insertLink = (): void => {
+  linkText.value = ''
+  linkHref.value = ''
+  linkDialog.value = true
+}
+
+// 确认插入链接
+const confirmInsertLink = (): void => {
+  if (articleRef.value) {
+    const text = linkText.value || linkHref.value
+    const href = linkHref.value
+    if (href) {
+      articleRef.value.insertHtml(`<a href="${href}">${text}</a>`)
+    }
+  }
+  linkDialog.value = false
+}
+
+// 插入文本
+const insertText = (): void => {
+  articleRef.value?.insertText()
+}
+
+// 插入HTML
+const insertHtml = (html: string): void => {
+  articleRef.value?.insertHtml(html)
+}
+
+// 插入表格
+const insertTable = (row?: number, col?: number): void => {
+  messageTable
+    .confirm({
+      title: translate('insertTable')
+    })
+    .then(() => {
+      if (articleRef.value) {
+        const rowValue = row ?? rows.value
+        const colValue = col ?? cols.value
+        articleRef.value.insertTable(rowValue, colValue)
+      }
+    })
+}
+
+// 插入代码
+const insertCode = (language?: 'css' | 'javascript' | 'json'): void => {
+  const lan = language || 'javascript'
+  actions.value = [
+    {
+      name: 'css'
+    },
+    {
+      name: 'javascript'
+    },
+    {
+      name: 'json'
+    }
+  ]
+  openActionSheet('code')
+}
+
+// 插入表情
+const insertEmoji = (emoji: string): void => {
+  if (articleRef.value) {
+    articleRef.value.insertHtml(emoji)
+  }
+  closeDialog()
+}
+
+// 插入模板
+const insertTemplate = (): void => {
+  openDialog({ method: 'template', name: '', tap: () => {} })
+}
+
+// 插入标题
+const insertHead = (level?: 'h1' | 'h3' | 'h5'): void => {
+  actions.value = [
+    {
+      name: translate('largeTitle')
+    },
+    {
+      name: translate('mediumTitle')
+    },
+    {
+      name: translate('smallTitle')
+    }
+  ]
+  openActionSheet('insertHtml')
+}
+// 工具按钮数组，按组分类
+const toolButtons = ref<ToolButton[]>([
+  { name: 'rollback', method: 'undo', tap: () => undo() },
+  { name: 'rollback', method: 'redo', tap: () => redo(), class: 'reverse' },
+  { name: 'image', method: 'insertImg', tap: () => insertImg() },
+  { name: 'video1', method: 'insertVideo', tap: () => insertVideo() },
+  { name: 'link', method: 'insertLink', tap: () => insertLink() },
+  { name: 'note', method: 'insertText', tap: () => insertText(), icon: text },
+  { name: 'format-vertical-align-center', tap: () => insertHead(), icon: title },
+  {
+    name: 'discount',
+    method: 'insertHtml',
+    tap: () => insertHtml('<blockquote >引用</blockquote>'),
+    icon: quote
+  },
+  { name: 'windows', tap: () => insertTable() },
+  { name: 'code', tap: () => insertCode() },
+  { name: 'emjio', method: 'emoji', tap: () => openDialog({ method: 'emoji', name: '', tap: () => {} }), icon: emjio },
+  { name: 'file-copy', method: 'template', tap: () => insertTemplate() },
+  { name: 'clear', tap: clear },
+  { name: 'save', tap: save }
+])
+
+// 暴露方法给外部调用
+defineExpose({
+  undo,
+  redo,
+  insertImg,
+  insertVideo,
+  insertLink,
+  insertText,
+  insertHtml,
+  insertTable,
+  insertCode,
+  insertEmoji,
+  insertTemplate,
+  insertHead,
+  clear,
+  save,
+  getContent: () => articleRef.value?.getContent() || '',
+  in: (page: any, selector: string, scrollTop: string) => articleRef.value?.in(page, selector, scrollTop),
+  navigateTo: (id: string, offset?: number) => articleRef.value?.navigateTo(id, offset),
+  getText: (nodes?: any[]) => articleRef.value?.getText(nodes) || '',
+  getRect: () => articleRef.value?.getRect(),
+  pauseMedia: () => articleRef.value?.pauseMedia(),
+  setPlaybackRate: (rate: number) => articleRef.value?.setPlaybackRate(rate),
+  setContent: (content: string, append?: boolean) => articleRef.value?.setContent(content, append)
+})
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/oxy-rich-text/types.ts

@@ -0,0 +1,76 @@
+import type { ComponentPublicInstance, ExtractPropTypes } from 'vue'
+import { baseProps, makeStringProp } from '../common/props'
+
+export const richTextProps = {
+  ...baseProps,
+  markdown: {
+    type: String,
+    default: ''
+  },
+  tagStyle: {
+    type: Object,
+    default: () => ({})
+  },
+  editable: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * 弹层最大宽度，支持 `rpx`、`px`、`%` 等单位；
+   * `%` 在弹层打开时按屏幕宽度换算为 `rpx`
+   */
+  popupMaxWidth: makeStringProp('1200rpx'),
+  uploadMethod: {
+    type: Function as any,
+    default: null
+  }
+}
+
+export type RichTextExpose = {
+  undo: () => void
+  redo: () => void
+  insertImg: () => void
+  insertVideo: () => void
+  insertLink: () => void
+  insertText: () => void
+  insertHtml: (html: string) => void
+  insertTable: (row?: number, col?: number) => void
+  insertCode: (language?: 'css' | 'javascript' | 'json') => void
+  insertEmoji: (emoji: string) => void
+  insertTemplate: () => void
+  insertHead: (level?: 'h1' | 'h3' | 'h5') => void
+  clear: () => void
+  save: () => void
+  getContent: () => string
+  in: (page: any, selector: string, scrollTop: string) => void
+  navigateTo: (id: string, offset?: number) => Promise<void>
+  getText: (nodes?: any[]) => string
+  getRect: () => Promise<{ width: number; height: number; top: number; left: number }>
+  pauseMedia: () => void
+  setPlaybackRate: (rate: number) => void
+  setContent: (content: string, append?: boolean) => void
+}
+
+export type RichTextProps = ExtractPropTypes<typeof richTextProps>
+
+export type RichTextInstance = ComponentPublicInstance<RichTextExpose, RichTextProps>
+
+export interface ToolButton {
+  name: string
+  method?: string
+  param?: string
+  tap: () => void
+  icon?: string
+  class?: string
+}
+
+export interface ActionSheetInfo {
+  type: string
+  index?: number
+}
+
+// 删除图片/视频/音频标签事件
+export interface RemoveEvent {
+  src: string
+  type: string
+}