feat: ui优化

.erb/configs/webpack.config.renderer.dev.ts

@@ -83,6 +83,10 @@ const configuration: webpack.Configuration = {
         use: ['style-loader', 'css-loader', 'sass-loader'],
         exclude: /\.module\.s?(c|a)ss$/,
       },
+      // {
+      //   test: /\.scss$/,
+      //   use: ['style-loader', 'css-loader', 'sass-loader'],
+      // },
       // Fonts
       {
         test: /\.(woff|woff2|eot|ttf|otf)$/i,
@@ -172,6 +176,7 @@ const configuration: webpack.Configuration = {
   devServer: {
     port,
     compress: true,
+    // hot: false,
     hot: true,
     headers: { 'Access-Control-Allow-Origin': '*' },
     static: {

.eslintignore

@@ -2,6 +2,8 @@
 logs
 *.log
 
+src
+
 # Runtime data
 pids
 *.pid

package.json

@@ -96,14 +96,19 @@
     }
   },
   "dependencies": {
+    "antd": "^5.17.2",
     "electron-debug": "^3.2.0",
     "electron-log": "^4.4.8",
     "electron-updater": "^6.1.4",
+    "lodash": "^4.17.21",
+    "marked": "^12.0.2",
+    "nodemon": "^3.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.16.0"
   },
   "devDependencies": {
+    "@electron-forge/publisher-github": "^7.4.0",
     "@electron/notarize": "^2.1.0",
     "@electron/rebuild": "^3.3.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11",
@@ -122,7 +127,7 @@
     "@typescript-eslint/parser": "^6.7.0",
     "browserslist-config-erb": "^0.0.3",
     "chalk": "^4.1.2",
-    "concurrently": "^8.2.1",
+    "concurrently": "^8.2.2",
     "core-js": "^3.32.2",
     "cross-env": "^7.0.3",
     "css-loader": "^6.8.1",
@@ -131,6 +136,7 @@
     "electron": "^26.2.1",
     "electron-builder": "^24.6.4",
     "electron-devtools-installer": "^3.2.0",
+    "electron-reload": "^2.0.0-alpha.1",
     "electronmon": "^2.0.2",
     "eslint": "^8.49.0",
     "eslint-config-airbnb-base": "^15.0.0",

src/main/main.ts

@@ -23,6 +23,12 @@ class AppUpdater {
   }
 }
 
+// Enable live reload for all the files inside your project directory
+// require('electron-reload')(path.join(__dirname, 'src'), {
+//   electron: require(`${__dirname}/node_modules/electron`)
+// });
+
+
 let mainWindow: BrowserWindow | null = null;
 
 ipcMain.on('ipc-example', async (event, arg) => {

src/main/menu.ts

@@ -194,91 +194,103 @@ export default class MenuBuilder {
 
   buildDefaultTemplate() {
     const templateDefault = [
+      // {
+      //   label: '&File',
+      //   submenu: [
+      //     {
+      //       label: '&Open',
+      //       accelerator: 'Ctrl+O',
+      //     },
+      //     {
+      //       label: '&Close',
+      //       accelerator: 'Ctrl+W',
+      //       click: () => {
+      //         this.mainWindow.close();
+      //       },
+      //     },
+      //   ],
+      // },
+      // {
+      //   label: '&View',
+      //   submenu:
+      //     process.env.NODE_ENV === 'development' ||
+      //     process.env.DEBUG_PROD === 'true'
+      //       ? [
+      //           {
+      //             label: '&Reload',
+      //             accelerator: 'Ctrl+R',
+      //             click: () => {
+      //               this.mainWindow.webContents.reload();
+      //             },
+      //           },
+      //           {
+      //             label: 'Toggle &Full Screen',
+      //             accelerator: 'F11',
+      //             click: () => {
+      //               this.mainWindow.setFullScreen(
+      //                 !this.mainWindow.isFullScreen(),
+      //               );
+      //             },
+      //           },
+      //           {
+      //             label: 'Toggle &Developer Tools',
+      //             accelerator: 'Alt+Ctrl+I',
+      //             click: () => {
+      //               this.mainWindow.webContents.toggleDevTools();
+      //             },
+      //           },
+      //         ]
+      //       : [
+      //           {
+      //             label: 'Toggle &Full Screen',
+      //             accelerator: 'F11',
+      //             click: () => {
+      //               this.mainWindow.setFullScreen(
+      //                 !this.mainWindow.isFullScreen(),
+      //               );
+      //             },
+      //           },
+      //         ],
+      // },
+      // {
+      //   label: 'Help',
+      //   submenu: [
+      //     {
+      //       label: 'Learn More',
+      //       click() {
+      //         shell.openExternal('https://electronjs.org');
+      //       },
+      //     },
+      //     {
+      //       label: 'Documentation',
+      //       click() {
+      //         shell.openExternal(
+      //           'https://github.com/electron/electron/tree/main/docs#readme',
+      //         );
+      //       },
+      //     },
+      //     {
+      //       label: 'Community Discussions',
+      //       click() {
+      //         shell.openExternal('https://www.electronjs.org/community');
+      //       },
+      //     },
+      //     {
+      //       label: 'Search Issues',
+      //       click() {
+      //         shell.openExternal('https://github.com/electron/electron/issues');
+      //       },
+      //     },
+      //   ],
+      // },
       {
-        label: '&File',
+        label: '菜单',
         submenu: [
           {
-            label: '&Open',
-            accelerator: 'Ctrl+O',
-          },
-          {
-            label: '&Close',
-            accelerator: 'Ctrl+W',
-            click: () => {
-              this.mainWindow.close();
-            },
-          },
-        ],
-      },
-      {
-        label: '&View',
-        submenu:
-          process.env.NODE_ENV === 'development' ||
-          process.env.DEBUG_PROD === 'true'
-            ? [
-                {
-                  label: '&Reload',
-                  accelerator: 'Ctrl+R',
-                  click: () => {
-                    this.mainWindow.webContents.reload();
-                  },
-                },
-                {
-                  label: 'Toggle &Full Screen',
-                  accelerator: 'F11',
-                  click: () => {
-                    this.mainWindow.setFullScreen(
-                      !this.mainWindow.isFullScreen(),
-                    );
-                  },
-                },
-                {
-                  label: 'Toggle &Developer Tools',
-                  accelerator: 'Alt+Ctrl+I',
-                  click: () => {
-                    this.mainWindow.webContents.toggleDevTools();
-                  },
-                },
-              ]
-            : [
-                {
-                  label: 'Toggle &Full Screen',
-                  accelerator: 'F11',
-                  click: () => {
-                    this.mainWindow.setFullScreen(
-                      !this.mainWindow.isFullScreen(),
-                    );
-                  },
-                },
-              ],
-      },
-      {
-        label: 'Help',
-        submenu: [
-          {
-            label: 'Learn More',
+            label: '公众号: 异度世界',
             click() {
-              shell.openExternal('https://electronjs.org');
-            },
-          },
-          {
-            label: 'Documentation',
-            click() {
-              shell.openExternal(
-                'https://github.com/electron/electron/tree/main/docs#readme',
-              );
-            },
-          },
-          {
-            label: 'Community Discussions',
-            click() {
-              shell.openExternal('https://www.electronjs.org/community');
-            },
-          },
-          {
-            label: 'Search Issues',
-            click() {
-              shell.openExternal('https://github.com/electron/electron/issues');
+              // 打开网址
+              shell.openExternal('https://www.hackrobot.cn');
             },
           },
         ],

src/renderer/App.css

@@ -1,62 +0,0 @@
-/*
- * @NOTE: Prepend a `~` to css file paths that are in your node_modules
- *        See https://github.com/webpack-contrib/sass-loader#imports
- */
-body {
-  position: relative;
-  color: white;
-  height: 100vh;
-  background: linear-gradient(
-    200.96deg,
-    #fedc2a -29.09%,
-    #dd5789 51.77%,
-    #7a2c9e 129.35%
-  );
-  font-family: sans-serif;
-  overflow-y: hidden;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-button {
-  background-color: white;
-  padding: 10px 20px;
-  border-radius: 10px;
-  border: none;
-  appearance: none;
-  font-size: 1.3rem;
-  box-shadow: 0px 8px 28px -6px rgba(24, 39, 75, 0.12),
-    0px 18px 88px -4px rgba(24, 39, 75, 0.14);
-  transition: all ease-in 0.1s;
-  cursor: pointer;
-  opacity: 0.9;
-}
-
-button:hover {
-  transform: scale(1.05);
-  opacity: 1;
-}
-
-li {
-  list-style: none;
-}
-
-a {
-  text-decoration: none;
-  height: fit-content;
-  width: fit-content;
-  margin: 10px;
-}
-
-a:hover {
-  opacity: 1;
-  text-decoration: none;
-}
-
-.Hello {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin: 20px 0;
-}

src/renderer/App.module.scss

@@ -0,0 +1,87 @@
+html,
+body {
+  // user-select: auto;
+}
+p {
+  padding-top: 0 !important;
+  padding-bottom:0 !important ;
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+
+}
+.index {
+  display: flex;
+  flex-direction: column;
+  // background-color: yellow;
+  .up {
+    user-select: auto;
+    font-size: 16px;
+    display: flex;
+    flex-direction: row;
+    // align-items: center;
+    // justify-content: space-between;
+    padding-left: 30px;
+    padding-right: 30px;
+    .upLeft{
+      width: 50%;
+      min-height: 20px;
+      // background-color: yellow;
+    }
+    .upRight{
+      flex: 1;
+      display: flex;
+      // background-color: green;
+      flex-direction: row-reverse;
+    }
+  }
+  .down {
+    // font-size: 28px;
+    user-select: auto;
+    font-size: 16px;
+    display: flex;
+    flex-direction: row;
+    // align-items: center;
+    // justify-content: space-between;
+    padding-left: 30px;
+    padding-right: 30px;
+    .left {
+      width: 50%;
+      // min-height: 200px;
+      // background-color: yellow;
+      // border: 1px solid red;
+      // padding: 20px;
+      min-height: 800px;
+  
+      .TextArea {
+        // background-color: yellow;
+        // height: 100vh;
+        height: 800px;
+      }
+    }
+  
+    .right {
+      flex: 1;
+      // border: 1px solid red;
+      // padding-top: 20px;
+      // padding-bottom: 20px;
+      // background-color: yellow;
+      .rightHtml {
+        user-select: auto;
+        border: 1px solid red;
+        // padding-top: 10px;
+        padding-left: 10px;
+        // background-color: greenyellow;
+        height: 800px;
+        overflow-y: auto;
+      }
+    }
+  
+    .origin {
+      flex: 1;
+      border: 1px solid red
+      // padding: 20px;
+    }
+  }
+
+
+}

src/renderer/App.scss

@@ -0,0 +1,82 @@
+html,
+body {
+  user-select: auto;
+}
+p {
+  padding: 0 !important;
+  margin: 0 !important;
+}
+.index {
+  display: flex;
+  flex-direction: column;
+  .up {
+    user-select: auto;
+    font-size: 16px;
+    display: flex;
+    flex-direction: row;
+    // align-items: center;
+    // justify-content: space-between;
+    padding-left: 30px;
+    padding-right: 30px;
+    .upLeft{
+      width: 50%;
+      min-height: 20px;
+      // background-color: yellow;
+    }
+    .upRight{
+      flex: 1;
+      display: flex;
+      // background-color: green;
+      flex-direction: row-reverse;
+    }
+  }
+  .down {
+    // font-size: 28px;
+    user-select: auto;
+    font-size: 16px;
+    display: flex;
+    flex-direction: row;
+    // align-items: center;
+    // justify-content: space-between;
+    padding-left: 30px;
+    padding-right: 30px;
+    .left {
+      width: 50%;
+      // min-height: 200px;
+      // background-color: yellow;
+      // border: 1px solid red;
+      // padding: 20px;
+      min-height: 800px;
+  
+      .TextArea {
+        // background-color: yellow;
+        // height: 100vh;
+        height: 800px;
+      }
+    }
+  
+    .right {
+      flex: 1;
+      // border: 1px solid red;
+      // padding-top: 20px;
+      // padding-bottom: 20px;
+      // background-color: yellow;
+      .rightHtml {
+        border: 1px solid red;
+        // padding-top: 10px;
+        padding-left: 10px;
+        // background-color: greenyellow;
+        height: 800px;
+        overflow-y: auto;
+      }
+    }
+  
+    .origin {
+      flex: 1;
+      border: 1px solid red
+      // padding: 20px;
+    }
+  }
+
+
+}

src/renderer/App.tsx

@@ -1,50 +1,454 @@
-import { MemoryRouter as Router, Routes, Route } from 'react-router-dom';
-import icon from '../../assets/icon.svg';
-import './App.css';
+import { Component, useRef } from 'react';
+import { Input } from 'antd';
+import { Button, Flex, Modal, Space } from 'antd';
+// import Taro from "@tarojs/taro";
+// import {
+//   View,
+//   Text,
+//   Image,
+//   Button,
+//   Input,
+//   Editor,
+//   Textarea,
+// } from "@tarojs/components";
+// import './APP.scss';
+import styles from './App.module.scss';
 
-function Hello() {
+// import { AtTabBar } from "taro-ui";
+import React, { useCallback, useEffect, useState } from 'react';
+// import { AtGrid } from "taro-ui";
+// import { Swiper, SwiperItem } from "@tarojs/components";
+// import { AtCard } from "taro-ui";
+// import { AtImagePicker } from "taro-ui";
+// import { AtButton } from "taro-ui";
+// import { AtSearchBar } from "taro-ui";
+// import { Picker } from "@tarojs/components";
+// import { AtList, AtListItem } from "taro-ui";
+// import { AtNavBar } from "taro-ui";
+// import { AtModal, AtModalHeader, AtModalContent, AtModalAction } from "taro-ui";
+// import { AtToast } from "taro-ui";
+// import { AtIcon } from "taro-ui";
+import see from '../../images/see.png';
+import group from '../../images/group.png';
+import { marked } from 'marked';
+// import _ from "lodash";
+import OriginMark from './conpoments/OriginMark/index';
+import TextArea from 'antd/es/input/TextArea';
+
+// marked.use(`marked-code-jsx-renderer`);
+// marked.use(`marked-extended-tables`);
+
+// ![测试图片2](http://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/202304081955211.png)
+
+const createDecoratedTitleHTML = (text: any) => {
+  const padding = 2; // 内容左右两边的空格数
+
+  const lineChar = '─'; // 水平线字符
+  const edgeChar = '─'; // 边框装饰字符
+  // const edgeChar = '━'; // 边框装饰字符
+  // const cornerTopLeft = '╔';
+  // const cornerTopRight = '╗';
+  // const cornerBottomLeft = '╚';
+  // const cornerBottomRight = '╝';
+  const cornerTopLeft = '╭'; // 顶部左角
+  const cornerTopRight = '╮'; // 顶部右角
+  const cornerBottomLeft = '╰'; // 底部左角
+  const cornerBottomRight = '╯'; // 底部右角
+
+  // 计算标题长度
+  const titleLength = text.length + padding * 2;
+  const lineLength = lineChar.repeat(titleLength);
+  const edgeLength = edgeChar.repeat(titleLength);
+
+  // 构造 HTML
+  const topBorder = `${cornerTopLeft}${edgeLength}${cornerTopRight}`;
+  const bottomBorder = `${cornerBottomLeft}${edgeLength}${cornerBottomRight}`;
+  const middleLine = `  📢 ${text}`;
+  // const middleLine = `  ⚡ ${text}`;
+
+
+  return `<div>${topBorder}<br/>${middleLine}<br/>${bottomBorder}</div>`;
+  // return `<div>${topBorder}<br/>${middleLine}<br/>${bottomBorder}</div><br/>`;
+};
+
+marked.setOptions({
+  breaks: true, // 是否回车换行
+  gfm: true, //使用经批准的 GitHub Flavored Markdown (GFM) 规范
+  // pedantic: true, //严格模式
+  // highlight(code:any, lang:any) {
+  //   //  语法高亮
+  //   let val = code;
+  //   if (lang) {
+  //     val = hljs.highlight(lang, code).value;
+  //   } else {
+  //     val = hljs.highlightAuto(code).value;
+  //   }
+  //   return val;
+  // },
+});
+// 符号
+// 🔥❓👉
+// 0️⃣1️⃣2️⃣3️⃣4️⃣5️⃣6️⃣7️⃣8️⃣9️⃣🔟
+// ©️⭐🔍〰️➖
+
+// 修改 marked 的解析规则
+// const block = marked.Lexer.rules.block;
+// block.gfm.hr = /^( *[-*_]){3,} *(?:\n+|$)/;
+// 自定义水平线规则，确保它们在文档中被正确识别
+// block.gfm.hr =
+//   /^ {0,3}(?:(?:-[\t ]*){3,}|(?:_[ \t]*){3,}|(?:\*[ \t]*){3,})(?:\n+|$)/;
+
+const renderer = new marked.Renderer();
+// const originRenderer = _.cloneDeep(renderer);
+
+// 图片调整300px
+renderer.image = function (href, title, text) {
+  // console.log("href, title, text", href, title, text);
+  // <div class="desc">${text}</div>
+  return `<img width="300px"  src="${href}" alt="${text}"/>`;
+};
+
+let listSinbal = '🔸';
+// 有序列表
+renderer.list = function (body, ordered, start) {
+  const type = ordered ? 'ol' : 'ul';
+  const startatt = ordered && start !== 1 ? ' start="' + start + '"' : '';
+
+  // 移除 `<div>` 和 `</div>` 标签
+  const cleanedBody = body.replace(/<\/?div>/g, '');
+
+  // 正则表达式匹配每个以 <br/> 结尾的列表项
+  const regex = /([^<]*)<br\/?>/g;
+  const input = cleanedBody;
+
+  // 正则取值
+  //   // const regex = /▫️\s*(.*?)<br\/?>/g;
+  // const regex = /([^<]*)<br\/?>/g;
+  // const input = body;
+  // console.log('input--', input);
+
+  const matches = [...input.matchAll(regex)];
+  console.log('matches--', matches);
+  const texts = matches.map((match) => match[1]);
+  console.log('texts===>', texts); // 输出: ["测试111", "测试222", "if"]
+  const newArray = texts.filter((item) => item.includes(listSinbal));
+  const numbers = ['1️⃣', '2️⃣', '3️⃣', '4️⃣', '5️⃣', '6️⃣', '7️⃣', '8️⃣', '9️⃣', '🔟'];
+  // ┊ │  ╏
+  const string = texts
+    .map((value, index) => {
+      console.log('value--', value);
+      // 判断是否是任务
+      let task = false;
+      if (value.includes('🔸⬜') || value.includes('🔸✅')) {
+        task = true;
+      }
+      return value.indexOf(listSinbal) !== -1
+        ? `<div>${
+            type === 'ol'
+              ? numbers[newArray.indexOf(value)]
+              : task
+              ? ''
+              : listSinbal
+          }${value.replace(listSinbal, '')} </div>`
+        : `<div style="white-space:pre;">&#8239;&#8239;&#8239;&#8239;&#8239;&#8239;&#8239;&#8239;&#8239;┊ ${value}</div>`;
+    })
+    .join('');
+
+  return `${string}`;
+};
+
+// 示例输入
+const input = `🔸11<br/>🔸22<br/><br/>🔸33`;
+console.log(renderer.list(input, false, 1));
+
+// 无序列表  ▫️
+renderer.listitem = function (text, task, checked) {
+  // return `<li>${text}</li>\n`;
+  return `${listSinbal}${text}<br/>`;
+  return `${listSinbal}${text}\n`;
+
+  // return `${listSinbal}${text}\n`;
+
+  // return `➖${text}<br/>`;
+};
+
+// 任务列表
+renderer.checkbox = function (checked) {
+  // ✅❌⬜
+  return !!checked ? '✅' : '⬜';
   return (
-    <div>
-      <div className="Hello">
-        <img width="200" alt="icon" src={icon} />
+    '<input ' + (checked ? 'checked="" ' : '') + 'disabled="" type="checkbox">'
+  );
+};
+
+// 标题
+renderer.heading = function (text, level, raw) {
+  console.log('text, level, raw', text, level, raw);
+  // ignore IDs
+  // return `📋<span>${text}</span> <br/>`;
+  // return `🔥<span>${text}</span> <br/>`;
+  if (level == 1) {
+    return createDecoratedTitleHTML(text);
+  } else if (level == 2) {
+    return `<div>📝${text}</div>\n`;
+  } else {
+    return `<div>📝${text}</div>\n`;
+  }
+
+  return `<div>╔═━──────━═╗<br/>
+  🔥 ${text}<br/>
+╚═━──────━═╝
+</div>\n`;
+
+  //   return `<div>* * * * * * * * * * *<br/>
+  // *   ${text}    *<br/>
+  // * * * * * * * * * * *
+  // </div>\n`;
+
+  //   return `<div>==================<br/>
+  // ||     📢 ${text} 📢   ||<br/>
+  // ==================</div>\n`;
+
+  // return `<h${level}>🔥<span>${text}</span></h${level}>\n`;
+  // return `<h${level}>🔥${text}</h${level}><br/>`;
+};
+
+renderer.text = function (text) {
+  return text;
+};
+
+// 分隔符
+renderer.hr = function () {
+  // return '<hr>\n';
+  // return '➖➖➖➖➖<br/>';
+  return '➖➖➖➖➖\n';
+};
+
+// 自定义分隔线解析规则
+// marked.Lexer.rules.block.gfm.hr = /^(\*{3,}|-{3,}|_{3,})(?:\s*)$/;
+//  hr = /^ {0,3}((?:-[\t ]*){3,}|(?:_[ \t]*){3,}|(?:\*[ \t]*){3,})(?:\n+|$)/;
+
+// 内联样式,使用直角引号「」
+renderer.codespan = function (text) {
+  // return `「${text}」`;
+  return `『${text}』`;
+};
+
+// 引用符号
+renderer.blockquote = function (quote) {
+  // console.log("quote", quote);
+  let content = null;
+  // var regex = /<p>(.*?)<\/p>/;
+  var regex = /<div>(.*?)<\/div>/;
+
+  var str = quote;
+  var match = regex.exec(str);
+  if (match != null) {
+    content = match[1]; // 获取第一个捕获组的内容
+    // console.log(content);
+  }
+  // <pre></pre>
+  // &nbsp;
+  // return `<span style="white-space:pre;" class="blockquote">\t 👉${content}</span><br/> `
+  // return `<div style="white-space:pre;" class="blockquote">\t 📌${content}</div>\n`;  //ok
+  // ├─⚡
+  return `<div style="white-space:pre;" class="blockquote">&#8239;&#8239;&#8239;&#8239;&#8239;&#8239;&#8239;&#8239;&#8239;&#8239;&#8239;&#8239;└─⚡${content}</div>`;
+};
+
+renderer.table = function (header, body) {
+  if (body) body = `<tbody>${body}</tbody>`;
+
+  return (
+    '📊 表格 📊<br/><table>\n' +
+    '<thead>\n' +
+    header +
+    '</thead>\n' +
+    body +
+    '</table>\n'
+  );
+};
+
+renderer.tablerow = function (content) {
+  return `<tr>\n${content}</tr>\n`;
+};
+
+renderer.tablecell = function (content, flags) {
+  const type = flags.header ? 'th' : 'td';
+  const tag = flags.align ? `<${type} align="${flags.align}">` : `<${type}>`;
+  return tag + `|${content}` + `</${type}>\n`;
+};
+
+function cleanUrl(href: any) {
+  try {
+    href = encodeURI(href).replace(/%25/g, '%');
+  } catch (e) {
+    return null;
+  }
+  return href;
+}
+
+renderer.link = function (href, title, text) {
+  const cleanHref = cleanUrl(href);
+  if (cleanHref === null) {
+    return text;
+  }
+  href = cleanHref;
+  console.log('href-', href);
+  let out = '<a href="' + href + '"';
+  if (title) {
+    out += ' title="' + title + '"';
+  }
+  out += '>' + `🔗` + text + '</a>';
+  // out += ">" +`🔗`+ text + "</a>"+`(${href})`;
+  // console.log('out-',out)
+
+  return out + `: ${href}`;
+};
+
+renderer.paragraph = function (text) {
+  // return `<p>${text}</p>\n`;
+  // return `<p>${text}</p>`;
+  return `<div>${text}</div>`;
+};
+renderer.br = function () {
+  return '<br>';
+};
+renderer.html = function (html, block) {
+  return html;
+};
+
+// 使用拓展
+marked.use({ renderer });
+
+// export default class Index extends Component {
+const Index = () => {
+  const divRef = useRef(null);
+  const [inputValue, setinputValue] = useState('');
+  const [markText, setmarkText] = useState(``);
+
+  const [oldmarkText, setoldmarkText] = useState(null);
+  const [currentRender, setcurrentRender] = useState(null);
+  const [markdownTable, setmarkdownTable] = useState();
+  const [tablecellArr, settablecellArr] = useState([]);
+
+  const onConfirm = (onConfirmtxt: any) => {
+    console.log('onConfirmtxt--->', onConfirmtxt.detail.value);
+  };
+  const onBlur = (onBlurtxt: any) => {
+    console.log('onBlurtxt--->', onBlurtxt.detail.value);
+    if (onBlurtxt.detail.value) {
+      setmarkText(onBlurtxt.detail.value);
+    }
+  };
+  const onInput = (onInputtxt: any) => {
+    console.log('onInputtxt--->', onInputtxt?.target?.value);
+    setinputValue(onInputtxt.target.value);
+    // console.log('inputValue',inputValue)
+    // let value = onInputtxt?.target?.value;
+    let value = onInputtxt?.target?.value;
+
+    // +`🅥🟢🆔:hackrobot`
+    // +`➕🅥=>🟩🆔: hackrobot,可以找我聊天💬  `
+    //       let contactMe=`<br>➖➖➖➖➖<br/>在🟩【wΞ𝗫𝗜𝗡】➡️联系我 【➕🅥】:
+    // ╭────────────────╮
+    // │ 🆔  hackrobot
+    // ╰────────────────╯
+    // 💬 随时欢迎聊天
+    // `
+    // │ 💬 随时欢迎聊天
+
+    //     let contactMe = `<br>╭────────────────╮
+    // │ 🟩【wΞ𝗫𝗜𝗡】➡️联系我【➕🅥】
+    // │
+    // │ 🆔 hackrobot
+    // ╰────────────────╯<br>💬 随时欢迎聊天`;
+
+    // let contactMe = `<br>➖➖➖➖➖<br>💬 欢迎交流<br>后台私信发送『关键词』: 加群`;
+    let contactMe = `<br>➖➖➖➖➖<br>©️ 本文使用🔗『mdemoji.com』 编辑 `;
+    // setmarkText(value);
+    // setmarkText(value + contactMe);
+
+    if (value?.length < 10) {
+      setmarkText(value);
+    } else {
+      setmarkText(value + contactMe);
+    }
+  };
+
+  useEffect(() => {}, []);
+
+  const copyToClipboard = () => {
+    if (divRef.current) {
+      const htmlContentinnerHTML = divRef.current.innerHTML;
+      console.log('htmlContentinnerHTML', htmlContentinnerHTML);
+      const htmlContentouterHTML = divRef.current.outerHTML;
+      console.log('htmlContentouterHTML', htmlContentouterHTML);
+
+      const htmlContent = divRef.current.innerText;
+      // const htmlContent = divRef.current.textContent;
+
+      navigator.clipboard
+        .writeText(htmlContent)
+        .then(() => {
+          // alert('Content copied to clipboard!');
+        })
+        .catch((err) => {
+          console.error('Error copying text: ', err);
+        });
+    }
+  };
+
+  const info = () => {
+    Modal.info({
+      title: 'This is a notification message',
+      content: (
+        <div>
+          <p>some messages...some messages...</p>
+          <p>some messages...some messages...</p>
+        </div>
+      ),
+      onOk() {},
+    });
+  };
+
+  return (
+    <div className={styles.index}>
+      <div className={styles.up}>
+        <div className={styles.upLeft}>
+          {/* <Button type="text" danger>
+            公众号: 异度世界
+          </Button> */}
+        </div>
+        <div className={styles.upRight}>
+          {/* <button onClick={copyToClipboard}>Copy to Clipboarrd</button> */}
+          {/* <Button type="primary" onClick={copyToClipboard}>复制</Button> */}
+          <Button onClick={copyToClipboard}>复制</Button>
+        </div>
       </div>
-      <h1>electron-react-boilerplate</h1>
-      <div className="Hello">
-        <a
-          href="https://electron-react-boilerplate.js.org/"
-          target="_blank"
-          rel="noreferrer"
-        >
-          <button type="button">
-            <span role="img" aria-label="books">
-              📚
-            </span>
-            Read our docs
-          </button>
-        </a>
-        <a
-          href="https://github.com/sponsors/electron-react-boilerplate"
-          target="_blank"
-          rel="noreferrer"
-        >
-          <button type="button">
-            <span role="img" aria-label="folded hands">
-              🙏
-            </span>
-            Donate
-          </button>
-        </a>
+      <div className={styles.down}>
+        <div className={styles.left}>
+          <TextArea
+            // styles="background:#fff;width:100%;min-height:80px;padding:0 30rpx;"
+            className={styles.TextArea}
+            autoFocus
+            allowClear
+            onChange={onInput}
+            showCount
+          />
+        </div>
+        <div className={styles.right}>
+          <div
+            className={styles.rightHtml}
+            ref={divRef}
+            dangerouslySetInnerHTML={{ __html: marked(markText) }}
+          ></div>
+        </div>
+        {/* <div className="origin">
+        <OriginMark markText={markText} />
+      </div> */}
       </div>
     </div>
   );
-}
+};
 
-export default function App() {
-  return (
-    <Router>
-      <Routes>
-        <Route path="/" element={<Hello />} />
-      </Routes>
-    </Router>
-  );
-}
+export default Index;

src/renderer/conpoments/OriginMark/index.config.js

@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: '异度星球'
+}

src/renderer/conpoments/OriginMark/index.jsx

@@ -0,0 +1,67 @@
+import { Component } from "react";
+// import Taro from "@tarojs/taro";
+// import {
+//   View,
+//   Text,
+//   Image,
+//   Button,
+//   Input,
+//   Editor,
+//   Textarea,
+// } from "@tarojs/components";
+import "./index.scss";
+// import { AtTabBar } from "taro-ui";
+import React, { useCallback, useEffect, useState } from "react";
+// import { AtGrid } from "taro-ui";
+// import { Swiper, SwiperItem } from "@tarojs/components";
+// import { AtCard } from "taro-ui";
+// import { AtImagePicker } from "taro-ui";
+// import { AtButton } from "taro-ui";
+// import { AtSearchBar } from "taro-ui";
+// import { Picker } from "@tarojs/components";
+// import { AtList, AtListItem } from "taro-ui";
+// import { AtNavBar } from "taro-ui";
+// import { AtModal, AtModalHeader, AtModalContent, AtModalAction } from "taro-ui";
+// import { AtToast } from "taro-ui";
+// import { AtIcon } from "taro-ui";
+
+// 局部改造 (不是全局)
+import { Marked } from "marked";
+const marked = new Marked([
+  {
+    breaks: true, // 是否回车换行
+    highlight(code, lang) {
+      //  语法高亮
+      let val = code;
+      if (lang) {
+        val = hljs.highlight(lang, code).value;
+      } else {
+        val = hljs.highlightAuto(code).value;
+      }
+      return val;
+    },
+  },
+]);
+
+const OriginMark = (props) => {
+  const [markText, setmarkText] = useState(null);
+
+  useEffect(() => {
+    if (props.markText) {
+      setmarkText(props.markText);
+    }
+  }, [props.markText]);
+
+  return (
+    <div className="OriginMark">
+      {!!markText && (
+        <div
+          className="OriginMark-mark"
+          dangerouslySetInnerHTML={{ __html: marked.parse(markText) }}
+        ></div>
+      )}
+    </div>
+  );
+};
+
+export default OriginMark;

src/renderer/conpoments/OriginMark/index.scss

@@ -0,0 +1,3 @@
+.OriginMark-mark{
+    padding: 20px;
+}

src/renderer/index.ejs

@@ -6,7 +6,7 @@
       http-equiv="Content-Security-Policy"
       content="script-src 'self' 'unsafe-inline'"
     />
-    <title>Hello Electron React!</title>
+    <title>emoji编辑器</title>
   </head>
   <body>
     <div id="root"></div>

src/renderer/index.tsx

@@ -1,6 +1,8 @@
 import { createRoot } from 'react-dom/client';
 import App from './App';
 
+// "nodemon": "nodemon --watch src --ext tsx,js,json,scss,css --exec \"yarn start\""
+
 const container = document.getElementById('root') as HTMLElement;
 const root = createRoot(container);
 root.render(<App />);

tsconfig.json

@@ -12,6 +12,7 @@
     "allowSyntheticDefaultImports": true,
     "resolveJsonModule": true,
     "allowJs": true,
+    "checkJs": false,
     "outDir": ".erb/dll"
   },
   "exclude": ["test", "release/build", "release/app/dist", ".erb/dll"]