feat: ui优化

src/renderer/App.tsx

@@ -42,12 +42,18 @@ import TextArea from 'antd/es/input/TextArea';
 
 const createDecoratedTitleHTML = (text: any) => {
   const padding = 2; // 内容左右两边的空格数
+
   const lineChar = '─'; // 水平线字符
-  const edgeChar = '━'; // 边框装饰字符
-  const cornerTopLeft = '╔';
-  const cornerTopRight = '╗';
-  const cornerBottomLeft = '╚';
-  const cornerBottomRight = '╝';
+  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;
@@ -58,8 +64,11 @@ const createDecoratedTitleHTML = (text: any) => {
   const topBorder = `${cornerTopLeft}${edgeLength}${cornerTopRight}`;
   const bottomBorder = `${cornerBottomLeft}${edgeLength}${cornerBottomRight}`;
   const middleLine = `  📢 ${text}`;
+  // const middleLine = `  ⚡ ${text}`;
 
-  return `<div>${topBorder}<br/>${middleLine}<br/>${bottomBorder}</div><br/>\n`;
+
+  return `<div>${topBorder}<br/>${middleLine}<br/>${bottomBorder}</div>`;
+  // return `<div>${topBorder}<br/>${middleLine}<br/>${bottomBorder}</div><br/>`;
 };
 
 marked.setOptions({
@@ -99,56 +108,74 @@ renderer.image = function (href, title, text) {
   return `<img width="300px"  src="${href}" alt="${text}"/>`;
 };
 
-// let  listSinbal="▫️ "
 let listSinbal = '🔸';
-
 // 有序列表
 renderer.list = function (body, ordered, start) {
-  // console.log("body,ordered, start", body, ordered, start);
   const type = ordered ? 'ol' : 'ul';
-  // console.log("type===>", type);
   const startatt = ordered && start !== 1 ? ' start="' + start + '"' : '';
-  // 正则取值
-  // const regex = /▫️\s*(.*?)<br\/?>/g;
-  const regex = /([^<]*)<br\/?>/g;
-  const input = body;
-  const matches = [...input.matchAll(regex)];
-  const texts = matches.map((match) => match[1]);
-  // 不含▫️的元素数量
-  // const diffcCount=texts.length-texts.filter(item => item.includes('▫️')).length;
-  // console.log("texts===>", texts); // 输出: ["测试111", "测试222", "if"]
-  const newArray = texts.filter((item) => item.includes(listSinbal));
-  // 0️⃣',
-  const numbers = ['1️⃣', '2️⃣', '3️⃣', '4️⃣', '5️⃣', '6️⃣', '7️⃣', '8️⃣', '9️⃣', '🔟'];
 
+  // 移除 `<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, index==>", value, index);
-      // ${ value.indexOf("▫️ ") === -1 ? '<br/><span>111</sapn>' : ""}
+      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)] : listSinbal
+            type === 'ol'
+              ? numbers[newArray.indexOf(value)]
+              : task
+              ? ''
+              : listSinbal
           }${value.replace(listSinbal, '')} </div>`
-        : `<div style="white-space:pre;">\t${value}</div>`;
+        : `<div style="white-space:pre;">&#8239;&#8239;&#8239;&#8239;&#8239;&#8239;&#8239;&#8239;&#8239;┊ ${value}</div>`;
     })
     .join('');
-  // return `1️⃣`
-  // console.log("string===>", string);
 
   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 !!checked ? '✅' : '⬜';
   return (
     '<input ' + (checked ? 'checked="" ' : '') + 'disabled="" type="checkbox">'
   );
@@ -163,9 +190,9 @@ renderer.heading = function (text, level, raw) {
   if (level == 1) {
     return createDecoratedTitleHTML(text);
   } else if (level == 2) {
-    return `<div>🔥${text}</div>\n`;
+    return `<div>📝${text}</div>\n`;
   } else {
-    return `<div>🔥${text}</div>\n`;
+    return `<div>📝${text}</div>\n`;
   }
 
   return `<div>╔═━──────━═╗<br/>
@@ -224,8 +251,8 @@ renderer.blockquote = function (quote) {
   // &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>`;
+  // ├─⚡
+  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) {
@@ -266,14 +293,16 @@ renderer.link = function (href, title, text) {
     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})`;
+  out += '>' + `🔗` + text + '</a>';
+  // out += ">" +`🔗`+ text + "</a>"+`(${href})`;
+  // console.log('out-',out)
 
-  return out;
+  return out + `: ${href}`;
 };
 
 renderer.paragraph = function (text) {
@@ -318,28 +347,31 @@ const Index = () => {
     // let value = onInputtxt?.target?.value;
     let value = onInputtxt?.target?.value;
 
-    if (value?.length > 10) {
-      // +`🅥🟢🆔:hackrobot`
-      // +`➕🅥=>🟩🆔: hackrobot,可以找我聊天💬  `
-      //       let contactMe=`<br>➖➖➖➖➖<br/>在🟩【wΞ𝗫𝗜𝗡】➡️联系我 【➕🅥】:
-      // ╭────────────────╮
-      // │ 🆔  hackrobot
-      // ╰────────────────╯
-      // 💬 随时欢迎聊天
-      // `
+    // +`🅥🟢🆔:hackrobot`
+    // +`➕🅥=>🟩🆔: hackrobot,可以找我聊天💬  `
+    //       let contactMe=`<br>➖➖➖➖➖<br/>在🟩【wΞ𝗫𝗜𝗡】➡️联系我 【➕🅥】:
+    // ╭────────────────╮
+    // │ 🆔  hackrobot
+    // ╰────────────────╯
+    // 💬 随时欢迎聊天
+    // `
+    // │ 💬 随时欢迎聊天
 
-      // │ 💬 随时欢迎聊天
-      let contactMe = `<br>╭────────────────╮
-│ 🟩【wΞ𝗫𝗜𝗡】➡️联系我【➕🅥】          
-│                                     
-│ 🆔 hackrobot                                                                               
-╰────────────────╯<br>💬 随时欢迎聊天`;
+    //     let contactMe = `<br>╭────────────────╮
+    // │ 🟩【wΞ𝗫𝗜𝗡】➡️联系我【➕🅥】
+    // │
+    // │ 🆔 hackrobot
+    // ╰────────────────╯<br>💬 随时欢迎聊天`;
 
-      if (value?.length < 10) {
-        setmarkText(value);
-      } else {
-        setmarkText(value + contactMe);
-      }
+    // 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);
     }
   };