diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index cd11689..6b6a1db 100644 --- a/docs/.vitepress/config.ts +++ b/docs/.vitepress/config.ts @@ -1,4 +1,5 @@ import { defineConfig } from 'vitepress'; +import { MermaidMarkdown, MermaidPlugin } from 'vitepress-plugin-mermaid'; // https://vitepress.dev/reference/site-config export default defineConfig({ @@ -6,7 +7,10 @@ export default defineConfig({ description: 'HTML5 魔塔样板 V2.B 帮助文档', base: '/_docs/', markdown: { - math: true + math: true, + config(md) { + md.use(MermaidMarkdown); + } }, themeConfig: { // https://vitepress.dev/reference/default-theme-config @@ -24,11 +28,41 @@ export default defineConfig({ items: [ { text: '差异说明', link: '/guide/diff' }, { text: '系统说明', link: '/guide/system' }, - { text: 'UI 编写', link: '/guide/ui' }, - { text: 'UI 优化', link: '/guide/ui-perf' }, - { text: 'UI 系统', link: '/guide/ui-system' }, - { text: 'UI 元素', link: '/guide/ui-elements' }, - { text: 'UI 常见问题', link: '/guide/ui-faq' } + { text: '代码编写', link: '/guide/coding' }, + { + text: 'UI 系统', + collapsed: false, + items: [ + { text: 'UI 编写', link: '/guide/ui' }, + { text: 'UI 优化', link: '/guide/ui-perf' }, + { text: 'UI 系统', link: '/guide/ui-system' }, + { text: 'UI 元素', link: '/guide/ui-elements' }, + { text: 'UI 常见问题', link: '/guide/ui-faq' } + ] + }, + { text: '音频系统', link: '/guide/audio' } + ] + } + ], + '/logger/': [ + { + text: '错误代码一览', + items: [ + { + text: '错误代码', + collapsed: false, + items: [ + { text: '1-50', link: '/logger/error/error1' } + ] + }, + { + text: '警告代码', + collapsed: false, + items: [ + { text: '1-50', link: '/logger/warn/warn1' }, + { text: '51-100', link: '/logger/warn/warn2' } + ] + } ] } ] @@ -65,5 +99,14 @@ export default defineConfig({ lang: 'zh', label: '中文' } + }, + vite: { + plugins: [MermaidPlugin()], + optimizeDeps: { + include: ['mermaid'] + }, + ssr: { + noExternal: ['mermaid'] + } } }); diff --git a/docs/.vitepress/theme.css b/docs/.vitepress/theme.css new file mode 100644 index 0000000..4d1d650 --- /dev/null +++ b/docs/.vitepress/theme.css @@ -0,0 +1,7 @@ +.mermaid { + max-width: 600px; /* 限制最大宽度 */ + max-height: 400px; /* 限制最大高度 */ + overflow: auto; /* 允许滚动以防止超出 */ + display: block; + margin: 0 auto; +} diff --git a/docs/guide/audio.md b/docs/guide/audio.md index e69de29..e7f5254 100644 --- a/docs/guide/audio.md +++ b/docs/guide/audio.md @@ -0,0 +1,393 @@ +# 音频系统 + +2.B 有了与 2.A 完全不同的音频系统,新的音频系统更加自由,功能更加丰富,可以创建多种自定义效果器。本文将讲解如何使用音频系统。 + +:::tip +多数情况下,你应该不需要使用本文所介绍的内容,因为样板已经将音效、背景音乐等处理完善。如果你想实现高级效果,例如混响效果等,才需要阅读本文。 +::: + +## 获取音频播放器 + +音频播放器在 `@user/client-modules` 模块中,直接引入即可: + +```ts +// 在其他模块中使用模块化语法引入 +import { audioPlayer } from '@user/client-modules'; +// 在 client-modules 模块中使用模块化语法引入 +import { audioPlayer } from '../audio'; // 改为你自己的相对路径 + +// 使用 Mota 全局变量引入 +const { audioPlayer } = Mota.require('@user/client-modules'); +``` + +## 音频系统工作流程 + +音频播放流程如下: + +```mermaid +graph LR; + A(音频源) --> B(效果器) --> C(目的地(扬声器、耳机)) +``` + +## 创建音频源 + +:::tip +本小节的内容极大概率用不到,如果不是需要非常底层的音频接口,可以不看本小节。 +::: + +样板内置了几种音频源,它们包括: + +| 类型 | 适用场景 | 创建方法 | +| --------------- | ----------------------- | ----------------------- | +| `BufferSource` | 预加载的完整音频文件 | `createBufferSource()` | +| `ElementSource` | 通过 `