From 2ab526e0211ca9dd11fed666c5f7c078f2930a82 Mon Sep 17 00:00:00 2001
From: dataeaseShu <tong.shu@fit2cloud.com>
Date: Mon, 12 Aug 2024 18:01:15 +0800
Subject: [PATCH] =?UTF-8?q?feat(xpack):=20=E9=98=88=E5=80=BC=E5=91=8A?=
 =?UTF-8?q?=E8=AD=A6=E6=A8=A1=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../assets/svg/icon_notification_filled.svg   |   3 +
 .../src/components/icon-custom/src/Icon.vue   |   6 +-
 .../rich-text/TinymacEditorAlarm.vue          | 234 ++++++++++++++++++
 3 files changed, 239 insertions(+), 4 deletions(-)
 create mode 100644 core/core-frontend/src/assets/svg/icon_notification_filled.svg
 create mode 100644 core/core-frontend/src/components/rich-text/TinymacEditorAlarm.vue

diff --git a/core/core-frontend/src/assets/svg/icon_notification_filled.svg b/core/core-frontend/src/assets/svg/icon_notification_filled.svg
new file mode 100644
index 0000000000..8e17a11704
--- /dev/null
+++ b/core/core-frontend/src/assets/svg/icon_notification_filled.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.66683 1.84V1.33333C6.66683 1.24493 6.70195 1.16014 6.76446 1.09763C6.82697 1.03512 6.91176 1 7.00016 1H9.00016C9.08857 1 9.17335 1.03512 9.23587 1.09763C9.29838 1.16014 9.3335 1.24493 9.3335 1.33333V1.84C11.6335 2.45133 13.3335 4.60667 13.3335 7.172V11H14.3335C14.3773 11 14.4206 11.0086 14.4611 11.0254C14.5015 11.0421 14.5382 11.0667 14.5692 11.0976C14.6002 11.1286 14.6247 11.1653 14.6415 11.2058C14.6582 11.2462 14.6668 11.2896 14.6668 11.3333V12C14.6668 12.0438 14.6582 12.0871 14.6415 12.1276C14.6247 12.168 14.6002 12.2048 14.5692 12.2357C14.5382 12.2667 14.5015 12.2912 14.4611 12.308C14.4206 12.3247 14.3773 12.3333 14.3335 12.3333H1.66683C1.62306 12.3333 1.57971 12.3247 1.53927 12.308C1.49883 12.2912 1.46208 12.2667 1.43113 12.2357C1.40017 12.2048 1.37562 12.168 1.35887 12.1276C1.34212 12.0871 1.3335 12.0438 1.3335 12V11.3333C1.3335 11.2896 1.34212 11.2462 1.35887 11.2058C1.37562 11.1653 1.40017 11.1286 1.43113 11.0976C1.46208 11.0667 1.49883 11.0421 1.53927 11.0254C1.57971 11.0086 1.62306 11 1.66683 11H2.66683V7.172C2.66683 4.60667 4.36683 2.45133 6.66683 1.84ZM6.3335 13.3333H9.66683C9.7106 13.3333 9.75395 13.342 9.79439 13.3587C9.83483 13.3755 9.87158 13.4 9.90253 13.431C9.93349 13.4619 9.95804 13.4987 9.97479 13.5391C9.99154 13.5795 10.0002 13.6229 10.0002 13.6667V14.3333C10.0002 14.3771 9.99154 14.4205 9.97479 14.4609C9.95804 14.5013 9.93349 14.5381 9.90253 14.569C9.87158 14.6 9.83483 14.6245 9.79439 14.6413C9.75395 14.658 9.7106 14.6667 9.66683 14.6667H6.3335C6.28972 14.6667 6.24638 14.658 6.20594 14.6413C6.16549 14.6245 6.12875 14.6 6.09779 14.569C6.06684 14.5381 6.04229 14.5013 6.02554 14.4609C6.00879 14.4205 6.00016 14.3771 6.00016 14.3333V13.6667C6.00016 13.6229 6.00879 13.5795 6.02554 13.5391C6.04229 13.4987 6.06684 13.4619 6.09779 13.431C6.12875 13.4 6.16549 13.3755 6.20594 13.3587C6.24638 13.342 6.28972 13.3333 6.3335 13.3333Z"/>
+</svg>
diff --git a/core/core-frontend/src/components/icon-custom/src/Icon.vue b/core/core-frontend/src/components/icon-custom/src/Icon.vue
index 15da87560a..c7deac92e6 100644
--- a/core/core-frontend/src/components/icon-custom/src/Icon.vue
+++ b/core/core-frontend/src/components/icon-custom/src/Icon.vue
@@ -3,6 +3,7 @@ import { computed } from 'vue'
 import { propTypes } from '@/utils/propTypes'
 
 import _401 from '@/assets/svg/401.svg'
