添加代码助手

fesiong · Jan 31, 2024 · 392aabd · 392aabd
1 parent e5d86d3
commit 392aabd
Show file tree

Hide file tree

Showing 7 changed files with 231 additions and 14 deletions.
diff --git a/src/global.less b/src/global.less
@@ -222,3 +222,6 @@ ol {
     min-height: 100vh;
   }
 }
+.article-content * {
+  max-width: 100%;
+}
diff --git a/src/pages/design/doc.tsx b/src/pages/design/doc.tsx
@@ -3,7 +3,7 @@ import { PageContainer } from '@ant-design/pro-layout';
 import type { ActionType } from '@ant-design/pro-table';
 import { Alert, Card, Modal } from 'antd';
 import './index.less';
-import { getDesignDocs } from '@/services/design';
+import { getDesignDocs } from '@/services';
 
 const DesignDoc: React.FC = () => {
   const actionRef = useRef<ActionType>();

diff --git a/src/pages/design/editor.tsx b/src/pages/design/editor.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { PageContainer } from '@ant-design/pro-layout';
-import MonacoEditor from 'react-monaco-editor';
-import { Button, Card, Col, message, Row, Space, Modal, Tree } from 'antd';
+import MonacoEditor, { monaco } from 'react-monaco-editor';
+import { Button, Card, Col, message, Row, Space, Modal, Tree, Input, Popover } from 'antd';
 import { history } from 'umi';
 import {
   deleteDesignHistoryFile,
@@ -17,8 +17,10 @@ import ProTable, { ActionType, ProColumns } from '@ant-design/pro-table';
 import moment from 'moment';
 import TemplateCompare from './components/compare';
 import CollapseItem from '@/components/collaspeItem';
+import { getDesignTplHelpers } from '@/services';
 
-var fileType: string = '';
+let fileType: string = '';
+let helperEvent: any;
 
 const DesignEditor: React.FC = () => {
   const [fileInfo, setFileInfo] = useState<any>({});
@@ -34,8 +36,13 @@ const DesignEditor: React.FC = () => {
   const [historyContent, setHistoryContent] = useState<string>('');
   const [tplSelect, setTplSelect] = useState<React.Key[]>([]);
   const [staticSelect, setStaticSelect] = useState<React.Key[]>([]);
+  const [showTplHelper, setShowTplHelper] = useState<boolean>(false);
+  const [tplHelpers, setTplHelpers] = useState<any[]>();
+  const [addCodeVisible, setAddCodeVisible] = useState<boolean>(false);
+  const [addCode, setAddCode] = useState<any>({});
+  const [codeValue, setCodeValue] = useState<string>('');
 
-  var unsave = false;
+  let unsave = false;
 
   useEffect(() => {
     fetchDesignInfo();
@@ -195,8 +202,33 @@ const DesignEditor: React.FC = () => {
   };
 
   const editorDidMount = (editor: any, monaco: any) => {
-    //console.log('editorDidMount', editor);
-    //editor.focus();
+    let showTplHelperAction = editor.createContextKey('showTplHelperAction', true);
+    editor.addAction({
+      // id
+      id: 'tpl-helper',
+      // 该菜单键显示文本
+      label: '模板标签助手',
+      // 控制该菜单键显示
+      precondition: 'showTplHelperAction',
+      // 该菜单键位置
+      contextMenuGroupId: 'navigation',
+      contextMenuOrder: 1.5,
+      // 点击该菜单键后运行
+      run: (event: any) => {
+        // 光标位置
+        helperEvent = event;
+        setShowTplHelper(true);
+        getTplHelpers();
+      },
+    });
+  };
+
+  const getTplHelpers = () => {
+    if (!tplHelpers) {
+      getDesignTplHelpers().then((res: any) => {
+        setTplHelpers(res.data || null);
+      });
+    }
   };
 
   const onChangeCode = (newCode: string) => {
@@ -359,6 +391,37 @@ const DesignEditor: React.FC = () => {
     setHeight(num);
   };
 
+  const handleAddCode = (addCode: any, docLink: string) => {
+    if (docLink) {
+      addCode.link = docLink;
+    }
+    setAddCode(addCode);
+    setCodeValue(addCode.code);
+    setAddCodeVisible(true);
+  };
+
+  const onSubmitAddCode = () => {
+    if (helperEvent) {
+      let position = helperEvent.getPosition();
+      helperEvent?.executeEdits('', [
+        {
+          range: new monaco.Range(
+            position.lineNumber,
+            position.column,
+            position.lineNumber,
+            position.column,
+          ),
+          text: codeValue,
+        },
+      ]);
+
+      helperEvent.focus();
+    }
+
+    setAddCodeVisible(false);
+    setShowTplHelper(false);
+  };
+
   const columns: ProColumns<any>[] = [
     {
       title: 'Hash',
@@ -449,6 +512,7 @@ const DesignEditor: React.FC = () => {
                 >
                   查看历史
                 </Button>
+                <div className="text-muted">编辑框内点击右键可以快捷插入模板标签代码</div>
               </Space>
             </div>
           </Col>
@@ -556,6 +620,89 @@ const DesignEditor: React.FC = () => {
           }}
         />
       )}
+      <Modal
+        open={showTplHelper}
+        onCancel={() => {
+          setShowTplHelper(false);
+        }}
+        onOk={() => {
+          setShowTplHelper(false);
+        }}
+        width={800}
+      >
+        {tplHelpers?.map((item: any, index: number) => {
+          return (
+            <div key={index} className="design-helper">
+              <h3 className="helper-header">{item.title}</h3>
+              <Row gutter={16} wrap>
+                {item.docs?.map((doc: any, index2: number) => (
+                  <Col key={index2}>
+                    {doc.docs ? (
+                      <Popover
+                        content={
+                          <div className="helper-popover">
+                            <Row gutter={16} wrap>
+                              {doc.docs.map((child: any, index3: number) => (
+                                <Col key={index3}>
+                                  <span
+                                    className="popover-item link"
+                                    onClick={() => handleAddCode(child, child.link || doc.link)}
+                                  >
+                                    {child.title}
+                                  </span>
+                                </Col>
+                              ))}
+                            </Row>
+                          </div>
+                        }
+                        trigger="click"
+                      >
+                        <span className="helper-item">{doc.title}</span>
+                      </Popover>
+                    ) : (
+                      <span
+                        className="helper-item link"
+                        onClick={() => handleAddCode(doc, doc.link)}
+                      >
+                        {doc.title}
+                      </span>
+                    )}
+                  </Col>
+                ))}
+              </Row>
+            </div>
+          );
+        })}
+      </Modal>
+      <Modal
+        title="代码片段"
+        open={addCodeVisible}
+        onCancel={() => {
+          setAddCodeVisible(false);
+        }}
+        okText="插入"
+        onOk={onSubmitAddCode}
+        width={600}
+      >
+        {(addCode.content || addCode.link) && (
+          <div className="helper-code-desc">
+            {addCode.content && <span>说明：{addCode.content}</span>}
+            {addCode.link && (
+              <a href={addCode.link} target="_blank">
+                查看文档
+              </a>
+            )}
+          </div>
+        )}
+        {addCodeVisible && (
+          <Input.TextArea
+            placeholder="代码片段"
+            rows={10}
+            value={codeValue}
+            onChange={(e) => setCodeValue(e.target.value)}
+          />
+        )}
+      </Modal>
     </PageContainer>
   );
 };

diff --git a/src/pages/design/index.less b/src/pages/design/index.less
@@ -123,3 +123,25 @@
     }
   }
 }
+.design-helper {
+  margin: 10px 0;
+  .helper-header {
+    padding-bottom: 10px;
+    border-bottom: 1px solid #eee;
+  }
+  .helper-item {
+    display: inline-block;
+    padding: 4px;
+    cursor: pointer;
+  }
+}
+.helper-popover {
+  max-width: 600px;
+}
+.popover-item {
+  padding: 4px;
+  cursor: pointer;
+}
+.helper-code-desc {
+  margin-bottom: 16px;
+}
diff --git a/src/pages/plugin/material/components/import/index.tsx b/src/pages/plugin/material/components/import/index.tsx
@@ -1,5 +1,17 @@
 import React, { useEffect, useState } from 'react';
-import { Alert, Button, Col, Input, message, Modal, Row, Select, Space, Upload } from 'antd';
+import {
+  Alert,
+  Button,
+  Checkbox,
+  Col,
+  Input,
+  message,
+  Modal,
+  Row,
+  Select,
+  Space,
+  Upload,
+} from 'antd';
 import { ModalForm } from '@ant-design/pro-form';
 import { getWordsCount, removeHtmlTag } from '@/utils';
 import {
@@ -21,6 +33,7 @@ const MaterialImport: React.FC<MaterialImportProps> = (props) => {
   const [uploadedMaterials, setUploadedMaterials] = useState<any[]>([]);
   const [categories, setCategories] = useState<any[]>([]);
   const [editingContent, setEditingContent] = useState<string>('');
+  const [containHtml, setContainHtml] = useState<boolean>(false);
 
   useEffect(() => {
     getSetting();
@@ -61,12 +74,13 @@ const MaterialImport: React.FC<MaterialImportProps> = (props) => {
     let items: any = str.split('\n');
     let tmp = '';
     for (let item of items) {
-      if(tmp){
-        tmp += "<br/>" + item.trim();
+      if (tmp) {
+        tmp += '<br/>' + item.trim();
       } else {
         tmp += item.trim();
       }
-      if (getWordsCount(item) < 30) {
+      console.log(item, getWordsCount(item));
+      if (getWordsCount(item) < 10) {
         continue;
       }
       let exists = false;
@@ -129,7 +143,10 @@ const MaterialImport: React.FC<MaterialImportProps> = (props) => {
   };
 
   const submitTextarea = () => {
-    let content = removeHtmlTag(editingContent);
+    let content = editingContent;
+    if (!containHtml) {
+      content = removeHtmlTag(editingContent);
+    }
     let count = updateUploadedMaterials(content);
     setShowTextarea(false);
     message.success('已选择个' + count + '片段');
@@ -340,6 +357,24 @@ const MaterialImport: React.FC<MaterialImportProps> = (props) => {
         }}
         onOk={submitTextarea}
       >
+        <Alert
+          className="mb-normal"
+          message={
+            <div>
+              <div>
+                内容素材默认会过滤所有html标签，只保留文字。如果你
+                <span className="text-red">需要</span>保留html标签，请勾选&nbsp;&nbsp;
+                <Checkbox
+                  value={true}
+                  checked={containHtml}
+                  onChange={(e) => setContainHtml(e.target.checked)}
+                >
+                  保留html标签
+                </Checkbox>
+              </div>
+            </div>
+          }
+        />
         <Input.TextArea
           style={{ margin: '10px 0', padding: '10px' }}
           rows={15}

diff --git a/src/pages/plugin/material/index.tsx b/src/pages/plugin/material/index.tsx
@@ -85,7 +85,7 @@ const PluginMaterial: React.FC = () => {
     {
       title: '内容',
       dataIndex: 'content',
-      render: (text) => <div style={{ wordBreak: 'break-all' }}>{removeHtmlTag(text)}</div>,
+      render: (text) => <div style={{ wordBreak: 'break-all' }}>{text}</div>,
     },
     {
       title: '板块',
@@ -242,7 +242,9 @@ const PluginMaterial: React.FC = () => {
           setPreviewVisible(false);
         }}
       >
-        <div dangerouslySetInnerHTML={{ __html: currentMaterial.content }}></div>
+        <div className="article-content">
+          <div dangerouslySetInnerHTML={{ __html: currentMaterial.content }}></div>
+        </div>
       </Modal>
     </PageContainer>
   );

diff --git a/src/services/design.ts b/src/services/design.ts
@@ -136,6 +136,14 @@ export async function getDesignDocs(params?: any, options?: { [key: string]: any
   });
 }
 
+export async function getDesignTplHelpers(params?: any, options?: { [key: string]: any }) {
+  return get({
+    url: '/design/helpers',
+    params,
+    options,
+  });
+}
+
 export async function restoreDesignData(body: any, options?: { [key: string]: any }) {
   return post({
     url: '/design/data/restore',