feat: scaffold initial Cheatsheet Hub application

This commit establishes the foundational structure for the Cheatsheet Hub project.

It includes the setup of a Vue 3, Vite, and TailwindCSS stack, along with core application features:

- **Routing:** Configures `vue-router` for Home, Cheatsheet List, and Cheatsheet Detail pages.
- **State Management:** Implements a `pinia` store for theme management (dark/light mode) and mock data.
- **UI Components:** Adds reusable components like `NavBar`, `CheatsheetCard`, and `PrintButton`.
- **Styling:** Integrates TailwindCSS with custom base styles, dark mode support, and print-friendly optimizations.
- **Dependencies:** Adds key libraries including `marked` for content rendering.
This commit is contained in:
xiaomai
2025-09-17 18:03:45 +08:00
parent 7ea9a3c8f9
commit 3058f251bc
18 changed files with 7507 additions and 35 deletions

67
prompt.md Normal file
View File

@@ -0,0 +1,67 @@
# 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**:展示官方 CheatsheetDocker, Vim+ 推荐的自定义入口
* **CheatsheetListView**:显示所有 Cheatsheet 的卡片列表
* **CheatsheetDetailView**:单个 Cheatsheet 的内容,支持「打印模式」按钮
## 5. 通用组件
请生成:
* `NavBar.vue`(带首页 / Cheatsheet 列表 / 主题切换按钮)
* `CheatsheetCard.vue`(显示标题、简介、打印按钮)
* `PrintButton.vue`(触发浏览器打印)
## 6. 额外要求
* 所有组件保持简洁、易扩展,留出注释
* 尽量用 Tailwind Utility Class而不是额外 CSS
* 确保项目可以直接运行npm run dev