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