fix: 问题处理

antvis · Dec 27, 2023 · 0e1816e · 0e1816e
1 parent 30c9957
commit 0e1816e
Show file tree

Hide file tree

Showing 5 changed files with 94 additions and 9 deletions.
diff --git a/packages/li-analysis-assets/src/widgets/AppIntroductionControl/Component.tsx b/packages/li-analysis-assets/src/widgets/AppIntroductionControl/Component.tsx
@@ -1,9 +1,10 @@
 import { CustomControl } from '@antv/larkmap';
 import type { ImplementWidgetProps } from '@antv/li-sdk';
 import classNames from 'classnames';
+import { isEmpty } from 'lodash-es';
 import Quill from 'quill';
 import 'quill/dist/quill.snow.css';
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useMemo, useRef } from 'react';
 import type { Properties } from './registerForm';
 import useStyle from './style';
 
@@ -17,6 +18,15 @@ const AppIntroductionControl: React.FC<AppIntroductionControlProps> = (props) =>
   const informationRef = useRef<HTMLDivElement>(null);
   const quillRef = useRef<Quill>();
 
+  const isEffectiveContent = useMemo(() => {
+    if (content && content.ops && Array.isArray(content.ops)) {
+      const isExist = content.ops.find((item: { insert?: any }) => item.insert !== '\n');
+      return isExist;
+    }
+
+    return false;
+  }, [content]);
+
   useEffect(() => {
     const quill = new Quill(informationRef.current!, {
       modules: {},
@@ -27,14 +37,18 @@ const AppIntroductionControl: React.FC<AppIntroductionControlProps> = (props) =>
   }, []);
 
   useEffect(() => {
-    if (content && quillRef.current) {
+    if (quillRef.current && isEffectiveContent) {
       // @ts-ignore
       quillRef.current.setContents(content);
     }
-  }, [content]);
+  }, [isEffectiveContent]);
 
   return (
-    <CustomControl position={position} className={classNames(styles.appIntroduction, CLS_PREFIX)}>
+    <CustomControl
+      position={position}
+      className={classNames(styles.appIntroduction, CLS_PREFIX)}
+      style={{ display: isEmpty(isEffectiveContent) ? 'none' : 'block' }}
+    >
       <div style={{ width }} ref={informationRef} />
     </CustomControl>
   );

diff --git a/packages/li-p2/src/components/Formily/RichTextEditing/Editor/index.css b/packages/li-p2/src/components/Formily/RichTextEditing/Editor/index.css
@@ -76,3 +76,24 @@
 .ql-snow .ql-picker.ql-header .ql-picker-item::before {
   content: '常规';
 }
+
+/* 链接 */
+.ql-snow .ql-tooltip[data-mode='link']::before {
+  content: 'url：';
+}
+
+.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
+  content: '保存';
+}
+
+.ql-snow .ql-tooltip::before {
+  content: 'url：';
+}
+
+.ql-snow .ql-tooltip a.ql-action::after {
+  content: '修改';
+}
+
+.ql-snow .ql-tooltip a.ql-remove::before {
+  content: '删除';
+}
diff --git a/packages/li-p2/src/components/Formily/RichTextEditing/Editor/index.tsx b/packages/li-p2/src/components/Formily/RichTextEditing/Editor/index.tsx
@@ -32,18 +32,27 @@ const Editor: React.FC<EditorProps> = (props) => {
       modules: {
         toolbar: {
           container: [
-            [{ size: ['ft12', 'ft14', 'ft16', 'ft18', 'ft32', 'ft48'] }], //字体大小
-            [{ header: [false, 1, 2, 3, 4, 5, 6] }], // 几级标题
             [
-              { color: [] }, // 字体颜色
+              { size: ['ft12', 'ft14', 'ft16', 'ft18', 'ft32', 'ft48'] }, //字体大小
+              { header: [false, 1, 2, 3, 4, 5, 6] }, // 几级标题
+            ],
+            [
               'bold', // 加粗
               'italic', // 斜体
               'underline', //下划线，
-              { align: [] }, // 对齐方式
+            ],
+            [
+              { color: [] }, // 字体颜色
               { background: [] }, // 字体背景颜色
+            ],
+            [
+              { align: [] }, // 对齐方式
               { list: 'ordered' },
               { list: 'bullet' }, // 列表
+            ],
+            [
               'image', // 上传图片
+              'link', // 链接
             ],
           ],
           handlers: {

diff --git a/packages/li-p2/src/components/Formily/RichTextEditing/Editor/style.ts b/packages/li-p2/src/components/Formily/RichTextEditing/Editor/style.ts
@@ -1,12 +1,22 @@
 import { genStyleHook } from '@formily/antd-v5/esm/__builtins__';
 
 export default genStyleHook('rich-editor', (token) => {
-  const { componentCls, colorText, colorBgElevated, colorPrimaryHover, colorPrimaryActive, colorBorder } = token;
+  const {
+    componentCls,
+    colorText,
+    colorBgContainer,
+    colorBgElevated,
+    colorPrimaryHover,
+    colorPrimaryActive,
+    colorBorder,
+    boxShadow,
+  } = token;
 
   return {
     [componentCls]: {
       width: '100%',
       minHeight: '300px',
+      background: colorBgContainer,
 
       '.ql-editor': {
         minHeight: '300px',
@@ -96,6 +106,35 @@ export default genStyleHook('rich-editor', (token) => {
       '.ql-toolbar.ql-snow , .ql-container.ql-snow': {
         borderColor: colorBorder,
       },
+
+      // 链接
+      '.ql-snow .ql-tooltip': {
+        background: colorBgElevated,
+        boxShadow: boxShadow,
+        borderColor: colorBorder,
+      },
+
+      '.ql-snow .ql-tooltip::before': {
+        color: colorText,
+      },
+
+      '.ql-snow .ql-tooltip input[type=text]': {
+        background: colorBgElevated,
+        borderColor: colorBorder,
+        color: colorText,
+      },
+
+      ".ql-snow .ql-tooltip[data-mode='link']::before": {
+        color: colorText,
+      },
+
+      '.ql-snow .ql-tooltip a': {
+        color: colorPrimaryActive,
+
+        '&:hover': {
+          color: colorPrimaryHover,
+        },
+      },
     },
 
     [`${componentCls}__popover__content`]: {

diff --git a/packages/li-p2/src/components/Formily/RichTextEditing/index.tsx b/packages/li-p2/src/components/Formily/RichTextEditing/index.tsx
@@ -43,6 +43,8 @@ const InternalRichTextEditing: React.FC<InternalRichTextEditingProps> = (props)
         cancelText="取消"
         okText="确定"
         open={isModalOpen}
+        destroyOnClose={true}
+        maskClosable={false}
         onOk={handleOk}
         onCancel={handleCancel}
         width={800}