From 422f6231c8e3c32d8eb2b420fa100e3946fe3137 Mon Sep 17 00:00:00 2001
From: BTMuli <bt-muli@outlook.com>
Date: Fri, 16 Jan 2026 23:27:08 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20=E5=A4=84=E7=90=86=20t-link?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

close #156
---
 src/assets/index.scss             |   1 +
 src/components/func/hyperlink.ts  |  56 ++++
 src/components/func/hyperlink.vue | 146 ++++++++++
 src/components/web/t-link.vue     |  33 +++
 src/data/app/hyperlink.json       | 432 ++++++++++++++++++++++++++++++
 src/data/index.ts                 |   4 +-
 src/main.ts                       |   6 +-
 src/types/App/HyperLink.d.ts      |  28 ++
 src/utils/toolFunc.ts             |  10 +-
 9 files changed, 709 insertions(+), 7 deletions(-)
 create mode 100644 src/components/func/hyperlink.ts
 create mode 100644 src/components/func/hyperlink.vue
 create mode 100644 src/components/web/t-link.vue
 create mode 100644 src/data/app/hyperlink.json
 create mode 100644 src/types/App/HyperLink.d.ts

diff --git a/src/assets/index.scss b/src/assets/index.scss
index 74e27181..1f3f7cf2 100644
--- a/src/assets/index.scss
+++ b/src/assets/index.scss
@@ -53,6 +53,7 @@
   --tgi-dialog: 100;
   --tgi-geetest: 100;
   --tgi-loading: 100;
+  --tgi-hyperlink: 100;
   --tgi-snackbar: 9999;
 }
 