+import icon_notification_filled from '@/assets/svg/icon_notification_filled.svg'
 import calculate from '@/assets/svg/calculate.svg'
 import _403 from '@/assets/svg/403.svg'
 import APIDs from '@/assets/svg/API-ds.svg'
@@ -221,8 +222,6 @@ import emailTask from '@/assets/svg/email-task.svg'
 import embedded from '@/assets/svg/embedded.svg'
 import association from '@/assets/svg/association.svg'
 import threshold from '@/assets/svg/threshold.svg'
-import threshold_full from '@/assets/svg/threshold_full.svg'
-import clock from '@/assets/svg/clock.svg'
 import example from '@/assets/svg/example.svg'
 import exclamationmark from '@/assets/svg/exclamationmark.svg'
 import exclamationmark2 from '@/assets/svg/exclamationmark2.svg'
@@ -674,6 +673,7 @@ import icon_file_doc_colorful from '@/assets/svg/icon_file-doc_colorful.svg'
 import icon_font from '@/assets/svg/icon_font.svg'
 const iconMap = {
   '401': _401,
+  icon_notification_filled,
   '403': _403,
   'API-ds': APIDs,
   'Apache Hive': Apache_Hive,
@@ -891,8 +891,6 @@ const iconMap = {
   embedded: embedded,
   association: association,
   threshold: threshold,
-  threshold_full: threshold_full,
-  clock,
   example: example,
   exclamationmark: exclamationmark,
   exclamationmark2: exclamationmark2,
diff --git a/core/core-frontend/src/components/rich-text/TinymacEditorAlarm.vue b/core/core-frontend/src/components/rich-text/TinymacEditorAlarm.vue
new file mode 100644
index 0000000000..4d6784e3d4
--- /dev/null
+++ b/core/core-frontend/src/components/rich-text/TinymacEditorAlarm.vue
@@ -0,0 +1,234 @@
+<template>
+  <div class="de-tinymce-container_alarm ed-textarea__inner">
+    <editor class="de-tinymce-content_alarm" v-model="myValue" :id="tinymceId" :init="init" />
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref, toRefs, watch } from 'vue'
+import { formatDataEaseBi } from '@/utils/url'
+import { guid } from '@/views/visualized/data/dataset/form/util'
+import tinymce from 'tinymce/tinymce' // tinymce默认hidden，不引入不显示
+import Editor from '@tinymce/tinymce-vue' // 编辑器引入
+import 'tinymce/themes/silver/theme' // 编辑器主题
+import 'tinymce/icons/default' // 引入编辑器图标icon，不引入则不显示对应图标
+// 引入编辑器插件（基本免费插件都在这儿了）
+import 'tinymce/plugins/advlist' // 高级列表
+import 'tinymce/plugins/autolink' // 自动链接
+import 'tinymce/plugins/link' // 超链接
+import 'tinymce/plugins/image' // 插入编辑图片
+import 'tinymce/plugins/lists' // 列表插件
+import 'tinymce/plugins/charmap' // 特殊字符
+import 'tinymce/plugins/media' // 插入编辑媒体
+import 'tinymce/plugins/wordcount' // 字数统计
+import 'tinymce/plugins/table' // 表格
+import 'tinymce/plugins/contextmenu' // contextmenu
+import 'tinymce/plugins/directionality'
+import 'tinymce/plugins/nonbreaking'
+import 'tinymce/plugins/pagebreak'
+import { propTypes } from '@/utils/propTypes'
+const props = defineProps({
+  modelValue: String,
+  inline: propTypes.bool.def(false),
+  fieldList: propTypes.arrayOf(
+    propTypes.shape({
+      deType: propTypes.number,
+      id: propTypes.string,
+      name: propTypes.string,
+      groupType: propTypes.string
+    })
+  )
+})
+const myValue = ref()
+const { modelValue, inline } = toRefs(props)
+myValue.value = modelValue
+watch(
+  () => props.modelValue,
+  newValue => {
+    myValue.value = newValue
+  }
+)
+
+const emits = defineEmits(['update:modelValue', 'change'])
+watch(
+  () => myValue.value,
+  newValue => {
+    emits('update:modelValue', newValue)
+    emits('change', newValue)
+  }
+)
+
+const tinymceId = 'tinymce-view-alarm'
+const init = ref({
+  selector: '#' + tinymceId,
+  toolbar_items_size: 'small',
+  language_url: formatDataEaseBi('./tinymce-dataease-private/langs/zh_CN.js'), // 汉化路径是自定义的，一般放在public或static里面
+  language: 'zh_CN',
+  skin_url: formatDataEaseBi('./tinymce-dataease-private/skins/ui/oxide'), // 皮肤
+  content_css: formatDataEaseBi('./tinymce-dataease-private/skins/content/default/content.css'),
+  plugins:
+    'advlist autolink link image lists charmap  media wordcount table contextmenu directionality pagebreak', // 插件
+  // 工具栏
+  toolbar:
+    'undo redo |fontselect fontsizeselect |forecolor backcolor bold italic |underline strikethrough link | splitDateButton lineheight| formatselect |' +
+    'alignleft aligncenter alignright | bullist numlist |' +
+    ' blockquote subscript superscript removeformat | table image media ',
+  toolbar_location: '/',
+  font_formats:
+    '阿里巴巴普惠体=阿里巴巴普惠体 3.0 55 Regular L3;微软雅黑=Microsoft YaHei;宋体=SimSun;黑体=SimHei;仿宋=FangSong;华文黑体=STHeiti;华文楷体=STKaiti;华文宋体=STSong;华文仿宋=STFangsong;Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings',
+  fontsize_formats: '12px 14px 16px 18px 20px 22px 24px 28px 32px 36px 48px 56px 72px', // 字体大小
+  menubar: false,
+  placeholder: '',
+  outer_placeholder: '双击输入文字',
+  inline: inline.value,
+  branding: true,
+  setup: editor => {
+    const emoticons = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+<path d="M8.66683 4.66671H11.0002C11.1843 4.66671 11.3335 4.81595 11.3335 5.00004V5.66671C11.3335 5.8508 11.1843 6.00004 11.0002 6.00004H8.66683V11C8.66683 11.1841 8.51759 11.3334 8.3335 11.3334H7.66683C7.48273 11.3334 7.3335 11.1841 7.3335 11V6.00004H5.00016C4.81607 6.00004 4.66683 5.8508 4.66683 5.66671V5.00004C4.66683 4.81595 4.81607 4.66671 5.00016 4.66671H7.3335C7.3335 4.66671 8.66683 4.68559 8.66683 4.66671Z" fill="#1F2329"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.3335 2.00004C1.3335 1.63185 1.63197 1.33337 2.00016 1.33337H14.0002C14.3684 1.33337 14.6668 1.63185 14.6668 2.00004V14C14.6668 14.3682 14.3684 14.6667 14.0002 14.6667H2.00016C1.63197 14.6667 1.3335 14.3682 1.3335 14V2.00004ZM2.66683 13.3334V2.66671H13.3335V13.3334H2.66683Z" fill="#1F2329"/>
+</svg>`
+
+    const icon_text_outlined = `<svg width="24" height="24" viewBox="0 0 24 24"  xmlns="http://www.w3.org/2000/svg">
+<path d="M13 5V20.5C13 20.5657 12.9871 20.6307 12.9619 20.6913C12.9368 20.752 12.9 20.8071 12.8536 20.8536C12.8071 20.9 12.752 20.9368 12.6913 20.9619C12.6307 20.9871 12.5657 21 12.5 21H11.5C11.4343 21 11.3693 20.9871 11.3087 20.9619C11.248 20.9368 11.1929 20.9 11.1464 20.8536C11.1 20.8071 11.0632 20.752 11.0381 20.6913C11.0129 20.6307 11 20.5657 11 20.5V5H3.5C3.43434 5 3.36932 4.98707 3.30866 4.96194C3.248 4.93681 3.19288 4.89998 3.14645 4.85355C3.10002 4.80712 3.06319 4.752 3.03806 4.69134C3.01293 4.63068 3 4.56566 3 4.5V3.5C3 3.43434 3.01293 3.36932 3.03806 3.30866C3.06319 3.248 3.10002 3.19288 3.14645 3.14645C3.19288 3.10002 3.248 3.06319 3.30866 3.03806C3.36932 3.01293 3.43434 3 3.5 3H20.5C20.5657 3 20.6307 3.01293 20.6913 3.03806C20.752 3.06319 20.8071 3.10002 20.8536 3.14645C20.9 3.19288 20.9368 3.248 20.9619 3.30866C20.9871 3.36932 21 3.43434 21 3.5V4.5C21 4.63261 20.9473 4.75979 20.8536 4.85355C20.7598 4.94732 20.6326 5 20.5 5H13Z" fill="#3370FF"/>
+</svg>
+`
+
+    const icon_calendar_outlined = `<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.83301 1.33398C5.10915 1.33398 5.33301 1.55784 5.33301 1.83398V2.00065H10.6663V1.83398C10.6663 1.55784 10.8902 1.33398 11.1663 1.33398H11.4997C11.7758 1.33398 11.9997 1.55784 11.9997 1.83398V2.00065H13.9997C14.3679 2.00065 14.6663 2.29913 14.6663 2.66732V14.0007C14.6663 14.3688 14.3679 14.6673 13.9997 14.6673H1.99967C1.63148 14.6673 1.33301 14.3688 1.33301 14.0007L1.33301 2.66732C1.33301 2.29913 1.63148 2.00065 1.99967 2.00065H3.99967V1.83398C3.99967 1.55784 4.22353 1.33398 4.49967 1.33398H4.83301ZM10.6663 3.33398H5.33301V3.50065C5.33301 3.77679 5.10915 4.00065 4.83301 4.00065H4.49967C4.22353 4.00065 3.99967 3.77679 3.99967 3.50065V3.33398H2.66634V13.334H13.333V3.33398H11.9997V3.50065C11.9997 3.77679 11.7758 4.00065 11.4997 4.00065H11.1663C10.8902 4.00065 10.6663 3.77679 10.6663 3.50065V3.33398ZM5.99967 6.83398C5.99967 6.55784 5.77582 6.33398 5.49967 6.33398H4.49967C4.22353 6.33398 3.99967 6.55784 3.99967 6.83398V7.83398C3.99967 8.11013 4.22353 8.33398 4.49967 8.33398H5.49967C5.77582 8.33398 5.99967 8.11013 5.99967 7.83398V6.83398ZM6.99967 6.83398C6.99967 6.55784 7.22353 6.33398 7.49967 6.33398H8.49967C8.77582 6.33398 8.99967 6.55784 8.99967 6.83398V7.83398C8.99967 8.11013 8.77582 8.33398 8.49967 8.33398H7.49967C7.22353 8.33398 6.99967 8.11013 6.99967 7.83398V6.83398ZM5.99967 9.83398C5.99967 9.55784 5.77582 9.33398 5.49967 9.33398H4.49967C4.22353 9.33398 3.99967 9.55784 3.99967 9.83398V10.834C3.99967 11.1101 4.22353 11.334 4.49967 11.334H5.49967C5.77582 11.334 5.99967 11.1101 5.99967 10.834V9.83398ZM6.99967 9.83398C6.99967 9.55784 7.22353 9.33398 7.49967 9.33398H8.49967C8.77582 9.33398 8.99967 9.55784 8.99967 9.83398V10.834C8.99967 11.1101 8.77582 11.334 8.49967 11.334H7.49967C7.22353 11.334 6.99967 11.1101 6.99967 10.834V9.83398ZM11.9997 6.83398C11.9997 6.55784 11.7758 6.33398 11.4997 6.33398H10.4997C10.2235 6.33398 9.99967 6.55784 9.99967 6.83398V7.83398C9.99967 8.11013 10.2235 8.33398 10.4997 8.33398H11.4997C11.7758 8.33398 11.9997 8.11013 11.9997 7.83398V6.83398Z" fill="#3370FF"/>
+<path d="M11.9997 9.83398C11.9997 9.55784 11.7758 9.33398 11.4997 9.33398H10.4997C10.2235 9.33398 9.99967 9.55784 9.99967 9.83398V10.834C9.99967 11.1101 10.2235 11.334 10.4997 11.334H11.4997C11.7758 11.334 11.9997 11.1101 11.9997 10.834V9.83398Z"  fill="#3370FF" />
+</svg>
+`
+    const icon_number_outlined = `<svg width="24" height="24" viewBox="0 0 24 24"  xmlns="http://www.w3.org/2000/svg">
+<path d="M8.70351 2C8.94543 2 9.13197 2.21307 9.1 2.45287L8.67565 5.63553H15.9457L16.3842 2.34714C16.4107 2.14841 16.5802 2 16.7807 2H18.0359C18.2778 2 18.4643 2.21307 18.4324 2.45287L18.008 5.63553H21.7283C21.9492 5.63553 22.1283 5.81461 22.1283 6.03553V7.29781C22.1283 7.51872 21.9492 7.69781 21.7283 7.69781H17.733L16.7636 14.9689H20.3949C20.6158 14.9689 20.7949 15.1479 20.7949 15.3689V16.6311C20.7949 16.8521 20.6158 17.0311 20.3949 17.0311H16.4886L15.8724 21.6529C15.8459 21.8516 15.6763 22 15.4759 22H14.2207C13.9787 22 13.7922 21.7869 13.8242 21.5471L14.4263 17.0311H7.15623L6.54 21.6529C6.5135 21.8516 6.34399 22 6.14351 22H4.88831C4.64639 22 4.45985 21.7869 4.49182 21.5471L5.09395 17.0311H1.19493C0.974016 17.0311 0.794929 16.8521 0.794929 16.6311V15.3689C0.794929 15.1479 0.974015 14.9689 1.19493 14.9689H5.36892L6.3384 7.69781H2.52826C2.30735 7.69781 2.12826 7.51872 2.12826 7.29781V6.03553C2.12826 5.81461 2.30735 5.63553 2.52826 5.63553H6.61337L7.05182 2.34714C7.07831 2.14841 7.24783 2 7.44831 2H8.70351ZM14.7013 14.9689L15.6707 7.69781H8.40067L7.4312 14.9689H14.7013Z" fill="#04B49C"/>
+</svg>
+`
+    editor.ui.registry.addIcon('emoticons', emoticons)
+    editor.ui.registry.addIcon('icon_calendar_outlined', icon_calendar_outlined)
+    editor.ui.registry.addIcon('icon_number_outlined', icon_number_outlined)
+    editor.ui.registry.addIcon('icon_text_outlined', icon_text_outlined)
+
+    const iconMap = [
+      'icon_text_outlined',
+      'icon_calendar_outlined',
+      'icon_number_outlined',
+      'icon_number_outlined',
+      'icon_number_outlined'
+    ]
+
+    editor.ui.registry.addSplitButton('splitDateButton', {
+      icon: 'emoticons',
+      tooltip: '图表选中字段',
+      onAction: _ => () => {
+        editor.insertContent('')
+      },
+      onItemAction: (_, value) => {
+        fieldSelect(value)
+      },
+      fetch: callback => {
+        const items = props.fieldList.map(ele => {
+          return {
+            icon: iconMap[ele.deType],
+            type: 'choiceitem',
+            text: ele.name,
+            value: ele.name
+          }
+        })
+        callback(items)
+      }
+    })
+  }
+})
+const viewInit = () => {
+  tinymce.init({})
+}
+const fieldSelect = name => {
+  const ed = tinymce.editors[tinymceId]
+  const obj = props.fieldList.find(ele => ele.name === name)
+  const field = {
+    name: obj.name,
+    backgroundColor: obj.groupType === 'd' ? '#3370FF33' : '#00D6B933',
+    color: obj.groupType === 'd' ? '#2B5FD9' : '#04B49C'
+  }
+  const fieldId = 'changeText-' + guid()
+  const value =
+    `<span style="background: ${field.backgroundColor};color: ${field.color}" id="` +
+    fieldId +
+    '"><span class="mceNonEditable" contenteditable="false" data-mce-content="[' +
+    field.name +
+    ']">[' +
+    field.name +
+    ']</span></span>'
+  const attachValue = '<span id="attachValue">&nbsp;</span>'
+  ed.insertContent(value)
+  ed.insertContent(attachValue)
+}
+viewInit()
+</script>
+
+<style lang="less">
+.de-tinymce-container_alarm {
+  --ed-input-text-color: var(--ed-text-color-regular);
+  --ed-input-border: var(--ed-border);
+  --ed-input-hover-border: var(--ed-border-color-hover);
+  --ed-input-focus-border: var(--ed-color-primary);
+  --ed-input-transparent-border: 0 0 0 1px transparent inset;
+  --ed-input-border-color: var(--ed-border-color);
+  --ed-input-border-radius: var(--ed-border-radius-base);
+  --ed-input-bg-color: var(--ed-fill-color-blank);
+  --ed-input-icon-color: var(--ed-text-color-placeholder);
+  --ed-input-placeholder-color: var(--ed-text-color-placeholder);
+  --ed-input-hover-border-color: var(--ed-border-color-hover);
+  --ed-input-clear-hover-color: var(--ed-text-color-secondary);
+  --ed-input-focus-border-color: var(--ed-color-primary);
+  --ed-input-width: 100%;
+  height: fit-content;
+  max-height: 300px;
+  overflow-y: scroll;
+  padding: 0;
+  .tox-statusbar {
+    display: none !important;
+  }
+
+  .tox-split-button {
+    height: 24px !important;
+  }
+}
+
+.tox {
+  border-radius: 4px !important;
+  border-bottom: 1px solid #ccc !important;
+  z-index: 3000 !important;
+  .tox-collection__item-icon {
+    height: 14px !important;
+    width: 14px !important;
+  }
+}
+.tox-tbtn {
+  height: auto !important;
+}
+.tox-collection__item-label {
+  p {
+    color: #1a1a1a !important;
+  }
+  h1 {
+    color: #1a1a1a !important;
+  }
+  h2 {
+    color: #1a1a1a !important;
+  }
+  h3 {
+    color: #1a1a1a !important;
+  }
+  h4 {
+    color: #1a1a1a !important;
+  }
+  h5 {
+    color: #1a1a1a !important;
+  }
+  h6 {
+    color: #1a1a1a !important;
+  }
+  pre {
+    color: #1a1a1a !important;
+  }
+}
+</style>