# help-doc

**Repository Path**: Gbin03/help-doc

## Basic Information

- **Project Name**: help-doc
- **Description**: help-dochelp-dochelp-dochelp-dochelp-doc
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-01
- **Last Updated**: 2026-03-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# help-doc

## 介绍

这是一个带导航和页面锚点定位，以及全文本地搜索功能的网页端帮助中心。帮助文档是关于大模型智能体平台相关功能的介绍和API接口传参说明和调用示例，以及后续的在线试用等相关的在线帮助文档系统。

## 技术栈

Vue3, Vite, Typescript, Less, vue-router, @vueuse/core, MiniSearch, Highlight.js, ...

## 设计

### 页面布局

- 文档页面宽度小于1240px会出现全局水平滚动条；
- 文档内容区域宽度自适应；
- 左导航区域定宽；

### 导航&路由&锚点设计

- URL中没有path参数或无匹配页面路由时，默认展示左导航的第一项对应的页面；
- 点击左导航的页面标题, 会跳转到对应的文档内容区域；

- 每个帮助文档页面的URL为https://host/path#/doc/?type=app&path=pKey1/pKey2/pKey3&anchor=content-anchor-1的形式;
- 解析Hash，得到其中的path值和anchor值，其中path值唯一对应左侧目录树中的某个路由和唯一的帮助页面；
- 根据path的值展开和高亮左侧目录树中的某项，并打开对应的帮助文档页面；文档加载完成后，使用JavaScript滚动到anchor对应的锚点位置；
- 其中pKey1、pKey2、pKey3分别对应左导航的目录层级（目前最多3级），为纯英文字母字符串，不能带/等字符，左侧目录各层级预先定好和唯一的path相对应，目录的层级体现为pKey的层级。
- 纵向滚动时, url中的anchor参数会随着页面中出现的锚点元素而改变；输入带有anchor参数的URL时，会滚动到对应的锚点位置;

### 数据和本地搜索索引说明

- 每个帮助文档页面对应一个预先定义好的数据结构, 是个JSON对象，整个文档页面中的数据全部来自这个对象中的数据。每个页面通过根组件导入对应当前页面的这个数据对象，然后经过一定的转换(将一些结构或字段适配成适合组件props接收的形式，大部分结构和字段应该是不需要转换的)，提取JSON对象中相应的字段数据传给各个页面组件即可。而这个预先定义好的数据结构要考虑适合通过MiniSearch构建本地搜索的页面索引，因此其结构的形式定义有些细节的约束，比如会存在一些冗余的meta字段或数据，例如{type: anchor}, 存在类型为anchor的对象对应于锚点组件的数据，会在构建本地搜索索引时用于拆分属于不同锚点区域的数据，从而可以通过类似下面的方式添加到索引中（可参考vuepress-theme-plume中构造索引的实现方式）：

```js
const item = {
    id,
    text,
    title: titles.at(-1)!,
    titles: titles.slice(0, -1),
    }
MiniSearchIndex.add(item)
```