|
|
|
|
@ -1,76 +1,67 @@
|
|
|
|
|
# 项目：vue-mgt-template - 个人项目代码记录系统，博客系统
|
|
|
|
|
# 项目：vue-mgt-template - 个人项目代码记录系统
|
|
|
|
|
|
|
|
|
|
## 项目概述
|
|
|
|
|
该项目作为我的个人代码记录总结实践系统，整体是以一种后台管理系统的模式集成开发的，项目框架依赖vue-pure-admin精简版，该项目框架文档地址为https://pure-admin.cn/pages/introduction/#%E5%9C%A8%E7%BA%BF%E9%A2%84%E8%A7%88，其中整个项目不包含后端代码，接口为mock数据或本地文件数据等
|
|
|
|
|
本系统为个人代码记录与总结实践平台，采用后台管理系统模式集成开发。
|
|
|
|
|
- **框架核心**：基于 vue-pure-admin 精简版 (文档: https://pure-admin.cn/pages/introduction/)
|
|
|
|
|
- **后端交互**：纯前端项目，不包含后端代码，接口使用 Mock 数据或本地文件。
|
|
|
|
|
|
|
|
|
|
## 技术栈规范
|
|
|
|
|
- **语言**: Vue3（setup语法模式），TypeScript
|
|
|
|
|
- **UI库**: element plus
|
|
|
|
|
- **css组件**: tailwindcss，scss
|
|
|
|
|
## 🛠 技术栈规范
|
|
|
|
|
- **核心框架**: Vue 3 (Script Setup), TypeScript
|
|
|
|
|
- **构建工具**: Vite 5, pnpm
|
|
|
|
|
- **状态管理**: Pinia (配合 pinia-plugin-persistedstate)
|
|
|
|
|
- **UI 组件**: Element Plus, TailwindCSS, SCSS
|
|
|
|
|
- **代码规范**: ESLint (v9), Prettier, Stylelint
|
|
|
|
|
- **图标方案**: Iconify, SVG
|
|
|
|
|
|
|
|
|
|
## 项目文档
|
|
|
|
|
文档地址为: /README.md
|
|
|
|
|
|
|
|
|
|
## 项目结构
|
|
|
|
|
```
|
|
|
|
|
## 📂 项目结构
|
|
|
|
|
```text
|
|
|
|
|
vue3-mgt-template/
|
|
|
|
|
├───.env # 环境变量文件
|
|
|
|
|
├───index.html # 应用入口HTML文件
|
|
|
|
|
├───package.json # 定义项目依赖和脚本
|
|
|
|
|
├───vite.config.ts # Vite 构建配置文件
|
|
|
|
|
├───tailwind.config.ts # Tailwind CSS 配置文件
|
|
|
|
|
├───tsconfig.json # TypeScript 编译器配置
|
|
|
|
|
├───mock/ # 本地Mock数据接口
|
|
|
|
|
├───public/ # 公共静态资源目录
|
|
|
|
|
├───src/ # 主要源代码目录
|
|
|
|
|
│ ├───App.vue # 根 Vue 组件
|
|
|
|
|
│ ├───main.ts # 应用入口，初始化Vue实例
|
|
|
|
|
│ ├───api/ # API 请求模块
|
|
|
|
|
│ ├───assets/ # 静态资源（图片、字体、样式）
|
|
|
|
|
│ ├───components/ # 可复用的全局组件
|
|
|
|
|
│ ├───directives/ # Vue 自定义指令
|
|
|
|
|
│ ├───hooks/ # 可复用的 Composition API (Hooks)
|
|
|
|
|
│ ├───layout/ # 后台管理系统整体布局组件
|
|
|
|
|
│ ├───plugins/ # 插件（如 ECharts, Element Plus）
|
|
|
|
|
│ ├───router/ # Vue Router 路由配置
|
|
|
|
|
│ ├───store/ # Pinia 全局状态管理
|
|
|
|
|
│ ├───style/ # 全局样式和 SCSS 变量
|
|
|
|
|
│ ├───utils/ # 工具函数模块
|
|
|
|
|
│ └───views/ # 页面级组件
|
|
|
|
|
└───types/ # 全局 TypeScript 类型定义
|
|
|
|
|
├── .env* # 环境变量配置
|
|
|
|
|
├── mock/ # Mock 数据接口
|
|
|
|
|
├── public/ # 静态资源
|
|
|
|
|
├── src/
|
|
|
|
|
│ ├── api/ # 接口定义
|
|
|
|
|
│ ├── assets/ # 静态资源
|
|
|
|
|
│ ├── components/ # 全局组件 (PascalCase)
|
|
|
|
|
│ ├── directives/ # 自定义指令
|
|
|
|
|
│ ├── hooks/ # Composables
|
|
|
|
|
│ ├── layout/ # 布局组件
|
|
|
|
|
│ ├── router/ # 路由配置
|
|
|
|
|
│ ├── store/ # Pinia 状态库
|
|
|
|
|
│ ├── style/ # 全局样式
|
|
|
|
|
│ ├── utils/ # 工具函数
|
|
|
|
|
│ └── views/ # 页面组件
|
|
|
|
|
└── types/ # TS 类型定义
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## 开发规范
|
|
|
|
|
|
|
|
|
|
### **对Gemini的特别指令**
|
|
|
|
|
- **严格遵守规范**：当Gemini为本项目生成或修改任何代码时，**必须** 严格遵守本文件中定义的所有开发规范。
|
|
|
|
|
- **中文优先**：请任何时候使用中文与我沟通或者确认，所有代码注释、日志输出（例如 `console.log`）、以及提交信息（Commit Message）**必须** 使用中文。
|
|
|
|
|
- **多平台兼容**：所有代码需要兼容mac,windows,linux平台。
|
|
|
|
|
- **文档和注释**：该项目是一个个人学习记录项目，请尽可能多提供文档和注释。
|
|
|
|
|
- **执行步骤**：执行任何任务的时候，请先输出你的思路，等待我确认之后再修改代码
|
|
|
|
|
- **确认问题**：有任何不确认的地方，请先向我确认再执行任务
|
|
|
|
|
- **代码修改**：不要更改之前的代码逻辑，包括删除注释等，只允许添加代码，或者当老代码不能满足需求的时候才允许修改
|
|
|
|
|
## 🚀 常用命令 (Scripts)
|
|
|
|
|
- **启动开发**: `pnpm dev` (或 `pnpm serve`)
|
|
|
|
|
- **生产构建**: `pnpm build`
|
|
|
|
|
- **代码检查**: `pnpm lint` (包含 eslint, prettier, stylelint)
|
|
|
|
|
- **类型检查**: `pnpm typecheck`
|
|
|
|
|
|
|
|
|
|
## 🤖 Gemini 交互与开发规范
|
|
|
|
|
|
|
|
|
|
### 核心指令
|
|
|
|
|
1. **中文优先**：所有沟通、代码注释、日志输出 (`console.log`)、Git Commit Message **必须**使用中文。
|
|
|
|
|
2. **执行流程**：在执行代码修改前，**必须**先输出思路（Plan），待用户确认（Approve）后再执行。
|
|
|
|
|
3. **代码修改**：
|
|
|
|
|
- **增量原则**：优先通过新增代码实现功能。
|
|
|
|
|
- **修改限制**：原则上不修改现有逻辑，**除非**是明确的 Bug 修复或用户要求的重构。禁止随意删除现有注释。
|
|
|
|
|
4. **文档记录**：
|
|
|
|
|
- 结束会话前，**必须**将本次核心变动以“本次会话总结”格式更新到 `README.md` 的“对话记录”部分。
|
|
|
|
|
- 尽可能为新代码添加详细的中文文档和注释。
|
|
|
|
|
|
|
|
|
|
### 代码风格
|
|
|
|
|
- 使用 TypeScript 严格模式
|
|
|
|
|
- 组件命名采用 PascalCase (如 `TaskCard.vue`)
|
|
|
|
|
- 函数和变量使用 camelCase（驼峰命名）
|
|
|
|
|
- 常量使用 UPPER_SNAKE_CASE
|
|
|
|
|
|
|
|
|
|
### 项目启动
|
|
|
|
|
- 请参考package.json中dev命令，可以直接启动项目
|
|
|
|
|
|
|
|
|
|
### 注释和日志
|
|
|
|
|
- 注释请使用中文
|
|
|
|
|
- 日志输出请使用中文
|
|
|
|
|
|
|
|
|
|
## 对话记录
|
|
|
|
|
- **会话结束指令**：當我表示準備結束會話時，你**必須**先將本次對話的重點，以“本次会话总结”的格式更新到 `README.md` 的“对话记录”部分，然後才能結束對話。
|
|
|
|
|
- **TypeScript**: 严格模式，避免 `any`。
|
|
|
|
|
- **命名规范**:
|
|
|
|
|
- 组件文件: `PascalCase` (如 `TaskCard.vue`)
|
|
|
|
|
- 变量/函数: `camelCase` (如 `getUserInfo`)
|
|
|
|
|
- 常量: `UPPER_SNAKE_CASE` (如 `MAX_COUNT`)
|
|
|
|
|
- **多平台兼容**: 确保代码在 macOS, Windows, Linux 下均可运行。
|
|
|
|
|
|
|
|
|
|
## 开发任务
|
|
|
|
|
### 规范
|
|
|
|
|
使用了删除线的就代表已执行完成
|
|
|
|
|
## 📝 开发任务
|
|
|
|
|
> 符号说明：[x] 已完成, [-] 已取消, [ ] 待执行
|
|
|
|
|
|
|
|
|
|
### 任务列表
|
|
|
|
|
### 任务列表
|
|
|
|
|
- [ ] (在此处添加新任务)
|
|
|
|
|
|
