feat: timeline doc

src/common/markdown/timeline.md

@@ -0,0 +1,47 @@
+# 时间轴语法
+
+## 显式语句（你实际上能在悬浮窗中看到的部分）
+
+### 显式语句格式
+
+```text
+时间 "提示文本" (tts "语音文本")
+```
+
+### 显式语句参数
+
+- 时间（数字）
+  - 可以是整数，如 `34`；也可以是浮点数，如 `84.38`；还可以是时间格式，如 `01:35`；
+
+- 提示文本（字符串）
+  - 文本就是显示在悬浮窗中的文本，如 `天赐祝福` 或 `治疗MT`。
+  - 你可以使用 `<技能名>` 的特殊语法，来生成一张技能图标的图片。并且可以接上一个 `~` 来快速在后面重复该技能名称的字符串，如 `<天赐祝福>~` 在悬浮窗中实际显示为 `[图片]天赐祝福`
+
+- 语音文本（字符串）
+  - 该参数用于指定该语句的语音文本，如 `tts "天赐祝福"`，则会在该语句时间判定前 1 秒，播放 `天赐祝福` 的语音
+
+## 匹配语句（隐藏的、用于匹配时间轴的）
+
+### 匹配语句格式
+
+```text
+时间 "注释文本" sync /正则表达式/ window 前匹配,后匹配 jump 时间
+```
+
+### 匹配语句参数
+
+- sync 正则表达式
+  - 填入一个标准的 Javascript 正则表达式。用于匹配日志，若匹配成功，则触发同步（参考下方window、jump的说明）
+  - 事件修饰符：你可以在 sync 后面添加 `.once` 修饰符，来确保该正则表达式在整场战斗中仅会被匹配一次，如 `sync.once /正则表达式/`
+
+- window 数字,数字
+  - 当 sync 匹配成功时，规定匹配同步的时间范围条件
+  - 第一个数字代表向前的时间范围，第二个数字代表向后的时间范围
+  - 例如，在：`50 "分支判断" sync /正则表达式/ window 12,5 jump 120`，当正则表达式匹配，且当前战斗时间处于第 38 ~ 55 秒，时间轴会跳转至第 120 秒
+  - 若 sync 存在，且 window 未设置，默认为 `2.5,2.5`
+
+- jump 数字
+  - 当 sync 匹配成功，且符合 window 的判定条件时候，时间轴会跳转至数字时间点（只支持秒数格式的时间）
+  - 跳转至 0 意味着停止时间轴
+
+使用FFLOGS导入时，会自动生成部分匹配语句，你可以在 [timelineSpecialRules.ts](https://github.com/Souma-Sumire/ff14-overlay-vue/blob/main/src/utils/timelineSpecialRules.ts) 查看全部预置规则

src/pages/timelineHelp.vue

@@ -0,0 +1,10 @@
+<template>
+  <README />
+</template>
+
+<script setup lang="ts">
+import "github-markdown-css/github-markdown-light.css";
+import README from "@/common/markdown/timeline.md";
+</script>
+
+<style scoped lang="scss"></style>

src/pages/timelineSettings.vue

@@ -10,6 +10,7 @@ import type { ITimeline, ITimelineLine } from "@/types/timeline";
 // import { p8sTimeline } from "@/resources/timelineTemplate";
 import moment from "moment";
 import { callOverlayHandler } from "../../cactbot/resources/overlay_plugin_api";
+import router from "@/router";
 
 const simulatedCombatTime = ref(0);
 const timelineStore = useTimelineStore();
@@ -316,6 +317,11 @@ function timelineTimeFormat() {
 //     }
 //   });
 // }
+
+const openMarkdown = () => {
+  const href = router.resolve({ path: "/timelineHelp" }).href;
+  window.open(href, "_blank");
+};
 </script>
 <template>
   <el-container class="container">
@@ -326,7 +332,7 @@ function timelineTimeFormat() {
         @click="showSettings = !showSettings"
         color="#626aef"
         style="color: white"
-        >样式设置</el-button
+        >时间轴设置</el-button
       >
       <el-button @click="importTimelines()">导入</el-button>
       <el-button class="export" @click="exportTimeline(timelines)"
@@ -335,6 +341,7 @@ function timelineTimeFormat() {
       <el-button v-if="isWSMode" type="success" @click="broadcastData()"
         >通过WS发送到悬浮窗</el-button
       >
+      <el-button @click="openMarkdown()">查看语法</el-button>
       <!-- <el-button v-if="!isWSMode" type="success" @click="applyData()">应用</el-button> -->
       <!-- <el-button @click="createP8STimeline()">P8S门神模板</el-button> -->
       <!-- <el-button @click="clearLocalStorage()">清理LocalStorage缓存</el-button> -->