本页供你在完成教程后查阅完整实现。第一次接入请从建立第一个编辑器开始；需要某一项能力时，按下面的文件分工找到对应实现即可。
文件各负责什么
| 文件 | 用途 | 对应教程 |
|---|---|---|
product/standalone.ts | 在普通 Vue 应用里启动工作区，返回卸载函数 | 建立工程 |
product/workspace.vue | 组合工具栏、文件按钮和编辑区域 | 连接界面 |
product/runtime.ts | 创建 Editor，连接 View 与宿主尺寸 | 挂载 View |
product/assembly/generic.ts | 配置普通文章和提示组 | 文档模型 |
product/assembly/word.ts | 配置 Word 预设和匹配的初始文档 | 文档模型 |
product/session.ts | 更新按钮状态，协调编辑、保存和加载 | 连接界面 |
product/files/repository.ts | 把备份写入浏览器存储 | 保存和文件 |
product/files/backup.ts | 验证备份版本、节点和属性 | 保存和文件 |
product/files/docx.ts | 按需加载 Word 转换并处理真实字节 | 保存和文件 |
product/feature/* | 提示组的节点、命令、布局和选区 | 内容扩展 |
product/types.ts | 工作区内部共享类型 | 各模块的输入和输出 |
shared/download.ts | 将生成的文件交给浏览器下载 | 保存和文件 |
在自己的工程中运行
完整工作区使用 Vue、@quirekit/core、@quirekit/starter-kit、@quirekit/view、@quirekit/view-engine、@quirekit/ui 和 @quirekit/unocss-preset。Word 版本另需 @quirekit/classic-docx 与 @quirekit/extension-text-style；商业包的分发范围见支持与许可。使用实际取得的同批次版本。
将文件选择器中的 product/ 和 shared/ 按原相对路径放入 src/examples/。Vite 开启 Vue 与 UnoCSS 插件，UnoCSS 使用 defineQuireKitUnoConfig()，并扫描 ./src/**/*.{vue,ts}。入口导入 uno.css；工作区已导入 View 的结构样式。
src/main.tsts
import 'uno.css'
import { mountDocumentProduct } from './examples/product/standalone'
const release = mountDocumentProduct(document.getElementById('app')!)
if (import.meta.hot) import.meta.hot.dispose(release)
mountDocumentProduct() 接收页面中已有的元素，并返回释放函数。它同时管理 Vue 工作区和编辑器的创建与销毁；在应用退出或热更新时调用释放函数。
完整文件
选择一个文件，再点箭头展开。复制操作始终复制当前文件的完整原文；其他本地依赖都保留在文件列表中。
product/standalone.tsts
import { createApp, h } from "vue";
import { defaultTheme, quireIconRegistry } from "@quirekit/ui";
import { QuireThemeProvider, QuireIconProvider, QuireLocaleProvider } from "@quirekit/ui/vue";
import Workspace from "./workspace.vue";
/**
* Mounts the full reference in an ordinary Vue/Vite host, without Nuxt or Classic's product shell.
* @param element - Host element whose height and placement belong to the application.
* @param locale - Initial UI and document-copy language.
* @returns Release function for Vue, View, Core and all session listeners.
*/
export function mountDocumentProduct(element: HTMLElement, locale: "zh-CN" | "en" = "zh-CN"): () => void {
const app = createApp({
render: () => h(QuireIconProvider, { registry: quireIconRegistry }, () =>
h(QuireThemeProvider, { theme: defaultTheme }, () =>
h(QuireLocaleProvider, { locale }, () => h(Workspace, { locale, model: "word-v1" })))),
});
app.mount(element);
return () => app.unmount();
}