# Cheatsheet 网站项目 Scaffold

你是一名资深前端架构师，熟悉 **Vue 3 + Vite + TailwindCSS** 的现代前端开发栈。
请帮我生成一个 **Cheatsheet 网站** 的基础工程结构，要求如下：

## 1. 技术栈

* **框架**：Vue 3 (Composition API)
* **构建工具**：Vite
* **样式**：TailwindCSS + 自定义 base.css / main.css
* **组件库**：官方 Vue 生态优先（可选 shadcn-vue / headlessui / radix-vue）
* **工具库**：

  * `vue-router` （多视图切换：主页 / Cheatsheet 列表 / 单个 Cheatsheet 页面）
  * `pinia` （全局状态管理，用于存储 Cheatsheet 配置、主题偏好）
  * `axios` 或 `fetch`（数据获取，预留接口位）

## 2. 项目结构

请生成一个基础目录结构，包含：

```
src/
  assets/          # 静态资源
  components/      # 通用组件（按钮、卡片、导航栏）
  views/           # 页面视图（HomeView, CheatsheetListView, CheatsheetDetailView）
  store/           # Pinia 状态管理
  router/          # vue-router 配置
  styles/          
    base.css       # Tailwind 基础覆盖样式
    main.css       # 全局样式入口
  App.vue
  main.js
```

## 3. 基础样式

* 在 `base.css` 中：

  * 定义打印优化样式（例如：去掉多余边框、背景）
  * 定义默认字体、字号（便于打印的 A4 规格）
* 在 `main.css` 中：

  * 引入 Tailwind
  * 定义全局主题色（默认浅色 / 深色模式切换）

## 4. 默认页面

请提供基础模板代码：

* **HomeView**：展示官方 Cheatsheet（Docker, Vim）+ 推荐的自定义入口
* **CheatsheetListView**：显示所有 Cheatsheet 的卡片列表
* **CheatsheetDetailView**：单个 Cheatsheet 的内容，支持「打印模式」按钮

## 5. 通用组件

请生成：

* `NavBar.vue`（带首页 / Cheatsheet 列表 / 主题切换按钮）
* `CheatsheetCard.vue`（显示标题、简介、打印按钮）
* `PrintButton.vue`（触发浏览器打印）

## 6. 额外要求

* 所有组件保持简洁、易扩展，留出注释
* 尽量用 Tailwind Utility Class，而不是额外 CSS
* 确保项目可以直接运行（npm run dev）