From 644173d2d9590bf527d520ee3260e02bd107a3e8 Mon Sep 17 00:00:00 2001
From: Rylan <1217013295@qq.com>
Date: Fri, 12 Jul 2024 13:48:03 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20support=20nested=20italic?=
 =?UTF-8?q?=20/=20bold=20/=20link=20text?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/layout/SettingEditor.tsx     |   4 +-
 src/components/templates/ExperienceList.tsx |   8 +-
 src/components/templates/ProfileList.tsx    | 219 ++++++++++----------
 src/components/toolkit/EditableText.tsx     |  18 +-
 src/data/en/experience.ts                   | 198 +++++++++---------
 src/data/en/profile.ts                      |  63 +++---
 src/data/style.ts                           |  28 +--
 src/data/zh/experience.ts                   | 196 +++++++++---------
 src/data/zh/profile.ts                      |  77 +++----
 src/helpers/CommonUtils.ts                  |  10 +
 src/helpers/IconParser.ts                   |  95 ---------
 src/helpers/TextParser.ts                   | 105 +++-------
 src/pages/Dashboard.tsx                     |   2 +-
 src/types/profile.d.ts                      |  27 +--
 14 files changed, 451 insertions(+), 599 deletions(-)
 create mode 100644 src/helpers/CommonUtils.ts
 delete mode 100644 src/helpers/IconParser.ts

diff --git a/src/components/layout/SettingEditor.tsx b/src/components/layout/SettingEditor.tsx
index 71dca1c..ccf9c68 100644
--- a/src/components/layout/SettingEditor.tsx
+++ b/src/components/layout/SettingEditor.tsx
@@ -4,7 +4,7 @@ import { BsImageFill } from "react-icons/bs";
 import { RiSave3Fill } from "react-icons/ri";
 import { TbLocationCancel } from "react-icons/tb";
 
-import { formatTitle } from "@/helpers/TextParser";
+import { formatTitle } from "@/helpers/CommonUtils";
 
 import { StyleData } from "@/types/style";
 
