Add doc for Mask and Tagging

docs/develop/guidance/feature_Mask.md

@@ -0,0 +1,14 @@
+# Mask 伪代码
+
+## 组件调用
+
+```vue
+<script lang="ts" setup>
+const visible = ref(false); // Mask是否显示
+const currentTags = ref(["mother", "son"]); // 当前步骤需要高亮显示的组件的查找路径
+</script>
+
+<template>
+  <Mask :visible="visible" :tags="currentTags" />
+</template>
+```

docs/develop/guidance/feature_Tagging.md

@@ -0,0 +1,90 @@
+# Tagging 伪代码
+
+## 全局注册（单例）
+
+```ts
+// 通过 provide 全局注册单例
+const app = createApp(App);
+//
+app.provide("Tagging", new Tagging());
+```
+
+## 语义化标注（标注方）
+
+### 示例组件
+
+```vue
+<!-- 示例组件1 -->
+<template>
+  <Father data-tag="father">
+    <Son data-tag="son" />
+    <Daughter data-tag="daughter" />
+  </Father>
+</template>
+
+<!-- 示例组件2 -->
+<template>
+  <Mather data-tag="mather">
+    <Son data-tag="son" />
+    <Daughter data-tag="daughter" />
+  </Mather>
+</template>
+```
+
+### Tagging 中保存示例组件树结构信息
+
+```ts
+this.tagTree = {
+  father: {
+    e: FatherComponent,
+    children: {
+      son: {
+        e: SonComponent,
+        children: {},
+      },
+      daughter: {
+        e: DaughterComponent,
+        children: {},
+      },
+    },
+  },
+  mather: {
+    e: MatherComponent,
+    children: {
+      son: {
+        e: SonComponent,
+        children: {},
+      },
+      daughter: {
+        e: DaughterComponent,
+        children: {},
+      },
+    },
+  },
+};
+```
+
+## 在 Mask 组件中使用（消费方）
+
+```vue
+<script lang="ts" setup>
+// 组件内注入
+const tagging = inject("Tagging");
+
+// 传入keys参数，查找为 key = 'mother' 下的 key = 'son' 的组件，类似于CSS类选择器
+const component: Component = tagging.getElementByKeys(["mother", "son"]);
+
+const highlightComponentStyle = () => {
+  const lightElementStyle = {
+    ...
+    ...
+  }
+
+  component.style = highlightComponentStyle
+}
+</script>
+
+<template>
+  <div class="mask" v-if="visible">...</div>
+</template>
+```

docs/develop/guidance/module_Mask.md

@@ -0,0 +1,6 @@
+```ts
+type Props = {
+  visible: boolean; // 是否显示蒙层
+  tags: string[]; // 需要高亮组件的查找路径
+};
+```

docs/develop/guidance/module_Tagging.md

@@ -0,0 +1,35 @@
+```typescript
+/** 节点  */
+export interface TagNode {
+  e: Component;
+  children?: Record<string, TagNode>;
+}
+
+/** Tag 类 */
+export class Tagging {
+  /**  */
+  private tagTree: Record<string, TagNode>;
+
+  contrustor() {
+    /* 遍历组件树，收集tag，初始化tagTree */
+  }
+
+  /** 添加一个标注
+   * @param key: 添加组件的key值
+   * @param component: 被添加的组件
+   * @param keys: 添加到的目标节点，不传时添加到根节点
+   */
+  addTag(key: string, component: Component, keys?: string[]): void;
+
+  /** 移除标注
+   * @param keys: 要移除的目标节点
+   */
+  removeTag(keys: string[]): void;
+
+  /** 通过查找路径keys获取目标组件 */
+  getElementByKeys(keys: string[]): Component | null;
+
+  /** 清空所有标注 */
+  clearAllTags(): void;
+}
+```