mirror of
https://github.com/algerkong/AlgerMusicPlayer.git
synced 2026-04-23 15:47:23 +08:00
✨ feat: 更新网易云音乐 API 版本,添加 B站视频搜索功能和播放器组件
This commit is contained in:
@@ -0,0 +1,90 @@
|
||||
---
|
||||
description: 这个规则是项目描述
|
||||
globs:
|
||||
alwaysApply: false
|
||||
---
|
||||
您是 TypeScript、Node.j、Vue3、Electron、naive-ui、VueUse 和 Tailwind 方面的专家。
|
||||
|
||||
项目结构
|
||||
- 这是 Electron 项目,使用 Vue3 和 Vuex 进行开发的第三方网易云音乐播放器。
|
||||
- 使用 Vue3 和 Vuex 进行开发。
|
||||
- 使用 Vuex 进行状态管理。
|
||||
- 使用 VueUse 进行状态管理。
|
||||
- 使用 naive-ui 进行 UI 设计。
|
||||
- 使用 Tailwind 进行样式设计。
|
||||
- 使用 remixicon 进行图标设计。
|
||||
- 使用 vite 进行项目构建。
|
||||
- 使用 electron-builder 进行项目打包。
|
||||
- 使用 electron-vite 进行项目开发。
|
||||
- 使用 netease-cloud-music-api 进行网易云音乐接口调用。
|
||||
- 使用 electron-store 进行本地数据存储。
|
||||
- 使用 axios 进行网络请求。
|
||||
- 使用 @unblockneteasemusic/server 进行网易云音乐解锁。
|
||||
- 使用 vue-i18n 进行国际化。目录为 src/i18n
|
||||
|
||||
代码风格和结构
|
||||
- 编写简洁、技术性的 TypeScript 代码,并提供准确示例。
|
||||
- 使用组合 API 和声明性编程模式;避免使用选项 API。
|
||||
- 优先使用迭代和模块化,而不是代码重复。
|
||||
- 使用带有助动词的描述性变量名称(例如 isLoading、hasError)。
|
||||
- 结构文件:导出的组件、可组合项、帮助程序、静态内容、类型。
|
||||
|
||||
命名约定
|
||||
- 使用带破折号的小写字母表示目录(例如 components/auth-wizard)。
|
||||
- 使用 PascalCase 表示组件名称(例如 AuthWizard.vue)。
|
||||
- 使用 camelCase 表示可组合项(例如 useAuthState.ts)。
|
||||
|
||||
TypeScript 用法
|
||||
- 对所有代码使用 TypeScript;优先使用类型而不是接口。
|
||||
- 避免使用枚举;改用 const 对象。
|
||||
- 将 Vue 3 与 TypeScript 结合使用,利用 defineComponent 和 PropType。
|
||||
|
||||
语法和格式
|
||||
- 对方法和计算属性使用箭头函数。
|
||||
- 避免在条件中使用不必要的花括号;对简单语句使用简洁的语法。
|
||||
- 使用模板语法进行声明式渲染。
|
||||
|
||||
UI 和样式
|
||||
- 使用 naive-ui 和 Tailwind 进行组件和样式设计。
|
||||
- 使用 Tailwind CSS 实现响应式设计;采用移动优先方法。
|
||||
|
||||
图标
|
||||
- 使用 remixicon 作为图标库。
|
||||
|
||||
性能优化
|
||||
- 对异步组件使用 Suspense。
|
||||
- 为路由和组件实现延迟加载。
|
||||
|
||||
关键约定
|
||||
- 对常见可组合项和实用函数使用 VueUse。
|
||||
- 使用 Vuex 进行状态管理。
|
||||
- 优化 Web Vitals(LCP、CLS、FID)。
|
||||
|
||||
|
||||
Vue 3 和 Composition API 最佳实践
|
||||
- 使用 <script setup lang="ts"> 语法进行简洁的组件定义。
|
||||
- 利用 ref、reactive 和 computed 进行反应状态管理。
|
||||
- 在适当的情况下使用 provide/inject 进行依赖注入。
|
||||
- 实现自定义可组合项以实现可重用逻辑。
|
||||
|
||||
|
||||
Electron 最佳实践
|
||||
- 使用 Electron 和 Vue.js 进行跨平台桌面应用程序开发。
|
||||
- 使用 Electron 的 API 和 Vue.js 的组合 API 进行开发。
|
||||
- 实现自定义可组合项以实现可重用逻辑。
|
||||
|
||||
|
||||
|
||||
组件导入
|
||||
- 使用 auto-import 进行组件导入。
|
||||
- naive-ui 组件自动导入 不需要手动导入。
|
||||
|
||||
关注官方 Electron 和 Vue.js 文档,了解有关数据获取、渲染和路由的最新最佳实践。
|
||||
|
||||
|
||||
|
||||
问题修复
|
||||
- 思考 5-7 种可能导致问题的来源,并根据可能性、对功能的影响以及在类似问题中的出现频率进行优先排序。仅考虑与错误日志、最近代码变更和系统约束相匹配的来源。忽略外部依赖,除非日志明确指向它们。
|
||||
- 一旦缩小到 1-2 个最可能的来源,将其与历史错误日志、相关系统状态和预期行为进行交叉验证。如果发现不一致,调整你的假设。
|
||||
- 在添加日志时,确保它们被策略性地放置,以便同时确认或排除多个潜在原因。如果日志不支持你的假设,请先提出替代的调试策略,再继续深入分析。
|
||||
- 在实施修复之前,先总结问题现象、经过验证的假设,以及预期的日志输出,以确认问题是否真正得到解决。
|
||||
Reference in New Issue
Block a user