diff --git a/src/components/func/hyperlink.ts b/src/components/func/hyperlink.ts
new file mode 100644
index 00000000..ac44100d
--- /dev/null
+++ b/src/components/func/hyperlink.ts
@@ -0,0 +1,56 @@
+/**
+ * hyperlink 组件封装，函数式调用
+ * @since Beta v0.9.1
+ */
+
+import type { ComponentInternalInstance, VNode } from "vue";
+import { h, render } from "vue";
+
+import hyperlink from "./hyperlink.vue";
+
+const hyperlinkId = "tg-func-hyperlink";
+
+export type HyperLinkParams = {
+  /** id */
+  id: string;
+  /** 名称 */
+  name: string;
+  /**
+   * 描述
+   * @remarks htmlText
+   */
+  desc: string;
+};
+
+/**
+ * 自定义 HyperLink 组件
+ * @since Beta v0.6.3
+ */
+type HyperLinkInstance = {
+  exposeProxy: {
+    displayBox: (props: HyperLinkParams) => Promise<void>;
+  };
+} & ComponentInternalInstance;
+
+function renderBox(props: HyperLinkParams): VNode {
+  const container = document.createElement("div");
+  container.id = hyperlinkId;
+  const boxVNode: VNode = h(hyperlink, props);
+  render(boxVNode, container);
+  document.body.appendChild(container);
+  return boxVNode;
+}
+
+let hyperLinkInstance: VNode;
+
+async function showHyperLink(info: HyperLinkParams): Promise<void> {
+  if (hyperLinkInstance !== undefined) {
+    const boxVue = <HyperLinkInstance>hyperLinkInstance.component;
+    await boxVue.exposeProxy.displayBox(info);
+  } else {
+    hyperLinkInstance = renderBox(info);
+    await showHyperLink(info);
+  }
+}
+
+export default showHyperLink;
diff --git a/src/components/func/hyperlink.vue b/src/components/func/hyperlink.vue
new file mode 100644
index 00000000..ce13e341
--- /dev/null
+++ b/src/components/func/hyperlink.vue
@@ -0,0 +1,146 @@
+<!-- HyperLink Overlay -->
+<template>
+  <transition name="func-hyperlink">
+    <div v-show="show || showOuter" class="hyperlink-overlay" @click.self.prevent="handleOuter">
+      <transition name="func-hyperlink-inner">
+        <div v-show="showInner" class="hyperlink-box">
+          <div class="hyperlink-title">{{ data.name }}</div>
+          <div class="hyperlink-desc">
+            <span v-html="parseHtmlText(data.desc)" />
+          </div>
+          <div class="hyperlink-id">{{ data.id }}</div>
+        </div>
+      </transition>
+    </div>
+  </transition>
+</template>
+<script lang="ts" setup>
+import { parseHtmlText } from "@utils/toolFunc.js";
+import { onMounted, ref, shallowRef, watch } from "vue";
+
+import type { HyperLinkParams } from "./hyperlink.js";
+
+const show = ref<boolean>(false);
+const showOuter = ref<boolean>(false);
+const showInner = ref<boolean>(false);
+
+const props = defineProps<HyperLinkParams>();
+const data = shallowRef<HyperLinkParams>(props);
+
+watch(
+  () => show.value,
+  async () => {
+    if (show.value) {
+      showOuter.value = true;
+      await new Promise<void>((resolve) => setTimeout(resolve, 100));
+      showInner.value = true;
+      return;
+    }
+    await new Promise<void>((resolve) => setTimeout(resolve, 100));
+    showInner.value = false;
+    await new Promise<void>((resolve) => setTimeout(resolve, 300));
+    showOuter.value = false;
+  },
+);
+
+onMounted(async () => await displayBox(props));
+
+function handleOuter(): void {
+  show.value = false;
+}
+
+async function displayBox(params: HyperLinkParams): Promise<void> {
+  data.value = params;
+  show.value = true;
+}
+
+defineExpose({ displayBox });
+</script>
+<style lang="scss" scoped>
+.func-hyperlink-outer-enter-active,
+.func-hyperlink-outer-leave-active,
+.func-hyperlink-inner-enter-active {
+  transition: all 0.3s;
+}
+
+.func-hyperlink-inner-leave-active {
+  transition: all 0.5s ease-in-out;
+}
+
+.func-hyperlink-inner-enter-from {
+  opacity: 0;
+  transform: scale(1.5);
+}
+
+.func-hyperlink-inner-enter-to,
+.func-hyperlink-inner-leave-from {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.func-hyperlink-outer-enter-to,
+.func-hyperlink-outer-leave-from {
+  opacity: 1;
+}
+
+.func-hyperlink-outer-enter-from,
+.func-hyperlink-outer-leave-to {
+  opacity: 0;
+}
+
+.func-hyperlink-inner-leave-to {
+  opacity: 0;
+  transform: scale(0);
+}
+
+.hyperlink-overlay {
+  position: fixed;
+  z-index: var(--tgi-hyperlink);
+  top: 0;
+  left: 0;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
+}
+
+.hyperlink-box {
+  position: relative;
+  display: flex;
+  width: 520px;
+  height: 240px;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 10px 16px;
+  border: 1px solid var(--common-shadow-1);
+  border-radius: 8px;
+  background: var(--app-page-bg);
+  box-shadow: 0 0 10px var(--common-shadow-t-1);
+  color: var(--app-page-content);
+}
+
+.hyperlink-title {
+  position: relative;
+  color: var(--common-text-title);
+  font-family: var(--font-title);
+  font-size: 20px;
+}
+
+.hyperlink-desc {
+  position: relative;
+  padding-right: 8px;
+  overflow-y: auto;
+  white-space: pre-wrap;
+}
+
+.hyperlink-id {
+  position: absolute;
+  right: 8px;
+  bottom: 0;
+  font-size: 12px;
+}
+</style>
diff --git a/src/components/web/t-link.vue b/src/components/web/t-link.vue
new file mode 100644
index 00000000..67093cf2
--- /dev/null
+++ b/src/components/web/t-link.vue
@@ -0,0 +1,33 @@
+<template>
+  <span
+    style="cursor: pointer"
+    @click="showOverlay()"
+    v-html="parseHtmlText(decodeURIComponent(props.content))"
+  />
+</template>
+<script lang="ts" setup>
+import showHyperLink from "@comp/func/hyperlink.js";
+import showSnackbar from "@comp/func/snackbar.js";
+import { parseHtmlText } from "@utils/toolFunc.js";
+import { defineProps, onMounted, shallowRef } from "vue";
+
+import { WikiHyperLinkData } from "@/data/index.js";
+
+type TLinkProps = { link: string; content: string };
+const props = defineProps<TLinkProps>();
+
+const info = shallowRef<TGApp.App.HyperLink.HyperLinkItem>();
+
+onMounted(async () => {
+  const find = WikiHyperLinkData.find((i) => i.id.toString() === props.link.slice(1));
+  if (find) info.value = find;
+});
+
+async function showOverlay() {
+  if (!info.value) {
+    showSnackbar.warn("未获取到对应HyperLink数据");
+    return;
+  }
+  await showHyperLink({ ...info.value, id: props.link });
+}
+</script>
diff --git a/src/data/app/hyperlink.json b/src/data/app/hyperlink.json
new file mode 100644
index 00000000..09eea1fe
--- /dev/null
+++ b/src/data/app/hyperlink.json
@@ -0,0 +1,432 @@
+[
+  {
+    "id": 210101,
+    "name": "<color=#0075de>浪涌冲击</color>",
+    "desc": "角色对敌人触发<color=#f39001>蒸发反应</color>时释放，造成<color=#0075de>水元素伤害</color>"
+  },
+  {
+    "id": 210102,
+    "name": "<color=#ef5534>炽燃爆轰</color>",
+    "desc": "角色对敌人触发<color=#f39001>蒸发反应</color>时释放，造成<color=#ef5534>火元素伤害</color>"
+  },
+  {
+    "id": 210201,
+    "name": "<color=#7bb100>萦绕种</color>",
+    "desc": "每产生一枚草原核，都将在当前场上角色周围生成一枚萦绕种（至多同时存在<color=#f39001>4</color>枚）：触碰敌人后将被消耗，对其造成<color=#7bb100>草元素伤害</color>"
+  },
+  {
+    "id": 210301,
+    "name": "<color=#ef5534>荒火冲击</color>",
+    "desc": "通过<color=#f39001>燃烧反应</color>对敌人造成伤害时，将对该敌人进行计数，计数达到<color=#f39001>6</color>时，将清空计数释放，造成<color=#ef5534>火元素范围伤害</color>"
+  },
+  {
+    "id": 210302,
+    "name": "<color=#7bb100>助燃响核</color>",
+    "desc": "角色草元素伤害命中<color=#f39001>燃烧状态</color>的敌人后触发，造成<color=#7bb100>草元素伤害</color>"
+  },
+  {
+    "id": 210401,
+    "name": "<color=#f39001>火晶庇佑</color>",
+    "desc": "使队伍中所有角色获得<color=#f39001>50%</color>火元素与岩元素伤害加成。此外，每<color=#f39001>4</color>秒，将获取附近的结晶反应产生的晶片"
+  },
+  {
+    "id": 210402,
+    "name": "<color=#ef5534>迸火冲击</color>",
+    "desc": "<color=#f39001>火晶庇佑</color>效果持续期间，每<color=#f39001>6</color>秒，将在角色的位置释放，造成<color=#ef5534>火元素范围伤害</color>"
+  },
+  {
+    "id": 210403,
+    "name": "<color=#e09800>岩晶破袭</color>",
+    "desc": "<color=#f39001>火晶庇佑</color>效果持续期间，每<color=#f39001>4</color>秒，将在角色的位置释放，造成<color=#e09800>岩元素范围伤害</color>"
+  },
+  {
+    "id": 210501,
+    "name": "<color=#f39001>雷晶庇佑</color>",
+    "desc": "使队伍中所有角色获得<color=#f39001>50%</color>雷元素与岩元素伤害加成。此外，每<color=#f39001>4</color>秒，将获取附近的结晶反应产生的晶片"
+  },
+  {
+    "id": 210502,
+    "name": "<color=#e09800>轰转磐岩</color>",
+    "desc": "<color=#f39001>雷晶庇佑</color>效果持续期间，角色的攻击命中敌人后，将在敌人的位置降下，造成<color=#e09800>岩元素伤害</color>"
+  },
+  {
+    "id": 210503,
+    "name": "<color=#e09800>轰转磐岩</color>",
+    "desc": "角色每获取<color=#f39001>{0}</color>枚<color=#f39001>雷元素结晶反应</color>产生的晶片，将对附近的一名敌人降下，造成<color=#e09800>岩元素伤害</color>"
+  },
+  {
+    "id": 210601,
+    "name": "<color=#f39001>易碎</color>",
+    "desc": "敌人的火元素与雷元素抗性降低<color=#f39001>5.5%</color>，至多叠加4层"
+  },
+  {
+    "id": 210602,
+    "name": "<color=#ef5534>爆炎火球</color>",
+    "desc": "对处于易碎效果影响下的敌人造成雷元素伤害后，对场上<color=#f39001>所有</color>处于易碎效果的敌人释放，造成<color=#ef5534>火元素伤害</color>"
+  },
+  {
+    "id": 210603,
+    "name": "<color=#b863ee>霆雷打击</color>",
+    "desc": "对处于易碎效果影响下的敌人造成火元素伤害后，对场上<color=#f39001>所有</color>处于易碎效果的敌人释放，造成<color=#b863ee>雷元素伤害</color>"
+  },
+  {
+    "id": 210701,
+    "name": "<color=#7bb100>茂雷飞核</color>",
+    "desc": "角色对敌人触发原激化、超激化或者蔓激化反应时发射，命中敌人后爆炸，造成<color=#7bb100>草元素范围伤害</color>"
+  },
+  {
+    "id": 210702,
+    "name": "<color=#b863ee>丰饶落雷</color>",
+    "desc": "角色对处于原激化状态下的敌人造成雷元素或草元素伤害后降下，造成<color=#b863ee>雷元素伤害</color>"
+  },
+  {
+    "id": 210901,
+    "name": "<color=#f39001>风之祝祷·水</color>",
+    "desc": "角色触发扩散反应造成的伤害提升<color=#f39001>80%</color>，角色的生命值上限提升<color=#f39001>8%</color>"
+  },
+  {
+    "id": 210902,
+    "name": "<color=#0075de>疗愈水球</color>",
+    "desc": "记录角色治疗的生命值回复量，持续时间结束后爆炸，基于记录的治疗量和<color=#f39001>风之祝祷·水</color>的层数对周围的敌人造成<color=#0075de>水元素范围伤害</color>"
+  },
+  {
+    "id": 210903,
+    "name": "<color=#0075de>水瀑旋涡</color>",
+    "desc": "牵引附近的敌人，并基于<color=#f39001>风之祝祷·水</color>的层数造成<color=#0075de>水元素范围伤害</color>"
+  },
+  {
+    "id": 211001,
+    "name": "<color=#f39001>风之祝祷·雷</color>",
+    "desc": "角色触发扩散反应造成的伤害提升<color=#f39001>80%</color>，且每次获得<color=#f39001>风之祝祷·雷</color>时为队伍中所有角色恢复<color=#f39001>1.5</color>点元素能量"
+  },
+  {
+    "id": 211002,
+    "name": "<color=#b863ee>迅切雷刃</color>",
+    "desc": "角色施放元素爆发时，将生成<color=#f39001>迅切印记</color>。当前场上角色的攻击命中敌人时，将消耗迅切印记释放<color=#b863ee>迅切雷刃</color>，基于<color=#f39001>风之祝祷·雷</color>的层数，对路径上的敌人造成<color=#b863ee>雷元素伤害</color>"
+  },
+  {
+    "id": 211003,
+    "name": "<color=#b863ee>霆跃雷击</color>",
+    "desc": "<color=#f39001>风之祝祷·雷</color>持续期间，下落攻击命中敌人时释放，基于风之祝祷·雷的层数计算伤害，造成<color=#b863ee>雷元素范围伤害</color>"
+  },
+  {
+    "id": 211101,
+    "name": "<color=#f39001>电涌</color>",
+    "desc": "队伍中所有角色触发<color=#f39001>感电反应</color>造成的伤害提升<color=#f39001>250%</color>，触发<color=#f39001>月感电反应</color>造成的伤害提升<color=#f39001>70%</color>"
+  },
+  {
+    "id": 211102,
+    "name": "<color=#b863ee>浮雷攻核</color>",
+    "desc": "电涌效果持续期间，跟随当前场上角色生成；角色的攻击命中敌人后，将向敌人释放3枚雷弹，造成<color=#b863ee>雷元素伤害</color>"
+  },
+  {
+    "id": 211103,
+    "name": "<color=#f39001>雳云</color>",
+    "desc": "电涌效果持续期间生成，每<color=#f39001>2</color>秒随机进行一次以下形式的攻击：\n1.<color=#b863ee>雳云落雷</color>：对影响范围内的敌人造成<color=#b863ee>雷元素伤害</color>，为当前场上角色恢复<color=#f39001>2</color>点元素能量；\n2.<color=#0075de>雳云暴雨</color>：对影响范围内的敌人造成<color=#0075de>水元素伤害</color>，为当前场上角色恢复<color=#f39001>5%</color>生命值"
+  },
+  {
+    "id": 211201,
+    "name": "<color=#f39001>火晶庇佑</color>",
+    "desc": "使队伍中所有角色获得<color=#f39001>70%</color>火元素与岩元素伤害加成。此外，每<color=#f39001>4</color>秒，将获取附近的结晶反应产生的晶片"
+  },
+  {
+    "id": 211202,
+    "name": "<color=#e09800>岩晶破袭</color>",
+    "desc": "<color=#f39001>火晶庇佑</color>效果持续期间，将间歇性在角色的位置释放，造成<color=#e09800>岩元素范围伤害</color>"
+  },
+  {
+    "id": 211203,
+    "name": "<color=#e09800>轰转磐岩</color>",
+    "desc": "<color=#f39001>火晶庇佑</color>效果持续期间，角色的普通攻击、重击或下落攻击命中敌人时，将在敌人的位置降下，造成<color=#e09800>岩元素伤害</color>"
+  },
+  {
+    "id": 211301,
+    "name": "<color=#f39001>冰晶庇佑</color>",
+    "desc": "使队伍中所有角色获得<color=#f39001>50%</color>冰元素与岩元素伤害加成。此外，每<color=#f39001>4</color>秒，将获取附近的结晶反应产生的晶片"
+  },
+  {
+    "id": 211302,
+    "name": "<color=#e09800>岩晶强袭</color>",
+    "desc": "<color=#f39001>冰晶庇佑</color>效果持续期间，将间歇性在角色的位置释放，造成<color=#e09800>岩元素范围伤害</color>"
+  },
+  {
+    "id": 211303,
+    "name": "<color=#e09800>碎冰迸石</color>",
+    "desc": "<color=#f39001>冰晶庇佑</color>效果持续期间，队伍中冰元素或岩元素角色造成暴击时，将在敌人的位置降下，造成<color=#e09800>岩元素伤害</color>"
+  },
+  {
+    "id": 211401,
+    "name": "<color=#2bb7d5>冰霜崩破</color>",
+    "desc": "当前场上的<color=#ef5534>火元素</color>角色触发融化反应后释放，造成<color=#2bb7d5>冰元素伤害</color>"
+  },
+  {
+    "id": 211402,
+    "name": "<color=#ef5534>炽升火柱</color>",
+    "desc": "当前场上的<color=#2bb7d5>冰元素</color>角色触发融化反应后释放，造成<color=#ef5534>火元素伤害</color>"
+  },
+  {
+    "id": 211403,
+    "name": "<color=#f39001>高度温差</color>",
+    "desc": "角色触发融化反应造成的伤害提升<color=#f39001>30%</color>"
+  },
+  {
+    "id": 211501,
+    "name": "<color=#f39001>风之祝祷·火</color>",
+    "desc": "角色触发扩散反应造成的伤害提升<color=#f39001>80%</color>，角色的攻击力提升<color=#f39001>9%</color>。"
+  },
+  {
+    "id": 211502,
+    "name": "<color=#ef5534>焚风</color>",
+    "desc": "当前场上角色的攻击对敌人造成伤害时，将消耗该角色的生命值释放，基于风之祝祷·火的层数计算伤害，造成<color=#ef5534>火元素范围伤害</color>"
+  },
+  {
+    "id": 211503,
+    "name": "<color=#f39001>炽岚</color>",
+    "desc": "队伍中的<color=#f39001>火元素或风元素</color>角色登场时，将根据该角色的<color=#f39001>元素类型</color>释放，基于风之祝祷·火的层数，造成对应元素类型的范围伤害"
+  },
+  {
+    "id": 211601,
+    "name": "<color=#f39001>寒意</color>",
+    "desc": "队伍中所有冰元素和水元素角色的暴击伤害提升<color=#f39001>40%</color>"
+  },
+  {
+    "id": 211602,
+    "name": "<color=#0075de>寒水震波</color>",
+    "desc": "当前场上的<color=#2bb7d5>冰元素</color>角色对敌人触发冻结反应后释放，造成<color=#0075de>水元素范围伤害</color>"
+  },
+  {
+    "id": 211603,
+    "name": "<color=#2bb7d5>冽冰震波</color>",
+    "desc": "当前场上的<color=#0075de>水元素</color>角色对敌人触发冻结反应后释放，造成<color=#2bb7d5>冰元素范围伤害</color>"
+  },
+  {
+    "id": 211604,
+    "name": "<color=#f39001>冰裂</color>",
+    "desc": "敌人的水元素与冰元素抗性降低<color=#f39001>8%</color>，至多叠加<color=#f39001>3</color>层"
+  },
+  {
+    "id": 211701,
+    "name": "<color=#f39001>低阻</color>",
+    "desc": "敌人的冰元素和雷元素抗性降低<color=#f39001>3%</color>，物理抗性降低<color=#f39001>6%</color>，至多叠加<color=#f39001>6</color>层"
+  },
+  {
+    "id": 211702,
+    "name": "<color=#f39001>涌现震波</color>",
+    "desc": "角色对处于<color=#f39001>低阻</color>效果影响下的敌人造成<color=#f39001>物理伤害</color>后释放，造成物理伤害，每<color=#f39001>3</color>秒至多触发一次"
+  },
+  {
+    "id": 211801,
+    "name": "<color=#f39001>水晶庇佑</color>",
+    "desc": "使队伍中所有角色获得<color=#f39001>70%</color>水元素与岩元素伤害加成，月结晶反应造成的伤害提升<color=#f39001>75%</color>。此外，每<color=#f39001>4</color>秒，将获取附近的结晶反应产生的晶片"
+  },
+  {
+    "id": 211802,
+    "name": "<color=#e09800>岩晶轰袭</color>",
+    "desc": "<color=#f39001>水晶庇佑</color>效果持续期间，将间歇性在角色的位置释放，造成<color=#e09800>岩元素范围伤害</color>"
+  },
+  {
+    "id": 211803,
+    "name": "<color=#e09800>涧石</color>",
+    "desc": "<color=#f39001>水晶庇佑</color>效果持续期间，队伍中水元素或岩元素角色受到治疗时，将在敌人的位置降下，造成<color=#e09800>岩元素伤害</color>"
+  },
+  {
+    "id": 211804,
+    "name": "<color=#f39001>寒冰荆棘</color>",
+    "desc": "每<color=#f39001>2</color>秒对周围敌人各造成一次<color=#f39001>冰元素和草元素范围伤害</color>，场上最多同时存在两根寒冰荆棘"
+  },
+  {
+    "id": 211805,
+    "name": "<color=#b863ee>电气蔓棘</color>",
+    "desc": "<color=#f39001>寒冰荆棘</color>范围内，角色的雷元素攻击命中敌人后，<color=#f39001>寒冰荆棘</color>将转化为一根存在<color=#f39001>10</color>秒的电气蔓棘，攻击频率提升至每秒<color=#f39001>1</color>次，且造成<color=#f39001>1.5</color>倍雷元素范围伤害"
+  },
+  {
+    "id": 211806,
+    "name": "<color=#f39001>磁化荆棘</color>",
+    "desc": "不具有攻击效果，使附近的敌人受到角色的<color=#f39001>冰元素、草元素、雷元素以及物理攻击伤害提升</color>。场上每存在一根磁化荆棘，将获得<color=#f39001>45%</color>的上述提升效果，至多提升<color=#f39001>90%</color>"
+  },
+  {
+    "id": 211901,
+    "name": "<color=#f39001>风之祝祷·冰</color>",
+    "desc": "角色触发扩散反应造成的伤害提升<color=#f39001>80%</color>，角色的暴击伤害提升<color=#f39001>12%</color>"
+  },
+  {
+    "id": 211902,
+    "name": "<color=#2bb7d5>肃蚀</color>",
+    "desc": "<color=#f39001>风之祝祷·冰</color>持续期间，角色的攻击命中敌人时施加，基于<color=#f39001>风之祝祷·冰</color>的层数间歇性造成<color=#2bb7d5>冰元素伤害</color>"
+  },
+  {
+    "id": 211903,
+    "name": "<color=#19c78e>冰岚</color>",
+    "desc": "<color=#f39001>风之祝祷·冰</color>持续期间，角色冲刺时释放，牵引附近的敌人，并基于<color=#f39001>风之祝祷·冰</color>的层数造成<color=#19c78e>风元素伤害</color>"
+  },
+  {
+    "id": 11120001,
+    "name": "低温冷藏模式",
+    "desc": "<color=#FFD780FF>点按</color>\n以「低温冷藏」模式启动全频谱多重任务厨艺机关，对周围的敌人造成<color=#99FFFFFF>冰元素范围伤害</color>。\n\n<color=#FFD780FF>厨艺机关·低温冷藏模式</color>\n将跟随当前场上角色，并将间歇性对附近的敌人发射「冻霜芭菲」，造成<color=#99FFFFFF>冰元素伤害</color>。"
+  },
+  {
+    "id": 11120002,
+    "name": "即兴烹饪模式",
+    "desc": "<color=#FFD780FF>厨艺机关·即兴烹饪模式</color>\n·在场上放置厨艺机关。厨艺机关可以吸收元素攻击。吸收的元素能量达到临界值时，将使爱可菲事先放入其中的食材转化为美食。\n·爱可菲需要时间采购新的食材，每周只能通过这种方式制作一定数量的料理。制作料理的次数每周一凌晨4点重置。"
+  },
+  {
+    "id": 11130001,
+    "name": "援护射击",
+    "desc": "在夜魂加持状态下，伊法的普通攻击将会转为进行援护射击。\n<color=#FFD780FF>点按</color>\n发射秘药弹。\n<color=#FFD780FF>长按</color>\n持续发射秘药弹。\n<color=#FFD780FF>秘药弹</color>\n造成具有夜魂性质的<color=#80FFD7FF>风元素伤害</color>，并在命中敌人时为队伍中附近的所有角色恢复生命值，回复量受益于伊法自己的元素精通。"
+  },
+  {
+    "id": 11130002,
+    "name": "救援要义",
+    "desc": "上限为150点。基于伊法持有的救援要义，每1点救援要义会使队伍中附近的角色触发的扩散反应与感电反应造成的伤害提升1.5%，月感电反应造成的伤害提升0.2%。救援要义将在伊法的夜魂加持结束时被移除。"
+  },
+  {
+    "id": 11130003,
+    "name": "夜魂加持·伊法",
+    "desc": "持续消耗夜魂值。夜魂值耗尽时，或是再次施放时，伊法的夜魂加持将会结束。夜魂加持状态具有如下特性：\n·在咔库库的帮助下悬浮，提升伊法的移动速度与抗打断能力，在这种状态下，伊法将持续消耗夜魂值，维持悬浮状态，进行冲刺或抬升高度时，将额外消耗夜魂值。\n·进行普通攻击时，将依据点按、长按，转为以不同的方式进行「援护射击」。"
+  },
+  {
+    "id": 11130004,
+    "name": "镇静标记",
+    "desc": "该效果会在片刻后爆发消失，并造成对应元素属性的范围伤害。至多对4名命中的敌人施加「镇静标记」；敌人无法同时处于多种元素属性的「镇静标记」状态下。"
+  },
+  {
+    "id": 11130005,
+    "name": "蛇之狡谋",
+    "desc": "丝柯克可以消耗蛇之狡谋，以维持七相一闪模式，或是施放元素爆发极恶技·灭。\n\n丝柯克可以通过以下方式获得蛇之狡谋：\n·施放元素战技极恶技·闪后；\n·触发突破天赋理外之理中汲取虚境裂隙的效果后。\n\n丝柯克在七相一闪模式下退场时，或七相一闪模式结束时，将移除丝柯克持有的蛇之狡谋。"
+  },
+  {
+    "id": 11130006,
+    "name": "七相一闪",
+    "desc": "施放元素战技<color=#FFD780FF>极恶技·闪</color>时，丝柯克将在一段时间内切换至该模式，并具有如下特性：\n·持续消耗蛇之狡谋；\n·提升普通攻击与重击的攻击范围，以及丝柯克的抗打断能力；\n·进行普通攻击、重击和下落攻击时，将转为造成无法被附魔覆盖的<color=#99FFFFFF>冰元素伤害</color>；\n·元素爆发<color=#FFD780FF>极恶技·灭</color>将会被替换为特殊的元素爆发<color=#FFD780FF>极恶技·尽</color>；\n·丝柯克进行冲刺时，能够在水面上移动；\n·蛇之狡谋耗尽时，或持续时间结束时，丝柯克将退出该模式，并使元素战技进入冷却。"
+  },
+  {
+    "id": 11130007,
+    "name": "理外之理",
+    "desc": "队伍中附近的角色对敌人触发冻结、超导、冰元素扩散或冰元素结晶反应时，将在敌人附近创造一枚虚境裂隙。该效果每2.5秒至多触发一次，场上至多存在3枚丝柯克自己创造的虚境裂隙。\n\n丝柯克可以通过以下方式，汲取附近一定范围内的虚境裂隙：\n·在七相一闪模式下进行的重击命中敌人时；\n·施放七相一闪模式下的特殊元素爆发<color=#FFD780FF>极恶技·尽</color>时；\n·长按施放元素战技<color=#FFD780FF>极恶技·闪</color>进行快速移动时。\n\n每汲取一枚虚境裂隙，丝柯克将获得8点蛇之狡谋。"
+  },
+  {
+    "id": 11130008,
+    "name": "万流归寂",
+    "desc": "队伍中附近的元素类型为<color=#80C0FFFF>水元素</color>的角色的<color=#80C0FFFF>水元素</color>攻击命中敌人时，或是队伍中附近的元素类型为<color=#99FFFFFF>冰元素</color>的其他角色的<color=#99FFFFFF>冰元素</color>攻击命中敌人时，丝柯克将获得一层持续20秒的死河渡断效果，至多叠加3层，每层独立计算持续时间。\n每名角色至多通过这种方式使丝柯克获得1层死河渡断效果。\n每层死河渡断效果会使丝柯克在七相一闪模式下时进行的普通攻击造成原本110%/120%/170%的伤害，且施放的元素爆发<color=#FFD780FF>极恶技·灭</color>造成原本105%/115%/160%的伤害。"
+  },
+  {
+    "id": 11130009,
+    "name": "雾雨秘迹",
+    "desc": "敌人或队伍中附近的角色接触到雾雨秘迹后，依据接触者的不同，将会产生不同的效果：\n若敌人接触到雾雨秘迹，雾雨秘迹将会发生爆炸，对周围的敌人造成<color=#80C0FFFF>水元素范围伤害</color>；\n若队伍中附近的角色接触到雾雨秘迹，雾雨秘迹会将接触者高高弹起。\n\n同时只能存在一个由塔利雅自己创造的雾雨秘迹。"
+  },
+  {
+    "id": 11130010,
+    "name": "西风之眷",
+    "desc": "塔利雅施放元素爆发<color=#FFD780FF>纯耀的祷咏</color>时，将会为队伍中自己的角色赋予该效果。\n持续期间，圣眷护盾在效果结束时，或因伤害破碎时，塔利雅可以消耗一层祝颂效果，重新唤出圣眷护盾。"
+  },
+  {
+    "id": 11130011,
+    "name": "祝颂",
+    "desc": "塔利雅可以通过以下方式获得祝颂效果：\n·队伍中自己的当前场上角色处于西风之眷效果影响下时，普通攻击每命中敌人4次，塔利雅将获得X层祝颂效果；\n·触发突破天赋风色柔愿的眷宠的效果后。\n\n每次西风之眷效果持续期间，塔利雅至多获得X层祝颂效果。"
+  },
+  {
+    "id": 11160001,
+    "name": "薇尔琪塔",
+    "desc": "与伊涅芙一同战斗的好帮手，可以通过施放元素战技或元素爆发召唤至场上。\n若周围存在敌人，每隔2秒，薇尔琪塔将快速移动至一名敌人附近，对其进行放电攻击，造成<color=#FFACFFFF>雷元素范围伤害</color>。\n同时至多存在一个伊涅芙自己创造的薇尔琪塔。\n\n此外，在挪德卡莱，似乎可以通过某种途径来改变薇尔琪塔的外观…"
+  },
+  {
+    "id": 11190001,
+    "name": "霜林圣域",
+    "desc": "用以护守咏月使的术阵，通过施放元素战技<color=#FFD780FF>圣言述咏·终宵永眠</color>唤出。\n霜林圣域将跟随当前场上角色，每2秒对术阵中的敌人造成一次<color=#99FF88FF>草元素范围伤害</color>，该伤害视为元素战技伤害。"
+  },
+  {
+    "id": 11190002,
+    "name": "月咏",
+    "desc": "用以纺出祷歌的乐节，可以在施放元素爆发时或施放元素爆发后的一段时间内转化为提升绽放、超绽放、烈绽放、月绽放反应伤害的苍色祷歌。\n菈乌玛消耗草露以长按施放元素战技<color=#FFD780FF>圣言述咏·终宵永眠</color>时，依据消耗的草露数，每一枚草露都会使菈乌玛获得一层「月咏」。"
+  },
+  {
+    "id": 11190003,
+    "name": "苍色祷歌",
+    "desc": "咏月使世代传承的祷歌，能够提升绽放、超绽放、烈绽放、月绽放反应造成的伤害。\n\n菈乌玛可以通过以下方式获得苍色祷歌：\n·施放元素爆发<color=#FFD780FF>圣言述咏·众心为月</color>时；\n·触发元素爆发<color=#FFD780FF>圣言述咏·众心为月</color>中消耗「月咏」的效果时；\n·触发命之座<color=#FFD780FF>「我愿将这血与泪奉予月明」</color>中霜林圣域的效果时。\n\n队伍中的角色造成绽放、超绽放、烈绽放、月绽放反应伤害时，将消耗一层「苍色祷歌」，提升造成的伤害，提升值基于菈乌玛的元素精通。上述伤害同时命中多名敌人时，会依据命中敌人的数量消耗「苍色祷歌」层数。\n每层「苍色祷歌」独立计算持续时间。"
+  },
+  {
+    "id": 11190004,
+    "name": "宵色夜咏",
+    "desc": "队伍中的角色触发的绽放、超绽放、烈绽放反应造成的伤害能够造成暴击，暴击率固定为{PARAM#P1192101|1S100}%，暴击伤害固定为{PARAM#P1192101|2S100}%。该效果提供的暴击率可以与使对应元素反应能够造成暴击的同类效果提供的暴击率叠加。"
+  },
+  {
+    "id": 11190005,
+    "name": "月华圣咏",
+    "desc": "队伍中的角色造成的月绽放反应伤害，暴击率提升{PARAM#P1192101|3S100}%，暴击伤害提升{PARAM#P1192101|4S100}%。"
+  },
+  {
+    "id": 11190007,
+    "name": "擢升",
+    "desc": "特殊的伤害提升效果，与其他的伤害提升效果分别独立计算。"
+  },
+  {
+    "id": 11190008,
+    "name": "草露",
+    "desc": "队伍中的角色触发月绽放反应后，会为队伍提供的资源。\n触发月绽放反应后的2.5秒内，每2.5秒便会为队伍提供一枚草露，草露上限为三枚。持续期间，再次触发月绽放反应时，将刷新上述效果的持续时间。"
+  },
+  {
+    "id": 11200001,
+    "name": "雷霆交响",
+    "desc": "消耗更少的元素能量便可以施放的特殊元素爆发。菲林斯造成一次视为月感电反应伤害的<color=#FFACFFFF>雷元素范围伤害</color>。\n<color=#FFD780FF>月兆·满辉</color>：若附近存在雷暴云，还会额外造成一次视为月感电反应伤害的<color=#FFACFFFF>雷元素范围伤害</color>。"
+  },
+  {
+    "id": 11220001,
+    "name": "影舞",
+    "desc": "施放元素战技<color=#FFD780FF>弈术·千夜一舞</color>后，奈芙尔将会进入该状态。\n处于「影舞」状态下时，若拥有至少1枚草露，奈芙尔施放的重击将会被替换为特殊的重击「幻戏」。\n「影舞」状态将在奈芙尔施放{PARAM#P1223201|3S1}次幻戏或持续时间结束时解除。"
+  },
+  {
+    "id": 11220002,
+    "name": "幻戏",
+    "desc": "处于元素战技<color=#FFD780FF>弈术·千夜一舞</color>造成的「影舞」状态下时，若拥有至少1枚草露，奈芙尔施放的重击将会被替换为特殊的、不消耗体力的重击「幻戏」。\n奈芙尔召唤出自身的虚影，对敌人发起协同攻击，自身与虚影分别依次造成2/3段<color=#99FF88FF>草元素范围伤害</color>。虚影造成的伤害视为月绽放反应伤害，每次施放幻戏后首次召唤虚影时，将消耗一枚草露。"
+  },
+  {
+    "id": 11220003,
+    "name": "伪秘之帷",
+    "desc": "奈芙尔通过突破天赋「月下的豪赌」吸收诳言之核后获得的效果，可以提升幻戏造成的伤害。\n每层「伪秘之帷」都会使奈芙尔施放的幻戏造成比原本高{PARAM#P1222101|6S100}%的伤害，初始至多叠加{PARAM#P1222101|1S1}层，持续{PARAM#P1222101|2S1}秒，每层独立计算持续时间。"
+  },
+  {
+    "id": 11230001,
+    "name": "精质转变",
+    "desc": "杜林施放元素战技<color=#FFD780FF>二元式·聚分熔炼</color>后获得的效果，持续6秒。\n持续期间，杜林可以通过点按元素战技进入<color=#FFD780FF>白化之是</color>状态，或是通过点按普通攻击进入<color=#FFD780FF>黑度之否</color>状态。\n在两种状态下，杜林会获得不同的强化效果，并可以分别施放不同的元素爆发。"
+  },
+  {
+    "id": 11240001,
+    "name": "呼噜噜秘藏瓶",
+    "desc": "雅珂达施放元素战技<color=#FFD780FF>奇策·财富分配方案</color>后取出的小型元素瓶。\n雅珂达处于「掠影追袭」状态下时，若附近的敌人处于<color=#FF9999FF>火元素</color>、<color=#80C0FFFF>水元素</color>、<color=#FFACFFFF>雷元素</color>或<color=#99FFFFFF>冰元素</color>附着下，呼噜噜秘藏瓶会转化为对应的元素类型，并持续进行装填，且会按照<color=#FF9999FF>火元素</color>、<color=#80C0FFFF>水元素</color>、<color=#FFACFFFF>雷元素</color>、<color=#99FFFFFF>冰元素</color>的优先级进行转化。每次施放元素战技后，呼噜噜秘藏瓶至多能进行一次转化。\n呼噜噜秘藏瓶装满时，雅珂达将会退出「掠影追袭」状态，对附近的敌人造成一次<color=#80FFD7FF>风元素伤害</color>，并清空呼噜噜秘藏瓶。\n每次施放元素战技时，雅珂达都会重新取出一个新的呼噜噜秘藏瓶。\n\n<color=#FFD780FF>月兆·满辉</color>：<color=#FFD780FF>呼噜噜秘藏瓶</color>装满时，雅珂达不会立刻清空<color=#FFD780FF>呼噜噜秘藏瓶</color>，而是会在接下来的一段时间内，持续消耗瓶中装填的元素，并间歇性向附近的敌人发射<color=#FFD780FF>软绒绒猫猫球</color>，造成<color=#FFD780FF>呼噜噜秘藏瓶</color>对应元素类型的伤害。"
+  },
+  {
+    "id": 11240002,
+    "name": "猫型家用互助协调器",
+    "desc": "曾是宝藏猎人的雅珂达随身携带的小道具之一，施放元素爆发<color=#FFD780FF>秘器·猎人的七道具</color>后取出。\n猫型家用互助协调器将会持续为队伍中自己的当前场上角色恢复生命值；如果受到治疗的角色生命值高于70%，还会同时为队伍中附近生命值最低的角色恢复生命值。\n\n<color=#FFD780FF>月兆·满辉</color>：若附近的敌人处于<color=#FF9999FF>火元素</color>、<color=#80C0FFFF>水元素</color>、<color=#FFACFFFF>雷元素</color>或<color=#99FFFFFF>冰元素</color>附着下，猫型家用互助协调器将会转化为对应的元素类型，并会按照<color=#FF9999FF>火元素</color>、<color=#80C0FFFF>水元素</color>、<color=#FFACFFFF>雷元素</color>、<color=#99FFFFFF>冰元素</color>的优先级进行转化。每次取出猫型家用互助协调器后，至多通过这种方式进行一次元素转化。触发元素转化后，猫型家用互助协调器将会间歇性攻击附近至多3名敌人，造成对应元素伤害。"
+  },
+  {
+    "id": 10050001,
+    "name": "额外强化效果",
+    "desc": "每与一种元素进行过共鸣，旅行者便会获得对应的属性提升：\n<color=#80FFD7FF>风元素</color>：暴击率提升10%；\n<color=#FFE699FF>岩元素</color>：防御力提升20%；\n<color=#FFACFFFF>雷元素</color>：元素充能效率提升20%；\n<color=#99FF88FF>草元素</color>：元素精通提升60点；\n<color=#80C0FFFF>水元素</color>：生命值提升20%；\n<color=#FF9999FF>火元素</color>：攻击力提升20%；\n<color=#99FFFFFF>冰元素</color>：暴击伤害提升20%。"
+  },
+  {
+    "id": 11250001,
+    "name": "引力涟漪",
+    "desc": "施放元素战技<color=#FFD780FF>万古潮汐</color>后，哥伦比娅将唤出<color=#FFD780FF>引力涟漪</color>。\n引力涟漪将跟随当前场上角色，并持续对周围的敌人造成<color=#80C0FFFF>水元素范围伤害</color>。\n\n此外，引力涟漪存在期间，队伍中附近的角色触发月曜反应时，或造成月曜反应伤害时，哥伦比娅将在接下来的2秒内获得新月之示效果，持续积攒<color=#FFD780FF>引力值</color>，每2秒可以积攒20点引力值。\n引力值上限为60点，且会在引力涟漪持续时间结束时被移除。\n当引力值积攒至上限时，将触发特殊的<color=#FFD780FF>引力干涉</color>，依据为哥伦比娅积攒最多引力值的月曜反应类型，分别产生不同的效果。若为哥伦比娅积攒最多引力值的月曜反应类型为：\n·<color=#FFD780FF>月感电反应</color>：引力干涉将造成一次<color=#FFACFFFF>雷元素范围伤害</color>，该伤害视为月感电反应伤害；\n·<color=#FFD780FF>月绽放反应</color>：引力干涉将对周围的敌人发射5枚月露之印，造成<color=#99FF88FF>草元素伤害</color>，该伤害视为月绽放反应伤害；\n·<color=#FFD780FF>月结晶反应</color>：引力干涉将造成一次<color=#FFE699FF>岩元素范围伤害</color>，该伤害视为月结晶反应伤害。"
+  },
+  {
+    "id": 11250002,
+    "name": "月之领域",
+    "desc": "施放元素爆发<color=#FFD780FF>她的乡愁</color>后，哥伦比娅唤出的领域。\n当前场上角色处于<color=#FFD780FF>月之领域</color>中时，队伍中的所有角色造成的月曜反应伤害将会提升。"
+  },
+  {
+    "id": 11250003,
+    "name": "山月草露",
+    "desc": "由哥伦比娅的固有天赋<color=#FFD780FF>新月自己的法则</color>提供的、特殊的草露资源，与草露分别计算上限与持续时间。\n队伍拥有的草露耗尽时，将转而消耗<color=#FFD780FF>山月草露</color>。\n<color=#FFD780FF>山月草露</color>上限为三枚。"
+  },
+  {
+    "id": 11270001,
+    "name": "「夜莺之歌」",
+    "desc": "叶洛亚施放元素爆发<color=#FFD780FF>鉴照无影</color>后获得的效果，可以提升当前场上角色造成的<color=#FFE699FF>岩元素伤害</color>。"
+  },
+  {
+    "id": 11260001,
+    "name": "月转时隙",
+    "desc": "施放元素战技<color=#FFD780FF>天地忽然身</color>后，兹白将切换至该模式。该模式至多持续{PARAM#P1263201|4S1}秒，并具有以下特性：\n·进行普通攻击与重击时，将转为造成无法被附魔覆盖的<color=#FFE699FF>岩元素伤害</color>；\n·元素战技<color=#FFD780FF>天地忽然身</color>将会被替换为特殊的元素战技<color=#FFD780FF>灵驹飞踏</color>：当兹白拥有至少70点<color=#FFD780FF>「时隙浮光」</color>时，兹白可以消耗70点「时隙浮光」，施放灵驹飞踏，造成两次<color=#FFE699FF>岩元素伤害</color>，其中的第二段伤害视为月结晶反应伤害。\n\n<color=#FFD780FF>「时隙浮光」</color>上限为100点，兹白可以通过以下方式积攒「时隙浮光」：\n·处于<color=#FFD780FF>「月转时隙」</color>模式下时，每秒积攒10点「时隙浮光」；\n·普通攻击命中敌人时，会积攒5点「时隙浮光」，每0.5秒至多通过这种方式为兹白积攒一次「时隙浮光」。\n\n<color=#FFD780FF>月兆·满辉</color> \n队伍中附近的角色触发月结晶反应时，也会为兹白积攒35点<color=#FFD780FF>「时隙浮光」</color>，每4秒至多通过这种方式为兹白积攒一次「时隙浮光」，施放特殊元素战技<color=#FFD780FF>灵驹飞踏</color>将会重置通过这种方式积攒<color=#FFD780FF>「时隙浮光」</color>的冷却时间。\n\n施放4次<color=#FFD780FF>灵驹飞踏</color>后，或持续时间结束时，兹白将退出该模式。"
+  }
+]
diff --git a/src/data/index.ts b/src/data/index.ts
index 575f61b8..5dcf8ddd 100644
--- a/src/data/index.ts
+++ b/src/data/index.ts
@@ -1,6 +1,6 @@
 /**
  * 数据文件入口
- * @since Beta v0.9.1
+ * @since Beta v0.9.2
  */
 
 import type { Schema } from "ajv";
@@ -11,6 +11,7 @@ import calendar from "./app/calendar.json" with { type: "json" };
 import character from "./app/character.json" with { type: "json" };
 import gacha from "./app/gacha.json" with { type: "json" };
 import gachaB from "./app/gachaB.json" with { type: "json" };
+import hyperlink from "./app/hyperlink.json" with { type: "json" };
 import nameCards from "./app/namecard.json" with { type: "json" };
 import weapon from "./app/weapon.json" with { type: "json" };
 import arcBirCalendar from "./archive/birth_calendar.json" with { type: "json" };
@@ -42,6 +43,7 @@ export const ArcBirRole: Array<TGApp.Archive.Birth.RoleItem> = arcBirRole;
 // Wiki
 export const WikiWeaponData: Array<TGApp.App.Weapon.WikiItem> = wikiWeapon;
 export const WikiMaterialData: Array<TGApp.App.Material.WikiItem> = wikiMaterial;
+export const WikiHyperLinkData: TGApp.App.HyperLink.AppHyperLink = hyperlink;
 
 const avatarFiles = import.meta.glob("./WIKI/character/*.json");
 
diff --git a/src/main.ts b/src/main.ts
index d47cda42..848932c4 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,14 +1,15 @@
 /**
  * 应用入口
- * @since Beta v0.9.1
+ * @since Beta v0.9.2
  */
 
 import type { FeedbackInternalOptions } from "@sentry/core";
 import * as Sentry from "@sentry/vue";
-import { createApp } from "vue";
+import { createApp, defineCustomElement } from "vue";
 import { createVuetify } from "vuetify";
 
 import App from "./App.vue";
+import TLink from "./components/web/t-link.vue";
 import router from "./router/index.js";
 import store from "./store/index.js";
 
@@ -17,6 +18,7 @@ import "vuetify/styles";
 import "./assets/index.scss";
 
 const app = createApp(App);
+customElements.define("t-link", defineCustomElement(TLink));
 
 Sentry.init({
   app,
diff --git a/src/types/App/HyperLink.d.ts b/src/types/App/HyperLink.d.ts
new file mode 100644
index 00000000..66416e34
--- /dev/null
+++ b/src/types/App/HyperLink.d.ts
@@ -0,0 +1,28 @@
+/**
+ * HyperLink
+ * @since Beta v0.9.2
+ */
+
+declare namespace TGApp.App.HyperLink {
+  /**
+   * 文件类型
+   * @since Beta v0.9.2
+   */
+  type AppHyperLink = Array<HyperLinkItem>;
+
+  /**
+   * HyperLinkItem
+   * @since Beta v0.9.2
+   */
+  type HyperLinkItem = {
+    /** id */
+    id: number;
+    /** name */
+    name: string;
+    /**
+     * 描述
+     * @remarks htmlText
+     */
+    desc: string;
+  };
+}
diff --git a/src/utils/toolFunc.ts b/src/utils/toolFunc.ts
index 2a2b2661..c9da3930 100644
--- a/src/utils/toolFunc.ts
+++ b/src/utils/toolFunc.ts
@@ -1,6 +1,6 @@
 /**
  * 一些工具函数
- * @since Beta v0.9.1
+ * @since Beta v0.9.2
  */
 
 import { tz } from "@date-fns/tz";
@@ -185,7 +185,7 @@ export function getRandomString(length: number, type: string = "all"): string {
 
 /**
  * 解析带样式的文本
- * @since Beta v0.8.1
+ * @since Beta v0.9.2
  * @param desc - 带样式的文本
  * @returns 解析后的文本
  */
@@ -195,8 +195,10 @@ export function parseHtmlText(desc: string): string {
   while (linkMatch !== null) {
     const link = linkMatch[1];
     const text = linkMatch[2];
-    // TODO: 后续处理 t-link
-    desc = desc.replace(linkMatch[0], `<t-link data-link="${link}">${text}</t-link>`);
+    desc = desc.replace(
+      linkMatch[0],
+      `<t-link content="${encodeURIComponent(text)}" link="${link}"></t-link>`,
+    );
     linkMatch = linkReg.exec(desc);
   }
   const colorReg = /<color=(.*?)>(.*?)<\/color>/g;