# Pretext Docs

**Repository Path**: T_Salt/pretext

## Basic Information

- **Project Name**: Pretext Docs
- **Description**: 本项目基于 Vue 3 与 Canvas，集成高性能文本排版库 @chenglou/pretext，实现媲美 HTML/CSS 的自动换行、图文混排等能力。包含十余个交互式 Demo，涵盖聊天气泡、Markdown 渲染、瀑布流等场景，支持响应式布局与主题切换，为 Canvas 文本渲染提供完整解决方案。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2026-04-07
- **Last Updated**: 2026-05-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue3 + Canvas: 探索 @chenglou/pretext 的高性能文本排版艺术 🎨

- 🔗 **线上体验地址**: [https://pretext.tzpaly.top](https://pretext.tzpaly.top)
- 💻 **开源代码仓库**: [Gitee - T_Salt/pretext](https://gitee.com/T_Salt/pretext)
- 📢 **微信公众号**: **你懂个der**

这是一个基于 **Vue 3** 和 **Vite** 构建的交互式展示项目，深度整合并演示了由 Cheng Lou 编写的高性能文本排版库 [`@chenglou/pretext`](https://github.com/chenglou/pretext)。

在 Web 开发中，Canvas 虽然具有极高的渲染性能，但文本排版一直是个痛点（例如：没有自动换行、没有文字截断、没有图文混排）。本项目通过十多个精心设计的交互式 Demo，向你展示如何使用 `@chenglou/pretext` 赋予 Canvas 与 HTML/CSS 媲美的现代排版能力！

---

## ✨ 核心特性

- 🌗 **亮/暗双主题无缝切换**：采用现代 CSS 变量架构，并结合 Vue 的响应式状态 (`watchEffect`) 实现了 Canvas 画布在主题切换时的动态重绘。
- 📱 **完美的响应式布局**：内置 `useResponsiveWidth` 智能 Hook。无论是在宽屏 PC 还是在竖屏手机上，Canvas 的宽度与卡片边距都能自适应缩放，保证极佳的阅读和交互体验。
- 📚 **全 API 中文文档覆盖**：不再是枯燥的代码注释！项目内设专门的“API 漫游”与“高级 API”模块，以图文并茂、代码实时对照的形式讲解了所有暴露的 API。
- 🚀 **极致性能**：所有 Demo 的渲染均在 `<canvas>` 的 2D Context 下纯手工绘制，无任何 DOM 节点依赖。
- ⚡ **自动导入与纯净代码**：深度集成 `unplugin-auto-import`，Vue 的 `ref`、`watch` 等核心 API 实现全局自动按需导入，让业务组件代码极度干净纯粹。
- 📦 **优雅的构建产物**：深度定制 Vite 打包配置 (`rollupOptions`)，构建后的 `dist` 目录严格将 JS、CSS 和图片分类打包到独立子目录，拒绝杂乱无章的根目录输出。

---

## 🎮 30+ 真实业务场景一览

为了证明 Canvas 排版的极致潜力，项目中内置了多达 **30 个**结合实际业务场景的交互演示。它们全部脱离 DOM，通过 Canvas 手工渲染而成：

### 🌟 经典核心场景
1. **基础排版**：最基本的自动换行、对齐方式以及文本截断。
2. **测量与定位**：精准计算高度以动态分配画布尺寸。
3. **收缩包裹**：实现类似 `width: max-content` 的效果。
4. **浮动布局**：复刻 CSS 环绕浮动，让文本优雅地环绕在图片左侧或右侧。
5. **聊天气泡**：实战演练！构建流畅、高度自适应的 IM 聊天气泡界面。
6. **瀑布流卡片**：动态多列瀑布流布局，图文混排并实现多行文字截断。
7. **二分查找布局**：通过二分查找算法实现“在有限宽高中寻找最完美的字号”。
8. **复杂表格**：用代码绘制复杂的单元格边框、表头以及多行内容的表格。
9. **Markdown 解析**：将标题、段落和内联代码等 Markdown 结构精准绘制入 Canvas。
10. **高级 Markdown**：加入网络图片的异步预加载、表格渲染以及复杂图文排版。

### 🚀 更多扩展业务场景
- **社交媒体**：推文卡片、嵌套评论流、微博信息流、用户资料简介。
- **电商业务**：商品卡片标题、订单摘要追踪、优惠券描述、动态价格标签、用户长评截断。
- **办公协同**：邮件列表预览、日历日程块、看板任务卡、电子发票排版、会议纪要。
- **游戏 UI**：剧情对话框、任务日志追踪、战斗浮动伤害、物品属性描述、技能树节点。
- **媒体内容**：视频字幕渲染、滚动弹幕、音乐歌词同步、电子书分页排版、杂志专栏导语。
- **开发工具与其它**：终端日志监控、代码差异比对、荣誉证书生成。
- **交互操作 (New!)**：可拖拽的文本块布局、支持网格对齐的海报编辑器原型。

---

## 🛠️ 技术栈

- **框架**: [Vue 3 (Composition API)](https://vuejs.org/) + `<script setup>`
- **构建工具**: [Vite](https://vitejs.dev/)
- **排版引擎**: [`@chenglou/pretext`](https://github.com/chenglou/pretext)
- **图标**: [Heroicons](https://heroicons.com/) (SVG 直接引入)
- **UI 设计**: 玻璃拟物化 (Glassmorphism) + 响应式流式布局

---

## 📦 本地运行

1. 克隆项目并进入目录：
   ```bash
   git clone <your-repo-url>
   cd vue-demo
   ```
2. 安装依赖：
   ```bash
   npm install
   ```
3. 启动开发服务器：
   ```bash
   npm run dev
   ```
4. 构建生产版本：
   ```bash
   npm run build
   ```

---

## 💡 给开发者的建议

在项目中，我将所有业务场景的绘制逻辑全部封装在了 `src/components/` 目录下。如果你对 Canvas 性能优化、自定义渲染引擎、或者如何在 WebGL/Canvas 游戏里做 UI 感兴趣，这个项目将会是一个绝佳的学习脚手架。

快来拉拽滑块，体验丝滑的排版性能吧！🚀