我正在參加CodeBuddy「首席試玩官」內容創作大賽，本文所使用的 CodeBuddy 免費下載鏈接：騰訊云代碼助手 CodeBuddy - AI 時代的智能編程伙伴
在一次和 CodeBuddy 的日常交流中，我提出了一個構想：能不能幫我從零構建一個富文本樣式預覽工具？我希望這個工具不僅能渲染 Markdown，還能模擬真實出版物的排版風格，比如極簡主義、報刊、讀書筆記等，最好還能支持一鍵切換排版樣式，甚至導出 PDF 或網頁代碼。
CodeBuddy 毫不猶豫地答應了，而且從頭到尾主動承擔了所有核心代碼的生成任務，我幾乎只需要旁觀并觀察它的思路，然后適時調整方向。這篇文章記錄了我們合作開發 TypoView 的全過程。
從想法到實現：項目初始化的曲折之路
最開始，我提出需求之后，CodeBuddy 并沒有直接進入編碼環節，而是對整個項目做了簡要分析，它判斷這個項目復雜度適中，預估文件不會太多，并主動規劃出八個步驟：從創建項目、安裝依賴、構建 UI，到最終的導出功能。
我原本以為一切會非常順利，但沒想到一開始創建 Vue3 項目的過程就“翻車”了幾次。CodeBuddy 原本打算用 npm create vite@latest . --template vue-ts 創建 Vue + TypeScript 項目，結果因為一些環境問題，Vite 多次默認回退到了 JavaScript 模板。
幾次嘗試之后，CodeBuddy 沒有氣餒，而是開始手動排查問題，逐步清理目錄內容，更換命令格式，甚至從 PowerShell 角度考慮命令兼容性。最終它通過 Remove-Item * -Recurse -Force; npm create vite@latest typoview --template vue-ts 成功在一個新目錄中創建了正確的 Vue3 + TypeScript 項目。
這種從失敗中快速迭代并修正策略的能力，讓我對 CodeBuddy 的穩健印象非常深刻。
自動生成項目結構與依賴配置
項目目錄生成后，CodeBuddy 自動安裝了必要的依賴，比如 Markdown 渲染用的 marked，主題樣式用的 CSS Modules，還預留了將來導出 PDF 的庫擴展空間（如 html2pdf.js）。整個 scaffold 過程清晰有序，使用 Vite 提升了開發效率，而使用 TypeScript 也為后續的模塊拆分和類型校驗奠定了基礎。
Markdown 渲染的實現與樣式注入
CodeBuddy 接著構建了核心組件 MarkdownRenderer.vue，這個組件的職責很明確：接收 Markdown 字符串，轉化為 HTML，再通過 CSS Modules 注入不同風格的排版樣式。它選擇了 marked 庫作為 Markdown 解析器，并封裝得非常優雅，既保持了解耦又方便主題擴展。
<template><div :class="themeClass" v-html="renderedHtml" />
</template><script lang="ts" setup>
import { marked } from 'marked'
const props = defineProps<{ markdown: string, theme: string }>()
const renderedHtml = computed(() => marked(props.markdown))
const themeClass = computed(() => `typoview-theme-${props.theme}`)
</script>
這種代碼結構的優點在于邏輯集中且清晰，主題切換只需要傳入不同的 theme 參數即可，CSS Modules 也避免了樣式污染的問題。
多種主題切換 + 行距字號模板
為了滿足不同使用場景（比如編輯器開發者、寫博客的用戶等），CodeBuddy 主動構建了三個主題：
- 極簡主題（Minimal）
- 報刊風格（Newspaper）
- 閱讀筆記風格（Reader）
每個主題通過 .module.css 文件單獨定義行距、字間距、首行縮進等參數，并通過按鈕切換。更令人驚喜的是，它還引入了“模板配置”的概念，用戶可以通過界面選擇不同字號/行距組合，比如“16px + 1.5 行距”，“18px + 1.75 行距”等，并立即預覽效果。
網格背景與排版邊距模擬
為了更貼近真實出版系統的排版體驗，CodeBuddy 還添加了仿印刷背景。它在頁面底部生成一個網格背景（使用 CSS background-image: repeating-linear-gradient 實現），并對渲染容器設置了左右邊距與最大寬度。這種設計不僅提升了整體觀感，還讓我在排版時更容易把握結構平衡。
PDF 與代碼導出功能的初步接入
雖然目前 PDF 導出模塊還未完全接入（CodeBuddy 留下了預留接口和備注），但它已經為未來功能擴展做了準備。例如，將渲染容器轉為 canvas 或使用 html2pdf.js 等庫，甚至可以考慮導出為靜態 HTML 模板，方便博客嵌入或離線展示。
回顧與總結：CodeBuddy 是真正的代碼伙伴
整套 TypoView 的開發過程，我幾乎沒有手寫一行核心邏輯代碼。每當我下達一個新的功能指令，CodeBuddy 總是快速響應、自動完成項目目錄、模塊拆分、功能實現，甚至還主動處理了一些預料之外的問題，比如 Vite 模板識別失敗和目錄清理邏輯不兼容等。
CodeBuddy 在代碼生成方面有幾個非常突出的優點：
- 模塊劃分清晰：每個功能點都對應一個組件或樣式模塊，便于維護和擴展；
- 樣式結構優雅：使用 CSS Modules 防止污染，主題切換靈活；
- 功能實現高效：從 Markdown 渲染到導出功能，都有預留與擴展考慮；
- 異常處理周到：即使遇到創建失敗、兼容問題，它也能迅速適配調整。
對我來說，這不再是“輔助寫代碼”的工具，更像是真正的“代碼拍檔”。TypoView 是我們合作的又一個代表作，而我也越來越習慣把創意交給它來實現。
如果你也希望將靈感變為現實，又苦于從零搭建的過程太繁瑣，那不妨試試把需求告訴 CodeBuddy，或許你會驚訝于它的“執行力”。
{ :|: }；:)
