Skip to content

Commit 88c6996

Browse files
committed
Merge branch 'main'
2 parents 833bcbb + cee7a6e commit 88c6996

123 files changed

Lines changed: 9000 additions & 4486 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.
Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
# API 和 HTTP 请求规范
2+
3+
## HTTP 请求封装
4+
- 可以使用 `简单http` 或者 `alova` 或者 `@tanstack/vue-query` 进行请求管理
5+
- HTTP 配置在 [src/http/](mdc:src/http/) 目录下
6+
- `简单http` - [src/http/http.ts](mdc:src/http/http.ts)
7+
- `alova` - [src/http/alova.ts](mdc:src/http/alova.ts)
8+
- `vue-query` - [src/http/vue-query.ts](mdc:src/http/vue-query.ts)
9+
- 请求拦截器在 [src/http/interceptor.ts](mdc:src/http/interceptor.ts)
10+
- 支持请求重试、缓存、错误处理
11+
12+
## API 接口规范
13+
- API 接口定义在 [src/api/](mdc:src/api/) 目录下
14+
- 按功能模块组织 API 文件
15+
- 使用 TypeScript 定义请求和响应类型
16+
- 支持 `简单http`、`alova` 和 `vue-query` 三种请求方式
17+
18+
19+
## 示例代码结构
20+
```typescript
21+
// API 接口定义
22+
export interface LoginParams {
23+
username: string
24+
password: string
25+
}
26+
27+
export interface LoginResponse {
28+
token: string
29+
userInfo: UserInfo
30+
}
31+
32+
// alova 方式
33+
export const login = (params: LoginParams) =>
34+
http.Post<LoginResponse>('/api/login', params)
35+
36+
// vue-query 方式
37+
export const useLogin = () => {
38+
return useMutation({
39+
mutationFn: (params: LoginParams) =>
40+
http.post<LoginResponse>('/api/login', params)
41+
})
42+
}
43+
```
44+
45+
## 错误处理
46+
- 统一错误处理在拦截器中配置
47+
- 支持网络错误、业务错误、认证错误等
48+
- 自动处理 token 过期和刷新
49+
---
50+
globs: src/api/*.ts,src/http/*.ts
51+
---
Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
# 开发工作流程
2+
3+
## 项目启动
4+
1. 安装依赖:`pnpm install`
5+
2. 开发环境:
6+
- H5: `pnpm dev` 或 `pnpm dev:h5`
7+
- 微信小程序: `pnpm dev:mp`
8+
- APP: `pnpm dev:app`
9+
10+
## 代码规范
11+
- 使用 ESLint 进行代码检查:`pnpm lint`
12+
- 自动修复代码格式:`pnpm lint:fix`
13+
- 使用 eslint 格式化代码
14+
- 遵循 TypeScript 严格模式
15+
16+
## 构建和部署
17+
- H5 构建:`pnpm build:h5`
18+
- 小程序构建:`pnpm build:mp`
19+
- APP 构建:`pnpm build:app`
20+
- 类型检查:`pnpm type-check`
21+
22+
## 开发工具
23+
- 推荐使用 VSCode 编辑器
24+
- 安装 Vue 和 TypeScript 相关插件
25+
- 使用 uni-app 开发者工具调试小程序
26+
- 使用 HBuilderX 调试 APP
27+
28+
## 调试技巧
29+
- 使用 console.log 和 uni.showToast 调试
30+
- 利用 Vue DevTools 调试组件状态
31+
- 使用网络面板调试 API 请求
32+
- 平台差异测试和兼容性检查
33+
34+
## 性能优化
35+
- 使用懒加载和代码分割
36+
- 优化图片和静态资源
37+
- 减少不必要的重渲染
38+
- 合理使用缓存策略
39+
---
40+
description: 开发工作流程和最佳实践指南
41+
---

.cursor/rules/project-overview.mdc

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
---
2+
alwaysApply: true
3+
---
4+
# unibest 项目概览
5+
6+
这是一个基于 uniapp + Vue3 + TypeScript + Vite5 + UnoCSS 的跨平台开发框架。
7+
8+
## 项目特点
9+
- 支持 H5、小程序、APP 多平台开发
10+
- 使用最新的前端技术栈
11+
- 内置约定式路由、layout布局、请求封装等功能
12+
- 无需依赖 HBuilderX,支持命令行开发
13+
14+
## 核心配置文件
15+
- [package.json](mdc:package.json) - 项目依赖和脚本配置
16+
- [vite.config.ts](mdc:vite.config.ts) - Vite 构建配置
17+
- [pages.config.ts](mdc:pages.config.ts) - 页面路由配置
18+
- [manifest.config.ts](mdc:manifest.config.ts) - 应用清单配置
19+
- [uno.config.ts](mdc:uno.config.ts) - UnoCSS 配置
20+
21+
## 主要目录结构
22+
- `src/pages/` - 页面文件
23+
- `src/components/` - 组件文件
24+
- `src/layouts/` - 布局文件
25+
- `src/api/` - API 接口
26+
- `src/http/` - HTTP 请求封装
27+
- `src/store/` - 状态管理
28+
- `src/tabbar/` - 底部导航栏
29+
30+
## 开发命令
31+
- `pnpm dev` - 开发 H5 版本
32+
- `pnpm dev:mp` - 开发微信小程序
33+
- `pnpm dev:app` - 开发 APP 版本
34+
- `pnpm build` - 构建生产版本
Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
# 样式和 CSS 开发规范
2+
3+
## UnoCSS 原子化 CSS
4+
- 项目使用 UnoCSS 作为原子化 CSS 框架
5+
- 配置在 [uno.config.ts](mdc:uno.config.ts)
6+
- 支持预设和自定义规则
7+
- 优先使用原子化类名,减少自定义 CSS
8+
9+
## SCSS 规范
10+
- 使用 SCSS 预处理器
11+
- 样式文件使用 `lang="scss"` 和 `scoped` 属性
12+
- 遵循 BEM 命名规范
13+
- 使用变量和混入提高复用性
14+
15+
## 样式组织
16+
- 全局样式在 [src/style/](mdc:src/style/) 目录下
17+
- 组件样式使用 scoped 作用域
18+
- 图标字体在 [src/style/iconfont.css](mdc:src/style/iconfont.css)
19+
- 主题变量在 [src/uni_modules/uni-scss/](mdc:src/uni_modules/uni-scss/) 目录下
20+
21+
## 示例代码结构
22+
```vue
23+
<template>
24+
<view class="container flex flex-col items-center p-4">
25+
<text class="title text-lg font-bold mb-2">标题</text>
26+
<view class="content bg-gray-100 rounded-lg p-3">
27+
<!-- 内容 -->
28+
</view>
29+
</view>
30+
</template>
31+
32+
<style lang="scss" scoped>
33+
.container {
34+
min-height: 100vh;
35+
36+
.title {
37+
color: var(--primary-color);
38+
}
39+
40+
.content {
41+
width: 100%;
42+
max-width: 600rpx;
43+
}
44+
}
45+
</style>
46+
47+
## 响应式设计
48+
- 使用 rpx 单位适配不同屏幕
49+
- 支持横屏和竖屏布局
50+
- 使用 flexbox 和 grid 布局
51+
- 考虑不同平台的样式差异
52+
---
53+
globs: *.vue,*.scss,*.css
54+
---

.cursor/rules/uni-app-patterns.mdc

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
# uni-app 开发规范
2+
3+
## 页面开发
4+
- 页面文件放在 [src/pages/](mdc:src/pages/) 目录下
5+
- 使用约定式路由,文件名即路由路径
6+
- 页面配置在仅需要在 `route-block` 中配置标题等内容即可,会自动生成到 `pages.json` 中
7+
8+
## 组件开发
9+
- 组件文件放在 [src/components/](mdc:src/components/) 目录下
10+
- 使用 uni-app 内置组件和第三方组件库
11+
- 支持 wot-design-uni\uv-ui\uview-plus 等多种第三方组件库 和 z-paging 组件
12+
- 自定义组件遵循 uni-app 组件规范
13+
14+
## 平台适配
15+
- 使用条件编译处理平台差异
16+
- 支持 H5、小程序、APP 多平台
17+
- 注意各平台的 API 差异
18+
- 使用 uni.xxx API 替代原生 API
19+
20+
## 示例代码结构
21+
```vue
22+
<script setup lang="ts">
23+
// #ifdef H5
24+
import { h5Api } from '@/utils/h5'
25+
// #endif
26+
27+
// #ifdef MP-WEIXIN
28+
import { mpApi } from '@/utils/mp'
29+
// #endif
30+
31+
const handleClick = () => {
32+
// #ifdef H5
33+
h5Api.showToast('H5 平台')
34+
// #endif
35+
36+
// #ifdef MP-WEIXIN
37+
mpApi.showToast('微信小程序')
38+
// #endif
39+
}
40+
</script>
41+
42+
<template>
43+
<view class="page">
44+
<!-- uni-app 组件 -->
45+
<button @click="handleClick">点击</button>
46+
47+
<!-- 条件渲染 -->
48+
<!-- #ifdef H5 -->
49+
<view>H5 特有内容</view>
50+
<!-- #endif -->
51+
</view>
52+
</template>
53+
```
54+
55+
## 生命周期
56+
- 使用 uni-app 页面生命周期
57+
- onLoad、onShow、onReady、onHide、onUnload
58+
- 组件生命周期遵循 Vue3 规范
59+
- 注意页面栈和导航管理
60+
---
61+
globs: src/pages/*.vue,src/components/*.vue
62+
---
Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
# Vue3 + TypeScript 开发规范
2+
3+
## Vue 组件规范
4+
- 使用 Composition API 和 `<script setup>` 语法
5+
- 组件文件使用 PascalCase 命名
6+
- 页面文件放在 `src/pages/` 目录下
7+
- 组件文件放在 `src/components/` 目录下
8+
9+
## Vue SFC 组件规范
10+
- `<script setup>` 标签必须是第一个子元素
11+
- `<template>` 标签必须是第二个子元素
12+
- `<style scoped>` 标签必须是最后一个子元素(因为推荐使用原子化类名,所以很可能没有)
13+
14+
## TypeScript 规范
15+
- 严格使用 TypeScript,避免使用 `any` 类型
16+
- 为 API 响应数据定义接口类型
17+
- 使用 `interface` 定义对象类型,`type` 定义联合类型
18+
- 导入类型时使用 `import type` 语法
19+
20+
## 状态管理
21+
- 使用 Pinia 进行状态管理
22+
- Store 文件放在 `src/store/` 目录下
23+
- 使用 `defineStore` 定义 store
24+
- 支持持久化存储
25+
26+
## 示例代码结构
27+
```vue
28+
<script setup lang="ts">
29+
import { ref, onMounted } from 'vue'
30+
import type { UserInfo } from '@/types/user'
31+
32+
const userInfo = ref<UserInfo | null>(null)
33+
34+
onMounted(() => {
35+
// 初始化逻辑
36+
})
37+
</script>
38+
39+
<template>
40+
<view class="container">
41+
<!-- 模板内容 -->
42+
</view>
43+
</template>
44+
45+
<style lang="scss" scoped>
46+
.container {
47+
// 样式
48+
}
49+
</style>
50+
---
51+
globs: *.vue,*.ts,*.tsx
52+
---

0 commit comments

Comments
 (0)