@@ -69,7 +69,7 @@ const SettingEditor: React.FC = () => {
 
     return (
         <>
-            <div className="fixed top-16 z-5 w-80 overflow-y-auto max-h-screen px-4 py-2 transition-all duration-500 ease-in-out">
+            <div className="fixed z-20 top-16 w-80 overflow-y-auto max-h-screen px-4 py-2 transition-all duration-500 ease-in-out">
                 <button onClick={handleConfirmEdit} className="setting-button fixed top-4 left-6 w-20">
                     <div className="flex items-center">
                         <RiSave3Fill className="mr-2" />
diff --git a/src/components/templates/ExperienceList.tsx b/src/components/templates/ExperienceList.tsx
index 8c38b77..9a94a7f 100644
--- a/src/components/templates/ExperienceList.tsx
+++ b/src/components/templates/ExperienceList.tsx
@@ -70,7 +70,7 @@ const ExperienceCard: React.FC<ExperienceCardProp> = ({
                         <>
                             {!lineBreak && <span className='font-normal text-gray-400 theme-divider-color mx-1 align-middle'>丨</span>}
                             <span ref={subtitleRef} className='align-middle'>
-                                <EditableText type={'link'} text={subtitle} path={`experience.${sectionIndex}.items[${itemIndex}].subtitle`}
+                                <EditableText text={subtitle} path={`experience.${sectionIndex}.items[${itemIndex}].subtitle`}
                                     className='theme-text-color font-semibold text-details '
                                 />
                             </span>
@@ -83,13 +83,13 @@ const ExperienceCard: React.FC<ExperienceCardProp> = ({
                     )}
                 </span>
             </div>
-            <p className='mb-1'>
-                {tech && <EditableText type={'tech'} text={tech} path={`experience.${sectionIndex}.items[${itemIndex}].tech`} />}
+            <p className='mb-1 theme-text-color'>
+                {tech && <EditableText text={tech} path={`experience.${sectionIndex}.items[${itemIndex}].tech`} />}
             </p>
             <ul className='list-disc list-inside mb-2'>
                 {details?.filter(detail => detail.trim()).map((detail, detailIndex) => (
                     <li key={detailIndex} className='theme-marker-color font-normal text-details'>
-                        <EditableText type={'strong'} text={detail} path={`experience.${sectionIndex}.items[${itemIndex}].details[${detailIndex}]`} />
+                        <EditableText text={detail} path={`experience.${sectionIndex}.items[${itemIndex}].details[${detailIndex}]`} />
                     </li>
                 ))}
             </ul>
diff --git a/src/components/templates/ProfileList.tsx b/src/components/templates/ProfileList.tsx
index 2df61d9..b0c0993 100644
--- a/src/components/templates/ProfileList.tsx
+++ b/src/components/templates/ProfileList.tsx
@@ -1,123 +1,134 @@
-import React from 'react';
+import React from "react";
 
-import { ProfileData } from '@/types/profile';
-
-import EditableText from '@/components/toolkit/EditableText';
+import EditableText from "@/components/toolkit/EditableText";
+import { ProfileData } from "@/types/profile";
 
 interface ProfileListProps {
-    data: ProfileData;
-    theme?: string
+  data: ProfileData;
+  theme?: string;
 }
 
 const ProfileListAvatar: React.FC<ProfileListProps> = ({ data }) => {
-    return (
-        <div className='flex justify-between items-center custom-profile'>
-
-            <div className='flex items-center'>
-                {data.avatar && (
-                    <div className='w-[80px] h-[100px] mr-6'>
-                        <img src={data.avatar} className='w-full h-full' />
-                    </div>
-                )}
-                <div className='ml-2'>
-                    <p className='text-xl mt-1 mb-3 theme-text-color'>
-                        {data.name && <EditableText text={data.name} path={`profile.name`} className={'font-bold'} />}
-                    </p>
-                    {data.footnote?.map((footnote, footIndex) => (
-                        <p className='text-sm mt-2' key={footIndex}>
-                            <EditableText text={footnote.label} path={`profile.footnote[${footIndex}].label`}
-                                className='font-semibold theme-text-color'
-                            />
-                            {footnote.label && footnote.content && <span>:&nbsp;</span>}
-                            <EditableText text={footnote.content} path={`profile.footnote[${footIndex}].content`}
-                                className='font-normal'
-                            />
-                        </p>
-                    ))}
-                </div>
-            </div>
-
-            <div className='flex flex-col ml-20 mt-2 text-[12.75px]'>
-                {data.contact?.map((contact, conIndex) => (
-                    <p className='flex' key={conIndex}>
-                        {contact.icon &&
-                            <EditableText type={'icon'} text={contact.icon.trim()} path={`profile.contact[${conIndex}].icon`}
-                                className='w-4 h-4 mr-1 theme-text-color'
-                            />}
-                        {contact.key &&
-                            <span className='theme-text-color mt-0.5'>
-                                <EditableText text={contact.key} path={`profile.contact[${conIndex}].key`} className='font-bold' />
-                                :&nbsp;
-                            </span>
-                        }
-                        {contact.value && <EditableText type={'link'} text={contact.value} path={`profile.contact[${conIndex}].value`} />}
-                    </p>
-                ))}
-            </div>
-
+  return (
+    <div className="flex justify-between items-center custom-profile">
+      <div className="flex items-center">
+        {data.avatar && (
+          <div className="w-[80px] h-[100px] mr-6">
+            <img src={data.avatar} className="w-full h-full" />
+          </div>
+        )}
+        <div className="ml-2">
+          <p className="text-xl mt-1 mb-3 theme-text-color">
+            {data.name && (
+              <EditableText
+                text={data.name}
+                path={`profile.name`}
+                className={"font-bold"}
+              />
+            )}
+          </p>
+          {data.footnote?.map((note, noteIndex) => (
+            <p className="text-sm mt-2" key={noteIndex}>
+              <EditableText
+                text={note}
+                path={`profile.footnote[${noteIndex}].label`}
+              />
+            </p>
+          ))}
         </div>
-    );
+      </div>
+
+      <div className="flex flex-col ml-20 mt-2 text-[12.75px]">
+        {data.contact?.map((contact, conIndex) => (
+          <p className="flex" key={conIndex}>
+            {contact.icon && (
+              <EditableText
+                type={"icon"}
+                text={contact.icon.trim()}
+                path={`profile.contact[${conIndex}].icon`}
+                className="w-4 h-4 mr-1 theme-text-color"
+              />
+            )}
+            {contact.value && (
+              <EditableText
+                text={contact.value}
+                path={`profile.contact[${conIndex}].value`}
+              />
+            )}
+          </p>
+        ))}
+      </div>
+    </div>
+  );
 };
 
 const ProfileListPlain: React.FC<ProfileListProps> = ({ data }) => {
-    return (
-        <div className='custom-profile'>
-
-            <div className='flex-grow flex-shrink'>
-                <p className='text-xl font-bold text-gray-800 text-center mt-2 theme-text-color'>
-                    <EditableText text={data.name} path={`profile.name`} />
-                </p>
-
-                {data.footnote && data?.footnote?.length > 0 && (
-                    <div className='flex flex-wrap justify-center items-center text-sm gap-1 mt-1'>
-                        {data.footnote?.map((footnote, footIndex) => (
-                            <div className='flex justify-center items-center plain-footnote-item' key={footIndex} style={{ flexBasis: 'auto' }}>
-                                <div className='flex justify-center items-center'>
-                                    <EditableText text={footnote.label} path={`profile.footnote[${footIndex}].label`}
-                                        className='font-semibold theme-text-color' />
-                                    {footnote.label && footnote.content && <span className='theme-text-color'>:&nbsp;</span>}
-                                    {footnote.content && <EditableText text={footnote.content} path={`profile.footnote[${footIndex}].content`} />}
-                                </div>
-                            </div>
-                        ))}
-                    </div>
-                )}
+  return (
+    <div className="custom-profile">
+      <div className="flex-grow flex-shrink">
+        <p className="text-xl font-bold text-gray-800 text-center mt-2 theme-text-color">
+          {data.name && <EditableText text={data.name} path={`profile.name`} />}
+        </p>
 
-                <div className='flex flex-wrap justify-center items-center text-[13.5px] mt-1'>
-                    {data.contact?.map((item, index) => (
-                        <div className='flex justify-center items-center plain-contact-item' key={index} style={{ flexBasis: 'auto' }}>
-                            <div className='flex items-center'>
-                                {item.icon &&
-                                    <EditableText type={'icon'} text={item.icon.trim()} path={`profile.contact[${index}].icon`}
-                                        className='w-4 h-4 mr-0.5 theme-text-color'
-                                    />
-                                }
-                                {item.key && (
-                                    <span className='theme-text-color'>
-                                        <EditableText text={item.key} path={`profile.contact[${index}].key`} className={'font-bold '} />
-                                        :&nbsp;
-                                    </span>
-                                )}
-                                {item.value && <EditableText type={'link'} text={item.value} path={`profile.contact[${index}].value`} />}
-                            </div>
-                        </div>
-                    ))}
+        {data.footnote && data.footnote?.length > 0 && (
+          <div className="flex flex-wrap justify-center items-center text-sm gap-1 mt-1">
+            {data.footnote?.map((note, noteIndex) => (
+              <div
+                className="flex justify-center items-center plain-footnote-item"
+                key={noteIndex}
+                style={{ flexBasis: "auto" }}
+              >
+                <div className="flex justify-center items-center">
+                  <EditableText
+                    text={note}
+                    path={`profile.footnote[${noteIndex}].label`}
+                  />
                 </div>
+              </div>
+            ))}
+          </div>
+        )}
 
+        <div className="flex flex-wrap justify-center items-center text-[13.5px] mt-1">
+          {data.contact?.map((item, index) => (
+            <div
+              className="flex justify-center items-center plain-contact-item"
+              key={index}
+              style={{ flexBasis: "auto" }}
+            >
+              <div className="flex items-center">
+                {item.icon && (
+                  <EditableText
+                    type={"icon"}
+                    text={item.icon.trim()}
+                    path={`profile.contact[${index}].icon`}
+                    className="w-4 h-4 mr-0.5 theme-text-color"
+                  />
+                )}
+                {item.value && (
+                  <EditableText
+                    text={item.value}
+                    path={`profile.contact[${index}].value`}
+                  />
+                )}
+              </div>
             </div>
-        </div >
-    );
+          ))}
+        </div>
+      </div>
+    </div>
+  );
 };
 
 const ProfileList: React.FC<ProfileListProps> = ({ data, theme }) => {
-    switch (theme) {
-        case 'avatar':
-            return <ProfileListAvatar data={data} />;
-        case 'plain':
-            return <ProfileListPlain data={data} />;
-        default:
-            return <ProfileListAvatar data={data} />;
-    }
+  switch (theme) {
+    case "avatar":
+      return <ProfileListAvatar data={data} />;
+    case "plain":
+      return <ProfileListPlain data={data} />;
+    default:
+      return <ProfileListAvatar data={data} />;
+  }
 };
 
-export default ProfileList;
\ No newline at end of file
+export default ProfileList;
diff --git a/src/components/toolkit/EditableText.tsx b/src/components/toolkit/EditableText.tsx
index 2099075..c4a5749 100644
--- a/src/components/toolkit/EditableText.tsx
+++ b/src/components/toolkit/EditableText.tsx
@@ -1,14 +1,13 @@
 import React, { useEffect, useRef, useState } from 'react';
 
-// import IconParser from '@/helpers/IconParser';
-import { LinkParser, StrongTextParser, TechParser } from '@/helpers/TextParser';
+import TextParser from '@/helpers/TextParser';
 import useEditWithUndo from '@/hooks/useEditWithUndo';
 import useModeStore from '@/stores/modeStore';
 
 interface EditableTextProps {
     /* 不传类型则默认渲染纯文本 */
-    type?: "strong" | "link" | "tech" | "icon";
-    text?: string;
+    type?: "icon";
+    text: string;
     /* 索引路径，比如 profile.name，experience.[0].item[1].details[2] */
     path: string;
     className?: string;
@@ -31,17 +30,10 @@ const EditableText: React.FC<EditableTextProps> = (
             return rawText;
         } else {
             switch (type) {
-                case 'strong':
-                    return <>{StrongTextParser(rawText ?? '')}</>;
-                case 'link':
-                    return <>{LinkParser(rawText ?? '', className)}</>;
-                case 'tech':
-                    return <>{TechParser(rawText ?? '')}</>;
                 case 'icon':
-                    // return <>{(IconParser(rawText?.trim() ?? '', className))}</>
-                    return <> <i id="contact-icon" className={`${rawText} ${className}`}></i></>
+                    return <i id="contact-icon" className={`${rawText ?? ""} ${className}`}></i>;
                 default:
-                    return <span className={className}>{rawText}</span>;
+                    return <>{TextParser(rawText ?? "", className)}</>;
             }
         }
     };
diff --git a/src/data/en/experience.ts b/src/data/en/experience.ts
index ac4af2f..b3495e4 100644
--- a/src/data/en/experience.ts
+++ b/src/data/en/experience.ts
@@ -1,100 +1,100 @@
-import { ExperienceData } from "@/types/experience";
-
-const EN_EXPERIENCE: ExperienceData[] = [
-    {
-        section: "EDUCATION",
-        icon: 'fas fa-graduation-cap',
-        items: [
-            {
-                title: "xx University, China",
-                subtitle: "B.E. in Software Engineering",
-                timeline: "Sept. 2021 - July 2025",
-                tech: "",
-                details: [
-                    "**GPA:** x.xx/4.0",
-                    "**Courses:** Algorithms and Data structure, Computer Network, Database, etc.",
-                    "**Awards:** xxxx Competition Gold Prize, xxxx Scholarship"
-                ]
-            }
-        ]
-    },
-    {
-        section: "INTERNSHIPS",
-        icon: 'fa-solid fa-user',
-        items: [
-            {
-                title: "xxxx Technology Co., Ltd.",
-                subtitle: "xxx Department",
-                timeline: "July 2023 - Sept. 2023",
-                tech: "Vue + Ant Design",
-                details: [
-                    "Encapsulated a **xxxxx component** to address the xxxxx problem",
-                    "Implemented xxxxx and succeeded in **optimizing xxxxx**",
-                    "......",
-                    "......"
-                ]
-            }
-        ]
-    },
-    {
-        section: "PROJECTS",
-        icon: 'fas fa-code',
-        items: [
-            {
-                title: "Online Resume Generator",
-                subtitle: "https://github.com/RylanBot/resume-json-pdf",
-                timeline: "Dec. 2023 - Jan. 2024",
-                tech: "React + TypeScript + Tailwind CSS",
-                details: [
-                    "......",
-                    "......",
-                    "......"
-                ]
-            },
-            {
-                title: "xxxxxx",
-                subtitle: "",
-                timeline: "Sept. 2023 - Dec. 2023",
-                tech: "xxx + xxxx + xxxxx",
-                details: [
-                    "......",
-                    "......",
-                    "......",
-                    "......"
-                ]
-            },
-            {
-                title: "xxxxxx",
-                subtitle: "",
-                timeline: "Oct. 2023 - Dec. 2023",
-                tech: "xxx + xxxx + xxxxx",
-                details: [
-                    "......",
-                    "......",
-                    "......"
-                ]
-            }
-        ]
-    },
-    {
-        section: "SKILLS",
-        icon: 'fas fa-cog',
-        items: [
-            {
-                title: "",
-                subtitle: "",
-                timeline: "",
-                tech: "",
-                details: [
-                    "......",
-                    "......",
-                    "......",
-                    "......",
-                    "......"
-                ]
-            }
-        ]
-    }
-]
-
+import { ExperienceData } from '@/types/experience';
+
+const EN_EXPERIENCE: ExperienceData[] = [
+    {
+        section: 'EDUCATION',
+        icon: 'fas fa-graduation-cap',
+        items: [
+            {
+                title: 'xx University, China',
+                subtitle: 'B.E. in Software Engineering',
+                timeline: 'Sept. 2021 - July 2025',
+                tech: '',
+                details: [
+                    '**GPA:** x.xx/4.0',
+                    '**Courses:** Algorithms and Data structure, Computer Network, Database, etc.',
+                    '**Awards:** xxxx Competition Gold Prize, xxxx Scholarship'
+                ]
+            }
+        ]
+    },
+    {
+        section: 'INTERNSHIPS',
+        icon: 'fa-solid fa-user',
+        items: [
+            {
+                title: 'xxxx Technology Co., Ltd.',
+                subtitle: 'xxx Department',
+                timeline: 'July 2023 - Sept. 2023',
+                tech: '***`Vue` `Ant Design`***',
+                details: [
+                    'Encapsulated a **xxxxx component** to address the xxxxx problem',
+                    'Implemented xxxxx and succeeded in **optimizing xxxxx**',
+                    '......',
+                    '......'
+                ]
+            }
+        ]
+    },
+    {
+        section: 'PROJECTS',
+        icon: 'fas fa-code',
+        items: [
+            {
+                title: 'Online Resume Generator',
+                subtitle: 'https://github.com/RylanBot/resume-json-pdf',
+                timeline: 'Dec. 2023 - Jan. 2024',
+                tech: '***`React` `TypeScript` `Tailwind CSS`***',
+                details: [
+                    '......',
+                    '......',
+                    '......'
+                ]
+            },
+            {
+                title: 'xxxxxx',
+                subtitle: '',
+                timeline: 'Sept. 2023 - Dec. 2023',
+                tech: '***`xxx` `xxxx` `xxxxx`***',
+                details: [
+                    '......',
+                    '......',
+                    '......',
+                    '......'
+                ]
+            },
+            {
+                title: 'xxxxxx',
+                subtitle: '',
+                timeline: 'Oct. 2023 - Dec. 2023',
+                tech: '***`xxx` `xxxx` `xxxxx`***',
+                details: [
+                    '......',
+                    '......',
+                    '......'
+                ]
+            }
+        ]
+    },
+    {
+        section: 'SKILLS',
+        icon: 'fas fa-cog',
+        items: [
+            {
+                title: '',
+                subtitle: '',
+                timeline: '',
+                tech: '',
+                details: [
+                    '......',
+                    '......',
+                    '......',
+                    '......',
+                    '......'
+                ]
+            }
+        ]
+    }
+]
+
 export default EN_EXPERIENCE;
\ No newline at end of file
diff --git a/src/data/en/profile.ts b/src/data/en/profile.ts
index 6dc2917..6ea96d2 100644
--- a/src/data/en/profile.ts
+++ b/src/data/en/profile.ts
@@ -1,36 +1,29 @@
-import { ProfileData } from '@/types/profile';
-
-const EN_PROFILE: ProfileData = {
-    name: 'Xxx',
-    avatar: 'https://s2.loli.net/2024/01/09/fJvOraZGAHyI6wW.png',
-    footnote: [
-        {
-            label: 'Front-end Engineer',
-            content: ''
-        }
-    ],
-    contact: [
-        {
-            icon: 'fa-solid fa-envelope',
-            key: '',
-            value: 'rylanbot@foxmail.com'
-        },
-        {
-            icon: 'fab fa-github',
-            key: '',
-            value: 'https://github.com/RylanBot'
-        },
-        {
-            icon: 'fa-brands fa-linkedin-in',
-            key: '',
-            value: 'https://linkedin.com/in/xxxxxxxx'
-        },
-        {
-            icon: 'fa-solid fa-rss',
-            key: 'Blog',
-            value: 'https://rylan.cn'
-        }
-    ]
-};
-
+import { ProfileData } from '@/types/profile';
+
+const EN_PROFILE: ProfileData = {
+    name: 'Xxx',
+    avatar: 'https://s2.loli.net/2024/01/09/fJvOraZGAHyI6wW.png',
+    footnote: [
+        'Front-end Engineer'
+    ],
+    contact: [
+        {
+            icon: 'fa-solid fa-envelope',
+            value: 'rylanbot@foxmail.com'
+        },
+        {
+            icon: 'fab fa-github',
+            value: 'https://github.com/RylanBot'
+        },
+        {
+            icon: 'fa-brands fa-linkedin-in',
+            value: 'https://linkedin.com/in/xxxxxxxx'
+        },
+        {
+            icon: 'fa-solid fa-rss',
+            value: 'https://rylan.cn'
+        }
+    ]
+};
+
 export default EN_PROFILE;
\ No newline at end of file
diff --git a/src/data/style.ts b/src/data/style.ts
index 6e2e104..81d7289 100644
--- a/src/data/style.ts
+++ b/src/data/style.ts
@@ -1,15 +1,15 @@
-import { StyleData } from "@/types/style";
-
-const COMMON_STYLE: StyleData = {
-    template: "avatar",
-    fontStyle: "default",
-    color: "#000000",
-    pagePy: 12,
-    profileMb: 8,
-    experienceMb: 8,
-    plainFootPx: 8,
-    plainContactPx: 8,
-    detailsFont: 16
-}
-
+import { StyleData } from "@/types/style";
+
+const COMMON_STYLE: StyleData = {
+    template: "avatar",
+    fontStyle: "default",
+    color: "#225081",
+    pagePy: 12,
+    profileMb: 8,
+    experienceMb: 8,
+    plainFootPx: 8,
+    plainContactPx: 8,
+    detailsFont: 16
+}
+
 export default COMMON_STYLE;
\ No newline at end of file
diff --git a/src/data/zh/experience.ts b/src/data/zh/experience.ts
index 5e4803b..548e754 100644
--- a/src/data/zh/experience.ts
+++ b/src/data/zh/experience.ts
@@ -1,99 +1,99 @@
-import { ExperienceData } from '@/types/experience';
-
-const ZH_EXPERIENCE: ExperienceData[] = [
-    {
-        section: '教育经历',
-        icon: 'fas fa-graduation-cap',
-        items: [
-            {
-                title: 'xx 大学',
-                subtitle: '软件工程',
-                timeline: '2021.09 - 2025.07',
-                tech: '',
-                details: [
-                    '**相关课程：**算法与数据结构（xx），计算机网络（xx），软件测试（xx），数据库（xx）等',
-                    '**荣誉奖项：**第 x 届 xxxx 大赛金奖，xx 大学 xxxx 奖学金',
-                    '**英语水平：**CET-4（xxx），CET-6（xxx）'
-                ]
-            }
-        ]
-    },
-    {
-        section: '实习经历',
-        icon: 'fa-solid fa-user',
-        items: [
-            {
-                title: 'xxxx 技术有限公司',
-                subtitle: 'xxx 部门',
-                timeline: '2023.07 - 2023.09',
-                tech: "Vue + Ant Design",
-                details: [
-                    '封装 **xxxxx 组件**，解决 xxxxx 问题',
-                    '使用 xxxxx，**优化 xxxxx**',
-                    '......',
-                    '......'
-                ]
-            }
-        ]
-    },
-    {
-        section: '项目经历',
-        icon: 'fas fa-code',
-        items: [
-            {
-                title: '在线简历生成器',
-                subtitle: 'https://github.com/RylanBot/resume-json-pdf',
-                timeline: '2023.12 - 2024.01',
-                tech: 'React + TypeScript + Tailwind CSS',
-                details: [
-                    '......',
-                    '......',
-                    '......'
-                ]
-            },
-            {
-                title: 'xxxxxx',
-                subtitle: '',
-                timeline: '2023.09 - 2023.12',
-                tech: 'xxx + xxxx + xxxxx',
-                details: [
-                    '......',
-                    '......',
-                    '......',
-                    '......'
-                ]
-            },
-            {
-                title: 'xxxxxx',
-                subtitle: '',
-                timeline: '2023.10 - 2023.12',
-                tech: 'xxx + xxxx + xxxxx',
-                details: [
-                    '......',
-                    '......',
-                    '......'
-                ]
-            }
-        ]
-    },
-    {
-        section: '专业技能',
-        icon: 'fas fa-cog',
-        items: [
-            {
-                title: '',
-                subtitle: '',
-                timeline: '',
-                tech: '',
-                details: [
-                    '......',
-                    '......',
-                    '......',
-                    '......'
-                ]
-            }
-        ]
-    }
-];
-
+import { ExperienceData } from '@/types/experience';
+
+const ZH_EXPERIENCE: ExperienceData[] = [
+    {
+        section: '教育经历',
+        icon: 'fas fa-graduation-cap',
+        items: [
+            {
+                title: 'xx 大学',
+                subtitle: '软件工程',
+                timeline: '2021.09 - 2025.07',
+                tech: '',
+                details: [
+                    '**相关课程：**算法与数据结构（xx），计算机网络（xx），软件测试（xx），数据库（xx）等',
+                    '**荣誉奖项：**第 x 届 xxxx 大赛金奖，xx 大学 xxxx 奖学金',
+                    '**英语水平：**CET-4（xxx），CET-6（xxx）'
+                ]
+            }
+        ]
+    },
+    {
+        section: '实习经历',
+        icon: 'fa-solid fa-user',
+        items: [
+            {
+                title: 'xxxx 技术有限公司',
+                subtitle: 'xxx 部门',
+                timeline: '2023.07 - 2023.09',
+                tech: "***`Vue` `Ant Design`***",
+                details: [
+                    '封装 **xxxxx 组件**，解决 xxxxx 问题',
+                    '使用 xxxxx，**优化 xxxxx**',
+                    '......',
+                    '......'
+                ]
+            }
+        ]
+    },
+    {
+        section: '项目经历',
+        icon: 'fas fa-code',
+        items: [
+            {
+                title: '在线简历生成器',
+                subtitle: 'https://github.com/RylanBot/resume-json-pdf',
+                timeline: '2023.12 - 2024.01',
+                tech: '***`React` `TypeScript` `Tailwind CSS`***',
+                details: [
+                    '......',
+                    '......',
+                    '......'
+                ]
+            },
+            {
+                title: 'xxxxxx',
+                subtitle: '',
+                timeline: '2023.09 - 2023.12',
+                tech: '***`xxx` `xxxx` `xxxxx`***',
+                details: [
+                    '......',
+                    '......',
+                    '......',
+                    '......'
+                ]
+            },
+            {
+                title: 'xxxxxx',
+                subtitle: '',
+                timeline: '2023.10 - 2023.12',
+                tech: '***`xxx` `xxxx` `xxxxx`***',
+                details: [
+                    '......',
+                    '......',
+                    '......'
+                ]
+            }
+        ]
+    },
+    {
+        section: '专业技能',
+        icon: 'fas fa-cog',
+        items: [
+            {
+                title: '',
+                subtitle: '',
+                timeline: '',
+                tech: '',
+                details: [
+                    '......',
+                    '......',
+                    '......',
+                    '......'
+                ]
+            }
+        ]
+    }
+];
+
 export default ZH_EXPERIENCE;
\ No newline at end of file
diff --git a/src/data/zh/profile.ts b/src/data/zh/profile.ts
index 12e9b43..f4c1a72 100644
--- a/src/data/zh/profile.ts
+++ b/src/data/zh/profile.ts
@@ -1,45 +1,34 @@
-import { ProfileData } from '@/types/profile';
-
-const ZH_PROFILE: ProfileData = {
-    name: 'Xxx',
-    avatar: 'https://s2.loli.net/2024/01/09/fJvOraZGAHyI6wW.png',
-    footnote: [
-        {
-            label: '求职意向',
-            content: '前端开发实习生'
-        },
-        {
-            label: '到岗时间',
-            content: 'xx 年 x 月'
-        }
-    ],
-    contact: [
-        {
-            icon: 'fa-solid fa-phone',
-            key: '电话',
-            value: '139-xxx-xxxxx'
-        },
-        {
-            icon: 'fa-solid fa-envelope',
-            key: '邮箱',
-            value: 'rylanbot@foxmail.com'
-        },
-        {
-            icon: 'fab fa-weixin',
-            key: '微信',
-            value: 'xxxxxx'
-        },
-        {
-            icon: 'fa-solid fa-rss',
-            key: '博客',
-            value: 'https://rylan.cn'
-        },
-        {
-            icon: 'fab fa-github',
-            key: '',
-            value: 'https://github.com/RylanBot'
-        }
-    ]
-};
-
+import { ProfileData } from '@/types/profile';
+
+const ZH_PROFILE: ProfileData = {
+    name: 'Xxx',
+    avatar: 'https://s2.loli.net/2024/01/09/fJvOraZGAHyI6wW.png',
+    footnote: [
+        '**求职意向**：前端开发实习生',
+        '**到岗时间**：xx 年 x 月'
+    ],
+    contact: [
+        {
+            icon: 'fa-solid fa-phone',
+            value: '**电话：**139-xxx-xxxxx'
+        },
+        {
+            icon: 'fa-solid fa-envelope',
+            value: '**邮箱：**rylanbot@foxmail.com'
+        },
+        {
+            icon: 'fab fa-weixin',
+            value: '**微信：**xxxxxx'
+        },
+        {
+            icon: 'fa-solid fa-rss',
+            value: '**博客**：https://rylan.cn'
+        },
+        {
+            icon: 'fab fa-github',
+            value: 'https://github.com/RylanBot'
+        }
+    ]
+};
+
 export default ZH_PROFILE;
\ No newline at end of file
diff --git a/src/helpers/CommonUtils.ts b/src/helpers/CommonUtils.ts
new file mode 100644
index 0000000..5e85bad
--- /dev/null
+++ b/src/helpers/CommonUtils.ts
@@ -0,0 +1,10 @@
+/**
+ * 处理不同语言造成的换行情况不同
+ */
+export const formatTitle = (title: string) => {
+    const words = title.split(" ");
+    if (words.length > 1) {
+        return words[0] + "\n" + words.slice(1).join(" ");
+    }
+    return title;
+};
diff --git a/src/helpers/IconParser.ts b/src/helpers/IconParser.ts
deleted file mode 100644
index 1932be8..0000000
--- a/src/helpers/IconParser.ts
+++ /dev/null
@@ -1,95 +0,0 @@
-import React from 'react';
-
-import { messageContainer } from "@/helpers/MessageContainer";
-
-import { IconType } from 'react-icons';
-import * as AiIcons from 'react-icons/ai';
-import * as BiIcons from 'react-icons/bi';
-import * as BsIcons from 'react-icons/bs';
-import * as CgIcons from 'react-icons/cg';
-import * as CiIcons from 'react-icons/ci';
-import * as DiIcons from 'react-icons/di';
-import * as FaIcons from 'react-icons/fa';
-import * as Fa6Icons from 'react-icons/fa6';
-import * as FcIcons from 'react-icons/fc';
-import * as FiIcons from 'react-icons/fi';
-import * as GiIcons from 'react-icons/gi';
-import * as GoIcons from 'react-icons/go';
-import * as GrIcons from 'react-icons/gr';
-import * as HiIcons from 'react-icons/hi';
-import * as Hi2Icons from 'react-icons/hi2';
-import * as ImIcons from 'react-icons/im';
-import * as IoIcons from 'react-icons/io';
-import * as Io5Icons from 'react-icons/io5';
-import * as LiaIcons from 'react-icons/lia';
-import * as LuIcons from 'react-icons/lu';
-import * as MdIcons from 'react-icons/md';
-import * as PiIcons from 'react-icons/pi';
-import * as RiIcons from 'react-icons/ri';
-import * as RxIcons from 'react-icons/rx';
-import * as SiIcons from 'react-icons/si';
-import * as SlIcons from 'react-icons/sl';
-import * as TbIcons from 'react-icons/tb';
-import * as TfiIcons from 'react-icons/tfi';
-import * as TiIcons from 'react-icons/ti';
-import * as VscIcons from 'react-icons/vsc';
-import * as WiIcons from 'react-icons/wi';
-
-interface IconLibrary {
-    [key: string]: { [key: string]: IconType };
-}
-
-const iconLibrary: IconLibrary = {
-    'ai': AiIcons,
-    'bi': BiIcons,
-    'bs': BsIcons,
-    'cg': CgIcons,
-    'ci': CiIcons,
-    'di': DiIcons,
-    'fa': { ...FaIcons, ...Fa6Icons },
-    'fc': FcIcons,
-    'fi': FiIcons,
-    'gi': GiIcons,
-    'go': GoIcons,
-    'gr': GrIcons,
-    'hi': { ...HiIcons, ...Hi2Icons },
-    'im': ImIcons,
-    'io': { ...IoIcons, ...Io5Icons },
-    'lia': LiaIcons,
-    'lu': LuIcons,
-    'md': MdIcons,
-    'pi': PiIcons,
-    'ri': RiIcons,
-    'rx': RxIcons,
-    'si': SiIcons,
-    'sl': SlIcons,
-    'tb': TbIcons,
-    'tfi': TfiIcons,
-    'ti': TiIcons,
-    'vsc': VscIcons,
-    'wi': WiIcons,
-};
-
-/**
- * @deprecated
- * 图标库索引
- */
-const IconParser = (iconName: string, className?: string): React.ReactElement | null => {
-    // 查找大写字母的索引
-    const firstUpperCaseIndex = iconName.search(/[A-Z]/);
-    const secondUpperCaseIndex = iconName.substring(firstUpperCaseIndex + 1).search(/[A-Z]/);
-
-    // 确定前缀
-    const prefixEndIndex = secondUpperCaseIndex !== -1 ? firstUpperCaseIndex + secondUpperCaseIndex + 1 : firstUpperCaseIndex + 1;
-    const prefix = iconName.substring(0, prefixEndIndex).toLowerCase();
-
-    const IconComponent = iconLibrary[prefix]?.[iconName];
-    if (!IconComponent) {
-        messageContainer.info(`${iconName} not found`);
-        return null;
-    }
-
-    return React.createElement(IconComponent, { className });
-};
-
-export default IconParser;
\ No newline at end of file
diff --git a/src/helpers/TextParser.ts b/src/helpers/TextParser.ts
index a68d034..3fdfcbc 100644
--- a/src/helpers/TextParser.ts
+++ b/src/helpers/TextParser.ts
@@ -1,73 +1,32 @@
-import React, { ReactNode } from "react";
-
-import useModeStore from "@/stores/modeStore";
-
-export const LinkParser = (text: string, className?: string): React.ReactElement => {
-    const { editModeStore } = useModeStore.getState();
-
-    const isHttpUrl = text.startsWith('https://') || text.startsWith('http://');
-    const displayText = text.replace(/^https?:\/\//, '');
-
-    if (editModeStore || !isHttpUrl) {
-        return React.createElement('span', { className: className }, displayText);
-    }
-
-    return React.createElement('a',
-        { href: text, className: className, target: "_blank", rel: "noopener noreferrer" },
-        displayText
-    );
-};
-
-export const StrongTextParser = (text: string): ReactNode[] => {
-    const regex = /\*\*(.*?)\*\*/g;
-    const parts: ReactNode[] = [];
-    let lastIndex = 0;
-
-    text.replace(regex, (match: string, p1: string, index: number) => {
-        if (index > lastIndex) {
-            parts.push(text.substring(lastIndex, index));
-        }
-
-        parts.push(React.createElement('strong', {
-            key: index,
-            className: "theme-text-color",
-            style: {
-                color: "rgb(from var(--theme-color) r g b / 85%)",
-            }
-        }, p1));
-
-        lastIndex = index + match.length;
-        return match;
-    });
-
-    if (lastIndex < text.length) {
-        parts.push(text.substring(lastIndex));
-    }
-
-    return parts;
-};
-
-export const TechParser = (text: string): React.ReactElement => {
-    const techItems = text
-        .split(/(?<!\+)\+ *(?=\+?)/)  // 不匹配连续加号
-        .filter(item => item.trim() !== '')
-        .map((item, index) =>
-            React.createElement('span', {
-                key: index,
-                className: "bg-gray-100 rounded py-0.5 px-2 text-xs mr-2 italic font-mono font-bold theme-text-color",
-            }, item.trim())
-        );
-
-    return React.createElement(React.Fragment, {}, ...techItems);
-};
-
-/**
- * 处理不同语言造成的换行情况不同 
- */
-export const formatTitle = (title: string) => {
-    const words = title.split(' ');
-    if (words.length > 1) {
-        return words[0] + '\n' + words.slice(1).join(' ');
-    }
-    return title;
-}
\ No newline at end of file
+import React, { ReactElement } from "react";
+
+import useModeStore from "@/stores/modeStore";
+
+type Rule = [RegExp, string];
+
+const rules: Rule[] = [
+  [/\*\*([^\n]+?)\*\*/g, "<b class='theme-text-color opacity-90'>\$1</b>"], // 加粗
+  [/\*([^\n]+?)\*/g, "<i>\$1</i>"], // 斜体
+  [/(https?:\/\/)([^\s]+)/g, "<a href='\$1\$2' target='_blank'>\$2</a>"], // 链接
+  [/\`([^\n]+?)\`/g, "<span class='bg-gray-100 rounded py-0.5 px-2 text-xs font-mono'>$1</span>"] // 行内代码
+];
+
+const TextParser = (text: string, className?: string): ReactElement => {
+  const { editModeStore } = useModeStore();
+
+  let html = text;
+  rules.forEach(([rule, template]) => {
+    html = html.replace(rule, template);
+  });
+
+  if (editModeStore) {
+    html = html.replace(/<a href='(.*?)' target='_blank'>(.*?)<\/a>/g, "<span>$2</span>");
+  }
+
+  return React.createElement('span', {
+    className,
+    dangerouslySetInnerHTML: { __html: html }
+  });
+};
+
+export default TextParser;
\ No newline at end of file
diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx
index c1b5e2b..7ef4fc7 100644
--- a/src/pages/Dashboard.tsx
+++ b/src/pages/Dashboard.tsx
@@ -38,7 +38,7 @@ const Dashboard: React.FC = () => {
     return (
         <div>
             {/* 顶部栏 */}
-            <div className="fixed print-hidden w-full p-2 bg-slate-600 text-white flex justify-between items-center">
+            <div className="fixed z-10 print-hidden w-full p-2 bg-slate-600 text-white flex justify-between items-center">
                 {/* 左侧设置按钮 */}
                 {!editModeStore && (
                     <div className="flex justify-start ml-4">
diff --git a/src/types/profile.d.ts b/src/types/profile.d.ts
index 689359c..765af5d 100644
--- a/src/types/profile.d.ts
+++ b/src/types/profile.d.ts
@@ -1,18 +1,11 @@
-type ProfileFootnote = {
-  label?: string;
-  content?: string;
-}
-
-type ProfileContact = {
-  icon?: string;
-  key?: string;
-  value?: string;
-  link?: string;
-}
-
-export interface ProfileData {
-  name?: string;
-  avatar?: string;
-  footnote?: ProfileFootnote[];
-  contact?: ProfileContact[];
+type ProfileContact = {
+  icon?: string;
+  value?: string;
+}
+
+export interface ProfileData {
+  name?: string;
+  avatar?: string;
+  footnote?: string[];
+  contact?: ProfileContact[];
 }
\ No newline at end of file