feat(dev): 项目初始化。
This commit is contained in:
夏犀麟
commit
48e34f1abf
8
.changeset/README.md
Normal file
8
.changeset/README.md
Normal file
@ -0,0 +1,8 @@
|
||||
# Changesets
|
||||
|
||||
Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
|
||||
with multi-package repos, or single-package repos to help you version and publish your code. You can
|
||||
find the full documentation for it [in our repository](https://github.com/changesets/changesets).
|
||||
|
||||
We have a quick list of common questions to get you started engaging with this project in
|
||||
[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md).
|
||||
11
.changeset/config.json
Normal file
11
.changeset/config.json
Normal file
@ -0,0 +1,11 @@
|
||||
{
|
||||
"$schema": "https://unpkg.com/@changesets/config@3.1.3/schema.json",
|
||||
"changelog": "@changesets/cli/changelog",
|
||||
"commit": false,
|
||||
"fixed": [],
|
||||
"linked": [],
|
||||
"access": "restricted",
|
||||
"baseBranch": "base",
|
||||
"updateInternalDependencies": "patch",
|
||||
"ignore": []
|
||||
}
|
||||
3
.commitlintrc.cjs
Normal file
3
.commitlintrc.cjs
Normal file
@ -0,0 +1,3 @@
|
||||
module.exports = {
|
||||
extends: ['@commitlint/config-conventional'],
|
||||
}
|
||||
51
.cursor/rules/api-http-patterns.mdc
Normal file
51
.cursor/rules/api-http-patterns.mdc
Normal file
@ -0,0 +1,51 @@
|
||||
# API 和 HTTP 请求规范
|
||||
|
||||
## HTTP 请求封装
|
||||
- 可以使用 `简单http` 或者 `alova` 或者 `@tanstack/vue-query` 进行请求管理
|
||||
- HTTP 配置在 [src/http/](mdc:src/http/) 目录下
|
||||
- `简单http` - [src/http/http.ts](mdc:src/http/http.ts)
|
||||
- `alova` - [src/http/alova.ts](mdc:src/http/alova.ts)
|
||||
- `vue-query` - [src/http/vue-query.ts](mdc:src/http/vue-query.ts)
|
||||
- 请求拦截器在 [src/http/interceptor.ts](mdc:src/http/interceptor.ts)
|
||||
- 支持请求重试、缓存、错误处理
|
||||
|
||||
## API 接口规范
|
||||
- API 接口定义在 [src/api/](mdc:src/api/) 目录下
|
||||
- 按功能模块组织 API 文件
|
||||
- 使用 TypeScript 定义请求和响应类型
|
||||
- 支持 `简单http`、`alova` 和 `vue-query` 三种请求方式
|
||||
|
||||
|
||||
## 示例代码结构
|
||||
```typescript
|
||||
// API 接口定义
|
||||
export interface LoginParams {
|
||||
username: string
|
||||
password: string
|
||||
}
|
||||
|
||||
export interface LoginResponse {
|
||||
token: string
|
||||
userInfo: UserInfo
|
||||
}
|
||||
|
||||
// alova 方式
|
||||
export const login = (params: LoginParams) =>
|
||||
http.Post<LoginResponse>('/api/login', params)
|
||||
|
||||
// vue-query 方式
|
||||
export const useLogin = () => {
|
||||
return useMutation({
|
||||
mutationFn: (params: LoginParams) =>
|
||||
http.post<LoginResponse>('/api/login', params)
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
## 错误处理
|
||||
- 统一错误处理在拦截器中配置
|
||||
- 支持网络错误、业务错误、认证错误等
|
||||
- 自动处理 token 过期和刷新
|
||||
---
|
||||
globs: src/api/*.ts,src/http/*.ts
|
||||
---
|
||||
43
.cursor/rules/development-workflow.mdc
Normal file
43
.cursor/rules/development-workflow.mdc
Normal file
@ -0,0 +1,43 @@
|
||||
# 开发工作流程
|
||||
|
||||
## 项目启动
|
||||
1. 安装依赖：`pnpm install`
|
||||
2. 开发环境：
|
||||
- H5: `pnpm dev` 或 `pnpm dev:h5`
|
||||
- 微信小程序: `pnpm dev:mp`
|
||||
- 支付宝小程序: `pnpm dev:mp-alipay`
|
||||
- APP: `pnpm dev:app`
|
||||
|
||||
## 代码规范
|
||||
- 使用 ESLint 进行代码检查：`pnpm lint`
|
||||
- 自动修复代码格式：`pnpm lint:fix`
|
||||
- 使用 eslint 格式化代码
|
||||
- 遵循 TypeScript 严格模式
|
||||
|
||||
## 构建和部署
|
||||
- H5 构建：`pnpm build:h5`
|
||||
- 微信小程序构建：`pnpm build:mp`
|
||||
- 支付宝小程序构建：`pnpm build:mp-alipay`
|
||||
- APP 构建：`pnpm build:app`
|
||||
- 类型检查：`pnpm type-check`
|
||||
|
||||
## 开发工具
|
||||
- 推荐使用 VSCode 编辑器
|
||||
- 安装 Vue 和 TypeScript 相关插件
|
||||
- 使用 uni-app 开发者工具调试小程序
|
||||
- 使用 HBuilderX 调试 APP
|
||||
|
||||
## 调试技巧
|
||||
- 使用 console.log 和 uni.showToast 调试
|
||||
- 利用 Vue DevTools 调试组件状态
|
||||
- 使用网络面板调试 API 请求
|
||||
- 平台差异测试和兼容性检查
|
||||
|
||||
## 性能优化
|
||||
- 使用懒加载和代码分割
|
||||
- 优化图片和静态资源
|
||||
- 减少不必要的重渲染
|
||||
- 合理使用缓存策略
|
||||
---
|
||||
description: 开发工作流程和最佳实践指南
|
||||
---
|
||||
36
.cursor/rules/project-overview.mdc
Normal file
36
.cursor/rules/project-overview.mdc
Normal file
@ -0,0 +1,36 @@
|
||||
---
|
||||
alwaysApply: true
|
||||
---
|
||||
# unibest 项目概览
|
||||
|
||||
这是一个基于 uniapp + Vue3 + TypeScript + Vite5 + UnoCSS 的跨平台开发框架。
|
||||
|
||||
## 项目特点
|
||||
- 支持 H5、小程序、APP 多平台开发
|
||||
- 使用最新的前端技术栈
|
||||
- 内置约定式路由、layout布局、请求封装、登录拦截、自定义tabbar等功能
|
||||
- 无需依赖 HBuilderX，支持命令行开发
|
||||
|
||||
## 核心配置文件
|
||||
- [package.json](mdc:package.json) - 项目依赖和脚本配置
|
||||
- [vite.config.ts](mdc:vite.config.ts) - Vite 构建配置
|
||||
- [pages.config.ts](mdc:pages.config.ts) - 页面路由配置
|
||||
- [manifest.config.ts](mdc:manifest.config.ts) - 应用清单配置
|
||||
- [uno.config.ts](mdc:uno.config.ts) - UnoCSS 配置
|
||||
|
||||
## 主要目录结构
|
||||
- `src/pages/` - 页面文件
|
||||
- `src/components/` - 组件文件
|
||||
- `src/layouts/` - 布局文件
|
||||
- `src/api/` - API 接口
|
||||
- `src/http/` - HTTP 请求封装
|
||||
- `src/store/` - 状态管理
|
||||
- `src/tabbar/` - 底部导航栏
|
||||
- `src/App.ku.vue` - 全局根组件（类似 App.vue 里面的 template作用）
|
||||
|
||||
## 开发命令
|
||||
- `pnpm dev` - 开发 H5 版本
|
||||
- `pnpm dev:mp` - 开发微信小程序
|
||||
- `pnpm dev:mp-alipay` - 开发支付宝小程序（含钉钉）
|
||||
- `pnpm dev:app` - 开发 APP 版本
|
||||
- `pnpm build` - 构建生产版本
|
||||
54
.cursor/rules/styling-css-patterns.mdc
Normal file
54
.cursor/rules/styling-css-patterns.mdc
Normal file
@ -0,0 +1,54 @@
|
||||
# 样式和 CSS 开发规范
|
||||
|
||||
## UnoCSS 原子化 CSS
|
||||
- 项目使用 UnoCSS 作为原子化 CSS 框架
|
||||
- 配置在 [uno.config.ts](mdc:uno.config.ts)
|
||||
- 支持预设和自定义规则
|
||||
- 优先使用原子化类名，减少自定义 CSS
|
||||
|
||||
## SCSS 规范
|
||||
- 使用 SCSS 预处理器
|
||||
- 样式文件使用 `lang="scss"` 和 `scoped` 属性
|
||||
- 遵循 BEM 命名规范
|
||||
- 使用变量和混入提高复用性
|
||||
|
||||
## 样式组织
|
||||
- 全局样式在 [src/style/](mdc:src/style/) 目录下
|
||||
- 组件样式使用 scoped 作用域
|
||||
- 图标字体在 [src/style/iconfont.css](mdc:src/style/iconfont.css)
|
||||
- 主题变量在 [src/uni_modules/uni-scss/](mdc:src/uni_modules/uni-scss/) 目录下
|
||||
|
||||
## 示例代码结构
|
||||
```vue
|
||||
<template>
|
||||
<view class="container flex flex-col items-center p-4">
|
||||
<text class="title text-lg font-bold mb-2">标题</text>
|
||||
<view class="content bg-gray-100 rounded-lg p-3">
|
||||
<!-- 内容 -->
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
min-height: 100vh;
|
||||
|
||||
.title {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
max-width: 600rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## 响应式设计
|
||||
- 使用 rpx 单位适配不同屏幕
|
||||
- 支持横屏和竖屏布局
|
||||
- 使用 flexbox 和 grid 布局
|
||||
- 考虑不同平台的样式差异
|
||||
---
|
||||
globs: *.vue,*.scss,*.css
|
||||
---
|
||||
63
.cursor/rules/uni-app-patterns.mdc
Normal file
63
.cursor/rules/uni-app-patterns.mdc
Normal file
@ -0,0 +1,63 @@
|
||||
# uni-app 开发规范
|
||||
|
||||
## 页面开发
|
||||
- 页面文件放在 [src/pages/](mdc:src/pages/) 目录下
|
||||
- 使用约定式路由，文件名即路由路径
|
||||
- 页面配置在仅需要在 宏`definePage` 中配置标题等内容即可，会自动生成到 `pages.json` 中
|
||||
- definePage的顺序在最上面
|
||||
|
||||
## 组件开发
|
||||
- 组件文件放在 [src/components/](mdc:src/components/) 或者 [src/pages/xx/components/](mdc:src/pages/xx/components/) 目录下
|
||||
- 使用 uni-app 内置组件和第三方组件库
|
||||
- 支持 wot-ui\uview-pro\uv-ui\sard-ui\uview-plus 等多种第三方组件库 和 z-paging 组件
|
||||
- 自定义组件遵循 uni-app 组件规范
|
||||
|
||||
## 平台适配
|
||||
- 使用条件编译处理平台差异
|
||||
- 支持 H5、小程序、APP 多平台
|
||||
- 注意各平台的 API 差异
|
||||
- 使用 uni.xxx API 替代原生 API
|
||||
|
||||
## 示例代码结构
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
// #ifdef H5
|
||||
import { h5Api } from '@/utils/h5'
|
||||
// #endif
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
import { mpApi } from '@/utils/mp'
|
||||
// #endif
|
||||
|
||||
const handleClick = () => {
|
||||
// #ifdef H5
|
||||
h5Api.showToast('H5 平台')
|
||||
// #endif
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
mpApi.showToast('微信小程序')
|
||||
// #endif
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="page">
|
||||
<!-- uni-app 组件 -->
|
||||
<button @click="handleClick">点击</button>
|
||||
|
||||
<!-- 条件渲染 -->
|
||||
<!-- #ifdef H5 -->
|
||||
<view>H5 特有内容</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
## 生命周期
|
||||
- 使用 uni-app 页面生命周期
|
||||
- onLoad、onShow、onReady、onHide、onUnload
|
||||
- 组件生命周期遵循 Vue3 规范
|
||||
- 注意页面栈和导航管理
|
||||
---
|
||||
globs: src/pages/*.vue,src/components/*.vue
|
||||
---
|
||||
53
.cursor/rules/vue-typescript-patterns.mdc
Normal file
53
.cursor/rules/vue-typescript-patterns.mdc
Normal file
@ -0,0 +1,53 @@
|
||||
# Vue3 + TypeScript 开发规范
|
||||
|
||||
## Vue 组件规范
|
||||
- 使用 Composition API 和 `<script setup>` 语法
|
||||
- 组件文件使用 PascalCase 命名
|
||||
- 页面文件放在 `src/pages/` 目录下
|
||||
- 全局组件文件放在 `src/components/` 目录下
|
||||
- 局部组件文件放在页面的 `/components/` 目录下
|
||||
|
||||
## Vue SFC 组件规范
|
||||
- `<script setup lang="ts">` 标签必须是第一个子元素
|
||||
- `<template>` 标签必须是第二个子元素
|
||||
- `<style scoped>` 标签必须是最后一个子元素（因为推荐使用原子化类名，所以很可能没有）
|
||||
|
||||
## TypeScript 规范
|
||||
- 严格使用 TypeScript，避免使用 `any` 类型
|
||||
- 为 API 响应数据定义接口类型
|
||||
- 使用 `interface` 定义对象类型，`type` 定义联合类型
|
||||
- 导入类型时使用 `import type` 语法
|
||||
|
||||
## 状态管理
|
||||
- 使用 Pinia 进行状态管理
|
||||
- Store 文件放在 `src/store/` 目录下
|
||||
- 使用 `defineStore` 定义 store
|
||||
- 支持持久化存储
|
||||
|
||||
## 示例代码结构
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import type { UserInfo } from '@/types/user'
|
||||
|
||||
const userInfo = ref<UserInfo | null>(null)
|
||||
|
||||
onMounted(() => {
|
||||
// 初始化逻辑
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="container">
|
||||
<!-- 模板内容 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
// 样式
|
||||
}
|
||||
</style>
|
||||
---
|
||||
globs: *.vue,*.ts,*.tsx
|
||||
---
|
||||
13
.editorconfig
Normal file
13
.editorconfig
Normal file
@ -0,0 +1,13 @@
|
||||
root = true
|
||||
|
||||
[*] # 表示所有文件适用
|
||||
charset = utf-8 # 设置文件字符集为 utf-8
|
||||
indent_style = space # 缩进风格（tab | space）
|
||||
indent_size = 2 # 缩进大小
|
||||
end_of_line = lf # 控制换行类型(lf | cr | crlf)
|
||||
trim_trailing_whitespace = true # 去除行首的任意空白字符
|
||||
insert_final_newline = true # 始终在文件末尾插入一个新行
|
||||
|
||||
[*.md] # 表示仅 md 文件适用以下规则
|
||||
max_line_length = off # 关闭最大行长度限制
|
||||
trim_trailing_whitespace = false # 关闭末尾空格修剪
|
||||
48
.gitignore
vendored
Normal file
48
.gitignore
vendored
Normal file
@ -0,0 +1,48 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
.DS_Store
|
||||
dist
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.idea
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
.hbuilderx
|
||||
|
||||
.stylelintcache
|
||||
.eslintcache
|
||||
|
||||
docs/.vitepress/dist
|
||||
docs/.vitepress/cache
|
||||
|
||||
src/types
|
||||
# 单独把这个文件排除掉，用以解决部分电脑生成的 auto-import.d.ts 的API不完整导致类型提示报错问题
|
||||
!src/types/auto-import.d.ts
|
||||
src/manifest.json
|
||||
src/pages.json
|
||||
|
||||
# 2025-10-15 by 菲鸽： lock 文件还是需要加入版本管理，今天又遇到版本不一致导致无法运行的问题了。
|
||||
# pnpm-lock.yaml
|
||||
# package-lock.json
|
||||
|
||||
# TIPS：如果某些文件已经加入了版本管理，现在重新加入 .gitignore 是不生效的，需要执行下面的操作
|
||||
# `git rm -r --cached .` 然后提交 commit 即可。
|
||||
|
||||
# git rm -r --cached file1 file2 ## 针对某些文件
|
||||
# git rm -r --cached dir1 dir2 ## 针对某些文件夹
|
||||
# git rm -r --cached . ## 针对所有文件
|
||||
|
||||
# 更新 uni-app 官方版本
|
||||
# npx @dcloudio/uvm@latest
|
||||
1
.husky/commit-msg
Normal file
1
.husky/commit-msg
Normal file
@ -0,0 +1 @@
|
||||
npx --no-install commitlint --edit "$1"
|
||||
1
.husky/pre-commit
Normal file
1
.husky/pre-commit
Normal file
@ -0,0 +1 @@
|
||||
npx lint-staged --allow-empty
|
||||
9
.npmrc
Normal file
9
.npmrc
Normal file
@ -0,0 +1,9 @@
|
||||
# registry = https://registry.npmjs.org
|
||||
registry = https://registry.npmmirror.com
|
||||
|
||||
strict-peer-dependencies=false
|
||||
auto-install-peers=true
|
||||
shamefully-hoist=true
|
||||
ignore-workspace-root-check=true
|
||||
install-workspace-root=true
|
||||
node-options=--max-old-space-size=8192
|
||||
123
.trae/rules/project_rules.md
Normal file
123
.trae/rules/project_rules.md
Normal file
@ -0,0 +1,123 @@
|
||||
# unibest 项目概览
|
||||
|
||||
这是一个基于 uniapp + Vue3 + TypeScript + Vite5 + UnoCSS 的跨平台开发框架。
|
||||
|
||||
## 项目特点
|
||||
- 支持 H5、小程序、APP 多平台开发
|
||||
- 使用最新的前端技术栈
|
||||
- 内置约定式路由、layout布局、请求封装等功能
|
||||
- 无需依赖 HBuilderX，支持命令行开发
|
||||
|
||||
## 核心配置文件
|
||||
- [package.json](mdc:package.json) - 项目依赖和脚本配置
|
||||
- [vite.config.ts](mdc:vite.config.ts) - Vite 构建配置
|
||||
- [pages.config.ts](mdc:pages.config.ts) - 页面路由配置
|
||||
- [manifest.config.ts](mdc:manifest.config.ts) - 应用清单配置
|
||||
- [uno.config.ts](mdc:uno.config.ts) - UnoCSS 配置
|
||||
|
||||
## 主要目录结构
|
||||
- `src/pages/` - 页面文件
|
||||
- `src/components/` - 组件文件
|
||||
- `src/layouts/` - 布局文件
|
||||
- `src/api/` - API 接口
|
||||
- `src/http/` - HTTP 请求封装
|
||||
- `src/store/` - 状态管理
|
||||
- `src/tabbar/` - 底部导航栏
|
||||
- `src/App.ku.vue` - 全局根组件（类似 App.vue 里面的 template作用）
|
||||
|
||||
## 开发命令
|
||||
- `pnpm dev` - 开发 H5 版本
|
||||
- `pnpm dev:mp` - 开发微信小程序
|
||||
- `pnpm dev:mp-alipay` - 开发支付宝小程序(含钉钉)
|
||||
- `pnpm dev:app` - 开发 APP 版本
|
||||
- `pnpm build` - 构建生产版本
|
||||
|
||||
## Vue 组件规范
|
||||
- 使用 Composition API 和 `<script setup>` 语法
|
||||
- 组件文件使用 PascalCase 命名
|
||||
- 页面文件放在 `src/pages/` 目录下
|
||||
- 全局组件文件放在 `src/components/` 目录下
|
||||
- 局部组件文件放在页面的 `/components/` 目录下
|
||||
|
||||
## TypeScript 规范
|
||||
- 严格使用 TypeScript，避免使用 `any` 类型
|
||||
- 为 API 响应数据定义接口类型
|
||||
- 使用 `interface` 定义对象类型，`type` 定义联合类型
|
||||
- 导入类型时使用 `import type` 语法
|
||||
|
||||
## 状态管理
|
||||
- 使用 Pinia 进行状态管理
|
||||
- Store 文件放在 `src/store/` 目录下
|
||||
- 使用 `defineStore` 定义 store
|
||||
- 支持持久化存储
|
||||
|
||||
## UnoCSS 原子化 CSS
|
||||
- 项目使用 UnoCSS 作为原子化 CSS 框架
|
||||
- 配置在 [uno.config.ts]
|
||||
- 支持预设和自定义规则
|
||||
- 优先使用原子化类名，减少自定义 CSS
|
||||
|
||||
## Vue SFC 组件规范
|
||||
- `<script setup lang="ts">` 标签必须是第一个子元素
|
||||
- `<template>` 标签必须是第二个子元素
|
||||
- `<style scoped>` 标签必须是最后一个子元素（因为推荐使用原子化类名，所以很可能没有）
|
||||
|
||||
## 页面开发
|
||||
- 页面文件放在 [src/pages/]目录下
|
||||
- 使用约定式路由，文件名即路由路径
|
||||
- 页面配置在仅需要在 宏`definePage` 中配置标题等内容即可，会自动生成到 `pages.json` 中
|
||||
- definePage的顺序在最上面
|
||||
|
||||
## 组件开发
|
||||
- 全局组件文件放在 `src/components/` 目录下
|
||||
- 局部组件文件放在页面的 `/components/` 目录下
|
||||
- 使用 uni-app 内置组件和第三方组件库
|
||||
- 支持 wot-ui\uview-pro\uv-ui\sard-ui\uview-plus 等多种第三方组件库 和 z-paging 组件
|
||||
- 自定义组件遵循 uni-app 组件规范
|
||||
|
||||
## 平台适配
|
||||
- 使用条件编译处理平台差异
|
||||
- 支持 H5、小程序、APP 多平台
|
||||
- 注意各平台的 API 差异
|
||||
- 使用 uni.xxx API 替代原生 API
|
||||
|
||||
## 示例代码结构
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
// #ifdef H5
|
||||
import { h5Api } from '@/utils/h5'
|
||||
// #endif
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
import { mpApi } from '@/utils/mp'
|
||||
// #endif
|
||||
|
||||
const handleClick = () => {
|
||||
// #ifdef H5
|
||||
h5Api.showToast('H5 平台')
|
||||
// #endif
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
mpApi.showToast('微信小程序')
|
||||
// #endif
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="page">
|
||||
<!-- uni-app 组件 -->
|
||||
<button @click="handleClick">点击</button>
|
||||
|
||||
<!-- 条件渲染 -->
|
||||
<!-- #ifdef H5 -->
|
||||
<view>H5 特有内容</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
## 生命周期
|
||||
- 使用 uni-app 页面生命周期
|
||||
- onLoad、onShow、onReady、onHide、onUnload
|
||||
- 组件生命周期遵循 Vue3 规范
|
||||
- 注意页面栈和导航管理
|
||||
15
.vscode/extensions.json
vendored
Normal file
15
.vscode/extensions.json
vendored
Normal file
@ -0,0 +1,15 @@
|
||||
{
|
||||
"recommendations": [
|
||||
"vue.volar",
|
||||
"dbaeumer.vscode-eslint",
|
||||
"antfu.unocss",
|
||||
"antfu.iconify",
|
||||
"evils.uniapp-vscode",
|
||||
"uni-helper.uni-helper-vscode",
|
||||
"uni-helper.uni-app-schemas-vscode",
|
||||
"uni-helper.uni-highlight-vscode",
|
||||
"uni-helper.uni-ui-snippets-vscode",
|
||||
"uni-helper.uni-app-snippets-vscode",
|
||||
"streetsidesoftware.code-spell-checker"
|
||||
]
|
||||
}
|
||||
102
.vscode/settings.json
vendored
Normal file
102
.vscode/settings.json
vendored
Normal file
@ -0,0 +1,102 @@
|
||||
{
|
||||
// 配置语言的文件关联
|
||||
"files.associations": {
|
||||
"pages.json": "jsonc", // pages.json 可以写注释
|
||||
"manifest.json": "jsonc" // manifest.json 可以写注释
|
||||
},
|
||||
|
||||
"stylelint.enable": false, // 禁用 stylelint
|
||||
"css.validate": false, // 禁用 CSS 内置验证
|
||||
"scss.validate": false, // 禁用 SCSS 内置验证
|
||||
"less.validate": false, // 禁用 LESS 内置验证
|
||||
|
||||
// 新版本 VsCode 中这个配置已失效
|
||||
"typescript.tsdk": "node_modules/typescript/lib",
|
||||
|
||||
// 配置新版本 VsCode 工作区的 TypeScript 的版本
|
||||
"js/ts.tsdk.path": "node_modules/typescript/lib",
|
||||
"js/ts.tsdk.promptToUseWorkspaceVersion": true,
|
||||
|
||||
"explorer.fileNesting.enabled": true,
|
||||
"explorer.fileNesting.expand": false,
|
||||
"explorer.fileNesting.patterns": {
|
||||
"README.md": "index.html,favicon.ico,robots.txt,CHANGELOG.md",
|
||||
"docker.md": "Dockerfile,docker*.md,nginx*,.dockerignore",
|
||||
"pages.config.ts": "manifest.config.ts,openapi-ts-request.config.ts",
|
||||
"package.json": "tsconfig.json,pnpm-lock.yaml,pnpm-workspace.yaml,LICENSE,.gitattributes,.gitignore,.gitpod.yml,CNAME,.npmrc,.browserslistrc",
|
||||
"eslint.config.mjs": ".commitlintrc.*,.prettier*,.editorconfig,.commitlint.cjs,.eslint*"
|
||||
},
|
||||
|
||||
// Disable the default formatter, use eslint instead
|
||||
"prettier.enable": false,
|
||||
"editor.formatOnSave": false,
|
||||
|
||||
// Auto fix
|
||||
"editor.codeActionsOnSave": {
|
||||
"source.fixAll.eslint": "explicit",
|
||||
"source.organizeImports": "never"
|
||||
},
|
||||
|
||||
// Silent the stylistic rules in you IDE, but still auto fix them
|
||||
"eslint.rules.customizations": [
|
||||
{ "rule": "style/*", "severity": "off", "fixable": true },
|
||||
{ "rule": "format/*", "severity": "off", "fixable": true },
|
||||
{ "rule": "*-indent", "severity": "off", "fixable": true },
|
||||
{ "rule": "*-spacing", "severity": "off", "fixable": true },
|
||||
{ "rule": "*-spaces", "severity": "off", "fixable": true },
|
||||
{ "rule": "*-order", "severity": "off", "fixable": true },
|
||||
{ "rule": "*-dangle", "severity": "off", "fixable": true },
|
||||
{ "rule": "*-newline", "severity": "off", "fixable": true },
|
||||
{ "rule": "*quotes", "severity": "off", "fixable": true },
|
||||
{ "rule": "*semi", "severity": "off", "fixable": true }
|
||||
],
|
||||
|
||||
// Enable eslint for all supported languages
|
||||
"eslint.validate": [
|
||||
"javascript",
|
||||
"javascriptreact",
|
||||
"typescript",
|
||||
"typescriptreact",
|
||||
"vue",
|
||||
"html",
|
||||
"markdown",
|
||||
"json",
|
||||
"jsonc",
|
||||
"yaml",
|
||||
"toml",
|
||||
"xml",
|
||||
"gql",
|
||||
"graphql",
|
||||
"astro",
|
||||
"svelte",
|
||||
"css",
|
||||
"less",
|
||||
"scss",
|
||||
"pcss",
|
||||
"postcss"
|
||||
],
|
||||
"cSpell.words": [
|
||||
"alova",
|
||||
"Aplipay",
|
||||
"attributify",
|
||||
"chooseavatar",
|
||||
"climblee",
|
||||
"commitlint",
|
||||
"dcloudio",
|
||||
"iconfont",
|
||||
"oxlint",
|
||||
"qrcode",
|
||||
"refresherrefresh",
|
||||
"scrolltolower",
|
||||
"tabbar",
|
||||
"Toutiao",
|
||||
"uniapp",
|
||||
"unibest",
|
||||
"unocss",
|
||||
"uview",
|
||||
"uvui",
|
||||
"Wechat",
|
||||
"WechatMiniprogram",
|
||||
"Weixin"
|
||||
]
|
||||
}
|
||||
80
.vscode/vue3.code-snippets
vendored
Normal file
80
.vscode/vue3.code-snippets
vendored
Normal file
@ -0,0 +1,80 @@
|
||||
{
|
||||
// Place your unibest 工作区 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and
|
||||
// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope
|
||||
// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is
|
||||
// used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
|
||||
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders.
|
||||
// Placeholders with the same ids are connected.
|
||||
// Example:
|
||||
// "Print to console": {
|
||||
// "scope": "javascript,typescript",
|
||||
// "prefix": "log",
|
||||
// "body": [
|
||||
// "console.log('$1');",
|
||||
// "$2"
|
||||
// ],
|
||||
// "description": "Log output to console"
|
||||
// }
|
||||
"Print unibest Vue3 SFC": {
|
||||
"scope": "vue",
|
||||
"prefix": "v3",
|
||||
"body": [
|
||||
"<script lang=\"ts\" setup>",
|
||||
"definePage({",
|
||||
" style: {",
|
||||
" navigationBarTitleText: '$1',",
|
||||
" },",
|
||||
"})",
|
||||
"defineOptions({",
|
||||
" name: '$2',",
|
||||
" options: { ",
|
||||
" virtualHost: true,",
|
||||
" },",
|
||||
"})",
|
||||
"</script>\n",
|
||||
"<template>",
|
||||
" <view class=\"\">$3</view>",
|
||||
"</template>\n",
|
||||
"<style lang=\"scss\" scoped>",
|
||||
"//$4",
|
||||
"</style>\n",
|
||||
],
|
||||
},
|
||||
"Print unibest style": {
|
||||
"scope": "vue",
|
||||
"prefix": "st",
|
||||
"body": [
|
||||
"<style lang=\"scss\" scoped>",
|
||||
"//",
|
||||
"</style>\n"
|
||||
],
|
||||
},
|
||||
"Print unibest script with definePage": {
|
||||
"scope": "vue",
|
||||
"prefix": "sc",
|
||||
"body": [
|
||||
"<script lang=\"ts\" setup>",
|
||||
"definePage({",
|
||||
" style: {",
|
||||
" navigationBarTitleText: '$1',",
|
||||
" },",
|
||||
"})",
|
||||
"defineOptions({",
|
||||
" name: '$2',",
|
||||
" options: { ",
|
||||
" virtualHost: true,",
|
||||
" },",
|
||||
"})",
|
||||
"</script>\n"
|
||||
],
|
||||
},
|
||||
"Print unibest template": {
|
||||
"scope": "vue",
|
||||
"prefix": "te",
|
||||
"body": [
|
||||
"<template>",
|
||||
" <view class=\"\">$1</view>",
|
||||
"</template>\n"
|
||||
],
|
||||
},
|
||||
}
|
||||
21
LICENSE
Normal file
21
LICENSE
Normal file
@ -0,0 +1,21 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2025 菲鸽
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
98
README.md
Normal file
98
README.md
Normal file
@ -0,0 +1,98 @@
|
||||
<p align="center">
|
||||
<a href="https://github.com/unibest-tech/unibest">
|
||||
<img width="160" src="./src/static/logo.svg">
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<h1 align="center">
|
||||
<a href="https://github.com/unibest-tech/unibest" target="_blank">unibest - 最好的 uniapp 开发框架</a>
|
||||
</h1>
|
||||
|
||||
<div align="center">
|
||||
旧仓库 codercup 进不去了，star 也拿不回来，这里也展示一下那个地址的 star.
|
||||
|
||||
[](https://github.com/codercup/unibest)
|
||||
[](https://github.com/codercup/unibest)
|
||||
|
||||
</div>
|
||||
|
||||
<div align="center">
|
||||
|
||||
[](https://github.com/feige996/unibest)
|
||||
[](https://github.com/feige996/unibest)
|
||||
[](https://gitee.com/feige996/unibest/stargazers)
|
||||
[](https://gitee.com/feige996/unibest/members)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
`unibest` —— 最好的 `uniapp` 开发模板，由 `uniapp` + `Vue3` + `Ts` + `Vite5` + `UnoCss` + `wot-ui` + `z-paging` 构成，使用了最新的前端技术栈，无需依靠 `HBuilderX`，通过命令行方式运行 `web`、`小程序` 和 `App`（编辑器推荐 `VSCode`，可选 `webstorm`）。
|
||||
|
||||
`unibest` 内置了 `约定式路由`、`layout布局`、`请求封装`、`请求拦截`、`登录拦截`、`UnoCSS`、`i18n多语言` 等基础功能，提供了 `代码提示`、`自动格式化`、`统一配置`、`代码片段` 等辅助功能，让你编写 `uniapp` 拥有 `best` 体验 （ `unibest 的由来`）。
|
||||
|
||||
|
||||
|
||||
<p align="center">
|
||||
<a href="https://unibest.tech/" target="_blank">📖 文档地址(new)</a>
|
||||
<span style="margin:0 10px;">|</span>
|
||||
<a href="https://unibest-tech.github.io/hello-unibest" target="_blank">📱 DEMO 地址</a>
|
||||
</p>
|
||||
|
||||
---
|
||||
|
||||
注意旧的地址 [codercup](https://github.com/codercup/unibest) 我进不去了，使用新的 [feige996](https://github.com/feige996/unibest)。PR和 issue 也请使用新地址，否则无法合并。
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| H5 | IOS | 安卓 | 微信小程序 | 字节小程序 | 快手小程序 | 支付宝小程序 | 钉钉小程序 | 百度小程序 |
|
||||
| --- | --- | ---- | ---------- | ---------- | ---------- | ------------ | ---------- | ---------- |
|
||||
| √ | √ | √ | √ | √ | √ | √ | √ | √ |
|
||||
|
||||
注意每种 `UI框架` 支持的平台有所不同，详情请看各 `UI框架` 的官网，也可以看 `unibest` 文档。
|
||||
|
||||
## ⚙️ 环境
|
||||
|
||||
- node>=18
|
||||
- pnpm>=7.30
|
||||
- Vue Official>=2.1.10
|
||||
- TypeScript>=5.0
|
||||
|
||||
## 新版分支
|
||||
- main == base
|
||||
- base --> base-i18n
|
||||
- base-login --> base-login-i18n
|
||||
|
||||
## 📂 快速开始
|
||||
|
||||
执行 `pnpm create unibest` 创建项目
|
||||
执行 `pnpm i` 安装依赖
|
||||
执行 `pnpm dev` 运行 `H5`
|
||||
执行 `pnpm dev:mp` 运行 `微信小程序`
|
||||
|
||||
## 📦 运行（支持热更新）
|
||||
|
||||
- web平台： `pnpm dev:h5`, 然后打开 [http://localhost:9000/](http://localhost:9000/)。
|
||||
- weixin平台：`pnpm dev:mp` 然后打开微信开发者工具，导入本地文件夹，选择本项目的`dist/dev/mp-weixin` 文件。
|
||||
- APP平台：`pnpm dev:app`, 然后打开 `HBuilderX`，导入刚刚生成的`dist/dev/app` 文件夹，选择运行到模拟器(开发时优先使用)，或者运行的安卓/ios基座。(如果是 `安卓` 和 `鸿蒙` 平台，则不用这个方式，可以把整个unibest项目导入到hbx，通过hbx的菜单来运行到对应的平台。)
|
||||
|
||||
## 🔗 发布
|
||||
|
||||
- web平台： `pnpm build:h5`，打包后的文件在 `dist/build/h5`，可以放到web服务器，如nginx运行。如果最终不是放在根目录，可以在 `manifest.config.ts` 文件的 `h5.router.base` 属性进行修改。
|
||||
- weixin平台：`pnpm build:mp`, 打包后的文件在 `dist/build/mp-weixin`，然后通过微信开发者工具导入，并点击右上角的“上传”按钮进行上传。
|
||||
- APP平台：`pnpm build:app`, 然后打开 `HBuilderX`，导入刚刚生成的`dist/build/app` 文件夹，选择发行 - APP云打包。(如果是 `安卓` 和 `鸿蒙` 平台，则不用这个方式，可以把整个unibest项目导入到hbx，通过hbx的菜单来发行到对应的平台。)
|
||||
|
||||
## 📄 License
|
||||
|
||||
[MIT](https://opensource.org/license/mit/)
|
||||
|
||||
Copyright (c) 2025 菲鸽
|
||||
|
||||
## 捐赠
|
||||
|
||||
<p align='center'>
|
||||
<img alt="special sponsor appwrite" src="https://oss.laf.run/ukw0y1-site/pay/wepay.png" height="330" style="display:inline-block; height:330px;">
|
||||
<img alt="special sponsor appwrite" src="https://oss.laf.run/ukw0y1-site/pay/alipay.jpg" height="330" style="display:inline-block; height:330px; margin-left:10px;">
|
||||
</p>
|
||||
42
env/.env
vendored
Normal file
42
env/.env
vendored
Normal file
@ -0,0 +1,42 @@
|
||||
VITE_APP_TITLE = 'unibest'
|
||||
VITE_APP_PORT = 9000
|
||||
|
||||
VITE_UNI_APPID = '__UNI__D1E5001'
|
||||
VITE_WX_APPID = 'wxa2abb91f64032a2b'
|
||||
|
||||
# 微信开发者工具 CLI 路径，仅当默认安装路径不正确时配置（就是当 pnpm dev:mp 无法自动打开微信开发者工具时，才需要配置，通常是你更改了默认的安装位置导致的，一般出现在windows系统）
|
||||
# macOS 示例：
|
||||
# WECHAT_DEVTOOLS_CLI_PATH = '/Applications/wechatwebdevtools.app/Contents/MacOS/cli'
|
||||
# Windows 示例：
|
||||
# WECHAT_DEVTOOLS_CLI_PATH = 'C:\Program Files (x86)\Tencent\微信web开发者工具\cli.bat'
|
||||
|
||||
# h5部署网站的base，配置到 manifest.config.ts 里的 h5.router.base
|
||||
# https://uniapp.dcloud.net.cn/collocation/manifest.html#h5-router
|
||||
# 比如你要部署到 https://unibest.tech/doc/ ，则配置为 /doc/
|
||||
VITE_APP_PUBLIC_BASE=/
|
||||
|
||||
# 默认后台请求地址
|
||||
# 不同命令会按 mode 叠加读取 .env.development / .env.test / .env.production。
|
||||
# 微信小程序如果没有配置下面的专用地址，也会回退使用这个值。
|
||||
VITE_SERVER_BASEURL = 'https://ukw0y1.laf.run'
|
||||
# 备注：如果后台带统一前缀，则也要加到后面，eg: https://ukw0y1.laf.run/api
|
||||
|
||||
# 微信小程序专用后台请求地址，按微信开发者工具 envVersion 区分。
|
||||
# 不配置时会回退使用 VITE_SERVER_BASEURL。
|
||||
# VITE_SERVER_BASEURL__WEIXIN_DEVELOP = 'https://dev.xxx.com'
|
||||
# VITE_SERVER_BASEURL__WEIXIN_TRIAL = 'https://trial.xxx.com'
|
||||
# VITE_SERVER_BASEURL__WEIXIN_RELEASE = 'https://prod.xxx.com'
|
||||
|
||||
# h5是否需要配置代理
|
||||
VITE_APP_PROXY_ENABLE = false
|
||||
# 下面的不用修改，只要不跟你后台的统一前缀冲突就行。如果修改了，记得修改 `nginx` 里面的配置
|
||||
VITE_APP_PROXY_PREFIX = '/fg-api'
|
||||
|
||||
# 第二个请求地址 (目前alova中可以使用)
|
||||
VITE_SERVER_BASEURL_SECONDARY = 'https://ukw0y1.laf.run'
|
||||
|
||||
# 认证模式，'single' | 'double' ==> 单token | 双token
|
||||
VITE_AUTH_MODE = 'single'
|
||||
|
||||
# 原生插件资源复制开关，启用后 App 构建会把根目录 nativeplugins 复制到 dist
|
||||
VITE_COPY_NATIVE_RES_ENABLE = true
|
||||
9
env/.env.development
vendored
Normal file
9
env/.env.development
vendored
Normal file
@ -0,0 +1,9 @@
|
||||
# 变量必须以 VITE_ 为前缀才能暴露给外部读取
|
||||
NODE_ENV = 'development'
|
||||
# 是否去除console 和 debugger
|
||||
VITE_DELETE_CONSOLE = false
|
||||
# 是否开启sourcemap
|
||||
VITE_SHOW_SOURCEMAP = false
|
||||
|
||||
# development mode 后台请求地址
|
||||
# VITE_SERVER_BASEURL = 'https://dev.xxx.com'
|
||||
9
env/.env.production
vendored
Normal file
9
env/.env.production
vendored
Normal file
@ -0,0 +1,9 @@
|
||||
# 变量必须以 VITE_ 为前缀才能暴露给外部读取
|
||||
NODE_ENV = 'production'
|
||||
# 是否去除console 和 debugger
|
||||
VITE_DELETE_CONSOLE = true
|
||||
# 是否开启sourcemap
|
||||
VITE_SHOW_SOURCEMAP = false
|
||||
|
||||
# production mode 后台请求地址
|
||||
# VITE_SERVER_BASEURL = 'https://prod.xxx.com'
|
||||
9
env/.env.test
vendored
Normal file
9
env/.env.test
vendored
Normal file
@ -0,0 +1,9 @@
|
||||
# 变量必须以 VITE_ 为前缀才能暴露给外部读取
|
||||
NODE_ENV = 'development'
|
||||
# 是否去除console 和 debugger
|
||||
VITE_DELETE_CONSOLE = false
|
||||
# 是否开启sourcemap
|
||||
VITE_SHOW_SOURCEMAP = false
|
||||
|
||||
# test mode 后台请求地址
|
||||
# VITE_SERVER_BASEURL = 'https://test.xxx.com'
|
||||
60
eslint.config.mjs
Normal file
60
eslint.config.mjs
Normal file
@ -0,0 +1,60 @@
|
||||
import uniHelper from '@uni-helper/eslint-config'
|
||||
|
||||
export default uniHelper({
|
||||
unocss: true,
|
||||
vue: true,
|
||||
markdown: false,
|
||||
ignores: [
|
||||
// 忽略uni_modules目录
|
||||
'**/uni_modules/',
|
||||
// 忽略原生插件目录
|
||||
'**/nativeplugins/',
|
||||
'dist',
|
||||
// unplugin-auto-import 生成的类型文件，每次提交都改变，所以加入这里吧，与 .gitignore 配合使用
|
||||
'auto-import.d.ts',
|
||||
// vite-plugin-uni-pages 生成的类型文件，每次切换分支都一堆不同的，所以直接 .gitignore
|
||||
'uni-pages.d.ts',
|
||||
// 插件生成的文件
|
||||
'src/pages.json',
|
||||
'src/manifest.json',
|
||||
// 忽略自动生成文件
|
||||
'src/service/**',
|
||||
],
|
||||
// https://eslint-config.antfu.me/rules
|
||||
rules: {
|
||||
'no-useless-return': 'off',
|
||||
'no-console': 'off',
|
||||
'no-unused-vars': 'off',
|
||||
'vue/no-unused-refs': 'off',
|
||||
'unused-imports/no-unused-vars': 'off',
|
||||
'eslint-comments/no-unlimited-disable': 'off',
|
||||
'jsdoc/check-param-names': 'off',
|
||||
'jsdoc/require-returns-description': 'off',
|
||||
'ts/no-empty-object-type': 'off',
|
||||
'no-extend-native': 'off',
|
||||
// uni 条件编译注释可能包裹 import，自动排序会破坏平台条件边界
|
||||
'perfectionist/sort-imports': 'off',
|
||||
'vue/singleline-html-element-content-newline': [
|
||||
'error',
|
||||
{
|
||||
externalIgnores: ['text'],
|
||||
},
|
||||
],
|
||||
// vue SFC 调换顺序改这里
|
||||
'vue/block-order': ['error', {
|
||||
order: [['script', 'template'], 'style'],
|
||||
}],
|
||||
},
|
||||
formatters: {
|
||||
/**
|
||||
* Format CSS, LESS, SCSS files, also the `<style>` blocks in Vue
|
||||
* By default uses Prettier
|
||||
*/
|
||||
css: true,
|
||||
/**
|
||||
* Format HTML files
|
||||
* By default uses Prettier
|
||||
*/
|
||||
html: true,
|
||||
},
|
||||
})
|
||||
BIN
favicon.ico
Normal file
BIN
favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
26
index.html
Normal file
26
index.html
Normal file
@ -0,0 +1,26 @@
|
||||
<!doctype html>
|
||||
<html build-time="%BUILD_TIME%">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
|
||||
<script>
|
||||
var coverSupport =
|
||||
'CSS' in window &&
|
||||
typeof CSS.supports === 'function' &&
|
||||
(CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))
|
||||
document.write(
|
||||
'<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
|
||||
(coverSupport ? ', viewport-fit=cover' : '') +
|
||||
'" />',
|
||||
)
|
||||
</script>
|
||||
<title>%VITE_APP_TITLE%</title>
|
||||
<!--preload-links-->
|
||||
<!--app-context-->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app"><!--app-html--></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
164
manifest.config.ts
Normal file
164
manifest.config.ts
Normal file
@ -0,0 +1,164 @@
|
||||
import path from 'node:path'
|
||||
import process from 'node:process'
|
||||
// manifest.config.ts
|
||||
import { defineManifestConfig } from '@uni-helper/vite-plugin-uni-manifest'
|
||||
import { loadEnv } from 'vite'
|
||||
|
||||
// 手动解析命令行参数获取 mode
|
||||
function getMode() {
|
||||
const args = process.argv.slice(2)
|
||||
const modeFlagIndex = args.findIndex(arg => arg === '--mode')
|
||||
return modeFlagIndex !== -1 ? args[modeFlagIndex + 1] : args[0] === 'build' ? 'production' : 'development' // 默认 development
|
||||
}
|
||||
// 获取环境变量的范例
|
||||
const env = loadEnv(getMode(), path.resolve(process.cwd(), 'env'))
|
||||
const {
|
||||
VITE_APP_TITLE,
|
||||
VITE_UNI_APPID,
|
||||
VITE_WX_APPID,
|
||||
VITE_APP_PUBLIC_BASE,
|
||||
VITE_FALLBACK_LOCALE,
|
||||
} = env
|
||||
// console.log('manifest.config.ts env:', env)
|
||||
|
||||
export default defineManifestConfig({
|
||||
'name': VITE_APP_TITLE,
|
||||
'appid': VITE_UNI_APPID,
|
||||
'description': '',
|
||||
'versionName': '1.0.0',
|
||||
'versionCode': '100',
|
||||
'transformPx': false,
|
||||
'locale': VITE_FALLBACK_LOCALE, // 'zh-Hans'
|
||||
'h5': {
|
||||
router: {
|
||||
base: VITE_APP_PUBLIC_BASE,
|
||||
},
|
||||
},
|
||||
/* 5+App特有相关 */
|
||||
'app-plus': {
|
||||
usingComponents: true,
|
||||
nvueStyleCompiler: 'uni-app',
|
||||
compilerVersion: 3,
|
||||
compatible: {
|
||||
ignoreVersion: true,
|
||||
},
|
||||
splashscreen: {
|
||||
alwaysShowBeforeRender: true,
|
||||
waiting: true,
|
||||
autoclose: true,
|
||||
delay: 0,
|
||||
},
|
||||
/* 模块配置 */
|
||||
modules: {},
|
||||
/* 应用发布信息 */
|
||||
distribute: {
|
||||
/* android打包配置 */
|
||||
android: {
|
||||
minSdkVersion: 21,
|
||||
targetSdkVersion: 30,
|
||||
abiFilters: ['armeabi-v7a', 'arm64-v8a'],
|
||||
permissions: [
|
||||
'<uses-permission android:name="android.permission.CHANGE_NETWORK_STATE"/>',
|
||||
'<uses-permission android:name="android.permission.MOUNT_UNMOUNT_FILESYSTEMS"/>',
|
||||
'<uses-permission android:name="android.permission.VIBRATE"/>',
|
||||
'<uses-permission android:name="android.permission.READ_LOGS"/>',
|
||||
'<uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>',
|
||||
'<uses-feature android:name="android.hardware.camera.autofocus"/>',
|
||||
'<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>',
|
||||
'<uses-permission android:name="android.permission.CAMERA"/>',
|
||||
'<uses-permission android:name="android.permission.GET_ACCOUNTS"/>',
|
||||
'<uses-permission android:name="android.permission.READ_PHONE_STATE"/>',
|
||||
'<uses-permission android:name="android.permission.CHANGE_WIFI_STATE"/>',
|
||||
'<uses-permission android:name="android.permission.WAKE_LOCK"/>',
|
||||
'<uses-permission android:name="android.permission.FLASHLIGHT"/>',
|
||||
'<uses-feature android:name="android.hardware.camera"/>',
|
||||
'<uses-permission android:name="android.permission.WRITE_SETTINGS"/>',
|
||||
],
|
||||
},
|
||||
/* ios打包配置 */
|
||||
ios: {},
|
||||
/* SDK配置 */
|
||||
sdkConfigs: {},
|
||||
/* 图标配置 */
|
||||
icons: {
|
||||
android: {
|
||||
hdpi: 'static/app/icons/72x72.png',
|
||||
xhdpi: 'static/app/icons/96x96.png',
|
||||
xxhdpi: 'static/app/icons/144x144.png',
|
||||
xxxhdpi: 'static/app/icons/192x192.png',
|
||||
},
|
||||
ios: {
|
||||
appstore: 'static/app/icons/1024x1024.png',
|
||||
ipad: {
|
||||
'app': 'static/app/icons/76x76.png',
|
||||
'app@2x': 'static/app/icons/152x152.png',
|
||||
'notification': 'static/app/icons/20x20.png',
|
||||
'notification@2x': 'static/app/icons/40x40.png',
|
||||
'proapp@2x': 'static/app/icons/167x167.png',
|
||||
'settings': 'static/app/icons/29x29.png',
|
||||
'settings@2x': 'static/app/icons/58x58.png',
|
||||
'spotlight': 'static/app/icons/40x40.png',
|
||||
'spotlight@2x': 'static/app/icons/80x80.png',
|
||||
},
|
||||
iphone: {
|
||||
'app@2x': 'static/app/icons/120x120.png',
|
||||
'app@3x': 'static/app/icons/180x180.png',
|
||||
'notification@2x': 'static/app/icons/40x40.png',
|
||||
'notification@3x': 'static/app/icons/60x60.png',
|
||||
'settings@2x': 'static/app/icons/58x58.png',
|
||||
'settings@3x': 'static/app/icons/87x87.png',
|
||||
'spotlight@2x': 'static/app/icons/80x80.png',
|
||||
'spotlight@3x': 'static/app/icons/120x120.png',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
/* 快应用特有相关 */
|
||||
'quickapp': {},
|
||||
/* 小程序特有相关 */
|
||||
'mp-weixin': {
|
||||
appid: VITE_WX_APPID,
|
||||
setting: {
|
||||
urlCheck: false,
|
||||
// 是否启用 ES6 转 ES5
|
||||
es6: true,
|
||||
minified: true,
|
||||
},
|
||||
optimization: {
|
||||
subPackages: true,
|
||||
},
|
||||
// 是否合并组件虚拟节点外层属性，uni-app 3.5.1+ 开始支持。目前仅支持 style、class 属性。
|
||||
// 默认不开启（undefined），这里设置为开启。
|
||||
mergeVirtualHostAttributes: true,
|
||||
// styleIsolation: 'shared',
|
||||
usingComponents: true,
|
||||
// __usePrivacyCheck__: true,
|
||||
},
|
||||
'mp-alipay': {
|
||||
usingComponents: true,
|
||||
styleIsolation: 'shared',
|
||||
optimization: {
|
||||
subPackages: true,
|
||||
},
|
||||
// 解决支付宝小程序开发工具报错 【globalThis is not defined】
|
||||
compileOptions: {
|
||||
globalObjectMode: 'enable',
|
||||
transpile: {
|
||||
script: {
|
||||
ignore: ['node_modules/**'],
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
'mp-baidu': {
|
||||
usingComponents: true,
|
||||
},
|
||||
'mp-toutiao': {
|
||||
usingComponents: true,
|
||||
},
|
||||
'uniStatistics': {
|
||||
enable: false,
|
||||
},
|
||||
'vueVersion': '3',
|
||||
})
|
||||
14
openapi-ts-request.config.ts
Normal file
14
openapi-ts-request.config.ts
Normal file
@ -0,0 +1,14 @@
|
||||
import { defineConfig } from 'openapi-ts-request'
|
||||
|
||||
export default defineConfig([
|
||||
{
|
||||
describe: 'unibest-openapi-test',
|
||||
schemaPath: 'https://ukw0y1.laf.run/unibest-opapi-test.json',
|
||||
serversPath: './src/service',
|
||||
requestLibPath: `import request from '@/http/vue-query';\n import { CustomRequestOptions_ } from '@/http/types';`,
|
||||
requestOptionsType: 'CustomRequestOptions_',
|
||||
isGenReactQuery: false,
|
||||
reactQueryMode: 'vue',
|
||||
isGenJavaScript: false,
|
||||
},
|
||||
])
|
||||
228
package.json
Normal file
228
package.json
Normal file
@ -0,0 +1,228 @@
|
||||
{
|
||||
"name": "app.xpcool.com",
|
||||
"type": "module",
|
||||
"version": "1.0.0",
|
||||
"unibest": {
|
||||
"platforms": [
|
||||
"h5",
|
||||
"mp-weixin",
|
||||
"mp-alipay",
|
||||
"app",
|
||||
"mp-toutiao"
|
||||
],
|
||||
"uiLibrary": "wot-ui-v2",
|
||||
"loginStrategy": true,
|
||||
"i18n": false,
|
||||
"chartLibraries": [
|
||||
"ucharts",
|
||||
"lime-echart"
|
||||
],
|
||||
"cliVersion": "4.0.16",
|
||||
"unibestVersion": "4.4.1",
|
||||
"unibestUpdateTime": "2026-05-22",
|
||||
"createdAt": "2026-07-13 00:34:01"
|
||||
},
|
||||
"packageManager": "pnpm@10.10.0",
|
||||
"description": "unibest - 最好的 uniapp 开发模板",
|
||||
"generate-time": "用户创建项目时生成",
|
||||
"author": {
|
||||
"name": "feige996",
|
||||
"zhName": "菲鸽",
|
||||
"email": "1020103647@qq.com",
|
||||
"github": "https://github.com/feige996",
|
||||
"gitee": "https://gitee.com/feige996"
|
||||
},
|
||||
"license": "MIT",
|
||||
"homepage": "https://unibest.tech",
|
||||
"repository": "https://github.com/feige996/unibest",
|
||||
"bugs": {
|
||||
"url": "https://github.com/feige996/unibest/issues",
|
||||
"url-old": "https://github.com/codercup/unibest/issues"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=20",
|
||||
"pnpm": ">=9"
|
||||
},
|
||||
"scripts": {
|
||||
"openapi": "openapi-ts",
|
||||
"init-husky": "git init && husky",
|
||||
"init-baseFiles": "node ./scripts/create-base-files.js",
|
||||
"prepare": "pnpm init-husky & pnpm init-baseFiles",
|
||||
"predev": "pnpm init-baseFiles",
|
||||
"predev:app": "pnpm init-baseFiles",
|
||||
"predev:mp": "pnpm init-baseFiles",
|
||||
"preinstall": "npx only-allow pnpm",
|
||||
"uvm": "npx @dcloudio/uvm@latest",
|
||||
"uvm-rm": "node ./scripts/postupgrade.js",
|
||||
"bump-version": "node ./scripts/bump-version.js",
|
||||
"postuvm": "echo upgrade uni-app success!",
|
||||
"dev:app": "uni -p app",
|
||||
"dev:app:test": "uni -p app --mode test",
|
||||
"dev:app:prod": "uni -p app --mode production",
|
||||
"dev:app-android": "uni -p app-android",
|
||||
"dev:app-ios": "uni -p app-ios",
|
||||
"dev:custom": "uni -p",
|
||||
"dev": "uni",
|
||||
"dev:test": "uni --mode test",
|
||||
"dev:prod": "uni --mode production",
|
||||
"dev:h5": "uni",
|
||||
"dev:h5:test": "uni --mode test",
|
||||
"dev:h5:prod": "uni --mode production",
|
||||
"dev:h5:ssr": "uni --ssr",
|
||||
"dev:mp": "uni -p mp-weixin",
|
||||
"dev:mp:test": "uni -p mp-weixin --mode test",
|
||||
"dev:mp:prod": "uni -p mp-weixin --mode production",
|
||||
"dev:mp-alipay": "uni -p mp-alipay",
|
||||
"dev:mp-baidu": "uni -p mp-baidu",
|
||||
"dev:mp-jd": "uni -p mp-jd",
|
||||
"dev:mp-kuaishou": "uni -p mp-kuaishou",
|
||||
"dev:mp-lark": "uni -p mp-lark",
|
||||
"dev:mp-qq": "uni -p mp-qq",
|
||||
"dev:mp-toutiao": "uni -p mp-toutiao",
|
||||
"dev:mp-weixin": "uni -p mp-weixin",
|
||||
"dev:mp-xhs": "uni -p mp-xhs",
|
||||
"dev:quickapp-webview": "uni -p quickapp-webview",
|
||||
"dev:quickapp-webview-huawei": "uni -p quickapp-webview-huawei",
|
||||
"dev:quickapp-webview-union": "uni -p quickapp-webview-union",
|
||||
"build:app": "uni build -p app",
|
||||
"build:app:test": "uni build -p app --mode test",
|
||||
"build:app:prod": "uni build -p app --mode production",
|
||||
"build:app-android": "uni build -p app-android",
|
||||
"build:app-ios": "uni build -p app-ios",
|
||||
"build:custom": "uni build -p",
|
||||
"build:h5": "uni build",
|
||||
"build:h5:test": "uni build --mode test",
|
||||
"build:h5:prod": "uni build --mode production",
|
||||
"build": "uni build",
|
||||
"build:test": "uni build --mode test",
|
||||
"build:prod": "uni build --mode production",
|
||||
"build:h5:ssr": "uni build --ssr",
|
||||
"build:mp-alipay": "uni build -p mp-alipay",
|
||||
"build:mp": "uni build -p mp-weixin",
|
||||
"build:mp:test": "uni build -p mp-weixin --mode test",
|
||||
"build:mp:prod": "uni build -p mp-weixin --mode production",
|
||||
"build:mp-baidu": "uni build -p mp-baidu",
|
||||
"build:mp-jd": "uni build -p mp-jd",
|
||||
"build:mp-kuaishou": "uni build -p mp-kuaishou",
|
||||
"build:mp-lark": "uni build -p mp-lark",
|
||||
"build:mp-qq": "uni build -p mp-qq",
|
||||
"build:mp-toutiao": "uni build -p mp-toutiao",
|
||||
"build:mp-weixin": "uni build -p mp-weixin",
|
||||
"build:mp-xhs": "uni build -p mp-xhs",
|
||||
"build:quickapp-webview": "uni build -p quickapp-webview",
|
||||
"build:quickapp-webview-huawei": "uni build -p quickapp-webview-huawei",
|
||||
"build:quickapp-webview-union": "uni build -p quickapp-webview-union",
|
||||
"upload:changeset": "pnpm changeset && pnpm changeset version",
|
||||
"upload:mp": "node ./scripts/upload-weixin.js",
|
||||
"type-check": "vue-tsc --noEmit",
|
||||
"lint": "eslint",
|
||||
"lint:fix": "eslint --fix",
|
||||
"test": "vitest",
|
||||
"test:run": "vitest run"
|
||||
},
|
||||
"dependencies": {
|
||||
"@alova/adapter-uniapp": "^2.0.14",
|
||||
"@alova/shared": "^1.3.1",
|
||||
"@changesets/cli": "^2.30.0",
|
||||
"@dcloudio/uni-app": "3.0.0-4070620250821001",
|
||||
"@dcloudio/uni-app-harmony": "3.0.0-4070620250821001",
|
||||
"@dcloudio/uni-app-plus": "3.0.0-4070620250821001",
|
||||
"@dcloudio/uni-components": "3.0.0-4070620250821001",
|
||||
"@dcloudio/uni-h5": "3.0.0-4070620250821001",
|
||||
"@dcloudio/uni-mp-alipay": "3.0.0-4070620250821001",
|
||||
"@dcloudio/uni-mp-baidu": "3.0.0-4070620250821001",
|
||||
"@dcloudio/uni-mp-harmony": "3.0.0-4070620250821001",
|
||||
"@dcloudio/uni-mp-jd": "3.0.0-4070620250821001",
|
||||
"@dcloudio/uni-mp-kuaishou": "3.0.0-4070620250821001",
|
||||
"@dcloudio/uni-mp-lark": "3.0.0-4070620250821001",
|
||||
"@dcloudio/uni-mp-qq": "3.0.0-4070620250821001",
|
||||
"@dcloudio/uni-mp-toutiao": "3.0.0-4070620250821001",
|
||||
"@dcloudio/uni-mp-weixin": "3.0.0-4070620250821001",
|
||||
"@dcloudio/uni-mp-xhs": "3.0.0-4070620250821001",
|
||||
"@dcloudio/uni-quickapp-webview": "3.0.0-4070620250821001",
|
||||
"abortcontroller-polyfill": "^1.7.8",
|
||||
"alova": "^3.3.3",
|
||||
"dayjs": "1.11.10",
|
||||
"pinia": "2.0.36",
|
||||
"pinia-plugin-persistedstate": "3.2.1",
|
||||
"vue": "^3.4.21",
|
||||
"vue-i18n": "9.1.9",
|
||||
"vue-router": "4.5.1",
|
||||
"z-paging": "2.8.7",
|
||||
"@qiun/ucharts": "2.5.0-20230101",
|
||||
"echarts": "^5.4.1",
|
||||
"lodash-es": "^4.17.21",
|
||||
"@wot-ui/ui": "latest"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@commitlint/cli": "^19.8.1",
|
||||
"@commitlint/config-conventional": "^19.8.1",
|
||||
"@dcloudio/types": "^3.4.8",
|
||||
"@dcloudio/uni-automator": "3.0.0-4070620250821001",
|
||||
"@dcloudio/uni-cli-shared": "3.0.0-4070620250821001",
|
||||
"@dcloudio/uni-stacktracey": "3.0.0-4070620250821001",
|
||||
"@dcloudio/vite-plugin-uni": "3.0.0-4070620250821001",
|
||||
"@iconify-json/carbon": "^1.2.4",
|
||||
"@iconify/utils": "^3.0.2",
|
||||
"@types/node": "^20.17.9",
|
||||
"@uni-helper/eslint-config": "0.5.0",
|
||||
"@uni-helper/plugin-uni": "0.1.0",
|
||||
"@uni-helper/uni-env": "0.1.8",
|
||||
"@uni-helper/uni-types": "1.0.0-alpha.6",
|
||||
"@uni-helper/unocss-preset-uni": "0.2.11",
|
||||
"@uni-helper/vite-plugin-uni-components": "0.2.3",
|
||||
"@uni-helper/vite-plugin-uni-layouts": "0.1.11",
|
||||
"@uni-helper/vite-plugin-uni-manifest": "0.2.12",
|
||||
"@uni-helper/vite-plugin-uni-pages": "0.3.23",
|
||||
"@uni-helper/vite-plugin-uni-platform": "0.0.5",
|
||||
"@uni-ku/bundle-optimizer": "v1.3.15-beta.2",
|
||||
"@uni-ku/root": "1.4.1",
|
||||
"@unocss/eslint-plugin": "^66.2.3",
|
||||
"@unocss/preset-legacy-compat": "66.0.0",
|
||||
"@vitejs/plugin-vue": "^5.1.0",
|
||||
"@vue/runtime-core": "^3.4.21",
|
||||
"@vue/test-utils": "^2.4.10",
|
||||
"@vue/tsconfig": "^0.1.3",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"cross-env": "^10.0.0",
|
||||
"enquirer": "^2.4.1",
|
||||
"eslint": "^9.31.0",
|
||||
"eslint-plugin-format": "^1.0.1",
|
||||
"husky": "^9.1.7",
|
||||
"jsdom": "^29.1.1",
|
||||
"lint-staged": "^15.2.10",
|
||||
"miniprogram-api-typings": "^4.1.0",
|
||||
"miniprogram-ci": "^2.1.26",
|
||||
"openapi-ts-request": "^1.10.0",
|
||||
"picocolors": "^1.1.1",
|
||||
"postcss": "^8.4.49",
|
||||
"postcss-html": "^1.8.0",
|
||||
"postcss-scss": "^4.0.9",
|
||||
"rollup-plugin-visualizer": "^6.0.3",
|
||||
"sass": "1.77.8",
|
||||
"std-env": "^3.9.0",
|
||||
"typescript": "~5.8.0",
|
||||
"unocss": "66.0.0",
|
||||
"unplugin-auto-import": "^20.0.0",
|
||||
"vite": "5.2.8",
|
||||
"vite-plugin-restart": "^1.0.0",
|
||||
"vite-plugin-vue-devtools": "^8.0.5",
|
||||
"vitest": "3.2.4",
|
||||
"vue-tsc": "^3.0.6"
|
||||
},
|
||||
"pnpm": {
|
||||
"overrides": {
|
||||
"unconfig": "7.3.2"
|
||||
}
|
||||
},
|
||||
"overrides": {
|
||||
"unconfig": "7.3.2"
|
||||
},
|
||||
"resolutions": {
|
||||
"bin-wrapper": "npm:bin-wrapper-china",
|
||||
"unconfig": "7.3.2"
|
||||
},
|
||||
"lint-staged": {
|
||||
"*": "echo 祝菲鸽身体健康"
|
||||
}
|
||||
}
|
||||
27
pages.config.ts
Normal file
27
pages.config.ts
Normal file
@ -0,0 +1,27 @@
|
||||
import { defineUniPages } from '@uni-helper/vite-plugin-uni-pages'
|
||||
import { tabBar } from './src/tabbar/config'
|
||||
|
||||
export default defineUniPages({
|
||||
globalStyle: {
|
||||
navigationStyle: 'default',
|
||||
navigationBarTitleText: 'unibest',
|
||||
navigationBarBackgroundColor: '#f8f8f8',
|
||||
navigationBarTextStyle: 'black',
|
||||
backgroundColor: '#FFFFFF',
|
||||
},
|
||||
easycom: {
|
||||
autoscan: true,
|
||||
custom: {
|
||||
'^fg-(.*)': '@/components/fg-$1/fg-$1.vue',
|
||||
'^(?!z-paging-refresh|z-paging-load-more)z-paging(.*)':
|
||||
'z-paging/components/z-paging$1/z-paging$1.vue',
|
||||
'^wd-(.*)': '@wot-ui/ui/components/wd-$1/wd-$1.vue',
|
||||
},
|
||||
},
|
||||
// tabbar 的配置统一在 “./src/tabbar/config.ts” 文件中
|
||||
subPackages: [{
|
||||
root: 'pages-demo',
|
||||
pages: [],
|
||||
}],
|
||||
tabBar: tabBar as any,
|
||||
})
|
||||
22342
pnpm-lock.yaml
generated
Normal file
22342
pnpm-lock.yaml
generated
Normal file
File diff suppressed because it is too large
Load Diff
154
scripts/bump-version.js
Normal file
154
scripts/bump-version.js
Normal file
@ -0,0 +1,154 @@
|
||||
import fs from 'node:fs'
|
||||
import path from 'node:path'
|
||||
import process from 'node:process'
|
||||
import enquirer from 'enquirer'
|
||||
import pc from 'picocolors'
|
||||
|
||||
const manifestPath = path.resolve(process.cwd(), 'manifest.config.ts')
|
||||
// 获取是否只是测试运行
|
||||
const dryRun = process.argv.includes('--dry-run')
|
||||
|
||||
/**
|
||||
* 将语义化版本号根据传递的类型进行递增
|
||||
* @param {string} version 当前版本号，如 '1.1.0'
|
||||
* @param {string} type 升级类型: 'patch' | 'minor' | 'major' | 'none'
|
||||
* @returns {string} 新的版本号
|
||||
*/
|
||||
function bumpVersionName(version, type) {
|
||||
if (type === 'none') return version
|
||||
|
||||
const parts = version.split('.')
|
||||
let major = Number.parseInt(parts[0] || '0', 10)
|
||||
let minor = Number.parseInt(parts[1] || '0', 10)
|
||||
let patch = Number.parseInt(parts[2] || '0', 10)
|
||||
|
||||
switch (type) {
|
||||
case 'major':
|
||||
major += 1; minor = 0; patch = 0;
|
||||
break;
|
||||
case 'minor':
|
||||
minor += 1; patch = 0;
|
||||
break;
|
||||
case 'patch':
|
||||
patch += 1;
|
||||
break;
|
||||
}
|
||||
return `${major}.${minor}.${patch}`
|
||||
}
|
||||
|
||||
async function run() {
|
||||
const source = fs.readFileSync(manifestPath, 'utf8')
|
||||
|
||||
// 匹配 versionCode 和 versionName 的正则表达式，支持键名带有引号的情况，例如 'versionCode': '100'
|
||||
const versionCodeRegex = /((?:['"])?versionCode(?:['"])?\s*:\s*)(['"])(\d+)\2/
|
||||
const versionNameRegex = /((?:['"])?versionName(?:['"])?\s*:\s*)(['"])([\d\.]+)\2/
|
||||
|
||||
const codeMatch = source.match(versionCodeRegex)
|
||||
const nameMatch = source.match(versionNameRegex)
|
||||
|
||||
if (!codeMatch || !nameMatch) {
|
||||
console.error(pc.red('✖ [bump-version] 未在 manifest.config.ts 中找到合法的 versionCode 或 versionName'))
|
||||
process.exit(1)
|
||||
}
|
||||
|
||||
const currentVersionCode = Number.parseInt(codeMatch[3], 10)
|
||||
const currentVersionName = nameMatch[3]
|
||||
const nextVersionCode = String(currentVersionCode + 1)
|
||||
|
||||
// 1. 检查命令行参数是否有 --type
|
||||
const typeArgMatch = process.argv.find(arg => arg.startsWith('--type='))
|
||||
let bumpType = typeArgMatch ? typeArgMatch.split('=')[1] : null
|
||||
|
||||
// 2. 环境判定：如果不在交互终端或者是CI环境，但是没有指定类型，则默认只升级 versionCode
|
||||
const isInteractive = process.stdout.isTTY && !process.env.CI
|
||||
|
||||
if (!bumpType) {
|
||||
if (!isInteractive) {
|
||||
console.log(pc.yellow('⚠ [bump-version] 非交互环境且未指定参数，默认不修改 versionName'))
|
||||
bumpType = 'none'
|
||||
} else {
|
||||
// 3. 在终端交互式询问用户怎么处理 versionName
|
||||
console.log('')
|
||||
console.log(pc.cyan('📦 准备发布新版本'))
|
||||
console.log(`${pc.gray('当前版本:')} ${pc.bold(currentVersionName)} ${pc.gray(`(v${currentVersionCode})`)}`)
|
||||
console.log('')
|
||||
|
||||
const response = await enquirer.prompt({
|
||||
type: 'select',
|
||||
name: 'selectedType',
|
||||
message: '请选择如何升级版本名称 (versionName)？',
|
||||
pointer: pc.cyan('❯'),
|
||||
choices: [
|
||||
{
|
||||
message: `${pc.bold('修复')} (Patch) ${pc.gray(currentVersionName)} → ${pc.green(bumpVersionName(currentVersionName, 'patch'))}`,
|
||||
name: 'patch',
|
||||
hint: pc.gray('修复Bug、极小的代码安全变动')
|
||||
},
|
||||
{
|
||||
message: `${pc.bold('特性')} (Minor) ${pc.gray(currentVersionName)} → ${pc.cyan(bumpVersionName(currentVersionName, 'minor'))}`,
|
||||
name: 'minor',
|
||||
hint: pc.gray('新增功能、向下兼容的API更新')
|
||||
},
|
||||
{
|
||||
message: `${pc.bold('重大')} (Major) ${pc.gray(currentVersionName)} → ${pc.magenta(bumpVersionName(currentVersionName, 'major'))}`,
|
||||
name: 'major',
|
||||
hint: pc.gray('重大重构、不兼容的API修改')
|
||||
},
|
||||
{
|
||||
message: `${pc.bold('仅Code')} (None) ${pc.gray('保持 ' + currentVersionName)}`,
|
||||
name: 'none',
|
||||
hint: pc.gray('保持名称不变，仅升级构建号(versionCode)')
|
||||
},
|
||||
{
|
||||
message: `${pc.bold('取消')} (Cancel) ${pc.gray('完全不升级版本')}`,
|
||||
name: 'cancel',
|
||||
hint: pc.gray('跳过版本修改，直接进入后续打包流程')
|
||||
},
|
||||
],
|
||||
// 如果用户按 ctrl+c 退出
|
||||
onCancel: () => {
|
||||
console.log(pc.red('✖ 取消操作并退出编译'))
|
||||
process.exit(1)
|
||||
}
|
||||
})
|
||||
bumpType = response.selectedType
|
||||
|
||||
// 用户选择了完全不升级
|
||||
if (bumpType === 'cancel') {
|
||||
console.log('')
|
||||
console.log(pc.green('✔ 已跳过版本升级操作'))
|
||||
console.log('')
|
||||
process.exit(0)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 4. 根据类型计算下一代版本并进行替换计算
|
||||
const nextVersionName = bumpVersionName(currentVersionName, bumpType)
|
||||
|
||||
let updated = source.replace(versionCodeRegex, `${codeMatch[1]}${codeMatch[2]}${nextVersionCode}${codeMatch[2]}`)
|
||||
updated = updated.replace(versionNameRegex, `${nameMatch[1]}${nameMatch[2]}${nextVersionName}${nameMatch[2]}`)
|
||||
|
||||
// 5. 回填文件内容
|
||||
if (!dryRun) {
|
||||
fs.writeFileSync(manifestPath, updated, 'utf8')
|
||||
}
|
||||
|
||||
// 美化成功提示输出
|
||||
console.log('')
|
||||
console.log(pc.green(`✔ ${dryRun ? '(模拟运行) ' : ''}版本更新成功！`))
|
||||
|
||||
if (bumpType !== 'none') {
|
||||
console.log(` ${pc.gray('versionName:')} ${pc.strikethrough(pc.gray(currentVersionName))} → ${pc.bold(pc.green(nextVersionName))}`)
|
||||
} else {
|
||||
console.log(` ${pc.gray('versionName:')} ${pc.dim(currentVersionName)} (未更改)`)
|
||||
}
|
||||
|
||||
console.log(` ${pc.gray('versionCode:')} ${pc.strikethrough(pc.gray(currentVersionCode))} → ${pc.bold(pc.green(nextVersionCode))}`)
|
||||
console.log('')
|
||||
}
|
||||
|
||||
run().catch(err => {
|
||||
console.error(pc.red('✖ [bump-version] 发生错误:'), err)
|
||||
process.exit(1)
|
||||
})
|
||||
55
scripts/create-base-files.js
Normal file
55
scripts/create-base-files.js
Normal file
@ -0,0 +1,55 @@
|
||||
// 基础配置文件生成脚本
|
||||
// 此脚本用于生成 src/manifest.json 和 src/pages.json 基础文件
|
||||
// 由于这两个配置文件会被添加到 .gitignore 中，因此需要通过此脚本确保项目能正常运行
|
||||
import fs from 'node:fs'
|
||||
import path from 'node:path'
|
||||
import { fileURLToPath } from 'node:url'
|
||||
|
||||
// 获取当前文件的目录路径（替代 CommonJS 中的 __dirname）
|
||||
const __filename = fileURLToPath(import.meta.url)
|
||||
const __dirname = path.dirname(__filename)
|
||||
|
||||
// 最简可运行配置
|
||||
const manifest = { }
|
||||
const pages = {
|
||||
pages: [
|
||||
{
|
||||
path: 'pages/index/index',
|
||||
type: 'home',
|
||||
style: {
|
||||
navigationStyle: 'custom',
|
||||
navigationBarTitleText: '首页',
|
||||
},
|
||||
},
|
||||
{
|
||||
path: 'pages/me/me',
|
||||
type: 'page',
|
||||
style: {
|
||||
navigationBarTitleText: '我的',
|
||||
},
|
||||
},
|
||||
],
|
||||
subPackages: [],
|
||||
}
|
||||
|
||||
// 使用修复后的 __dirname 来解析文件路径
|
||||
const manifestPath = path.resolve(__dirname, '../src/manifest.json')
|
||||
const pagesPath = path.resolve(__dirname, '../src/pages.json')
|
||||
|
||||
// 确保 src 目录存在
|
||||
const srcDir = path.resolve(__dirname, '../src')
|
||||
if (!fs.existsSync(srcDir)) {
|
||||
fs.mkdirSync(srcDir, { recursive: true })
|
||||
}
|
||||
|
||||
const MIN_SIZE = `{ }`.length // 如果只有一个空对象，必定是不对的，需要重新生成
|
||||
|
||||
// 如果 src/manifest.json 不存在，就创建它；或者如果文件大小小于等于 MIN_SIZE，也重新创建
|
||||
if (!fs.existsSync(manifestPath) || fs.statSync(manifestPath).size <= MIN_SIZE) {
|
||||
fs.writeFileSync(manifestPath, JSON.stringify(manifest, null, 2))
|
||||
}
|
||||
|
||||
// 如果 src/pages.json 不存在，就创建它；或者如果文件大小小于等于 MIN_SIZE，也重新创建
|
||||
if (!fs.existsSync(pagesPath) || fs.statSync(pagesPath).size <= MIN_SIZE) {
|
||||
fs.writeFileSync(pagesPath, JSON.stringify(pages, null, 2))
|
||||
}
|
||||
107
scripts/open-dev-tools.js
Normal file
107
scripts/open-dev-tools.js
Normal file
@ -0,0 +1,107 @@
|
||||
import { exec } from 'node:child_process'
|
||||
import fs from 'node:fs'
|
||||
import path from 'node:path'
|
||||
import process from 'node:process'
|
||||
|
||||
/**
|
||||
* 打开开发者工具
|
||||
* @param {string} env - 环境，'dev' 或 'build'
|
||||
* @param {object} options - 配置选项
|
||||
* @param {string} options.wechatDevtoolsCliPath - 微信开发者工具 CLI 路径
|
||||
*/
|
||||
function _openDevTools(env = 'dev', options = {}) {
|
||||
const { wechatDevtoolsCliPath } = options
|
||||
const platform = process.platform // darwin, win32, linux
|
||||
const { UNI_PLATFORM } = process.env // mp-weixin, mp-alipay, mp-lark
|
||||
|
||||
const uniPlatformText = UNI_PLATFORM === 'mp-weixin' ? '微信小程序' : UNI_PLATFORM === 'mp-alipay' ? '支付宝小程序' : UNI_PLATFORM === 'mp-lark' ? '抖音小程序' : '小程序'
|
||||
|
||||
// 项目路径（构建输出目录），根据环境选择不同目录
|
||||
const outputDir = env === 'build' ? `dist/build/${UNI_PLATFORM}` : `dist/dev/${UNI_PLATFORM}`
|
||||
const projectPath = path.resolve(process.cwd(), outputDir)
|
||||
|
||||
// 检查构建输出目录是否存在
|
||||
if (!fs.existsSync(projectPath)) {
|
||||
console.log(`❌ ${uniPlatformText}构建目录不存在:`, projectPath)
|
||||
return
|
||||
}
|
||||
|
||||
console.log(`🚀 正在打开${uniPlatformText}开发者工具...`)
|
||||
|
||||
// 根据不同操作系统执行不同命令
|
||||
let command = ''
|
||||
|
||||
if (platform === 'darwin') {
|
||||
// macOS
|
||||
if (UNI_PLATFORM === 'mp-weixin') {
|
||||
const cliPath = wechatDevtoolsCliPath || '/Applications/wechatwebdevtools.app/Contents/MacOS/cli'
|
||||
command = `"${cliPath}" -o "${projectPath}"`
|
||||
}
|
||||
else if (UNI_PLATFORM === 'mp-alipay') {
|
||||
command = `/Applications/小程序开发者工具.app/Contents/MacOS/小程序开发者工具 --p "${projectPath}"`
|
||||
}
|
||||
else if (UNI_PLATFORM === 'mp-lark') {
|
||||
command = `/Applications/抖音开发者工具.app/Contents/MacOS/抖音开发者工具 --p "${projectPath}"`
|
||||
}
|
||||
}
|
||||
else if (platform === 'win32' || platform === 'win64') {
|
||||
// Windows
|
||||
if (UNI_PLATFORM === 'mp-weixin') {
|
||||
const cliPath = wechatDevtoolsCliPath || 'C:\\Program Files (x86)\\Tencent\\微信web开发者工具\\cli.bat'
|
||||
command = `"${cliPath}" -o "${projectPath}"`
|
||||
}
|
||||
}
|
||||
else {
|
||||
// Linux 或其他系统
|
||||
console.log('❌ 当前系统不支持自动打开微信开发者工具')
|
||||
return
|
||||
}
|
||||
|
||||
exec(command, (error, stdout, stderr) => {
|
||||
if (error) {
|
||||
console.log(`❌ 打开${uniPlatformText}开发者工具失败:`, error.message)
|
||||
if (UNI_PLATFORM === 'mp-weixin') {
|
||||
console.log('💡 当前使用的微信开发者工具 CLI 命令:', command)
|
||||
console.log('💡 如果安装位置不同，可以在 env/.env 配置 WECHAT_DEVTOOLS_CLI_PATH 为本机实际 CLI 路径')
|
||||
}
|
||||
console.log(`💡 请确保${uniPlatformText}开发者工具服务端口已启用`)
|
||||
console.log(`💡 可以手动打开${uniPlatformText}开发者工具并导入项目:`, projectPath)
|
||||
return
|
||||
}
|
||||
|
||||
if (stderr) {
|
||||
console.log('⚠️ 警告:', stderr)
|
||||
}
|
||||
|
||||
console.log(`✅ ${uniPlatformText}开发者工具已打开`)
|
||||
|
||||
if (stdout) {
|
||||
console.log(stdout)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建 Vite 插件，用于自动打开开发者工具
|
||||
* @param {object} options - 配置选项
|
||||
* @param {string} options.mode - 构建模式，'development' 或 'production'
|
||||
* @param {string} options.wechatDevtoolsCliPath - 微信开发者工具 CLI 路径
|
||||
*/
|
||||
export default function openDevTools(options = {}) {
|
||||
const { mode = 'development', wechatDevtoolsCliPath } = options
|
||||
// 根据 mode 确定环境：development -> dev, production -> build
|
||||
const env = mode === 'production' ? 'build' : 'dev'
|
||||
|
||||
// 首次构建标记
|
||||
let isFirstBuild = true
|
||||
|
||||
return {
|
||||
name: 'uni-devtools',
|
||||
writeBundle() {
|
||||
if (isFirstBuild && process.env.UNI_PLATFORM?.includes('mp')) {
|
||||
isFirstBuild = false
|
||||
_openDevTools(env, { wechatDevtoolsCliPath })
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
95
scripts/postupgrade.js
Normal file
95
scripts/postupgrade.js
Normal file
@ -0,0 +1,95 @@
|
||||
// # 执行 `pnpm upgrade` 后会升级 `uniapp` 相关依赖
|
||||
// # 在升级完后，会自动添加很多无用依赖，这需要删除以减小依赖包体积
|
||||
// # 只需要执行下面的命令即可
|
||||
|
||||
import { exec } from 'node:child_process'
|
||||
import { promisify } from 'node:util'
|
||||
|
||||
// 日志控制开关，设置为 true 可以启用所有日志输出
|
||||
const FG_LOG_ENABLE = true
|
||||
|
||||
// 将 exec 转换为返回 Promise 的函数
|
||||
const execPromise = promisify(exec)
|
||||
|
||||
// 定义要执行的命令
|
||||
const dependencies = [
|
||||
// TODO: 如果不需要某个平台的小程序，请手动删除或注释掉
|
||||
'@dcloudio/uni-mp-baidu',
|
||||
'@dcloudio/uni-mp-jd',
|
||||
'@dcloudio/uni-mp-kuaishou',
|
||||
'@dcloudio/uni-mp-qq',
|
||||
'@dcloudio/uni-mp-xhs',
|
||||
'@dcloudio/uni-quickapp-webview',
|
||||
]
|
||||
|
||||
/**
|
||||
* 带开关的日志输出函数
|
||||
* @param {string} message 日志消息
|
||||
* @param {string} type 日志类型 (log, error)
|
||||
*/
|
||||
function log(message, type = 'log') {
|
||||
if (FG_LOG_ENABLE) {
|
||||
if (type === 'error') {
|
||||
console.error(message)
|
||||
}
|
||||
else {
|
||||
console.log(message)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 卸载单个依赖包
|
||||
* @param {string} dep 依赖包名
|
||||
* @returns {Promise<boolean>} 是否成功卸载
|
||||
*/
|
||||
async function uninstallDependency(dep) {
|
||||
try {
|
||||
log(`开始卸载依赖: ${dep}`)
|
||||
const { stdout, stderr } = await execPromise(`pnpm un ${dep}`)
|
||||
if (stdout) {
|
||||
log(`stdout [${dep}]: ${stdout}`)
|
||||
}
|
||||
if (stderr) {
|
||||
log(`stderr [${dep}]: ${stderr}`, 'error')
|
||||
}
|
||||
log(`成功卸载依赖: ${dep}`)
|
||||
return true
|
||||
}
|
||||
catch (error) {
|
||||
// 单个依赖卸载失败不影响其他依赖
|
||||
log(`卸载依赖 ${dep} 失败: ${error.message}`, 'error')
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 串行卸载所有依赖包
|
||||
*/
|
||||
async function uninstallAllDependencies() {
|
||||
log(`开始串行卸载 ${dependencies.length} 个依赖包...`)
|
||||
|
||||
let successCount = 0
|
||||
let failedCount = 0
|
||||
|
||||
// 串行执行所有卸载命令
|
||||
for (const dep of dependencies) {
|
||||
const success = await uninstallDependency(dep)
|
||||
if (success) {
|
||||
successCount++
|
||||
}
|
||||
else {
|
||||
failedCount++
|
||||
}
|
||||
|
||||
// 为了避免命令执行过快导致的问题，添加短暂延迟
|
||||
await new Promise(resolve => setTimeout(resolve, 100))
|
||||
}
|
||||
|
||||
log(`卸载操作完成: 成功 ${successCount} 个, 失败 ${failedCount} 个`)
|
||||
}
|
||||
|
||||
// 执行串行卸载
|
||||
uninstallAllDependencies().catch((err) => {
|
||||
log(`串行卸载过程中出现未捕获的错误: ${err}`, 'error')
|
||||
})
|
||||
270
scripts/upload-weixin.js
Normal file
270
scripts/upload-weixin.js
Normal file
@ -0,0 +1,270 @@
|
||||
/**
|
||||
* 微信小程序 CLI 上传脚本
|
||||
*
|
||||
* 使用方法:
|
||||
* pnpm upload:mp # 版本号读取 package.json，描述使用最新 Git commit
|
||||
* pnpm upload:mp --version=1.0.1 # 指定版本号（覆盖 package.json）
|
||||
* pnpm upload:mp --desc="修复bug" # 指定版本描述（覆盖 Git commit）
|
||||
* pnpm upload:mp --robot=2 # 指定机器人编号（1-30）
|
||||
* pnpm upload:mp --version=2.0.0 --desc="重大更新" # 组合使用多个参数
|
||||
*
|
||||
* 版本号策略: 命令行参数 > package.json version
|
||||
* 描述策略: 命令行参数 > Git 最新 commit > 默认时间戳
|
||||
*
|
||||
* 注意事项:
|
||||
* 1. 确保已在微信公众平台开通 "小程序代码上传" 权限
|
||||
* 2. 确保私钥文件存在（private.${appid}.key），并且配置了上传IP白名单
|
||||
* 3. 上传前会自动执行 build:mp:prod 构建 并跳过打开开发者工具
|
||||
* 4. 秘钥文件的appid(VITE_WX_APPID)需要与微信公众平台的小程序appid一致
|
||||
*/
|
||||
|
||||
import { execSync } from 'node:child_process'
|
||||
import fs from 'node:fs'
|
||||
import path from 'node:path'
|
||||
import process from 'node:process'
|
||||
import { fileURLToPath } from 'node:url'
|
||||
import ci from 'miniprogram-ci'
|
||||
|
||||
const __filename = fileURLToPath(import.meta.url)
|
||||
const __dirname = path.dirname(__filename)
|
||||
const ROOT_DIR = path.resolve(__dirname, '..')
|
||||
|
||||
// 从 package.json 读取版本号
|
||||
function getPackageVersion() {
|
||||
try {
|
||||
const pkgPath = path.resolve(ROOT_DIR, 'package.json')
|
||||
const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf-8'))
|
||||
return pkg.version || '1.0.0'
|
||||
}
|
||||
catch {
|
||||
return '1.0.0'
|
||||
}
|
||||
}
|
||||
|
||||
// 获取最新的 Git commit 信息
|
||||
function getGitCommitMessage() {
|
||||
try {
|
||||
// 获取最新 commit 的作者和标题
|
||||
const message = execSync('git log -1 --pretty="%an: %s"', {
|
||||
cwd: ROOT_DIR,
|
||||
encoding: 'utf-8',
|
||||
}).trim()
|
||||
return message || null
|
||||
}
|
||||
catch {
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
// 生成默认描述
|
||||
function getDefaultDesc() {
|
||||
// 优先使用 Git commit 信息
|
||||
const gitMessage = getGitCommitMessage()
|
||||
if (gitMessage) {
|
||||
return gitMessage
|
||||
}
|
||||
// 回退到时间戳
|
||||
return `上传于 ${new Date().toLocaleString('zh-CN')}`
|
||||
}
|
||||
|
||||
// 解析命令行参数
|
||||
function parseArgs() {
|
||||
const args = process.argv.slice(2)
|
||||
const params = {
|
||||
version: null, // 稍后设置，优先级：命令行 > package.json
|
||||
desc: null, // 稍后设置，优先级：命令行 > Git commit > 默认
|
||||
robot: 1, // 机器人编号 1-30
|
||||
}
|
||||
|
||||
args.forEach((arg) => {
|
||||
if (arg.startsWith('--version=')) {
|
||||
params.version = arg.split('=')[1]
|
||||
}
|
||||
else if (arg.startsWith('--desc=')) {
|
||||
params.desc = arg.split('=')[1]
|
||||
}
|
||||
else if (arg.startsWith('--robot=')) {
|
||||
params.robot = Number.parseInt(arg.split('=')[1], 10)
|
||||
}
|
||||
})
|
||||
|
||||
// 如果命令行没有指定版本号，则读取 package.json
|
||||
if (!params.version) {
|
||||
params.version = getPackageVersion()
|
||||
}
|
||||
|
||||
// 如果命令行没有指定描述，则读取 Git commit 或使用默认
|
||||
if (!params.desc) {
|
||||
params.desc = getDefaultDesc()
|
||||
}
|
||||
|
||||
return params
|
||||
}
|
||||
|
||||
// 读取环境变量
|
||||
function loadEnvFile(mode = 'production') {
|
||||
const envPath = path.resolve(ROOT_DIR, 'env', `.env.${mode}`)
|
||||
const defaultEnvPath = path.resolve(ROOT_DIR, 'env', '.env')
|
||||
|
||||
const envContent = {}
|
||||
|
||||
// 先读取默认 .env
|
||||
if (fs.existsSync(defaultEnvPath)) {
|
||||
const content = fs.readFileSync(defaultEnvPath, 'utf-8')
|
||||
content.split('\n').forEach((line) => {
|
||||
const trimmed = line.trim()
|
||||
if (trimmed && !trimmed.startsWith('#')) {
|
||||
const [key, ...valueParts] = trimmed.split('=')
|
||||
if (key) {
|
||||
envContent[key.trim()] = valueParts.join('=').trim().replace(/^['"]|['"]$/g, '')
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 再读取对应模式的 .env 文件（会覆盖默认值）
|
||||
if (fs.existsSync(envPath)) {
|
||||
const content = fs.readFileSync(envPath, 'utf-8')
|
||||
content.split('\n').forEach((line) => {
|
||||
const trimmed = line.trim()
|
||||
if (trimmed && !trimmed.startsWith('#')) {
|
||||
const [key, ...valueParts] = trimmed.split('=')
|
||||
if (key) {
|
||||
envContent[key.trim()] = valueParts.join('=').trim().replace(/^['"]|['"]$/g, '')
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return envContent
|
||||
}
|
||||
|
||||
// 获取私钥路径
|
||||
function getPrivateKeyPath(appid) {
|
||||
// 查找私钥文件
|
||||
const keyPatterns = [
|
||||
`private.${appid}.key`,
|
||||
'private.key',
|
||||
]
|
||||
|
||||
for (const pattern of keyPatterns) {
|
||||
const keyPath = path.resolve(ROOT_DIR, pattern)
|
||||
if (fs.existsSync(keyPath)) {
|
||||
return keyPath
|
||||
}
|
||||
}
|
||||
|
||||
throw new Error(`未找到私钥文件，请确保项目根目录存在 private.${appid}.key 文件`)
|
||||
}
|
||||
|
||||
// 主函数
|
||||
async function main() {
|
||||
console.log('\n🚀 开始微信小程序上传流程...\n')
|
||||
|
||||
const params = parseArgs()
|
||||
const env = loadEnvFile('production')
|
||||
const appid = env.VITE_WX_APPID
|
||||
|
||||
if (!appid) {
|
||||
throw new Error('未找到 VITE_WX_APPID 环境变量，请检查 env/.env 文件')
|
||||
}
|
||||
|
||||
console.log(`📱 AppID: ${appid}`)
|
||||
console.log(`📌 版本号: ${params.version}`)
|
||||
console.log(`📝 版本描述: ${params.desc}`)
|
||||
console.log(`🤖 机器人编号: ${params.robot}`)
|
||||
|
||||
// 获取私钥路径
|
||||
const privateKeyPath = getPrivateKeyPath(appid)
|
||||
console.log(`🔑 私钥路径: ${privateKeyPath}`)
|
||||
|
||||
// 构建小程序（跳过自动打开开发者工具）
|
||||
console.log('\n📦 正在构建小程序...（跳过自动打开开发者工具）\n')
|
||||
try {
|
||||
execSync('pnpm build:mp:prod', {
|
||||
cwd: ROOT_DIR,
|
||||
stdio: 'inherit',
|
||||
env: {
|
||||
...process.env,
|
||||
SKIP_OPEN_DEVTOOLS: 'true', // 上传时跳过打开开发者工具
|
||||
},
|
||||
})
|
||||
}
|
||||
catch (error) {
|
||||
console.error('❌ 构建失败:', error.message)
|
||||
process.exit(1)
|
||||
}
|
||||
|
||||
// 小程序代码目录
|
||||
const projectPath = path.resolve(ROOT_DIR, 'dist', 'build', 'mp-weixin')
|
||||
|
||||
if (!fs.existsSync(projectPath)) {
|
||||
throw new Error(`构建产物不存在: ${projectPath}`)
|
||||
}
|
||||
|
||||
console.log(`📂 项目路径: ${projectPath}`)
|
||||
console.log('\n⬆️ 正在上传到微信服务器...\n')
|
||||
|
||||
// 创建项目实例
|
||||
const project = new ci.Project({
|
||||
appid,
|
||||
type: 'miniProgram',
|
||||
projectPath,
|
||||
privateKeyPath,
|
||||
ignores: ['node_modules/**/*'],
|
||||
})
|
||||
|
||||
try {
|
||||
// 上传代码
|
||||
const uploadResult = await ci.upload({
|
||||
project,
|
||||
version: params.version,
|
||||
desc: params.desc,
|
||||
robot: params.robot,
|
||||
setting: {
|
||||
es6: true,
|
||||
es7: true,
|
||||
minify: true,
|
||||
autoPrefixWXSS: true,
|
||||
minifyWXML: true,
|
||||
minifyWXSS: true,
|
||||
minifyJS: true,
|
||||
},
|
||||
onProgressUpdate: (task) => {
|
||||
if (task._status === 'done') {
|
||||
console.log(` ✅ ${task._msg}`)
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
console.log('\n✅ 上传成功!')
|
||||
console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━')
|
||||
console.log(` 📌 版本号: ${params.version}`)
|
||||
console.log(` 📝 描述: ${params.desc}`)
|
||||
console.log(` 🤖 机器人: ${params.robot}`)
|
||||
console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━')
|
||||
console.log('\n📋 下一步操作:')
|
||||
console.log(' 1. 登录微信公众平台: https://mp.weixin.qq.com')
|
||||
console.log(' 2. 进入 "管理 -> 版本管理"')
|
||||
console.log(' 3. 在 "开发版本" 中找到刚上传的版本')
|
||||
console.log(' 4. 点击 "选为体验版" 按钮\n')
|
||||
|
||||
return uploadResult
|
||||
}
|
||||
catch (error) {
|
||||
console.error('\n❌ 上传失败:', error.message)
|
||||
if (error.message.includes('privateKeyPath')) {
|
||||
console.log('\n💡 提示: 请确保已在微信公众平台配置代码上传密钥')
|
||||
console.log(' 1. 登录微信公众平台')
|
||||
console.log(' 2. 进入 "开发 -> 开发设置"')
|
||||
console.log(' 3. 在 "小程序代码上传" 区域生成并下载密钥')
|
||||
console.log(' 4. 在 "小程序代码上传" 区域配置上传IP白名单')
|
||||
}
|
||||
process.exit(1)
|
||||
}
|
||||
}
|
||||
|
||||
main().catch((error) => {
|
||||
console.error('❌ 执行出错:', error)
|
||||
process.exit(1)
|
||||
})
|
||||
37
scripts/vite-plugin-eruda.js
Normal file
37
scripts/vite-plugin-eruda.js
Normal file
@ -0,0 +1,37 @@
|
||||
/**
|
||||
* @description 通过 vite 自定义条件动态导入 eruda
|
||||
* @description Eruda 配置参考 https://eruda.liriliri.io/zh/docs/
|
||||
* @param {object} options
|
||||
* @param {boolean} [options.open] - 是否开启 eruda
|
||||
* @param {object} [options.erudaOptions] - eruda 配置
|
||||
* @param {string} [options.erudaUrl] - eruda 地址
|
||||
*/
|
||||
export default function vitePluginEruda(options = {}) {
|
||||
const { open = true, erudaOptions = {}, erudaUrl = 'https://cdn.jsdelivr.net/npm/eruda' } = options
|
||||
|
||||
return {
|
||||
name: 'vite-plugin-eruda',
|
||||
|
||||
transformIndexHtml(html) {
|
||||
const tags = [
|
||||
{
|
||||
tag: 'script',
|
||||
attrs: {
|
||||
src: erudaUrl,
|
||||
},
|
||||
injectTo: 'head',
|
||||
},
|
||||
{
|
||||
tag: 'script',
|
||||
children: `eruda.init(${JSON.stringify(erudaOptions)});`,
|
||||
injectTo: 'head',
|
||||
},
|
||||
]
|
||||
|
||||
if (!open) {
|
||||
return html
|
||||
}
|
||||
return { html, tags }
|
||||
},
|
||||
}
|
||||
}
|
||||
40
src/App.ku.vue
Normal file
40
src/App.ku.vue
Normal file
@ -0,0 +1,40 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import FgTabbar from '@/tabbar/index.vue'
|
||||
import { isPageTabbar } from './tabbar/store'
|
||||
import { currRoute } from './utils'
|
||||
|
||||
const isCurrentPageTabbar = ref(true)
|
||||
onShow(() => {
|
||||
const { path } = currRoute()
|
||||
// “蜡笔小开心”提到本地是 '/pages/index/index'，线上是 '/' 导致线上 tabbar 不见了
|
||||
// 所以这里需要判断一下，如果是 '/' 就当做首页，也要显示 tabbar
|
||||
if (path === '/') {
|
||||
isCurrentPageTabbar.value = true
|
||||
}
|
||||
else {
|
||||
isCurrentPageTabbar.value = isPageTabbar(path)
|
||||
}
|
||||
})
|
||||
|
||||
const helloKuRoot = ref('Hello AppKuVue')
|
||||
|
||||
const exposeRef = ref('this is form app.Ku.vue')
|
||||
|
||||
defineExpose({
|
||||
exposeRef,
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view>
|
||||
<!-- 这个先隐藏了，知道这样用就行 -->
|
||||
<view class="hidden text-center">
|
||||
{{ helloKuRoot }}，这里可以配置全局的东西
|
||||
</view>
|
||||
|
||||
<KuRootView />
|
||||
|
||||
<FgTabbar v-if="isCurrentPageTabbar" />
|
||||
</view>
|
||||
</template>
|
||||
52
src/App.vue
Normal file
52
src/App.vue
Normal file
@ -0,0 +1,52 @@
|
||||
<script setup lang="ts">
|
||||
import { onHide, onLaunch, onShow } from '@dcloudio/uni-app'
|
||||
import { getCurrentInstance, onMounted, onUnmounted } from 'vue'
|
||||
import { navigateToInterceptor } from '@/router/interceptor'
|
||||
import { tabbarStore } from '@/tabbar/store'
|
||||
import { permission } from '@/router/permission'
|
||||
|
||||
const { proxy } = (getCurrentInstance() || {}) as any
|
||||
const router = proxy?.$router
|
||||
|
||||
router && permission.install(router)
|
||||
|
||||
onLaunch((options) => {
|
||||
console.log('App.vue onLaunch', options)
|
||||
})
|
||||
onShow((options) => {
|
||||
console.log('App.vue onShow', options)
|
||||
// 处理直接进入页面路由的情况：如h5直接输入路由、微信小程序分享后进入等
|
||||
// https://github.com/unibest-tech/unibest/issues/192
|
||||
if (options?.path) {
|
||||
navigateToInterceptor.invoke({ url: `/${options.path}`, query: options.query })
|
||||
}
|
||||
else {
|
||||
navigateToInterceptor.invoke({ url: '/' })
|
||||
}
|
||||
})
|
||||
onHide(() => {
|
||||
console.log('App Hide')
|
||||
})
|
||||
|
||||
// #ifdef H5
|
||||
function syncTabbarWhenPageVisible() {
|
||||
if (document.visibilityState === 'visible') {
|
||||
tabbarStore.syncCurIdxByCurrentPageAsync()
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
document.addEventListener('visibilitychange', syncTabbarWhenPageVisible)
|
||||
window.addEventListener('pageshow', syncTabbarWhenPageVisible)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener('visibilitychange', syncTabbarWhenPageVisible)
|
||||
window.removeEventListener('pageshow', syncTabbarWhenPageVisible)
|
||||
})
|
||||
// #endif
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
</style>
|
||||
17
src/api/foo-alova.ts
Normal file
17
src/api/foo-alova.ts
Normal file
@ -0,0 +1,17 @@
|
||||
import { API_DOMAINS, http } from '@/http/alova'
|
||||
|
||||
export interface IFoo {
|
||||
id: number
|
||||
name: string
|
||||
}
|
||||
|
||||
export function foo() {
|
||||
return http.Get<IFoo>('/foo', {
|
||||
params: {
|
||||
name: '菲鸽',
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
meta: { domain: API_DOMAINS.SECONDARY }, // 用于切换请求地址
|
||||
})
|
||||
}
|
||||
43
src/api/foo.ts
Normal file
43
src/api/foo.ts
Normal file
@ -0,0 +1,43 @@
|
||||
import { http } from '@/http/http'
|
||||
|
||||
export interface IFoo {
|
||||
id: number
|
||||
name: string
|
||||
}
|
||||
|
||||
export function foo() {
|
||||
return http.Get<IFoo>('/foo', {
|
||||
params: {
|
||||
name: '菲鸽',
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
export interface IFooItem {
|
||||
id: string
|
||||
name: string
|
||||
}
|
||||
|
||||
/** GET 请求 */
|
||||
export async function getFooAPI(name: string) {
|
||||
return await http.get<IFooItem>('/foo', { name })
|
||||
}
|
||||
/** GET 请求；支持 传递 header 的范例 */
|
||||
export function getFooAPI2(name: string) {
|
||||
return http.get<IFooItem>('/foo', { name }, { 'Content-Type-100': '100' })
|
||||
}
|
||||
|
||||
/** POST 请求 */
|
||||
export function postFooAPI(name: string) {
|
||||
return http.post<IFooItem>('/foo', { name })
|
||||
}
|
||||
/** POST 请求；需要传递 query 参数的范例；微信小程序经常有同时需要query参数和body参数的场景 */
|
||||
export function postFooAPI2(name: string) {
|
||||
return http.post<IFooItem>('/foo', { name }, { a: 1, b: 2 })
|
||||
}
|
||||
/** POST 请求；支持 传递 header 的范例 */
|
||||
export function postFooAPI3(name: string) {
|
||||
return http.post<IFooItem>('/foo', { name }, { a: 1, b: 2 }, { 'Content-Type-100': '100' })
|
||||
}
|
||||
85
src/api/login.ts
Normal file
85
src/api/login.ts
Normal file
@ -0,0 +1,85 @@
|
||||
import type { IAuthLoginRes, ICaptcha, IDoubleTokenRes, IUpdateInfo, IUpdatePassword, IUserInfoRes } from './types/login'
|
||||
import { http } from '@/http/http'
|
||||
|
||||
/**
|
||||
* 登录表单
|
||||
*/
|
||||
export interface ILoginForm {
|
||||
username: string
|
||||
password: string
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取验证码
|
||||
* @returns ICaptcha 验证码
|
||||
*/
|
||||
export function getCode() {
|
||||
return http.get<ICaptcha>('/user/getCode')
|
||||
}
|
||||
|
||||
/**
|
||||
* 用户登录
|
||||
* @param loginForm 登录表单
|
||||
*/
|
||||
export function login(loginForm: ILoginForm) {
|
||||
return http.post<IAuthLoginRes>('/auth/login', loginForm)
|
||||
}
|
||||
|
||||
/**
|
||||
* 刷新token
|
||||
* @param refreshToken 刷新token
|
||||
*/
|
||||
export function refreshToken(refreshToken: string) {
|
||||
return http.post<IDoubleTokenRes>('/auth/refreshToken', { refreshToken })
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取用户信息
|
||||
*/
|
||||
export function getUserInfo() {
|
||||
return http.get<IUserInfoRes>('/user/info')
|
||||
}
|
||||
|
||||
/**
|
||||
* 退出登录
|
||||
*/
|
||||
export function logout() {
|
||||
return http.get<void>('/auth/logout')
|
||||
}
|
||||
|
||||
/**
|
||||
* 修改用户信息
|
||||
*/
|
||||
export function updateInfo(data: IUpdateInfo) {
|
||||
return http.post('/user/updateInfo', data)
|
||||
}
|
||||
|
||||
/**
|
||||
* 修改用户密码
|
||||
*/
|
||||
export function updateUserPassword(data: IUpdatePassword) {
|
||||
return http.post('/user/updatePassword', data)
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取微信登录凭证
|
||||
* @returns Promise 包含微信登录凭证(code)
|
||||
*/
|
||||
export function getWxCode() {
|
||||
return new Promise<UniApp.LoginRes>((resolve, reject) => {
|
||||
uni.login({
|
||||
provider: 'weixin',
|
||||
success: res => resolve(res),
|
||||
fail: err => reject(new Error(err)),
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 微信登录
|
||||
* @param params 微信登录参数，包含code
|
||||
* @returns Promise 包含登录结果
|
||||
*/
|
||||
export function wxLogin(data: { code: string }) {
|
||||
return http.post<IAuthLoginRes>('/auth/wxLogin', data)
|
||||
}
|
||||
102
src/api/types/login.ts
Normal file
102
src/api/types/login.ts
Normal file
@ -0,0 +1,102 @@
|
||||
// 认证模式类型
|
||||
export type AuthMode = 'single' | 'double'
|
||||
|
||||
// 单Token响应类型
|
||||
export interface ISingleTokenRes {
|
||||
token: string
|
||||
expiresIn: number // 有效期(秒)
|
||||
}
|
||||
|
||||
// 双Token响应类型
|
||||
export interface IDoubleTokenRes {
|
||||
accessToken: string
|
||||
refreshToken: string
|
||||
accessExpiresIn: number // 访问令牌有效期(秒)
|
||||
refreshExpiresIn: number // 刷新令牌有效期(秒)
|
||||
}
|
||||
|
||||
/**
|
||||
* 登录返回的信息，其实就是 token 信息
|
||||
*/
|
||||
export type IAuthLoginRes = ISingleTokenRes | IDoubleTokenRes
|
||||
|
||||
/**
|
||||
* 用户信息
|
||||
*/
|
||||
export type UserRole = string
|
||||
|
||||
export interface IUserInfoRes {
|
||||
userId: number
|
||||
username: string
|
||||
nickname: string
|
||||
avatar?: string
|
||||
/** 同时支持单角色和多角色，你自行选择一种就行 */
|
||||
role?: UserRole
|
||||
roles?: UserRole[]
|
||||
[key: string]: any // 允许其他扩展字段
|
||||
}
|
||||
|
||||
// 认证存储数据结构
|
||||
export interface AuthStorage {
|
||||
mode: AuthMode
|
||||
tokens: ISingleTokenRes | IDoubleTokenRes
|
||||
userInfo?: IUserInfoRes
|
||||
loginTime: number // 登录时间戳
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取验证码
|
||||
*/
|
||||
export interface ICaptcha {
|
||||
captchaEnabled: boolean
|
||||
uuid: string
|
||||
image: string
|
||||
}
|
||||
/**
|
||||
* 上传成功的信息
|
||||
*/
|
||||
export interface IUploadSuccessInfo {
|
||||
fileId: number
|
||||
originalName: string
|
||||
fileName: string
|
||||
storagePath: string
|
||||
fileHash: string
|
||||
fileType: string
|
||||
fileBusinessType: string
|
||||
fileSize: number
|
||||
}
|
||||
/**
|
||||
* 更新用户信息
|
||||
*/
|
||||
export interface IUpdateInfo {
|
||||
id: number
|
||||
name: string
|
||||
sex: string
|
||||
}
|
||||
/**
|
||||
* 更新用户信息
|
||||
*/
|
||||
export interface IUpdatePassword {
|
||||
id: number
|
||||
oldPassword: string
|
||||
newPassword: string
|
||||
confirmPassword: string
|
||||
}
|
||||
|
||||
/**
|
||||
* 判断是否为单Token响应
|
||||
* @param tokenRes 登录响应数据
|
||||
* @returns 是否为单Token响应
|
||||
*/
|
||||
export function isSingleTokenRes(tokenRes: IAuthLoginRes): tokenRes is ISingleTokenRes {
|
||||
return 'token' in tokenRes && !('refreshToken' in tokenRes)
|
||||
}
|
||||
|
||||
/**
|
||||
* 判断是否为双Token响应
|
||||
* @param tokenRes 登录响应数据
|
||||
* @returns 是否为双Token响应
|
||||
*/
|
||||
export function isDoubleTokenRes(tokenRes: IAuthLoginRes): tokenRes is IDoubleTokenRes {
|
||||
return 'accessToken' in tokenRes && 'refreshToken' in tokenRes
|
||||
}
|
||||
0
src/components/.gitkeep
Normal file
0
src/components/.gitkeep
Normal file
444
src/components/qiun-data-charts/config-echarts.js
Normal file
444
src/components/qiun-data-charts/config-echarts.js
Normal file
@ -0,0 +1,444 @@
|
||||
/*
|
||||
* uCharts®
|
||||
* 高性能跨平台图表库，支持H5、APP、小程序（微信/支付宝/百度/头条/QQ/360）、Vue、Taro等支持canvas的框架平台
|
||||
* Copyright (c) 2021 QIUN®秋云 https://www.ucharts.cn All rights reserved.
|
||||
* Licensed ( http://www.apache.org/licenses/LICENSE-2.0 )
|
||||
* 复制使用请保留本段注释，感谢支持开源！
|
||||
*
|
||||
* uCharts®官方网站
|
||||
* https://www.uCharts.cn
|
||||
*
|
||||
* 开源地址:
|
||||
* https://gitee.com/uCharts/uCharts
|
||||
*
|
||||
* uni-app插件市场地址：
|
||||
* http://ext.dcloud.net.cn/plugin?id=271
|
||||
*
|
||||
*/
|
||||
|
||||
// 通用配置项
|
||||
|
||||
// 主题颜色配置：如每个图表类型需要不同主题，请在对应图表类型上更改color属性
|
||||
const color = [
|
||||
'#1890FF',
|
||||
'#91CB74',
|
||||
'#FAC858',
|
||||
'#EE6666',
|
||||
'#73C0DE',
|
||||
'#3CA272',
|
||||
'#FC8452',
|
||||
'#9A60B4',
|
||||
'#ea7ccc',
|
||||
]
|
||||
|
||||
const cfe = {
|
||||
// demotype为自定义图表类型
|
||||
type: [
|
||||
'pie',
|
||||
'ring',
|
||||
'rose',
|
||||
'funnel',
|
||||
'line',
|
||||
'column',
|
||||
'area',
|
||||
'radar',
|
||||
'gauge',
|
||||
'candle',
|
||||
'demotype',
|
||||
],
|
||||
// 增加自定义图表类型，如果需要categories，请在这里加入您的图表类型例如最后的"demotype"
|
||||
categories: ['line', 'column', 'area', 'radar', 'gauge', 'candle', 'demotype'],
|
||||
// instance为实例变量承载属性，option为eopts承载属性，不要删除
|
||||
instance: {},
|
||||
option: {},
|
||||
// 下面是自定义format配置，因除H5端外的其他端无法通过props传递函数，只能通过此属性对应下标的方式来替换
|
||||
formatter: {
|
||||
tooltipDemo1(res) {
|
||||
let result = ''
|
||||
for (const i in res) {
|
||||
if (i == 0) {
|
||||
result += `${res[i].axisValueLabel}年销售额`
|
||||
}
|
||||
let value = '--'
|
||||
if (res[i].data !== null) {
|
||||
value = res[i].data
|
||||
}
|
||||
// #ifdef H5
|
||||
result += `\n${res[i].seriesName}：${value} 万元`
|
||||
// #endif
|
||||
|
||||
// #ifdef APP-PLUS
|
||||
result += `<br/>${res[i].marker}${res[i].seriesName}：${value} 万元`
|
||||
// #endif
|
||||
}
|
||||
return result
|
||||
},
|
||||
legendFormat(name) {
|
||||
return `自定义图例+${name}`
|
||||
},
|
||||
yAxisFormatDemo(value, index) {
|
||||
return `${value}元`
|
||||
},
|
||||
seriesFormatDemo(res) {
|
||||
return `${res.name}年${res.value}元`
|
||||
},
|
||||
},
|
||||
// 这里演示了自定义您的图表类型的option，可以随意命名，之后在组件上 type="demotype" 后，组件会调用这个花括号里的option，如果组件上还存在eopts参数，会将demotype与eopts中option合并后渲染图表。
|
||||
demotype: {
|
||||
color,
|
||||
// 在这里填写echarts的option即可
|
||||
},
|
||||
// 下面是自定义配置，请添加项目所需的通用配置
|
||||
column: {
|
||||
color,
|
||||
title: {
|
||||
text: '',
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
grid: {
|
||||
top: 30,
|
||||
bottom: 50,
|
||||
right: 15,
|
||||
left: 40,
|
||||
},
|
||||
legend: {
|
||||
bottom: 'left',
|
||||
},
|
||||
toolbox: {
|
||||
show: false,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisLabel: {
|
||||
color: '#666666',
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#CCCCCC',
|
||||
},
|
||||
},
|
||||
boundaryGap: true,
|
||||
data: [],
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#666666',
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#CCCCCC',
|
||||
},
|
||||
},
|
||||
},
|
||||
seriesTemplate: {
|
||||
name: '',
|
||||
type: 'bar',
|
||||
data: [],
|
||||
barwidth: 20,
|
||||
label: {
|
||||
show: true,
|
||||
color: '#666666',
|
||||
position: 'top',
|
||||
},
|
||||
},
|
||||
},
|
||||
line: {
|
||||
color,
|
||||
title: {
|
||||
text: '',
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
grid: {
|
||||
top: 30,
|
||||
bottom: 50,
|
||||
right: 15,
|
||||
left: 40,
|
||||
},
|
||||
legend: {
|
||||
bottom: 'left',
|
||||
},
|
||||
toolbox: {
|
||||
show: false,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisLabel: {
|
||||
color: '#666666',
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#CCCCCC',
|
||||
},
|
||||
},
|
||||
boundaryGap: true,
|
||||
data: [],
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#666666',
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#CCCCCC',
|
||||
},
|
||||
},
|
||||
},
|
||||
seriesTemplate: {
|
||||
name: '',
|
||||
type: 'line',
|
||||
data: [],
|
||||
barwidth: 20,
|
||||
label: {
|
||||
show: true,
|
||||
color: '#666666',
|
||||
position: 'top',
|
||||
},
|
||||
},
|
||||
},
|
||||
area: {
|
||||
color,
|
||||
title: {
|
||||
text: '',
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
grid: {
|
||||
top: 30,
|
||||
bottom: 50,
|
||||
right: 15,
|
||||
left: 40,
|
||||
},
|
||||
legend: {
|
||||
bottom: 'left',
|
||||
},
|
||||
toolbox: {
|
||||
show: false,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisLabel: {
|
||||
color: '#666666',
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#CCCCCC',
|
||||
},
|
||||
},
|
||||
boundaryGap: true,
|
||||
data: [],
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#666666',
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#CCCCCC',
|
||||
},
|
||||
},
|
||||
},
|
||||
seriesTemplate: {
|
||||
name: '',
|
||||
type: 'line',
|
||||
data: [],
|
||||
areaStyle: {},
|
||||
label: {
|
||||
show: true,
|
||||
color: '#666666',
|
||||
position: 'top',
|
||||
},
|
||||
},
|
||||
},
|
||||
pie: {
|
||||
color,
|
||||
title: {
|
||||
text: '',
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
},
|
||||
grid: {
|
||||
top: 40,
|
||||
bottom: 30,
|
||||
right: 15,
|
||||
left: 15,
|
||||
},
|
||||
legend: {
|
||||
bottom: 'left',
|
||||
},
|
||||
seriesTemplate: {
|
||||
name: '',
|
||||
type: 'pie',
|
||||
data: [],
|
||||
radius: '50%',
|
||||
label: {
|
||||
show: true,
|
||||
color: '#666666',
|
||||
position: 'top',
|
||||
},
|
||||
},
|
||||
},
|
||||
ring: {
|
||||
color,
|
||||
title: {
|
||||
text: '',
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
},
|
||||
grid: {
|
||||
top: 40,
|
||||
bottom: 30,
|
||||
right: 15,
|
||||
left: 15,
|
||||
},
|
||||
legend: {
|
||||
bottom: 'left',
|
||||
},
|
||||
seriesTemplate: {
|
||||
name: '',
|
||||
type: 'pie',
|
||||
data: [],
|
||||
radius: ['40%', '70%'],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: true,
|
||||
color: '#666666',
|
||||
position: 'top',
|
||||
},
|
||||
labelLine: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
rose: {
|
||||
color,
|
||||
title: {
|
||||
text: '',
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
},
|
||||
legend: {
|
||||
top: 'bottom',
|
||||
},
|
||||
seriesTemplate: {
|
||||
name: '',
|
||||
type: 'pie',
|
||||
data: [],
|
||||
radius: '55%',
|
||||
center: ['50%', '50%'],
|
||||
roseType: 'area',
|
||||
},
|
||||
},
|
||||
funnel: {
|
||||
color,
|
||||
title: {
|
||||
text: '',
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{b} : {c}%',
|
||||
},
|
||||
legend: {
|
||||
top: 'bottom',
|
||||
},
|
||||
seriesTemplate: {
|
||||
name: '',
|
||||
type: 'funnel',
|
||||
left: '10%',
|
||||
top: 60,
|
||||
bottom: 60,
|
||||
width: '80%',
|
||||
min: 0,
|
||||
max: 100,
|
||||
minSize: '0%',
|
||||
maxSize: '100%',
|
||||
sort: 'descending',
|
||||
gap: 2,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'inside',
|
||||
},
|
||||
labelLine: {
|
||||
length: 10,
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
type: 'solid',
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
bordercolor: '#fff',
|
||||
borderwidth: 1,
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
fontSize: 20,
|
||||
},
|
||||
},
|
||||
data: [],
|
||||
},
|
||||
},
|
||||
gauge: {
|
||||
color,
|
||||
tooltip: {
|
||||
formatter: '{a} <br/>{b} : {c}%',
|
||||
},
|
||||
seriesTemplate: {
|
||||
name: '业务指标',
|
||||
type: 'gauge',
|
||||
detail: { formatter: '{value}%' },
|
||||
data: [{ value: 50, name: '完成率' }],
|
||||
},
|
||||
},
|
||||
candle: {
|
||||
xAxis: {
|
||||
data: [],
|
||||
},
|
||||
yAxis: {},
|
||||
color,
|
||||
title: {
|
||||
text: '',
|
||||
},
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'inside',
|
||||
xAxisIndex: [0, 1],
|
||||
start: 10,
|
||||
end: 100,
|
||||
},
|
||||
{
|
||||
show: true,
|
||||
xAxisIndex: [0, 1],
|
||||
type: 'slider',
|
||||
bottom: 10,
|
||||
start: 10,
|
||||
end: 100,
|
||||
},
|
||||
],
|
||||
seriesTemplate: {
|
||||
name: '',
|
||||
type: 'k',
|
||||
data: [],
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
export default cfe
|
||||
675
src/components/qiun-data-charts/config-ucharts.js
Normal file
675
src/components/qiun-data-charts/config-ucharts.js
Normal file
@ -0,0 +1,675 @@
|
||||
/*
|
||||
* uCharts®
|
||||
* 高性能跨平台图表库，支持H5、APP、小程序（微信/支付宝/百度/头条/QQ/360）、Vue、Taro等支持canvas的框架平台
|
||||
* Copyright (c) 2021 QIUN®秋云 https://www.ucharts.cn All rights reserved.
|
||||
* Licensed ( http://www.apache.org/licenses/LICENSE-2.0 )
|
||||
* 复制使用请保留本段注释，感谢支持开源！
|
||||
*
|
||||
* uCharts®官方网站
|
||||
* https://www.uCharts.cn
|
||||
*
|
||||
* 开源地址:
|
||||
* https://gitee.com/uCharts/uCharts
|
||||
*
|
||||
* uni-app插件市场地址：
|
||||
* http://ext.dcloud.net.cn/plugin?id=271
|
||||
*
|
||||
*/
|
||||
|
||||
// 主题颜色配置：如每个图表类型需要不同主题，请在对应图表类型上更改color属性
|
||||
const color = [
|
||||
'#1890FF',
|
||||
'#91CB74',
|
||||
'#FAC858',
|
||||
'#EE6666',
|
||||
'#73C0DE',
|
||||
'#3CA272',
|
||||
'#FC8452',
|
||||
'#9A60B4',
|
||||
'#ea7ccc',
|
||||
]
|
||||
|
||||
// 事件转换函数，主要用作格式化x轴为时间轴，根据需求自行修改
|
||||
const formatDateTime = (timeStamp, returnType) => {
|
||||
const date = new Date()
|
||||
date.setTime(timeStamp * 1000)
|
||||
const y = date.getFullYear()
|
||||
let m = date.getMonth() + 1
|
||||
m = m < 10 ? `0${m}` : m
|
||||
let d = date.getDate()
|
||||
d = d < 10 ? `0${d}` : d
|
||||
let h = date.getHours()
|
||||
h = h < 10 ? `0${h}` : h
|
||||
let minute = date.getMinutes()
|
||||
let second = date.getSeconds()
|
||||
minute = minute < 10 ? `0${minute}` : minute
|
||||
second = second < 10 ? `0${second}` : second
|
||||
if (returnType == 'full') {
|
||||
return `${y}-${m}-${d} ${h}:${minute}:${second}`
|
||||
}
|
||||
if (returnType == 'y-m-d') {
|
||||
return `${y}-${m}-${d}`
|
||||
}
|
||||
if (returnType == 'h:m') {
|
||||
return `${h}:${minute}`
|
||||
}
|
||||
if (returnType == 'h:m:s') {
|
||||
return `${h}:${minute}:${second}`
|
||||
}
|
||||
return [y, m, d, h, minute, second]
|
||||
}
|
||||
|
||||
const cfu = {
|
||||
// demotype为自定义图表类型，一般不需要自定义图表类型，只需要改根节点上对应的类型即可
|
||||
type: [
|
||||
'pie',
|
||||
'ring',
|
||||
'rose',
|
||||
'word',
|
||||
'funnel',
|
||||
'map',
|
||||
'arcbar',
|
||||
'line',
|
||||
'column',
|
||||
'mount',
|
||||
'bar',
|
||||
'area',
|
||||
'radar',
|
||||
'gauge',
|
||||
'candle',
|
||||
'mix',
|
||||
'tline',
|
||||
'tarea',
|
||||
'scatter',
|
||||
'bubble',
|
||||
'demotype',
|
||||
],
|
||||
range: [
|
||||
'饼状图',
|
||||
'圆环图',
|
||||
'玫瑰图',
|
||||
'词云图',
|
||||
'漏斗图',
|
||||
'地图',
|
||||
'圆弧进度条',
|
||||
'折线图',
|
||||
'柱状图',
|
||||
'山峰图',
|
||||
'条状图',
|
||||
'区域图',
|
||||
'雷达图',
|
||||
'仪表盘',
|
||||
'K线图',
|
||||
'混合图',
|
||||
'时间轴折线',
|
||||
'时间轴区域',
|
||||
'散点图',
|
||||
'气泡图',
|
||||
'自定义类型',
|
||||
],
|
||||
// 增加自定义图表类型，如果需要categories，请在这里加入您的图表类型，例如最后的"demotype"
|
||||
// 自定义类型时需要注意"tline","tarea","scatter","bubble"等时间轴（矢量x轴）类图表，没有categories，不需要加入categories
|
||||
categories: [
|
||||
'line',
|
||||
'column',
|
||||
'mount',
|
||||
'bar',
|
||||
'area',
|
||||
'radar',
|
||||
'gauge',
|
||||
'candle',
|
||||
'mix',
|
||||
'demotype',
|
||||
],
|
||||
// instance为实例变量承载属性，不要删除
|
||||
instance: {},
|
||||
// option为opts及eopts承载属性，不要删除
|
||||
option: {},
|
||||
// 下面是自定义format配置，因除H5端外的其他端无法通过props传递函数，只能通过此属性对应下标的方式来替换
|
||||
formatter: {
|
||||
yAxisDemo1(val, index, opts) {
|
||||
return `${val}元`
|
||||
},
|
||||
yAxisDemo2(val, index, opts) {
|
||||
return val.toFixed(2)
|
||||
},
|
||||
xAxisDemo1(val, index, opts) {
|
||||
return `${val}年`
|
||||
},
|
||||
xAxisDemo2(val, index, opts) {
|
||||
return formatDateTime(val, 'h:m')
|
||||
},
|
||||
seriesDemo1(val, index, series, opts) {
|
||||
return `${val}元`
|
||||
},
|
||||
tooltipDemo1(item, category, index, opts) {
|
||||
if (index == 0) {
|
||||
return `随便用${item.data}年`
|
||||
}
|
||||
return `其他我没改${item.data}天`
|
||||
},
|
||||
pieDemo(val, index, series, opts) {
|
||||
if (index !== undefined) {
|
||||
return `${series[index].name}：${series[index].data}元`
|
||||
}
|
||||
},
|
||||
},
|
||||
// 这里演示了自定义您的图表类型的option，可以随意命名，之后在组件上 type="demotype" 后，组件会调用这个花括号里的option，如果组件上还存在opts参数，会将demotype与opts中option合并后渲染图表。
|
||||
demotype: {
|
||||
// 我这里把曲线图当做了自定义图表类型，您可以根据需要随意指定类型或配置
|
||||
type: 'line',
|
||||
color,
|
||||
padding: [15, 10, 0, 15],
|
||||
xAxis: {
|
||||
disableGrid: true,
|
||||
},
|
||||
yAxis: {
|
||||
gridType: 'dash',
|
||||
dashLength: 2,
|
||||
},
|
||||
legend: {},
|
||||
extra: {
|
||||
line: {
|
||||
type: 'curve',
|
||||
width: 2,
|
||||
},
|
||||
},
|
||||
},
|
||||
// 下面是自定义配置，请添加项目所需的通用配置
|
||||
pie: {
|
||||
type: 'pie',
|
||||
color,
|
||||
padding: [5, 5, 5, 5],
|
||||
extra: {
|
||||
pie: {
|
||||
activeOpacity: 0.5,
|
||||
activeRadius: 10,
|
||||
offsetAngle: 0,
|
||||
labelWidth: 15,
|
||||
border: true,
|
||||
borderWidth: 3,
|
||||
borderColor: '#FFFFFF',
|
||||
},
|
||||
},
|
||||
},
|
||||
ring: {
|
||||
type: 'ring',
|
||||
color,
|
||||
padding: [5, 5, 5, 5],
|
||||
rotate: false,
|
||||
dataLabel: true,
|
||||
legend: {
|
||||
show: true,
|
||||
position: 'right',
|
||||
lineHeight: 25,
|
||||
},
|
||||
title: {
|
||||
name: '收益率',
|
||||
fontSize: 15,
|
||||
color: '#666666',
|
||||
},
|
||||
subtitle: {
|
||||
name: '70%',
|
||||
fontSize: 25,
|
||||
color: '#7cb5ec',
|
||||
},
|
||||
extra: {
|
||||
ring: {
|
||||
ringWidth: 30,
|
||||
activeOpacity: 0.5,
|
||||
activeRadius: 10,
|
||||
offsetAngle: 0,
|
||||
labelWidth: 15,
|
||||
border: true,
|
||||
borderWidth: 3,
|
||||
borderColor: '#FFFFFF',
|
||||
},
|
||||
},
|
||||
},
|
||||
rose: {
|
||||
type: 'rose',
|
||||
color,
|
||||
padding: [5, 5, 5, 5],
|
||||
legend: {
|
||||
show: true,
|
||||
position: 'left',
|
||||
lineHeight: 25,
|
||||
},
|
||||
extra: {
|
||||
rose: {
|
||||
type: 'area',
|
||||
minRadius: 50,
|
||||
activeOpacity: 0.5,
|
||||
activeRadius: 10,
|
||||
offsetAngle: 0,
|
||||
labelWidth: 15,
|
||||
border: false,
|
||||
borderWidth: 2,
|
||||
borderColor: '#FFFFFF',
|
||||
},
|
||||
},
|
||||
},
|
||||
word: {
|
||||
type: 'word',
|
||||
color,
|
||||
extra: {
|
||||
word: {
|
||||
type: 'normal',
|
||||
autoColors: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
funnel: {
|
||||
type: 'funnel',
|
||||
color,
|
||||
padding: [15, 15, 0, 15],
|
||||
extra: {
|
||||
funnel: {
|
||||
activeOpacity: 0.3,
|
||||
activeWidth: 10,
|
||||
border: true,
|
||||
borderWidth: 2,
|
||||
borderColor: '#FFFFFF',
|
||||
fillOpacity: 1,
|
||||
labelAlign: 'right',
|
||||
},
|
||||
},
|
||||
},
|
||||
map: {
|
||||
type: 'map',
|
||||
color,
|
||||
padding: [0, 0, 0, 0],
|
||||
dataLabel: true,
|
||||
extra: {
|
||||
map: {
|
||||
border: true,
|
||||
borderWidth: 1,
|
||||
borderColor: '#666666',
|
||||
fillOpacity: 0.6,
|
||||
activeBorderColor: '#F04864',
|
||||
activeFillColor: '#FACC14',
|
||||
activeFillOpacity: 1,
|
||||
},
|
||||
},
|
||||
},
|
||||
arcbar: {
|
||||
type: 'arcbar',
|
||||
color,
|
||||
title: {
|
||||
name: '百分比',
|
||||
fontSize: 25,
|
||||
color: '#00FF00',
|
||||
},
|
||||
subtitle: {
|
||||
name: '默认标题',
|
||||
fontSize: 15,
|
||||
color: '#666666',
|
||||
},
|
||||
extra: {
|
||||
arcbar: {
|
||||
type: 'default',
|
||||
width: 12,
|
||||
backgroundColor: '#E9E9E9',
|
||||
startAngle: 0.75,
|
||||
endAngle: 0.25,
|
||||
gap: 2,
|
||||
},
|
||||
},
|
||||
},
|
||||
line: {
|
||||
type: 'line',
|
||||
color,
|
||||
padding: [15, 10, 0, 15],
|
||||
xAxis: {
|
||||
disableGrid: true,
|
||||
},
|
||||
yAxis: {
|
||||
gridType: 'dash',
|
||||
dashLength: 2,
|
||||
},
|
||||
legend: {},
|
||||
extra: {
|
||||
line: {
|
||||
type: 'straight',
|
||||
width: 2,
|
||||
activeType: 'hollow',
|
||||
},
|
||||
},
|
||||
},
|
||||
tline: {
|
||||
type: 'line',
|
||||
color,
|
||||
padding: [15, 10, 0, 15],
|
||||
xAxis: {
|
||||
disableGrid: false,
|
||||
boundaryGap: 'justify',
|
||||
},
|
||||
yAxis: {
|
||||
gridType: 'dash',
|
||||
dashLength: 2,
|
||||
data: [
|
||||
{
|
||||
min: 0,
|
||||
max: 80,
|
||||
},
|
||||
],
|
||||
},
|
||||
legend: {},
|
||||
extra: {
|
||||
line: {
|
||||
type: 'curve',
|
||||
width: 2,
|
||||
activeType: 'hollow',
|
||||
},
|
||||
},
|
||||
},
|
||||
tarea: {
|
||||
type: 'area',
|
||||
color,
|
||||
padding: [15, 10, 0, 15],
|
||||
xAxis: {
|
||||
disableGrid: true,
|
||||
boundaryGap: 'justify',
|
||||
},
|
||||
yAxis: {
|
||||
gridType: 'dash',
|
||||
dashLength: 2,
|
||||
data: [
|
||||
{
|
||||
min: 0,
|
||||
max: 80,
|
||||
},
|
||||
],
|
||||
},
|
||||
legend: {},
|
||||
extra: {
|
||||
area: {
|
||||
type: 'curve',
|
||||
opacity: 0.2,
|
||||
addLine: true,
|
||||
width: 2,
|
||||
gradient: true,
|
||||
activeType: 'hollow',
|
||||
},
|
||||
},
|
||||
},
|
||||
column: {
|
||||
type: 'column',
|
||||
color,
|
||||
padding: [15, 15, 0, 5],
|
||||
xAxis: {
|
||||
disableGrid: true,
|
||||
},
|
||||
yAxis: {
|
||||
data: [{ min: 0 }],
|
||||
},
|
||||
legend: {},
|
||||
extra: {
|
||||
column: {
|
||||
type: 'group',
|
||||
width: 30,
|
||||
activeBgColor: '#000000',
|
||||
activeBgOpacity: 0.08,
|
||||
},
|
||||
},
|
||||
},
|
||||
mount: {
|
||||
type: 'mount',
|
||||
color,
|
||||
padding: [15, 15, 0, 5],
|
||||
xAxis: {
|
||||
disableGrid: true,
|
||||
},
|
||||
yAxis: {
|
||||
data: [{ min: 0 }],
|
||||
},
|
||||
legend: {},
|
||||
extra: {
|
||||
mount: {
|
||||
type: 'mount',
|
||||
widthRatio: 1.5,
|
||||
},
|
||||
},
|
||||
},
|
||||
bar: {
|
||||
type: 'bar',
|
||||
color,
|
||||
padding: [15, 30, 0, 5],
|
||||
xAxis: {
|
||||
boundaryGap: 'justify',
|
||||
disableGrid: false,
|
||||
min: 0,
|
||||
axisLine: false,
|
||||
},
|
||||
yAxis: {},
|
||||
legend: {},
|
||||
extra: {
|
||||
bar: {
|
||||
type: 'group',
|
||||
width: 30,
|
||||
meterBorde: 1,
|
||||
meterFillColor: '#FFFFFF',
|
||||
activeBgColor: '#000000',
|
||||
activeBgOpacity: 0.08,
|
||||
},
|
||||
},
|
||||
},
|
||||
area: {
|
||||
type: 'area',
|
||||
color,
|
||||
padding: [15, 15, 0, 15],
|
||||
xAxis: {
|
||||
disableGrid: true,
|
||||
},
|
||||
yAxis: {
|
||||
gridType: 'dash',
|
||||
dashLength: 2,
|
||||
},
|
||||
legend: {},
|
||||
extra: {
|
||||
area: {
|
||||
type: 'straight',
|
||||
opacity: 0.2,
|
||||
addLine: true,
|
||||
width: 2,
|
||||
gradient: false,
|
||||
activeType: 'hollow',
|
||||
},
|
||||
},
|
||||
},
|
||||
radar: {
|
||||
type: 'radar',
|
||||
color,
|
||||
padding: [5, 5, 5, 5],
|
||||
dataLabel: false,
|
||||
legend: {
|
||||
show: true,
|
||||
position: 'right',
|
||||
lineHeight: 25,
|
||||
},
|
||||
extra: {
|
||||
radar: {
|
||||
gridType: 'radar',
|
||||
gridColor: '#CCCCCC',
|
||||
gridCount: 3,
|
||||
opacity: 0.2,
|
||||
max: 200,
|
||||
labelShow: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
gauge: {
|
||||
type: 'gauge',
|
||||
color,
|
||||
title: {
|
||||
name: '66Km/H',
|
||||
fontSize: 25,
|
||||
color: '#2fc25b',
|
||||
offsetY: 50,
|
||||
},
|
||||
subtitle: {
|
||||
name: '实时速度',
|
||||
fontSize: 15,
|
||||
color: '#1890ff',
|
||||
offsetY: -50,
|
||||
},
|
||||
extra: {
|
||||
gauge: {
|
||||
type: 'default',
|
||||
width: 30,
|
||||
labelColor: '#666666',
|
||||
startAngle: 0.75,
|
||||
endAngle: 0.25,
|
||||
startNumber: 0,
|
||||
endNumber: 100,
|
||||
labelFormat: '',
|
||||
splitLine: {
|
||||
fixRadius: 0,
|
||||
splitNumber: 10,
|
||||
width: 30,
|
||||
color: '#FFFFFF',
|
||||
childNumber: 5,
|
||||
childWidth: 12,
|
||||
},
|
||||
pointer: {
|
||||
width: 24,
|
||||
color: 'auto',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
candle: {
|
||||
type: 'candle',
|
||||
color,
|
||||
padding: [15, 15, 0, 15],
|
||||
enableScroll: true,
|
||||
enableMarkLine: true,
|
||||
dataLabel: false,
|
||||
xAxis: {
|
||||
labelCount: 4,
|
||||
itemCount: 40,
|
||||
disableGrid: true,
|
||||
gridColor: '#CCCCCC',
|
||||
gridType: 'solid',
|
||||
dashLength: 4,
|
||||
scrollShow: true,
|
||||
scrollAlign: 'left',
|
||||
scrollColor: '#A6A6A6',
|
||||
scrollBackgroundColor: '#EFEBEF',
|
||||
},
|
||||
yAxis: {},
|
||||
legend: {},
|
||||
extra: {
|
||||
candle: {
|
||||
color: {
|
||||
upLine: '#f04864',
|
||||
upFill: '#f04864',
|
||||
downLine: '#2fc25b',
|
||||
downFill: '#2fc25b',
|
||||
},
|
||||
average: {
|
||||
show: true,
|
||||
name: ['MA5', 'MA10', 'MA30'],
|
||||
day: [5, 10, 20],
|
||||
color: ['#1890ff', '#2fc25b', '#facc14'],
|
||||
},
|
||||
},
|
||||
markLine: {
|
||||
type: 'dash',
|
||||
dashLength: 5,
|
||||
data: [
|
||||
{
|
||||
value: 2150,
|
||||
lineColor: '#f04864',
|
||||
showLabel: true,
|
||||
},
|
||||
{
|
||||
value: 2350,
|
||||
lineColor: '#f04864',
|
||||
showLabel: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
mix: {
|
||||
type: 'mix',
|
||||
color,
|
||||
padding: [15, 15, 0, 15],
|
||||
xAxis: {
|
||||
disableGrid: true,
|
||||
},
|
||||
yAxis: {
|
||||
disabled: false,
|
||||
disableGrid: false,
|
||||
splitNumber: 5,
|
||||
gridType: 'dash',
|
||||
dashLength: 4,
|
||||
gridColor: '#CCCCCC',
|
||||
padding: 10,
|
||||
showTitle: true,
|
||||
data: [],
|
||||
},
|
||||
legend: {},
|
||||
extra: {
|
||||
mix: {
|
||||
column: {
|
||||
width: 20,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
scatter: {
|
||||
type: 'scatter',
|
||||
color,
|
||||
padding: [15, 15, 0, 15],
|
||||
dataLabel: false,
|
||||
xAxis: {
|
||||
disableGrid: false,
|
||||
gridType: 'dash',
|
||||
splitNumber: 5,
|
||||
boundaryGap: 'justify',
|
||||
min: 0,
|
||||
},
|
||||
yAxis: {
|
||||
disableGrid: false,
|
||||
gridType: 'dash',
|
||||
},
|
||||
legend: {},
|
||||
extra: {
|
||||
scatter: {},
|
||||
},
|
||||
},
|
||||
bubble: {
|
||||
type: 'bubble',
|
||||
color,
|
||||
padding: [15, 15, 0, 15],
|
||||
xAxis: {
|
||||
disableGrid: false,
|
||||
gridType: 'dash',
|
||||
splitNumber: 5,
|
||||
boundaryGap: 'justify',
|
||||
min: 0,
|
||||
max: 250,
|
||||
},
|
||||
yAxis: {
|
||||
disableGrid: false,
|
||||
gridType: 'dash',
|
||||
data: [
|
||||
{
|
||||
min: 0,
|
||||
max: 150,
|
||||
},
|
||||
],
|
||||
},
|
||||
legend: {},
|
||||
extra: {
|
||||
bubble: {
|
||||
border: 2,
|
||||
opacity: 0.5,
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
export default cfu
|
||||
1826
src/components/qiun-data-charts/qiun-data-charts.vue
Normal file
1826
src/components/qiun-data-charts/qiun-data-charts.vue
Normal file
File diff suppressed because it is too large
Load Diff
3
src/components/qiun-data-charts/u-charts.js
Normal file
3
src/components/qiun-data-charts/u-charts.js
Normal file
@ -0,0 +1,3 @@
|
||||
import uCharts from '@qiun/ucharts'
|
||||
|
||||
export default uCharts
|
||||
48
src/components/qiun-error/qiun-error.vue
Normal file
48
src/components/qiun-error/qiun-error.vue
Normal file
@ -0,0 +1,48 @@
|
||||
<template>
|
||||
<view class="chartsview">
|
||||
<view class="charts-error"></view>
|
||||
<view class="charts-font">{{ errorMessage == null ? '请点击重试' : errorMessage }}</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'qiun-error',
|
||||
props: {
|
||||
errorMessage: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.chartsview {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.charts-font {
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.charts-error {
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAUz0lEQVR4Xu1de3Bc1X3+zmp3jYVWfkPAgCWwY8zLEglNQCSW0yT9o2SQaDKdNulUykwfM+k09p+J3ImYIPJXi9yZzDSZZiwyaZuZBCwnNG1DMogEmUAAy7xs/MAyNhCMjWWtsK1deU/n23OvtLu6j3Pv3t29d71nxjOSde455/5+3/m9z7kCjRY4BR7eK7fkcmhrasLT37hbTAY+QYADigDHagwFYGhc7gZwHMAUgG4hMPzNe8RoWInTAECAnHl4r+yREt0DXWIbhx3cJ5fHP8TYjntFR4DTBDqUIwBmMrJDCtyPHDoQw0Q8jkeXinCLtECp43Gwh56R22IxTBbu+KFxOTbQJbo9DlW17rYASGdlNySeKl2JADpbkmKiait0mWhoXHZkmzE52CkocmvavvOsbMvl8MhAl+jlQrg2CQzu6BI9NV2Yw+T2AJiVo+DuL2kSeLQ1KfrC8kLcYbkYBv/pbjEWhjUNjUvSpk9KSAicm2tGXxjAaUcbewBkJAm6xeLBp1PJ2os06ttcDl8H0CEEaGnvGegSg2EAQZTW4B0AEntSS2ov0mhgJc5jmwT6IDEWi2E0zNZ2WEFhC4CZjCRxH7GwAfpbkmIkLC9EFQBg20BXeOySsNBGZx2OXkB6Vg5CgAbMZgD7BTDSkhTDOgM3+kSDAr7iANNz8n4hQRdxojUu9kTjVRurtKKAJwBIKZfPZPOuYWFgY6wlgV4hau+GNVjsnQKeAJDOSIp/Wt6lbSKeQG8jSOSdAbV+wisA7FxDSGAqBmwNS5DIiGIucyNwKiGedutTz3/3BgCb4JBJoGqDIJ2VW4REmxRog0S3lGgT/NlfY3RzCgJjQmJSCkxeDuDwBgCb8HAhvQkCIdCbSgQfmSPDmWGDzHsm1UqwjBEUAMbqERCeAEBGz2RknwR2uW0yAZQdL6DR+WEW90syXLmjtW8So0Jg9MoE9tSD4esZANUAAd1M5NAjGOULaaOkAzCKGEaj7Ar7AoBHEGxrSYqdOnxMZ+W3ZA59ZehxnWkC7yMlJkUMIy1x7IyaVPANAAMEHTlgTACO1rYERlqTot+J8nbp58C5VcEBDftnOEpAKAsAgYPAPgNZQbYFP3QeCAybJ/Bg2CVC2QDwCoJUAtudiJKuExCQLoZbPKirAoOHovuIThVByuXii2jE/C9I2TaXBYsfmThyahMtCWy1A4ERbj7rvvRI9aCa3F7pINm3n5XdXgtjFgHAYCQrW4v8bBo6MYFep5cwmEefuSwQpDNSRoq9+osdrqRaGBqXMhfDVi8gWASAdEbuswuyGCKNSLatBygXBHUqAQohMmHESAKrqzSro4TIS2yOq10dVQQAuyKQUoC7BXnIxHQWwwL4ay/qIM/8DHaFJuijv7M99QzaNmAx6hzQFsvhKSmxvakJo7oHUooA4MUA0wHBTDYfQnVUB6bFnLc1JHqiFgPwxPnSzhKjLUn0B+UpsDoqFkOfLvO5HN8AMN5lOJUU2+2IMD0ne0QOtCcq0k7OANe1VGToag7qaBRXeiFFAJjOyBENsV20Jqcgj2FQHgvyJWYvAQfPAJuvAv7198ADm4DMHJBKAmuag5ypemPpGNiVWk2pDcCDDDQCPTU7EOgmjrxMRgA8dgBYmwJOXwBuWgH87m3gz26OLgDy6q9G9RSLvIAymFZUGsaCjJzE7qB1+vvngXRGQebG5QB/P30eaF2iQBHllk8wxdDfGq/eYVLLQJBfEOQNOpk3/Bg86hbA8iAZwt2/a78asX8zsKRJ/fzYQeDttFIHUbcJqi0JnM4FaOX9g2Sw7lgHTgPTs0DHRxTjT5wDtqzTfTr8/aoJArfTwX055P1519q6apGV4v8/XlU6nzv/vo8CvzwK3L0W2LS6Wquo/DzVAoFrMiivyzVSvpUnycIMVAUK2kb28Qm77nn2wQXGRg5uGvEw1AtjaHkpMx/Ro/fqfBliBsOeUbl3fu3lTKko7X/J8vJJOtFuxV/jXKo3Bsna4AI6kbe4BrlTyrYIqsUMi2R1ti0DIxPpT8QnEF5SxQmW8wo5oM5QF9+fLkP4xlcGp2QCaos8VY77yMEK7KOjZ4U7fuN3ShXcTBSbL0BtoHD2vc+JYrS4Ox8yBfD6J/5cX9nB5+5TvapXmh+jQuU9E2Ez0QdgKgu3AfvuXv7RnAu+Nf1c5a2Z6gkGA3xauyPp1yq16rWR/9P/bE5fvXVe06fJv9yxbqI+ZmW4aCPluDbJ1rK8mYq1wEMTEkF4s5Agqo8qCXG/k9TyWqSwfXyT2gKrHjd8gZ3vC62V1B1l6F76qZ1I7nqO1xqCo2OR7c8w9a3kFhkyo5d9h9al+2wzN2t9tPPS3Mntf7Qb2oZqtdpaaf/67XtPZq95fi1mGZm0mo6OaTg4T2TTpJQWPbNly7T01AH4Kp++qmAm3mYwbQ0v0Y4tFQ6T6tq18p2dml/BzV1F/1qxhLCFTbXGxHzS5y9fTg9ys+fxiqy1M4k7xFrXkHVI+6Y6vyXxfkJr3DLkpd3xATVtYkQh2nK9oX7n7NsA+QaVfdnXknGTjrTy9UQy4bV99fPHad0M9RSoO0VgsBKW5Dcy/py99Yd5B1t5FQJfUwvtV0frZGYvFS5Xgh8D8aXc0twT/PBVI3Td2Jp8y1OFfn1KWS7Pj7RagzphcOORcmyifp3YAjc4KJ/eXoIgkBPR7cQXJs8oPb5tyHoVFH1rmiLbt8tZAGt2xR0sQ7R8S0y5t4IF5m8Jg2dR0bXo1Xk8b7dVyUPrTbg1XG7P72Q5iP2p9o1IN+H1e0ulnI7VdWF3a3rfcJq0ZlD8YxpQ0+YrWDR5pD2+9f1bd9JrVkqW7Kk2Wya4QGZP69pUuA70C6j6ddN3E9u7ZlB6w0kI7J55H1pOJ9oAL9GXh4Xnlw7m6qXb2Q8tH3HpgmQWw2A6iH1H2t3M9GZ5zP/2QAytnCRe4TtUffCzPKP1yxW3f0TCJp8i1eYg0pN4h9Qxg+3Zt66I5kYt8dYFM9l6D6GmCqYdPf1okhfO4J3DH9Z2oP4fdpCH0dH1scQ6y9Q0Y2V7+fC9V8qf4c1g3D7m1r5Md2O3q36k7s4p37m6wR/1nsZrV1pgrRmtV2R2k4zJH4AOGi7FQ9gCq7soCw2vIQsmW2qkr7gWXxOAYo5ti8iM0W9nJ67KTYX4K1lNg45XxKfCr5T3jG2w6FqH7h2t9G0lECK7jYY5V0+Up7M+ZCv9DgZ7g2gZ8BYzRQAd2z7L4qf3vbK5kX8+ZyQgK5nB0x0S9W4E1AAeYsMzgO0aG/EDoBUE4bq+nrQfW91bD1K8oE0nQ3VZo3f8bWlPNkS3jP/2yuj+0VwYwU6g2Fgnb8IkC4jk9nLzX9WzTHDkK+oUGd5G4Z4A13rGxf0pEW8yXx0Jsb3AuhQ/3oC6/2t9aU3Tt2Z6b+5OTQ3PLmF4q9VdrC0UsQxOfwG1GQapdwv0tXh4m3Rm9V94+9NfyvA5tdt+9fK2bD1Jp3HO/2rR2u9UR3D5scv5Otxm4y7Y6gG1yXtw1jYxGDHqg2kA1dvvRLR1yYc1TBx5wppNVpjHnQYF7Qn9YJg3lItRz8aQd6nH8p7L5m3gHBK3d4t1e5g2RCdU9ZEn1WwG+it2nNCgaD2yKRGFeP0f6a3p1bF7v4gy2WzFQpJ5Km4qZ8+Kn3KX1Ih1nJ8jB8V6bF4bFhzQy8e8n8vcvV/TH0+cy+YpC9C8q1I9m2/OVrBkVxtm0C3D2t8qoK3nG7Tiiq7uxA1AH7e6S2hZ3gxp5w3q9Y7ZxY9kzK4X5UQwPzgw5OBN55c1juC3B3iGgKsd0hsyV1e14L01/2WwGsfBz8j/6nA6x1C2e9V5P7v1SgE3bXg0bvlqQq3bMreH6kRCpH2F2MC3m2jMNX/ClqffTQ5uMfru9T0rIY5Vq6mFYvdV0x0dXpn+2KCPqHSM8e7+Zb2d6EoS+q9lI2iAI9z+8p8kqGmghjJPb1A6CtE8Pz0j4+2fE2cQyVQ3pHkV0dYwX/4T1l5a8y6n9ws1B7r9ghg4Y/8rWgKq5b9+4YqDk1vF3/8s23aYx2ox5p5fZ+5pZf6g+rB/Ki3feh4iE1sY5S6fiPS7xE3q+7dZPpxbM0ZRU9dtL1Jt9az3N+fYV9UoTRjQHI5OL0zhXf8yI0xvV7KZkVt2I3m1sYkl/YN8x1o0b6p7v0m0vVw6u3rF7VfG7lB7S7aXjVv7x5O3Z7U4wxg49nFl1bGqYy+G5q8vJklSgM6Aq8t9yPqxHqt3pK+rT79Vyoq6aR1muVv8bN9u1zGqcfL6G3xu4j0M3GzVQn1iFS5k8z1K3mS8C2d3Y6b8t/xqGakgs5cBh6z1Cbm+45aKn8c4uh4Y3g+whpY1dPq9GQnO8GKB2c3X0Z9g2z+X7rZ2p+Il3tO5s+tygU0b8f9H0jNWuWcXRg1WbQbrmK3w5xA1jV3I1pYp1PzB67b64O7J3ftmM9OT6kjhH10jHFTOw+tjf0Gm7xgH4+4Rz2fG3WjpEOOxX9tD4qBqMLLIPIOoSGKXkIu8QeDJL0kS+0b2bdVxFz6j0d+F8Y1k6I5C8seBqP+0AL7xbMjbkq5vG8Qhzf98QvDg6rw8EwIQ0bB7uC9j7b2zV6fF9ttH4r6yG8sM0jqzj8ZC4J/T5iP6+0lLykYz1ejQCdMfAsD2P3FasFz3L3dZ5rD7K0x2T4pH0vQ0u8N1aW8S5M0z/4R8sWfoHnQ7T4M7FJ7k+v2o7YzQj0Y6c8rj1t0BP9Yc0u7X9i/8CKR+KpV6FMuIQAAAABJRU5ErkJggg==');
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
background-position: center;
|
||||
}
|
||||
</style>
|
||||
153
src/components/qiun-loading/loading1.vue
Normal file
153
src/components/qiun-loading/loading1.vue
Normal file
@ -0,0 +1,153 @@
|
||||
<template>
|
||||
<view class="container loading1">
|
||||
<view class="shape shape1"></view>
|
||||
<view class="shape shape2"></view>
|
||||
<view class="shape shape3"></view>
|
||||
<view class="shape shape4"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'loading1',
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped="true">
|
||||
.container {
|
||||
position: relative;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.container.loading1 {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.container .shape {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
.container .shape.shape1 {
|
||||
left: 0;
|
||||
background-color: #1890ff;
|
||||
}
|
||||
|
||||
.container .shape.shape2 {
|
||||
right: 0;
|
||||
background-color: #91cb74;
|
||||
}
|
||||
|
||||
.container .shape.shape3 {
|
||||
bottom: 0;
|
||||
background-color: #fac858;
|
||||
}
|
||||
|
||||
.container .shape.shape4 {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #e66;
|
||||
}
|
||||
|
||||
.loading1 .shape1 {
|
||||
animation: animation1shape1 0.5s ease 0s infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes animation1shape1 {
|
||||
from {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translate(16px, 16px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation1shape1 {
|
||||
from {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translate(16px, 16px);
|
||||
}
|
||||
}
|
||||
|
||||
.loading1 .shape2 {
|
||||
animation: animation1shape2 0.5s ease 0s infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes animation1shape2 {
|
||||
from {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translate(-16px, 16px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation1shape2 {
|
||||
from {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translate(-16px, 16px);
|
||||
}
|
||||
}
|
||||
|
||||
.loading1 .shape3 {
|
||||
animation: animation1shape3 0.5s ease 0s infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes animation1shape3 {
|
||||
from {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translate(16px, -16px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation1shape3 {
|
||||
from {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translate(16px, -16px);
|
||||
}
|
||||
}
|
||||
|
||||
.loading1 .shape4 {
|
||||
animation: animation1shape4 0.5s ease 0s infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes animation1shape4 {
|
||||
from {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translate(-16px, -16px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation1shape4 {
|
||||
from {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translate(-16px, -16px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
183
src/components/qiun-loading/loading2.vue
Normal file
183
src/components/qiun-loading/loading2.vue
Normal file
@ -0,0 +1,183 @@
|
||||
<template>
|
||||
<view class="container loading2">
|
||||
<view class="shape shape1"></view>
|
||||
<view class="shape shape2"></view>
|
||||
<view class="shape shape3"></view>
|
||||
<view class="shape shape4"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'loading2',
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped="true">
|
||||
.container {
|
||||
position: relative;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.container.loading2 {
|
||||
transform: rotate(10deg);
|
||||
transform: rotate(10deg);
|
||||
}
|
||||
|
||||
.container.loading2 .shape {
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.container.loading2 {
|
||||
animation: rotation 1s infinite;
|
||||
animation: rotation 1s infinite;
|
||||
}
|
||||
|
||||
.container .shape {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
.container .shape.shape1 {
|
||||
left: 0;
|
||||
background-color: #1890ff;
|
||||
}
|
||||
|
||||
.container .shape.shape2 {
|
||||
right: 0;
|
||||
background-color: #91cb74;
|
||||
}
|
||||
|
||||
.container .shape.shape3 {
|
||||
bottom: 0;
|
||||
background-color: #fac858;
|
||||
}
|
||||
|
||||
.container .shape.shape4 {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #e66;
|
||||
}
|
||||
|
||||
.loading2 .shape1 {
|
||||
animation: animation2shape1 0.5s ease 0s infinite alternate;
|
||||
animation: animation2shape1 0.5s ease 0s infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes animation2shape1 {
|
||||
from {
|
||||
transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translate(20px, 20px);
|
||||
transform: translate(20px, 20px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation2shape1 {
|
||||
from {
|
||||
transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translate(20px, 20px);
|
||||
transform: translate(20px, 20px);
|
||||
}
|
||||
}
|
||||
|
||||
.loading2 .shape2 {
|
||||
animation: animation2shape2 0.5s ease 0s infinite alternate;
|
||||
animation: animation2shape2 0.5s ease 0s infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes animation2shape2 {
|
||||
from {
|
||||
transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translate(-20px, 20px);
|
||||
transform: translate(-20px, 20px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation2shape2 {
|
||||
from {
|
||||
transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translate(-20px, 20px);
|
||||
transform: translate(-20px, 20px);
|
||||
}
|
||||
}
|
||||
|
||||
.loading2 .shape3 {
|
||||
animation: animation2shape3 0.5s ease 0s infinite alternate;
|
||||
animation: animation2shape3 0.5s ease 0s infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes animation2shape3 {
|
||||
from {
|
||||
transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translate(20px, -20px);
|
||||
transform: translate(20px, -20px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation2shape3 {
|
||||
from {
|
||||
transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translate(20px, -20px);
|
||||
transform: translate(20px, -20px);
|
||||
}
|
||||
}
|
||||
|
||||
.loading2 .shape4 {
|
||||
animation: animation2shape4 0.5s ease 0s infinite alternate;
|
||||
animation: animation2shape4 0.5s ease 0s infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes animation2shape4 {
|
||||
from {
|
||||
transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translate(-20px, -20px);
|
||||
transform: translate(-20px, -20px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation2shape4 {
|
||||
from {
|
||||
transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translate(-20px, -20px);
|
||||
transform: translate(-20px, -20px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
190
src/components/qiun-loading/loading3.vue
Normal file
190
src/components/qiun-loading/loading3.vue
Normal file
@ -0,0 +1,190 @@
|
||||
<template>
|
||||
<view class="container loading3">
|
||||
<view class="shape shape1"></view>
|
||||
<view class="shape shape2"></view>
|
||||
<view class="shape shape3"></view>
|
||||
<view class="shape shape4"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'loading3',
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped="true">
|
||||
.container {
|
||||
position: relative;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.container.loading3 {
|
||||
animation: rotation 1s infinite;
|
||||
animation: rotation 1s infinite;
|
||||
}
|
||||
|
||||
.container.loading3 .shape1 {
|
||||
border-top-left-radius: 10px;
|
||||
}
|
||||
|
||||
.container.loading3 .shape2 {
|
||||
border-top-right-radius: 10px;
|
||||
}
|
||||
|
||||
.container.loading3 .shape3 {
|
||||
border-bottom-left-radius: 10px;
|
||||
}
|
||||
|
||||
.container.loading3 .shape4 {
|
||||
border-bottom-right-radius: 10px;
|
||||
}
|
||||
|
||||
.container .shape {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
.container .shape.shape1 {
|
||||
left: 0;
|
||||
background-color: #1890ff;
|
||||
}
|
||||
|
||||
.container .shape.shape2 {
|
||||
right: 0;
|
||||
background-color: #91cb74;
|
||||
}
|
||||
|
||||
.container .shape.shape3 {
|
||||
bottom: 0;
|
||||
background-color: #fac858;
|
||||
}
|
||||
|
||||
.container .shape.shape4 {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #e66;
|
||||
}
|
||||
|
||||
.loading3 .shape1 {
|
||||
animation: animation3shape1 0.5s ease 0s infinite alternate;
|
||||
animation: animation3shape1 0.5s ease 0s infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes animation3shape1 {
|
||||
from {
|
||||
transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translate(5px, 5px);
|
||||
transform: translate(5px, 5px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation3shape1 {
|
||||
from {
|
||||
transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translate(5px, 5px);
|
||||
transform: translate(5px, 5px);
|
||||
}
|
||||
}
|
||||
|
||||
.loading3 .shape2 {
|
||||
animation: animation3shape2 0.5s ease 0s infinite alternate;
|
||||
animation: animation3shape2 0.5s ease 0s infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes animation3shape2 {
|
||||
from {
|
||||
transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translate(-5px, 5px);
|
||||
transform: translate(-5px, 5px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation3shape2 {
|
||||
from {
|
||||
transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translate(-5px, 5px);
|
||||
transform: translate(-5px, 5px);
|
||||
}
|
||||
}
|
||||
|
||||
.loading3 .shape3 {
|
||||
animation: animation3shape3 0.5s ease 0s infinite alternate;
|
||||
animation: animation3shape3 0.5s ease 0s infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes animation3shape3 {
|
||||
from {
|
||||
transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translate(5px, -5px);
|
||||
transform: translate(5px, -5px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation3shape3 {
|
||||
from {
|
||||
transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translate(5px, -5px);
|
||||
transform: translate(5px, -5px);
|
||||
}
|
||||
}
|
||||
|
||||
.loading3 .shape4 {
|
||||
animation: animation3shape4 0.5s ease 0s infinite alternate;
|
||||
animation: animation3shape4 0.5s ease 0s infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes animation3shape4 {
|
||||
from {
|
||||
transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translate(-5px, -5px);
|
||||
transform: translate(-5px, -5px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation3shape4 {
|
||||
from {
|
||||
transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translate(-5px, -5px);
|
||||
transform: translate(-5px, -5px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
250
src/components/qiun-loading/loading4.vue
Normal file
250
src/components/qiun-loading/loading4.vue
Normal file
@ -0,0 +1,250 @@
|
||||
<template>
|
||||
<view class="container loading5">
|
||||
<view class="shape shape1"></view>
|
||||
<view class="shape shape2"></view>
|
||||
<view class="shape shape3"></view>
|
||||
<view class="shape shape4"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'loading5',
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped="true">
|
||||
.container {
|
||||
position: relative;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.container.loading5 .shape {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
.container .shape {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
.container .shape.shape1 {
|
||||
left: 0;
|
||||
background-color: #1890ff;
|
||||
}
|
||||
|
||||
.container .shape.shape2 {
|
||||
right: 0;
|
||||
background-color: #91cb74;
|
||||
}
|
||||
|
||||
.container .shape.shape3 {
|
||||
bottom: 0;
|
||||
background-color: #fac858;
|
||||
}
|
||||
|
||||
.container .shape.shape4 {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #e66;
|
||||
}
|
||||
|
||||
.loading5 .shape1 {
|
||||
animation: animation5shape1 2s ease 0s infinite reverse;
|
||||
}
|
||||
|
||||
@keyframes animation5shape1 {
|
||||
0% {
|
||||
transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
|
||||
25% {
|
||||
transform: translate(0, 15px);
|
||||
transform: translate(0, 15px);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translate(15px, 15px);
|
||||
transform: translate(15px, 15px);
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: translate(15px, 0);
|
||||
transform: translate(15px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation5shape1 {
|
||||
0% {
|
||||
transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
|
||||
25% {
|
||||
transform: translate(0, 15px);
|
||||
transform: translate(0, 15px);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translate(15px, 15px);
|
||||
transform: translate(15px, 15px);
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: translate(15px, 0);
|
||||
transform: translate(15px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.loading5 .shape2 {
|
||||
animation: animation5shape2 2s ease 0s infinite reverse;
|
||||
}
|
||||
|
||||
@keyframes animation5shape2 {
|
||||
0% {
|
||||
transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
|
||||
25% {
|
||||
transform: translate(-15px, 0);
|
||||
transform: translate(-15px, 0);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translate(-15px, 15px);
|
||||
transform: translate(-15px, 15px);
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: translate(0, 15px);
|
||||
transform: translate(0, 15px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation5shape2 {
|
||||
0% {
|
||||
transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
|
||||
25% {
|
||||
transform: translate(-15px, 0);
|
||||
transform: translate(-15px, 0);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translate(-15px, 15px);
|
||||
transform: translate(-15px, 15px);
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: translate(0, 15px);
|
||||
transform: translate(0, 15px);
|
||||
}
|
||||
}
|
||||
|
||||
.loading5 .shape3 {
|
||||
animation: animation5shape3 2s ease 0s infinite reverse;
|
||||
}
|
||||
|
||||
@keyframes animation5shape3 {
|
||||
0% {
|
||||
transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
|
||||
25% {
|
||||
transform: translate(15px, 0);
|
||||
transform: translate(15px, 0);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translate(15px, -15px);
|
||||
transform: translate(15px, -15px);
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: translate(0, -15px);
|
||||
transform: translate(0, -15px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation5shape3 {
|
||||
0% {
|
||||
transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
|
||||
25% {
|
||||
transform: translate(15px, 0);
|
||||
transform: translate(15px, 0);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translate(15px, -15px);
|
||||
transform: translate(15px, -15px);
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: translate(0, -15px);
|
||||
transform: translate(0, -15px);
|
||||
}
|
||||
}
|
||||
|
||||
.loading5 .shape4 {
|
||||
animation: animation5shape4 2s ease 0s infinite reverse;
|
||||
}
|
||||
|
||||
@keyframes animation5shape4 {
|
||||
0% {
|
||||
transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
|
||||
25% {
|
||||
transform: translate(0, -15px);
|
||||
transform: translate(0, -15px);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translate(-15px, -15px);
|
||||
transform: translate(-15px, -15px);
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: translate(-15px, 0);
|
||||
transform: translate(-15px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation5shape4 {
|
||||
0% {
|
||||
transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
|
||||
25% {
|
||||
transform: translate(0, -15px);
|
||||
transform: translate(0, -15px);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translate(-15px, -15px);
|
||||
transform: translate(-15px, -15px);
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: translate(-15px, 0);
|
||||
transform: translate(-15px, 0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
259
src/components/qiun-loading/loading5.vue
Normal file
259
src/components/qiun-loading/loading5.vue
Normal file
@ -0,0 +1,259 @@
|
||||
<template>
|
||||
<view class="container loading6">
|
||||
<view class="shape shape1"></view>
|
||||
<view class="shape shape2"></view>
|
||||
<view class="shape shape3"></view>
|
||||
<view class="shape shape4"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'loading6',
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style scoped="true">
|
||||
.container {
|
||||
position: relative;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.container.loading6 {
|
||||
animation: rotation 1s infinite;
|
||||
animation: rotation 1s infinite;
|
||||
}
|
||||
|
||||
.container.loading6 .shape {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.container .shape {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
.container .shape.shape1 {
|
||||
left: 0;
|
||||
background-color: #1890ff;
|
||||
}
|
||||
|
||||
.container .shape.shape2 {
|
||||
right: 0;
|
||||
background-color: #91cb74;
|
||||
}
|
||||
|
||||
.container .shape.shape3 {
|
||||
bottom: 0;
|
||||
background-color: #fac858;
|
||||
}
|
||||
|
||||
.container .shape.shape4 {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #e66;
|
||||
}
|
||||
|
||||
.loading6 .shape1 {
|
||||
animation: animation6shape1 2s linear 0s infinite normal;
|
||||
animation: animation6shape1 2s linear 0s infinite normal;
|
||||
}
|
||||
|
||||
@keyframes animation6shape1 {
|
||||
0% {
|
||||
transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
|
||||
25% {
|
||||
transform: translate(0, 18px);
|
||||
transform: translate(0, 18px);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translate(18px, 18px);
|
||||
transform: translate(18px, 18px);
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: translate(18px, 0);
|
||||
transform: translate(18px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation6shape1 {
|
||||
0% {
|
||||
transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
|
||||
25% {
|
||||
transform: translate(0, 18px);
|
||||
transform: translate(0, 18px);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translate(18px, 18px);
|
||||
transform: translate(18px, 18px);
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: translate(18px, 0);
|
||||
transform: translate(18px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.loading6 .shape2 {
|
||||
animation: animation6shape2 2s linear 0s infinite normal;
|
||||
animation: animation6shape2 2s linear 0s infinite normal;
|
||||
}
|
||||
|
||||
@keyframes animation6shape2 {
|
||||
0% {
|
||||
transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
|
||||
25% {
|
||||
transform: translate(-18px, 0);
|
||||
transform: translate(-18px, 0);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translate(-18px, 18px);
|
||||
transform: translate(-18px, 18px);
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: translate(0, 18px);
|
||||
transform: translate(0, 18px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation6shape2 {
|
||||
0% {
|
||||
transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
|
||||
25% {
|
||||
transform: translate(-18px, 0);
|
||||
transform: translate(-18px, 0);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translate(-18px, 18px);
|
||||
transform: translate(-18px, 18px);
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: translate(0, 18px);
|
||||
transform: translate(0, 18px);
|
||||
}
|
||||
}
|
||||
|
||||
.loading6 .shape3 {
|
||||
animation: animation6shape3 2s linear 0s infinite normal;
|
||||
animation: animation6shape3 2s linear 0s infinite normal;
|
||||
}
|
||||
|
||||
@keyframes animation6shape3 {
|
||||
0% {
|
||||
transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
|
||||
25% {
|
||||
transform: translate(18px, 0);
|
||||
transform: translate(18px, 0);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translate(18px, -18px);
|
||||
transform: translate(18px, -18px);
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: translate(0, -18px);
|
||||
transform: translate(0, -18px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation6shape3 {
|
||||
0% {
|
||||
transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
|
||||
25% {
|
||||
transform: translate(18px, 0);
|
||||
transform: translate(18px, 0);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translate(18px, -18px);
|
||||
transform: translate(18px, -18px);
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: translate(0, -18px);
|
||||
transform: translate(0, -18px);
|
||||
}
|
||||
}
|
||||
|
||||
.loading6 .shape4 {
|
||||
animation: animation6shape4 2s linear 0s infinite normal;
|
||||
animation: animation6shape4 2s linear 0s infinite normal;
|
||||
}
|
||||
|
||||
@keyframes animation6shape4 {
|
||||
0% {
|
||||
transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
|
||||
25% {
|
||||
transform: translate(0, -18px);
|
||||
transform: translate(0, -18px);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translate(-18px, -18px);
|
||||
transform: translate(-18px, -18px);
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: translate(-18px, 0);
|
||||
transform: translate(-18px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation6shape4 {
|
||||
0% {
|
||||
transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
|
||||
25% {
|
||||
transform: translate(0, -18px);
|
||||
transform: translate(0, -18px);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translate(-18px, -18px);
|
||||
transform: translate(-18px, -18px);
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: translate(-18px, 0);
|
||||
transform: translate(-18px, 0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
33
src/components/qiun-loading/qiun-loading.vue
Normal file
33
src/components/qiun-loading/qiun-loading.vue
Normal file
@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<view>
|
||||
<Loading1 v-if="loadingType == 1" />
|
||||
<Loading2 v-if="loadingType == 2" />
|
||||
<Loading3 v-if="loadingType == 3" />
|
||||
<Loading4 v-if="loadingType == 4" />
|
||||
<Loading5 v-if="loadingType == 5" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Loading1 from './loading1.vue'
|
||||
import Loading2 from './loading2.vue'
|
||||
import Loading3 from './loading3.vue'
|
||||
import Loading4 from './loading4.vue'
|
||||
import Loading5 from './loading5.vue'
|
||||
|
||||
export default {
|
||||
components: { Loading1, Loading2, Loading3, Loading4, Loading5 },
|
||||
name: 'qiun-loading',
|
||||
props: {
|
||||
loadingType: {
|
||||
type: Number,
|
||||
default: 2,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
47
src/components/qiun-title-bar/qiun-title-bar.vue
Normal file
47
src/components/qiun-title-bar/qiun-title-bar.vue
Normal file
@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<view class="qiun-title-bar">
|
||||
<view class="qiun-title-dot"></view>
|
||||
<view class="qiun-title-text">{{ title }}</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'title-bar',
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
mounted() {},
|
||||
methods: {},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.qiun-title-bar {
|
||||
display: flex;
|
||||
flex-direction: row !important;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.qiun-title-dot {
|
||||
width: 5px;
|
||||
height: 16px;
|
||||
margin-left: 8px;
|
||||
background-color: #409eff;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.qiun-title-text {
|
||||
height: 22px;
|
||||
margin-left: 8px;
|
||||
font-size: 17px;
|
||||
font-weight: bold;
|
||||
line-height: 22px;
|
||||
color: #666;
|
||||
}
|
||||
</style>
|
||||
41
src/env.d.ts
vendored
Normal file
41
src/env.d.ts
vendored
Normal file
@ -0,0 +1,41 @@
|
||||
/// <reference types="vite/client" />
|
||||
/// <reference types="vite-svg-loader" />
|
||||
|
||||
declare module '*.vue' {
|
||||
import type { DefineComponent } from 'vue'
|
||||
|
||||
const component: DefineComponent<{}, {}, any>
|
||||
export default component
|
||||
}
|
||||
|
||||
interface ImportMetaEnv {
|
||||
/** 网站标题，应用名称 */
|
||||
readonly VITE_APP_TITLE: string
|
||||
/** 服务端口号 */
|
||||
readonly VITE_SERVER_PORT: string
|
||||
/** 后台接口地址 */
|
||||
readonly VITE_SERVER_BASEURL: string
|
||||
/** 微信小程序开发版后台接口地址，不配置则使用 VITE_SERVER_BASEURL */
|
||||
readonly VITE_SERVER_BASEURL__WEIXIN_DEVELOP?: string
|
||||
/** 微信小程序体验版后台接口地址，不配置则使用 VITE_SERVER_BASEURL */
|
||||
readonly VITE_SERVER_BASEURL__WEIXIN_TRIAL?: string
|
||||
/** 微信小程序正式版后台接口地址，不配置则使用 VITE_SERVER_BASEURL */
|
||||
readonly VITE_SERVER_BASEURL__WEIXIN_RELEASE?: string
|
||||
/** H5是否需要代理 */
|
||||
readonly VITE_APP_PROXY_ENABLE: 'true' | 'false'
|
||||
/** H5是否需要代理，需要的话有个前缀 */
|
||||
readonly VITE_APP_PROXY_PREFIX: string
|
||||
/** 后端是否有统一前缀 /api */
|
||||
readonly VITE_SERVER_HAS_API_PREFIX: 'true' | 'false'
|
||||
/** 认证模式，'single' | 'double' ==> 单token | 双token */
|
||||
readonly VITE_AUTH_MODE: 'single' | 'double'
|
||||
/** 是否清除console */
|
||||
readonly VITE_DELETE_CONSOLE: string
|
||||
// 更多环境变量...
|
||||
}
|
||||
|
||||
interface ImportMeta {
|
||||
readonly env: ImportMetaEnv
|
||||
}
|
||||
|
||||
declare const __VITE_APP_PROXY__: 'true' | 'false'
|
||||
74
src/hooks/useRequest.test.ts
Normal file
74
src/hooks/useRequest.test.ts
Normal file
@ -0,0 +1,74 @@
|
||||
import { mount } from '@vue/test-utils'
|
||||
import { describe, expect, it, vi } from 'vitest'
|
||||
import { defineComponent, h } from 'vue'
|
||||
import useRequest from './useRequest'
|
||||
|
||||
/**
|
||||
* 在 Vue 应用上下文中运行 composable。
|
||||
* composable 的 ref/computed/onMounted 只能在 setup() 内使用，
|
||||
* withSetup 通过挂载一个临时组件来提供这个上下文。
|
||||
*/
|
||||
function withSetup<T>(composableFn: () => T): T {
|
||||
let result!: T
|
||||
const Comp = defineComponent({
|
||||
setup() {
|
||||
result = composableFn()
|
||||
return () => h('div')
|
||||
},
|
||||
})
|
||||
const wrapper = mount(Comp)
|
||||
wrapper.unmount()
|
||||
return result
|
||||
}
|
||||
|
||||
describe('useRequest', () => {
|
||||
it('初始状态：loading=false, error=false, data=undefined', () => {
|
||||
const asyncFn = vi.fn().mockResolvedValue('data')
|
||||
const { loading, error, data } = withSetup(() => useRequest(asyncFn))
|
||||
|
||||
expect(loading.value).toBe(false)
|
||||
expect(error.value).toBe(false)
|
||||
expect(data.value).toBeUndefined()
|
||||
})
|
||||
|
||||
it('initialData：初始 data 使用传入的默认值', () => {
|
||||
const asyncFn = vi.fn().mockResolvedValue('new')
|
||||
const { data } = withSetup(() => useRequest(asyncFn, { initialData: 'init' }))
|
||||
|
||||
expect(data.value).toBe('init')
|
||||
})
|
||||
|
||||
it('run 成功：loading 先变 true 后变 false，data 更新为返回值', async () => {
|
||||
const asyncFn = vi.fn().mockResolvedValue('result')
|
||||
const { loading, data, run } = withSetup(() => useRequest(asyncFn))
|
||||
|
||||
const runPromise = run()
|
||||
expect(loading.value).toBe(true)
|
||||
|
||||
await runPromise
|
||||
|
||||
expect(loading.value).toBe(false)
|
||||
expect(data.value).toBe('result')
|
||||
})
|
||||
|
||||
it('run 失败：抛出错误，error 被设置，loading 重置为 false', async () => {
|
||||
const err = new Error('network error')
|
||||
const asyncFn = vi.fn().mockRejectedValue(err)
|
||||
const { loading, error, run } = withSetup(() => useRequest(asyncFn))
|
||||
|
||||
await expect(run()).rejects.toThrow('network error')
|
||||
|
||||
expect(loading.value).toBe(false)
|
||||
expect(error.value).toBe(err)
|
||||
})
|
||||
|
||||
it('immediate=true：组件挂载时立即调用异步函数并更新 data', async () => {
|
||||
const asyncFn = vi.fn().mockResolvedValue('eager')
|
||||
const { data } = withSetup(() => useRequest(asyncFn, { immediate: true }))
|
||||
|
||||
expect(asyncFn).toHaveBeenCalledTimes(1)
|
||||
// 等待 Promise 完成
|
||||
await asyncFn.mock.results[0].value
|
||||
expect(data.value).toBe('eager')
|
||||
})
|
||||
})
|
||||
54
src/hooks/useRequest.ts
Normal file
54
src/hooks/useRequest.ts
Normal file
@ -0,0 +1,54 @@
|
||||
import type { Ref } from 'vue'
|
||||
import { ref } from 'vue'
|
||||
|
||||
interface IUseRequestOptions<T> {
|
||||
/** 是否立即执行 */
|
||||
immediate?: boolean
|
||||
/** 初始化数据 */
|
||||
initialData?: T
|
||||
}
|
||||
|
||||
interface IUseRequestReturn<T, P = undefined> {
|
||||
loading: Ref<boolean>
|
||||
error: Ref<boolean | Error>
|
||||
data: Ref<T | undefined>
|
||||
run: (args?: P) => Promise<T | undefined>
|
||||
}
|
||||
|
||||
/**
|
||||
* useRequest是一个定制化的请求钩子，用于处理异步请求和响应。
|
||||
* @param func 一个执行异步请求的函数，返回一个包含响应数据的Promise。
|
||||
* @param options 包含请求选项的对象 {immediate, initialData}。
|
||||
* @param options.immediate 是否立即执行请求，默认为false。
|
||||
* @param options.initialData 初始化数据，默认为undefined。
|
||||
* @returns 返回一个对象{loading, error, data, run}，包含请求的加载状态、错误信息、响应数据和手动触发请求的函数。
|
||||
*/
|
||||
export default function useRequest<T, P = undefined>(
|
||||
func: (args?: P) => Promise<T>,
|
||||
options: IUseRequestOptions<T> = { immediate: false },
|
||||
): IUseRequestReturn<T, P> {
|
||||
const loading = ref(false)
|
||||
const error = ref(false)
|
||||
const data = ref<T | undefined>(options.initialData) as Ref<T | undefined>
|
||||
const run = async (args?: P) => {
|
||||
loading.value = true
|
||||
return func(args)
|
||||
.then((res) => {
|
||||
data.value = res
|
||||
error.value = false
|
||||
return data.value
|
||||
})
|
||||
.catch((err) => {
|
||||
error.value = err
|
||||
throw err
|
||||
})
|
||||
.finally(() => {
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
|
||||
if (options.immediate) {
|
||||
(run as (args: P) => Promise<T | undefined>)({} as P)
|
||||
}
|
||||
return { loading, error, data, run }
|
||||
}
|
||||
116
src/hooks/useScroll.md
Normal file
116
src/hooks/useScroll.md
Normal file
@ -0,0 +1,116 @@
|
||||
# 上拉刷新和下拉加载更多
|
||||
|
||||
在 unibest 框架中，我们通过组合 `useScroll` Hook 可结合 `scroll-view` 组件来轻松实现上拉刷新和下拉加载更多的功能。
|
||||
场景一 页面滚动
|
||||
|
||||
```
|
||||
definePage({
|
||||
style: {
|
||||
navigationBarTitleText: '上拉刷新和下拉加载更多',
|
||||
enablePullDownRefresh: true,
|
||||
onReachBottomDistance: 100,
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
场景二 局部滚动 结合 `scroll-view`
|
||||
|
||||
## 关键文件
|
||||
|
||||
- `src/hooks/useScroll.ts`: 提供了核心的滚动逻辑处理 Hook。
|
||||
- `src/pages-sub/demo/scroll.vue`: 一个具体的实现示例页面。
|
||||
|
||||
## `useScroll` Hook
|
||||
|
||||
`useScroll` 是一个 Vue Composition API Hook，它封装了处理下拉刷新和上拉加载的通用逻辑。
|
||||
|
||||
### 主要功能
|
||||
|
||||
- **管理加载状态**: 自动处理 `loading`（加载中）、`finished`（已加载全部）和 `error`（加载失败）等状态。
|
||||
- **分页逻辑**: 内部维护分页参数（页码 `page` 和每页数量 `pageSize`）。
|
||||
- **事件处理**: 提供 `onScrollToLower`（滚动到底部）、`onRefresherRefresh`（下拉刷新）等方法，用于在视图层触发。
|
||||
- **数据合并**: 自动将新加载的数据追加到现有列表 `list` 中。
|
||||
|
||||
### 使用方法
|
||||
|
||||
```typescript
|
||||
import { useScroll } from '@/hooks/useScroll'
|
||||
import { getList } from '@/service/list' // 你的数据请求API
|
||||
|
||||
const {
|
||||
list, // 响应式的数据列表
|
||||
loading, // 是否加载中
|
||||
finished, // 是否已全部加载
|
||||
error, // 是否加载失败
|
||||
onScrollToLower, // 滚动到底部时触发的事件
|
||||
onRefresherRefresh, // 下拉刷新时触发的事件
|
||||
} = useScroll(getList) // 将获取数据的API函数传入
|
||||
```
|
||||
|
||||
## `scroll-view` 组件
|
||||
|
||||
`scroll-view` 是 uni-app 提供的可滚动视图区域组件，它提供了一系列属性来支持下拉刷新和上拉加载。
|
||||
|
||||
### 关键属性
|
||||
|
||||
- `scroll-y`: 允许纵向滚动。
|
||||
- `refresher-enabled`: 启用下拉刷新。
|
||||
- `refresher-triggered`: 控制下拉刷新动画的显示与隐藏，通过 `loading` 状态绑定。
|
||||
- `@scrolltolower`: 滚动到底部时触发的事件，绑定 `onScrollToLower` 方法。
|
||||
- `@refresherrefresh`: 触发下拉刷新时触发的事件，绑定 `onRefresherRefresh` 方法。
|
||||
|
||||
## 示例代码
|
||||
|
||||
以下是 `src/pages-sub/demo/scroll.vue` 中的核心代码，展示了如何将 `useScroll` 和 `scroll-view` 结合使用。
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="scroll-page">
|
||||
<scroll-view
|
||||
class="scroll-view"
|
||||
scroll-y
|
||||
:refresher-enabled="true"
|
||||
:refresher-triggered="loading"
|
||||
@scrolltolower="onScrollToLower"
|
||||
@refresherrefresh="onRefresherRefresh"
|
||||
>
|
||||
<view v-for="item in list" :key="item.id" class="scroll-item">
|
||||
{{ item.name }}
|
||||
</view>
|
||||
|
||||
<!-- 加载状态提示 -->
|
||||
<view v-if="loading" class="loading-tip">加载中...</view>
|
||||
<view v-if="finished" class="finished-tip">没有更多了</view>
|
||||
<view v-if="error" class="error-tip">加载失败，请重试</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useScroll } from '@/hooks/useScroll'
|
||||
import { getList } from '@/service/list'
|
||||
|
||||
const { list, loading, finished, error, onScrollToLower, onRefresherRefresh } = useScroll(getList)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 样式省略 */
|
||||
.scroll-page, .scroll-view {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
## 实现步骤总结
|
||||
|
||||
1. **创建API**: 确保你有一个返回分页数据的API请求函数（例如 `getList`），它应该接受页码和页面大小作为参数。
|
||||
2. **调用 `useScroll`**: 在你的页面脚本中，导入并调用 `useScroll` Hook，将你的API函数作为参数传入。
|
||||
3. **模板绑定**:
|
||||
- 使用 `scroll-view` 组件作为滚动容器。
|
||||
- 将其 `refresher-triggered` 属性绑定到 `useScroll` 返回的 `loading` 状态。
|
||||
- 将其 `@scrolltolower` 事件绑定到 `onScrollToLower` 方法。
|
||||
- 将其 `@refresherrefresh` 事件绑定到 `onRefresherRefresh` 方法。
|
||||
4. **渲染列表**: 使用 `v-for` 指令渲染 `useScroll` 返回的 `list` 数组。
|
||||
5. **添加加载提示**: 根据 `loading`, `finished`, `error` 状态，在列表底部显示不同的提示信息，提升用户体验。
|
||||
|
||||
通过以上步骤，你就可以在项目中快速集成一个功能完善、体验良好的上拉刷新和下拉加载列表。
|
||||
74
src/hooks/useScroll.ts
Normal file
74
src/hooks/useScroll.ts
Normal file
@ -0,0 +1,74 @@
|
||||
import type { Ref } from 'vue'
|
||||
import { onMounted, ref } from 'vue'
|
||||
|
||||
interface UseScrollOptions<T> {
|
||||
fetchData: (page: number, pageSize: number) => Promise<T[]>
|
||||
pageSize?: number
|
||||
}
|
||||
|
||||
interface UseScrollReturn<T> {
|
||||
list: Ref<T[]>
|
||||
loading: Ref<boolean>
|
||||
finished: Ref<boolean>
|
||||
error: Ref<any>
|
||||
refresh: () => Promise<void>
|
||||
loadMore: () => Promise<void>
|
||||
}
|
||||
|
||||
export function useScroll<T>({
|
||||
fetchData,
|
||||
pageSize = 10,
|
||||
}: UseScrollOptions<T>): UseScrollReturn<T> {
|
||||
const list = ref<T[]>([]) as Ref<T[]>
|
||||
const loading = ref(false)
|
||||
const finished = ref(false)
|
||||
const error = ref<any>(null)
|
||||
const page = ref(1)
|
||||
|
||||
const loadData = async () => {
|
||||
if (loading.value || finished.value)
|
||||
return
|
||||
|
||||
loading.value = true
|
||||
error.value = null
|
||||
|
||||
try {
|
||||
const data = await fetchData(page.value, pageSize)
|
||||
if (data.length < pageSize) {
|
||||
finished.value = true
|
||||
}
|
||||
list.value.push(...data)
|
||||
page.value++
|
||||
}
|
||||
catch (err) {
|
||||
error.value = err
|
||||
}
|
||||
finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const refresh = async () => {
|
||||
page.value = 1
|
||||
finished.value = false
|
||||
list.value = []
|
||||
await loadData()
|
||||
}
|
||||
|
||||
const loadMore = async () => {
|
||||
await loadData()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
refresh()
|
||||
})
|
||||
|
||||
return {
|
||||
list,
|
||||
loading,
|
||||
finished,
|
||||
error,
|
||||
refresh,
|
||||
loadMore,
|
||||
}
|
||||
}
|
||||
171
src/hooks/useUpload.ts
Normal file
171
src/hooks/useUpload.ts
Normal file
@ -0,0 +1,171 @@
|
||||
import { ref } from 'vue'
|
||||
import { getEnvBaseUrl } from '@/utils/index'
|
||||
|
||||
const VITE_UPLOAD_BASEURL = `${getEnvBaseUrl()}/upload`
|
||||
|
||||
type TfileType = 'image' | 'file'
|
||||
type TImage = 'png' | 'jpg' | 'jpeg' | 'webp' | '*'
|
||||
type TFile = 'doc' | 'docx' | 'ppt' | 'zip' | 'xls' | 'xlsx' | 'txt' | TImage
|
||||
|
||||
interface TOptions<T extends TfileType> {
|
||||
formData?: Record<string, any>
|
||||
maxSize?: number
|
||||
accept?: T extends 'image' ? TImage[] : TFile[]
|
||||
fileType?: T
|
||||
success?: (params: any) => void
|
||||
error?: (err: any) => void
|
||||
}
|
||||
|
||||
export default function useUpload<T extends TfileType>(options: TOptions<T> = {} as TOptions<T>) {
|
||||
const {
|
||||
formData = {},
|
||||
maxSize = 5 * 1024 * 1024,
|
||||
accept = ['*'],
|
||||
fileType = 'image',
|
||||
success,
|
||||
error: onError,
|
||||
} = options
|
||||
|
||||
const loading = ref(false)
|
||||
const error = ref<Error | null>(null)
|
||||
const data = ref<any>(null)
|
||||
|
||||
const handleFileChoose = ({ tempFilePath, size }: { tempFilePath: string, size: number }) => {
|
||||
if (size > maxSize) {
|
||||
uni.showToast({
|
||||
title: `文件大小不能超过 ${maxSize / 1024 / 1024}MB`,
|
||||
icon: 'none',
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
// const fileExtension = file?.tempFiles?.name?.split('.').pop()?.toLowerCase()
|
||||
// const isTypeValid = accept.some((type) => type === '*' || type.toLowerCase() === fileExtension)
|
||||
|
||||
// if (!isTypeValid) {
|
||||
// uni.showToast({
|
||||
// title: `仅支持 ${accept.join(', ')} 格式的文件`,
|
||||
// icon: 'none',
|
||||
// })
|
||||
// return
|
||||
// }
|
||||
|
||||
loading.value = true
|
||||
uploadFile({
|
||||
tempFilePath,
|
||||
formData,
|
||||
onSuccess: (res) => {
|
||||
// 修改这里的解析逻辑，适应不同平台的返回格式
|
||||
let parsedData = res
|
||||
try {
|
||||
// 尝试解析为JSON
|
||||
const jsonData = JSON.parse(res)
|
||||
// 检查是否包含data字段
|
||||
parsedData = jsonData.data || jsonData
|
||||
}
|
||||
catch (e) {
|
||||
// 如果解析失败，使用原始数据
|
||||
console.log('Response is not JSON, using raw data:', res)
|
||||
}
|
||||
data.value = parsedData
|
||||
// console.log('上传成功', res)
|
||||
success?.(parsedData)
|
||||
},
|
||||
onError: (err) => {
|
||||
error.value = err
|
||||
onError?.(err)
|
||||
},
|
||||
onComplete: () => {
|
||||
loading.value = false
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
const run = () => {
|
||||
// 微信小程序从基础库 2.21.0 开始， wx.chooseImage 停止维护，请使用 uni.chooseMedia 代替。
|
||||
// 微信小程序在2023年10月17日之后，使用本API需要配置隐私协议
|
||||
const chooseFileOptions = {
|
||||
count: 1,
|
||||
success: (res: any) => {
|
||||
console.log('File selected successfully:', res)
|
||||
// 小程序中res:{errMsg: "chooseImage:ok", tempFiles: [{fileType: "image", size: 48976, tempFilePath: "http://tmp/5iG1WpIxTaJf3ece38692a337dc06df7eb69ecb49c6b.jpeg"}]}
|
||||
// h5中res:{errMsg: "chooseImage:ok", tempFilePaths: "blob:http://localhost:9000/f74ab6b8-a14d-4cb6-a10d-fcf4511a0de5", tempFiles: [File]}
|
||||
// h5的File有以下字段：{name: "girl.jpeg", size: 48976, type: "image/jpeg"}
|
||||
// App中res:{errMsg: "chooseImage:ok", tempFilePaths: "file:///Users/feige/xxx/gallery/1522437259-compressed-IMG_0006.jpg", tempFiles: [File]}
|
||||
// App的File有以下字段：{path: "file:///Users/feige/xxx/gallery/1522437259-compressed-IMG_0006.jpg", size: 48976}
|
||||
let tempFilePath = ''
|
||||
let size = 0
|
||||
// #ifdef MP-WEIXIN
|
||||
tempFilePath = res.tempFiles[0].tempFilePath
|
||||
size = res.tempFiles[0].size
|
||||
// #endif
|
||||
// #ifndef MP-WEIXIN
|
||||
tempFilePath = res.tempFilePaths[0]
|
||||
size = res.tempFiles[0].size
|
||||
// #endif
|
||||
handleFileChoose({ tempFilePath, size })
|
||||
},
|
||||
fail: (err: any) => {
|
||||
console.error('File selection failed:', err)
|
||||
error.value = err
|
||||
onError?.(err)
|
||||
},
|
||||
}
|
||||
|
||||
if (fileType === 'image') {
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.chooseMedia({
|
||||
...chooseFileOptions,
|
||||
mediaType: ['image'],
|
||||
})
|
||||
// #endif
|
||||
|
||||
// #ifndef MP-WEIXIN
|
||||
uni.chooseImage(chooseFileOptions)
|
||||
// #endif
|
||||
}
|
||||
else {
|
||||
uni.chooseFile({
|
||||
...chooseFileOptions,
|
||||
type: 'all',
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
return { loading, error, data, run }
|
||||
}
|
||||
|
||||
async function uploadFile({
|
||||
tempFilePath,
|
||||
formData,
|
||||
onSuccess,
|
||||
onError,
|
||||
onComplete,
|
||||
}: {
|
||||
tempFilePath: string
|
||||
formData: Record<string, any>
|
||||
onSuccess: (data: any) => void
|
||||
onError: (err: any) => void
|
||||
onComplete: () => void
|
||||
}) {
|
||||
uni.uploadFile({
|
||||
url: VITE_UPLOAD_BASEURL,
|
||||
filePath: tempFilePath,
|
||||
name: 'file',
|
||||
formData,
|
||||
success: (uploadFileRes) => {
|
||||
try {
|
||||
const data = uploadFileRes.data
|
||||
onSuccess(data)
|
||||
}
|
||||
catch (err) {
|
||||
onError(err)
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('Upload failed:', err)
|
||||
onError(err)
|
||||
},
|
||||
complete: onComplete,
|
||||
})
|
||||
}
|
||||
59
src/http/README.md
Normal file
59
src/http/README.md
Normal file
@ -0,0 +1,59 @@
|
||||
# 请求库
|
||||
|
||||
目前 unibest 支持 3 种请求方式：
|
||||
|
||||
- 简单版 `http`：路径 `src/http/http.ts`，适合大多数简单项目。
|
||||
- `alova`：路径 `src/http/alova.ts`。
|
||||
- `vue-query`：路径 `src/http/vue-query.ts`，主要用于自动生成接口，详情见 https://unibest.tech/base/17-generate 。
|
||||
|
||||
## 如何选择
|
||||
|
||||
如果您以前用过 `alova` 或 `vue-query`，可以优先使用熟悉的方案。
|
||||
|
||||
如果项目接口不复杂，简单版 `http` 就够了，也不会增加额外包体积。
|
||||
|
||||
## 关于 http 使用
|
||||
|
||||
```ts
|
||||
import { http } from '@/http/http'
|
||||
|
||||
interface IUserInfoRes {
|
||||
id: number
|
||||
nickname: string
|
||||
}
|
||||
|
||||
export function getUserInfo() {
|
||||
return http.get<IUserInfoRes>('/user/info')
|
||||
}
|
||||
|
||||
export function updateUserInfo(data: Partial<IUserInfoRes>) {
|
||||
return http.post('/user/update', data)
|
||||
}
|
||||
```
|
||||
|
||||
响应成功时会返回业务 `data`；业务错误、登录失效、HTTP 状态码异常和网络异常会统一 reject `HttpError`：
|
||||
|
||||
```ts
|
||||
import type { HttpError } from '@/http/types'
|
||||
|
||||
try {
|
||||
const userInfo = await getUserInfo()
|
||||
console.log(userInfo.nickname)
|
||||
}
|
||||
catch (error) {
|
||||
const httpError = error as HttpError
|
||||
console.log(httpError.type, httpError.message, httpError.statusCode)
|
||||
}
|
||||
```
|
||||
|
||||
如果调用方需要自行处理错误提示，可以传入 `hideErrorToast: true`：
|
||||
|
||||
```ts
|
||||
http.get<IUserInfoRes>('/user/info', undefined, undefined, {
|
||||
hideErrorToast: true,
|
||||
})
|
||||
```
|
||||
|
||||
## roadmap
|
||||
|
||||
菲鸽最近在优化脚手架，后续可以选择是否使用第三方请求库，以及选择具体请求库。
|
||||
119
src/http/alova.ts
Normal file
119
src/http/alova.ts
Normal file
@ -0,0 +1,119 @@
|
||||
import type { uniappRequestAdapter } from '@alova/adapter-uniapp'
|
||||
import type { IResponse } from './types'
|
||||
import AdapterUniapp from '@alova/adapter-uniapp'
|
||||
import { createAlova } from 'alova'
|
||||
import { createServerTokenAuthentication } from 'alova/client'
|
||||
import VueHook from 'alova/vue'
|
||||
import { toLoginPage } from '@/utils/toLoginPage'
|
||||
import { ContentTypeEnum, ResultEnum, ShowMessage } from './tools/enum'
|
||||
|
||||
// 配置动态Tag
|
||||
export const API_DOMAINS = {
|
||||
DEFAULT: import.meta.env.VITE_SERVER_BASEURL,
|
||||
SECONDARY: import.meta.env.VITE_SERVER_BASEURL_SECONDARY,
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建请求实例
|
||||
*/
|
||||
const { onAuthRequired, onResponseRefreshToken } = createServerTokenAuthentication<
|
||||
typeof VueHook,
|
||||
typeof uniappRequestAdapter
|
||||
>({
|
||||
// 如果下面拦截不到，请使用 refreshTokenOnSuccess by 群友@琛
|
||||
refreshTokenOnError: {
|
||||
isExpired: (error) => {
|
||||
return error.response?.status === ResultEnum.Unauthorized
|
||||
},
|
||||
handler: async () => {
|
||||
try {
|
||||
// await authLogin();
|
||||
}
|
||||
catch (error) {
|
||||
// 切换到登录页
|
||||
toLoginPage({ mode: 'reLaunch' })
|
||||
throw error
|
||||
}
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
/**
|
||||
* alova 请求实例
|
||||
*/
|
||||
const alovaInstance = createAlova({
|
||||
baseURL: API_DOMAINS.DEFAULT,
|
||||
...AdapterUniapp(),
|
||||
timeout: 5000,
|
||||
statesHook: VueHook,
|
||||
|
||||
beforeRequest: onAuthRequired((method) => {
|
||||
// 设置默认 Content-Type
|
||||
method.config.headers = {
|
||||
ContentType: ContentTypeEnum.JSON,
|
||||
Accept: 'application/json, text/plain, */*',
|
||||
...method.config.headers,
|
||||
}
|
||||
|
||||
const { config } = method
|
||||
const ignoreAuth = !config.meta?.ignoreAuth
|
||||
console.log('ignoreAuth===>', ignoreAuth)
|
||||
// 处理认证信息 自行处理认证问题
|
||||
if (ignoreAuth) {
|
||||
const token = 'getToken()'
|
||||
if (!token) {
|
||||
throw new Error('[请求错误]：未登录')
|
||||
}
|
||||
// method.config.headers.token = token;
|
||||
}
|
||||
|
||||
// 处理动态域名
|
||||
if (config.meta?.domain) {
|
||||
method.baseURL = config.meta.domain
|
||||
console.log('当前域名', method.baseURL)
|
||||
}
|
||||
}),
|
||||
|
||||
responded: onResponseRefreshToken((response, method) => {
|
||||
const { config } = method
|
||||
const { requestType } = config
|
||||
const {
|
||||
statusCode,
|
||||
data: rawData,
|
||||
errMsg,
|
||||
} = response as UniNamespace.RequestSuccessCallbackResult
|
||||
|
||||
// 处理特殊请求类型（上传/下载）
|
||||
if (requestType === 'upload' || requestType === 'download') {
|
||||
return response
|
||||
}
|
||||
|
||||
// 处理 HTTP 状态码错误
|
||||
if (statusCode !== 200) {
|
||||
const errorMessage = ShowMessage(statusCode) || `HTTP请求错误[${statusCode}]`
|
||||
console.error('errorMessage===>', errorMessage)
|
||||
uni.showToast({
|
||||
title: errorMessage,
|
||||
icon: 'error',
|
||||
})
|
||||
throw new Error(`${errorMessage}：${errMsg}`)
|
||||
}
|
||||
|
||||
// 处理业务逻辑错误
|
||||
const { code, message, data } = rawData as IResponse
|
||||
// 0和200当做成功都很普遍，这里直接兼容两者，见 ResultEnum
|
||||
if (code !== ResultEnum.Success0 && code !== ResultEnum.Success200) {
|
||||
if (config.meta?.toast !== false) {
|
||||
uni.showToast({
|
||||
title: message,
|
||||
icon: 'none',
|
||||
})
|
||||
}
|
||||
throw new Error(`请求错误[${code}]：${message}`)
|
||||
}
|
||||
// 处理成功响应，返回业务数据
|
||||
return data
|
||||
}),
|
||||
})
|
||||
|
||||
export const http = alovaInstance
|
||||
243
src/http/http.ts
Normal file
243
src/http/http.ts
Normal file
@ -0,0 +1,243 @@
|
||||
import type { IDoubleTokenRes } from '@/api/types/login'
|
||||
import type { CustomRequestOptions, HttpError, IResponse } from '@/http/types'
|
||||
import { nextTick } from 'vue'
|
||||
import { useTokenStore } from '@/store/token'
|
||||
import { isDoubleTokenMode } from '@/utils'
|
||||
import { toLoginPage } from '@/utils/toLoginPage'
|
||||
import { createHttpError, getResponseMessage, HttpErrorType, isSuccessResultCode, ResultEnum, ShowMessage } from './tools/enum'
|
||||
|
||||
// 刷新 token 状态管理
|
||||
let refreshing = false // 防止重复刷新 token 标识
|
||||
let taskQueue: (() => void)[] = [] // 刷新 token 请求队列
|
||||
|
||||
export function http<T>(options: CustomRequestOptions) {
|
||||
// 1. 返回 Promise 对象
|
||||
return new Promise<T>((resolve, reject) => {
|
||||
uni.request({
|
||||
...options,
|
||||
dataType: 'json',
|
||||
// #ifndef MP-WEIXIN
|
||||
responseType: 'json',
|
||||
// #endif
|
||||
// 响应成功
|
||||
success: async (res) => {
|
||||
const responseData = res.data as Partial<IResponse<T>>
|
||||
const code = responseData?.code
|
||||
|
||||
// 检查是否是401错误（包括HTTP状态码401或业务码401）
|
||||
const isTokenExpired = res.statusCode === 401 || code === ResultEnum.Unauthorized
|
||||
|
||||
if (isTokenExpired) {
|
||||
const tokenStore = useTokenStore()
|
||||
if (!isDoubleTokenMode) {
|
||||
// 未启用双token策略，清理用户信息，跳转到登录页
|
||||
tokenStore.logout()
|
||||
toLoginPage()
|
||||
return reject(createHttpError({
|
||||
type: HttpErrorType.Auth,
|
||||
code,
|
||||
statusCode: res.statusCode,
|
||||
message: getResponseMessage(responseData, '登录已过期，请重新登录'),
|
||||
data: responseData?.data,
|
||||
raw: res,
|
||||
}))
|
||||
}
|
||||
|
||||
/* -------- 无感刷新 token ----------- */
|
||||
const { refreshToken } = tokenStore.tokenInfo as IDoubleTokenRes || {}
|
||||
// token 失效的，且有刷新 token 的，才放到请求队列里
|
||||
if (refreshToken) {
|
||||
taskQueue.push(() => {
|
||||
resolve(http<T>(options))
|
||||
})
|
||||
}
|
||||
|
||||
// 如果有 refreshToken 且未在刷新中，发起刷新 token 请求
|
||||
if (refreshToken && !refreshing) {
|
||||
refreshing = true
|
||||
try {
|
||||
// 发起刷新 token 请求（使用 store 的 refreshToken 方法）
|
||||
await tokenStore.refreshToken()
|
||||
// 刷新 token 成功
|
||||
refreshing = false
|
||||
nextTick(() => {
|
||||
// 关闭其他弹窗
|
||||
uni.hideToast()
|
||||
uni.showToast({
|
||||
title: 'token 刷新成功',
|
||||
icon: 'none',
|
||||
})
|
||||
})
|
||||
// 将任务队列的所有任务重新请求
|
||||
taskQueue.forEach(task => task())
|
||||
}
|
||||
catch (refreshErr) {
|
||||
console.error('刷新 token 失败:', refreshErr)
|
||||
refreshing = false
|
||||
// 刷新 token 失败，跳转到登录页
|
||||
nextTick(() => {
|
||||
// 关闭其他弹窗
|
||||
uni.hideToast()
|
||||
uni.showToast({
|
||||
title: '登录已过期，请重新登录',
|
||||
icon: 'none',
|
||||
})
|
||||
})
|
||||
// 清除用户信息
|
||||
await tokenStore.logout()
|
||||
// 跳转到登录页
|
||||
setTimeout(() => {
|
||||
toLoginPage()
|
||||
}, 2000)
|
||||
}
|
||||
finally {
|
||||
// 不管刷新 token 成功与否，都清空任务队列
|
||||
taskQueue = []
|
||||
}
|
||||
}
|
||||
|
||||
return reject(createHttpError({
|
||||
type: HttpErrorType.Auth,
|
||||
code,
|
||||
statusCode: res.statusCode,
|
||||
message: getResponseMessage(responseData, '登录已过期，请重新登录'),
|
||||
data: responseData?.data,
|
||||
raw: res,
|
||||
}))
|
||||
}
|
||||
|
||||
// 处理其他成功状态（HTTP状态码200-299）
|
||||
if (res.statusCode >= 200 && res.statusCode < 300) {
|
||||
// 处理业务逻辑错误
|
||||
if (!isSuccessResultCode(code as number)) {
|
||||
const httpError = createHttpError({
|
||||
type: HttpErrorType.Business,
|
||||
code,
|
||||
statusCode: res.statusCode,
|
||||
message: getResponseMessage(responseData),
|
||||
data: responseData?.data,
|
||||
raw: responseData,
|
||||
})
|
||||
|
||||
if (!options.hideErrorToast) {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: httpError.message,
|
||||
})
|
||||
}
|
||||
return reject(httpError)
|
||||
}
|
||||
return resolve(responseData.data as T)
|
||||
}
|
||||
|
||||
// 处理其他错误
|
||||
const httpError = createHttpError({
|
||||
type: HttpErrorType.Http,
|
||||
code,
|
||||
statusCode: res.statusCode,
|
||||
message: getResponseMessage(responseData, ShowMessage(res.statusCode)),
|
||||
data: responseData?.data,
|
||||
raw: res,
|
||||
})
|
||||
|
||||
if (!options.hideErrorToast) {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: httpError.message,
|
||||
})
|
||||
}
|
||||
reject(httpError)
|
||||
},
|
||||
// 响应失败
|
||||
fail(err) {
|
||||
const httpError = createHttpError({
|
||||
type: HttpErrorType.Network,
|
||||
message: '网络错误，换个网络试试',
|
||||
raw: err,
|
||||
} satisfies HttpError)
|
||||
|
||||
if (!options.hideErrorToast) {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: httpError.message,
|
||||
})
|
||||
}
|
||||
reject(httpError)
|
||||
},
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* GET 请求
|
||||
* @param url 后台地址
|
||||
* @param query 请求query参数
|
||||
* @param header 请求头，默认为json格式
|
||||
* @returns
|
||||
*/
|
||||
export function httpGet<T>(url: string, query?: Record<string, any>, header?: Record<string, any>, options?: Partial<CustomRequestOptions>) {
|
||||
return http<T>({
|
||||
url,
|
||||
query,
|
||||
method: 'GET',
|
||||
header,
|
||||
...options,
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* POST 请求
|
||||
* @param url 后台地址
|
||||
* @param data 请求body参数
|
||||
* @param query 请求query参数，post请求也支持query，很多微信接口都需要
|
||||
* @param header 请求头，默认为json格式
|
||||
* @returns
|
||||
*/
|
||||
export function httpPost<T>(url: string, data?: Record<string, any>, query?: Record<string, any>, header?: Record<string, any>, options?: Partial<CustomRequestOptions>) {
|
||||
return http<T>({
|
||||
url,
|
||||
query,
|
||||
data,
|
||||
method: 'POST',
|
||||
header,
|
||||
...options,
|
||||
})
|
||||
}
|
||||
/**
|
||||
* PUT 请求
|
||||
*/
|
||||
export function httpPut<T>(url: string, data?: Record<string, any>, query?: Record<string, any>, header?: Record<string, any>, options?: Partial<CustomRequestOptions>) {
|
||||
return http<T>({
|
||||
url,
|
||||
data,
|
||||
query,
|
||||
method: 'PUT',
|
||||
header,
|
||||
...options,
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* DELETE 请求（无请求体，仅 query）
|
||||
*/
|
||||
export function httpDelete<T>(url: string, query?: Record<string, any>, header?: Record<string, any>, options?: Partial<CustomRequestOptions>) {
|
||||
return http<T>({
|
||||
url,
|
||||
query,
|
||||
method: 'DELETE',
|
||||
header,
|
||||
...options,
|
||||
})
|
||||
}
|
||||
|
||||
// 支持与 axios 类似的API调用
|
||||
http.get = httpGet
|
||||
http.post = httpPost
|
||||
http.put = httpPut
|
||||
http.delete = httpDelete
|
||||
|
||||
// 支持与 alovaJS 类似的API调用
|
||||
http.Get = httpGet
|
||||
http.Post = httpPost
|
||||
http.Put = httpPut
|
||||
http.Delete = httpDelete
|
||||
69
src/http/interceptor.ts
Normal file
69
src/http/interceptor.ts
Normal file
@ -0,0 +1,69 @@
|
||||
import type { CustomRequestOptions } from '@/http/types'
|
||||
import { useTokenStore } from '@/store'
|
||||
import { getEnvBaseUrl } from '@/utils'
|
||||
import { stringifyQuery } from './tools/queryString'
|
||||
|
||||
// 请求基准地址
|
||||
const baseUrl = getEnvBaseUrl()
|
||||
|
||||
// 拦截器配置
|
||||
const httpInterceptor = {
|
||||
// 拦截前触发
|
||||
invoke(options: CustomRequestOptions) {
|
||||
// 如果您使用了alova，则请把下面的代码放开注释
|
||||
// alova 执行流程：alova beforeRequest --> 本拦截器 --> alova responded
|
||||
// return options
|
||||
|
||||
// 非 alova 请求，正常执行
|
||||
// 接口请求支持通过 query 参数配置 queryString
|
||||
if (options.query) {
|
||||
const queryStr = stringifyQuery(options.query)
|
||||
if (options.url.includes('?')) {
|
||||
options.url += `&${queryStr}`
|
||||
}
|
||||
else {
|
||||
options.url += `?${queryStr}`
|
||||
}
|
||||
}
|
||||
// 非 http 开头需拼接地址
|
||||
if (!options.url.startsWith('http')) {
|
||||
// #ifdef H5
|
||||
if (JSON.parse(import.meta.env.VITE_APP_PROXY_ENABLE)) {
|
||||
// 自动拼接代理前缀
|
||||
options.url = import.meta.env.VITE_APP_PROXY_PREFIX + options.url
|
||||
}
|
||||
else {
|
||||
options.url = baseUrl + options.url
|
||||
}
|
||||
// #endif
|
||||
// 非H5正常拼接
|
||||
// #ifndef H5
|
||||
options.url = baseUrl + options.url
|
||||
// #endif
|
||||
// TIPS: 如果需要对接多个后端服务，也可以在这里处理，拼接成所需要的地址
|
||||
}
|
||||
// 1. 请求超时
|
||||
options.timeout = 60000 // 60s
|
||||
// 2. （可选）添加小程序端请求头标识
|
||||
options.header = {
|
||||
...options.header,
|
||||
}
|
||||
// 3. 添加 token 请求头标识
|
||||
const tokenStore = useTokenStore()
|
||||
const token = tokenStore.updateNowTime().validToken
|
||||
|
||||
if (token) {
|
||||
options.header.Authorization = `Bearer ${token}`
|
||||
}
|
||||
return options
|
||||
},
|
||||
}
|
||||
|
||||
export const requestInterceptor = {
|
||||
install() {
|
||||
// 拦截 request 请求
|
||||
uni.addInterceptor('request', httpInterceptor)
|
||||
// 拦截 uploadFile 文件上传
|
||||
uni.addInterceptor('uploadFile', httpInterceptor)
|
||||
},
|
||||
}
|
||||
89
src/http/tools/enum.ts
Normal file
89
src/http/tools/enum.ts
Normal file
@ -0,0 +1,89 @@
|
||||
import type { HttpError, IResponse } from '@/http/types'
|
||||
|
||||
export enum ResultEnum {
|
||||
// 0和200当做成功都很普遍，这里直接兼容两者（PS：0和200通常都不会当做错误码，但是有的接口会返回0，有的接口会返回200）
|
||||
Success0 = 0, // 成功
|
||||
Success200 = 200, // 成功
|
||||
Error = 400, // 错误
|
||||
Unauthorized = 401, // 未授权
|
||||
Forbidden = 403, // 禁止访问（原为forbidden）
|
||||
NotFound = 404, // 未找到（原为notFound）
|
||||
MethodNotAllowed = 405, // 方法不允许（原为methodNotAllowed）
|
||||
RequestTimeout = 408, // 请求超时（原为requestTimeout）
|
||||
InternalServerError = 500, // 服务器错误（原为internalServerError）
|
||||
NotImplemented = 501, // 未实现（原为notImplemented）
|
||||
BadGateway = 502, // 网关错误（原为badGateway）
|
||||
ServiceUnavailable = 503, // 服务不可用（原为serviceUnavailable）
|
||||
GatewayTimeout = 504, // 网关超时（原为gatewayTimeout）
|
||||
HttpVersionNotSupported = 505, // HTTP版本不支持（原为httpVersionNotSupported）
|
||||
}
|
||||
export enum ContentTypeEnum {
|
||||
JSON = 'application/json;charset=UTF-8',
|
||||
FORM_URLENCODED = 'application/x-www-form-urlencoded;charset=UTF-8',
|
||||
FORM_DATA = 'multipart/form-data;charset=UTF-8',
|
||||
}
|
||||
|
||||
export enum HttpErrorType {
|
||||
Business = 'business',
|
||||
Auth = 'auth',
|
||||
Http = 'http',
|
||||
Network = 'network',
|
||||
}
|
||||
|
||||
export function isSuccessResultCode(code: number): boolean {
|
||||
return [ResultEnum.Success0, ResultEnum.Success200].includes(code)
|
||||
}
|
||||
|
||||
export function getResponseMessage(responseData: Partial<IResponse<any>> | undefined, fallback = '请求错误'): string {
|
||||
return responseData?.msg || responseData?.message || fallback
|
||||
}
|
||||
|
||||
export function createHttpError<T>(params: HttpError<T>): HttpError<T> {
|
||||
return params
|
||||
}
|
||||
/**
|
||||
* 根据状态码，生成对应的错误信息
|
||||
* @param {number|string} status 状态码
|
||||
* @returns {string} 错误信息
|
||||
*/
|
||||
export function ShowMessage(status: number | string): string {
|
||||
let message: string
|
||||
switch (status) {
|
||||
case 400:
|
||||
message = '请求错误(400)'
|
||||
break
|
||||
case 401:
|
||||
message = '未授权，请重新登录(401)'
|
||||
break
|
||||
case 403:
|
||||
message = '拒绝访问(403)'
|
||||
break
|
||||
case 404:
|
||||
message = '请求出错(404)'
|
||||
break
|
||||
case 408:
|
||||
message = '请求超时(408)'
|
||||
break
|
||||
case 500:
|
||||
message = '服务器错误(500)'
|
||||
break
|
||||
case 501:
|
||||
message = '服务未实现(501)'
|
||||
break
|
||||
case 502:
|
||||
message = '网络错误(502)'
|
||||
break
|
||||
case 503:
|
||||
message = '服务不可用(503)'
|
||||
break
|
||||
case 504:
|
||||
message = '网络超时(504)'
|
||||
break
|
||||
case 505:
|
||||
message = 'HTTP版本不受支持(505)'
|
||||
break
|
||||
default:
|
||||
message = `连接出错(${status})!`
|
||||
}
|
||||
return `${message}，请检查网络或联系管理员！`
|
||||
}
|
||||
29
src/http/tools/queryString.ts
Normal file
29
src/http/tools/queryString.ts
Normal file
@ -0,0 +1,29 @@
|
||||
/**
|
||||
* 将对象序列化为URL查询字符串，用于替代第三方的 qs 库，节省宝贵的体积
|
||||
* 支持基本类型值和数组，不支持嵌套对象
|
||||
* @param obj 要序列化的对象
|
||||
* @returns 序列化后的查询字符串
|
||||
*/
|
||||
export function stringifyQuery(obj: Record<string, any>): string {
|
||||
if (!obj || typeof obj !== 'object' || Array.isArray(obj))
|
||||
return ''
|
||||
|
||||
return Object.entries(obj)
|
||||
.filter(([_, value]) => value !== undefined && value !== null)
|
||||
.map(([key, value]) => {
|
||||
// 对键进行编码
|
||||
const encodedKey = encodeURIComponent(key)
|
||||
|
||||
// 处理数组类型
|
||||
if (Array.isArray(value)) {
|
||||
return value
|
||||
.filter(item => item !== undefined && item !== null)
|
||||
.map(item => `${encodedKey}=${encodeURIComponent(item)}`)
|
||||
.join('&')
|
||||
}
|
||||
|
||||
// 处理基本类型
|
||||
return `${encodedKey}=${encodeURIComponent(value)}`
|
||||
})
|
||||
.join('&')
|
||||
}
|
||||
53
src/http/types.ts
Normal file
53
src/http/types.ts
Normal file
@ -0,0 +1,53 @@
|
||||
/**
|
||||
* 在 uniapp 的 RequestOptions 和 IUniUploadFileOptions 基础上，添加自定义参数
|
||||
*/
|
||||
export type CustomRequestOptions = UniApp.RequestOptions & {
|
||||
query?: Record<string, any>
|
||||
/** 出错时是否隐藏错误提示 */
|
||||
hideErrorToast?: boolean
|
||||
} & IUniUploadFileOptions // 添加uni.uploadFile参数类型
|
||||
|
||||
/** 主要提供给 openapi-ts-request 生成的代码使用 */
|
||||
export type CustomRequestOptions_ = Omit<CustomRequestOptions, 'url'>
|
||||
|
||||
export interface HttpRequestResult<T> {
|
||||
promise: Promise<T>
|
||||
requestTask: UniApp.RequestTask
|
||||
}
|
||||
|
||||
export interface HttpError<T = any> {
|
||||
type: 'business' | 'auth' | 'http' | 'network'
|
||||
code?: number
|
||||
statusCode?: number
|
||||
message: string
|
||||
data?: T
|
||||
raw?: unknown
|
||||
}
|
||||
|
||||
// 通用响应格式（兼容 msg + message 字段）
|
||||
export type IResponse<T = any> = {
|
||||
code: number
|
||||
data: T
|
||||
message: string
|
||||
[key: string]: any // 允许额外属性
|
||||
} | {
|
||||
code: number
|
||||
data: T
|
||||
msg: string
|
||||
[key: string]: any // 允许额外属性
|
||||
}
|
||||
|
||||
// 分页请求参数
|
||||
export interface PageParams {
|
||||
page: number
|
||||
pageSize: number
|
||||
[key: string]: any
|
||||
}
|
||||
|
||||
// 分页响应数据
|
||||
export interface PageResult<T> {
|
||||
list: T[]
|
||||
total: number
|
||||
page: number
|
||||
pageSize: number
|
||||
}
|
||||
30
src/http/vue-query.ts
Normal file
30
src/http/vue-query.ts
Normal file
@ -0,0 +1,30 @@
|
||||
import type { CustomRequestOptions } from '@/http/types'
|
||||
import { http } from './http'
|
||||
|
||||
/*
|
||||
* openapi-ts-request 工具的 request 跨客户端适配方法
|
||||
*/
|
||||
export default function request<T extends { data?: any }>(
|
||||
url: string,
|
||||
options: Omit<CustomRequestOptions, 'url'> & {
|
||||
params?: Record<string, unknown>
|
||||
headers?: Record<string, unknown>
|
||||
},
|
||||
) {
|
||||
const requestOptions = {
|
||||
url,
|
||||
...options,
|
||||
}
|
||||
|
||||
if (options.params) {
|
||||
requestOptions.query = requestOptions.params
|
||||
delete requestOptions.params
|
||||
}
|
||||
|
||||
if (options.headers) {
|
||||
requestOptions.header = options.headers
|
||||
delete requestOptions.headers
|
||||
}
|
||||
|
||||
return http<T['data']>(requestOptions)
|
||||
}
|
||||
3
src/layouts/default.vue
Normal file
3
src/layouts/default.vue
Normal file
@ -0,0 +1,3 @@
|
||||
<template>
|
||||
<slot />
|
||||
</template>
|
||||
19
src/main.ts
Normal file
19
src/main.ts
Normal file
@ -0,0 +1,19 @@
|
||||
import { createSSRApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
import { requestInterceptor } from './http/interceptor'
|
||||
import { routeInterceptor } from './router/interceptor'
|
||||
|
||||
import store from './store'
|
||||
import '@/style/index.scss'
|
||||
import 'virtual:uno.css'
|
||||
|
||||
export function createApp() {
|
||||
const app = createSSRApp(App)
|
||||
app.use(store)
|
||||
app.use(routeInterceptor)
|
||||
app.use(requestInterceptor)
|
||||
|
||||
return {
|
||||
app,
|
||||
}
|
||||
}
|
||||
34
src/pages-demo/hooks/useEcharts.ts
Normal file
34
src/pages-demo/hooks/useEcharts.ts
Normal file
@ -0,0 +1,34 @@
|
||||
// APP 与 H5 引入 echarts
|
||||
// #ifdef APP-PLUS || H5
|
||||
import * as echartsAppOrH5 from "echarts";
|
||||
// #endif
|
||||
|
||||
import { ref } from "vue";
|
||||
|
||||
// 小程序中引入 echarts
|
||||
// #ifndef APP-PLUS || H5
|
||||
// eslint-disable-next-line @typescript-eslint/no-var-requires
|
||||
const echarts = require("../uni_modules/lime-echart/static/echarts.min");
|
||||
// #endif
|
||||
|
||||
// echarts 图表 Hooks
|
||||
export function useEcharts(options: any): any {
|
||||
// echarts 图实例
|
||||
const chartRef = ref<any>(null);
|
||||
// echarts 图绘制函数
|
||||
const draw = () => {
|
||||
setTimeout(async () => {
|
||||
if (!chartRef.value) return;
|
||||
// #ifndef APP-PLUS || H5
|
||||
const chart = await chartRef.value.init(echarts);
|
||||
chart.setOption(options.value);
|
||||
// #endif
|
||||
// #ifdef APP-PLUS || H5
|
||||
const chartAPP = await chartRef.value.init(echartsAppOrH5);
|
||||
chartAPP.setOption(options.value);
|
||||
// #endif
|
||||
}, 300);
|
||||
};
|
||||
// 这里就封装巧妙之处，如果是对象，那么需要重命名，而是是数组，无需重命名
|
||||
return [chartRef, options, draw];
|
||||
}
|
||||
87
src/pages-demo/lime-echarts/index.vue
Normal file
87
src/pages-demo/lime-echarts/index.vue
Normal file
@ -0,0 +1,87 @@
|
||||
<template>
|
||||
<view class="chart-page">
|
||||
<view class="chart-box">
|
||||
<l-echart ref="chartRef" @finished="draw" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { EChartsOption } from 'echarts'
|
||||
import { ref } from 'vue'
|
||||
import { useEcharts } from '../hooks/useEcharts'
|
||||
|
||||
definePage({
|
||||
style: { navigationBarTitleText: 'lime-echart 图表' },
|
||||
})
|
||||
|
||||
const options = ref<EChartsOption>({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
legend: {
|
||||
data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'],
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '邮件营销',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
data: [120, 132, 101, 134, 90, 230, 210],
|
||||
},
|
||||
{
|
||||
name: '联盟广告',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
data: [220, 182, 191, 234, 290, 330, 310],
|
||||
},
|
||||
{
|
||||
name: '视频广告',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
data: [150, 232, 201, 154, 190, 330, 410],
|
||||
},
|
||||
{
|
||||
name: '直接访问',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
data: [320, 332, 301, 334, 390, 330, 320],
|
||||
},
|
||||
{
|
||||
name: '搜索引擎',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
data: [820, 932, 901, 934, 1290, 1330, 1320],
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
const [chartRef, , draw] = useEcharts(options)
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.chart-page {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.chart-box {
|
||||
width: 100%;
|
||||
height: 600rpx;
|
||||
}
|
||||
</style>
|
||||
160
src/pages-demo/lime-echarts/index2.ts
Normal file
160
src/pages-demo/lime-echarts/index2.ts
Normal file
@ -0,0 +1,160 @@
|
||||
import { ref } from 'vue'
|
||||
import { useEcharts } from '../hooks/useEcharts'
|
||||
|
||||
// 折线图
|
||||
export function useLineEcharts(): any {
|
||||
// 折线图配置项数据
|
||||
// 每次编写新类型的图表时，只需要复制一份修改这里的配置即可
|
||||
// 应用 这个类型的图表时，只需在 .vue 文件中通过 set 修复数据即可，或者简单的样式修改，如果样式过于复杂，可以重新建立一个 linkHookB 等等
|
||||
const option = ref({
|
||||
xAxis: {
|
||||
data: [12, 13, 10, 13, 9, 23, 21, 32, 12, 15, 13, 10],
|
||||
boundaryGap: false,
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#0C4787',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
color: '#000000',
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: 5,
|
||||
right: 16,
|
||||
bottom: 5,
|
||||
top: 20,
|
||||
containLabel: true,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
},
|
||||
padding: [5, 10],
|
||||
},
|
||||
yAxis: {
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#0C4787',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
color: '#000000',
|
||||
},
|
||||
},
|
||||
series: {
|
||||
smooth: true,
|
||||
type: 'line',
|
||||
data: [12, 13, 10, 13, 9, 23, 21, 32, 12, 15, 13, 10],
|
||||
animationDuration: 2800,
|
||||
animationEasing: 'cubicInOut',
|
||||
symbol: 'circle',
|
||||
color: '#fed42b',
|
||||
symbolSize: 8,
|
||||
lineStyle: {
|
||||
color: '#fed42b', // 改变折线颜色
|
||||
},
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#fed42b', // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(254, 212, 43, 0.1)', // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
global: false, // 缺省为 false
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
return useEcharts(option)
|
||||
}
|
||||
|
||||
// 柱状图
|
||||
export function useBarEcharts(): any {
|
||||
const option = ref({
|
||||
xAxis: {
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#0C4787',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
color: '#000000',
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: 5,
|
||||
right: 16,
|
||||
bottom: 5,
|
||||
top: 20,
|
||||
containLabel: true,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
},
|
||||
padding: [5, 10],
|
||||
},
|
||||
yAxis: {
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#0C4787',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
color: '#000000',
|
||||
},
|
||||
},
|
||||
series: {
|
||||
type: 'bar',
|
||||
data: [120, 200, 150, 80, 70, 110, 130],
|
||||
animationDuration: 2800,
|
||||
animationEasing: 'cubicInOut',
|
||||
color: '#fed42b',
|
||||
barWidth: 10,
|
||||
itemStyle: {
|
||||
barBorderRadius: [3, 3, 0, 0],
|
||||
},
|
||||
},
|
||||
})
|
||||
return useEcharts(option)
|
||||
}
|
||||
91
src/pages-demo/lime-echarts/index2.vue
Normal file
91
src/pages-demo/lime-echarts/index2.vue
Normal file
@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<view>折线图1</view>
|
||||
<view style="width: 100%; height: 200px">
|
||||
<l-echart ref="lineChartRef" />
|
||||
</view>
|
||||
<view>折线图2</view>
|
||||
<view style="width: 100%; height: 200px">
|
||||
<l-echart ref="lineChartRef2" />
|
||||
</view>
|
||||
<view>柱状图</view>
|
||||
<view style="width: 100%; height: 200px">
|
||||
<l-echart ref="barChartRef" />
|
||||
</view>
|
||||
<button @click="changeLineChartData">
|
||||
切换折线图1数据
|
||||
</button>
|
||||
<button @click="changeBarChartData">
|
||||
改变柱状图样式
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { set } from 'lodash-es'
|
||||
import { onMounted } from 'vue'
|
||||
import { useBarEcharts, useLineEcharts } from './index2'
|
||||
|
||||
definePage({
|
||||
style: { navigationBarTitleText: 'lime-echart 图表2' },
|
||||
})
|
||||
|
||||
const [lineChartRef, lineOption, lineDraw] = useLineEcharts()
|
||||
const [lineChartRef2, lineOption2, lineDraw2] = useLineEcharts()
|
||||
const [barChartRef, barOption, barDraw] = useBarEcharts()
|
||||
|
||||
// 初始化 折线图表1
|
||||
function initLineChart() {
|
||||
set(
|
||||
lineOption.value,
|
||||
'series.data',
|
||||
[120, 132, 101, 134, 90, 230, 210, 220, 182, 191, 234, 290],
|
||||
)
|
||||
lineDraw()
|
||||
}
|
||||
|
||||
// 初始化 折线图表2
|
||||
function initLineChart2() {
|
||||
set(
|
||||
lineOption2.value,
|
||||
'series.data',
|
||||
[220, 182, 191, 234, 290, 330, 310, 320, 302, 301, 334, 390],
|
||||
)
|
||||
lineDraw2()
|
||||
}
|
||||
|
||||
// 初始化 柱状图表
|
||||
function initBarChart() {
|
||||
set(barOption.value, 'series.data', [120, 200, 150, 80, 70, 110, 130])
|
||||
barDraw()
|
||||
}
|
||||
|
||||
// 切换折线图数据
|
||||
function changeLineChartData() {
|
||||
set(
|
||||
lineOption.value,
|
||||
'series.data',
|
||||
[324, 332, 301, 334, 390, 330, 320, 302, 301, 334, 390, 330],
|
||||
)
|
||||
lineDraw()
|
||||
}
|
||||
|
||||
// 改变柱状图样式
|
||||
function changeBarChartData() {
|
||||
set(barOption.value, 'series.color', '#5677fc')
|
||||
barDraw()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
initLineChart()
|
||||
initLineChart2()
|
||||
initBarChart()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* 暗黑模式 start */
|
||||
.wot-theme-dark {
|
||||
color: #f5f5f5;
|
||||
background: #222;
|
||||
--theme-bg-color: #222;
|
||||
}
|
||||
</style>
|
||||
706
src/pages-demo/ucharts/data.json
Normal file
706
src/pages-demo/ucharts/data.json
Normal file
@ -0,0 +1,706 @@
|
||||
{
|
||||
"localdata": [
|
||||
{ "value": 35, "text": "2016", "group": "目标值" },
|
||||
{ "value": 18, "text": "2016", "group": "完成量" },
|
||||
{ "value": 36, "text": "2017", "group": "目标值" },
|
||||
{ "value": 27, "text": "2017", "group": "完成量" },
|
||||
{ "value": 31, "text": "2018", "group": "目标值" },
|
||||
{ "value": 21, "text": "2018", "group": "完成量" },
|
||||
{ "value": 33, "text": "2019", "group": "目标值" },
|
||||
{ "value": 24, "text": "2019", "group": "完成量" },
|
||||
{ "value": 13, "text": "2020", "group": "目标值" },
|
||||
{ "value": 6, "text": "2020", "group": "完成量" },
|
||||
{ "value": 34, "text": "2021", "group": "目标值" },
|
||||
{ "value": 28, "text": "2021", "group": "完成量" }
|
||||
],
|
||||
"localdataB": [
|
||||
{ "value": 50, "text": "一班" },
|
||||
{ "value": 30, "text": "二班" },
|
||||
{ "value": 20, "text": "三班" },
|
||||
{ "value": 18, "text": "四班" },
|
||||
{ "value": 8, "text": "五班" }
|
||||
],
|
||||
"TLine": {
|
||||
"series": [
|
||||
{
|
||||
"name": "时间轴1",
|
||||
"data": [
|
||||
[10000, 55],
|
||||
[30000, 25],
|
||||
[50000, 55],
|
||||
[70000, 25],
|
||||
[90000, 55]
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "时间轴2",
|
||||
"data": [
|
||||
[0, 25],
|
||||
[20000, 55],
|
||||
[40000, 25],
|
||||
[60000, 55],
|
||||
[80000, 25]
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "时间轴3",
|
||||
"data": [
|
||||
[0, 55],
|
||||
[15000, 25],
|
||||
[30000, 55],
|
||||
[45000, 25],
|
||||
[60000, 55]
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
"Scatter": {
|
||||
"series": [
|
||||
{
|
||||
"name": "散点一",
|
||||
"data": [
|
||||
[10.0, 8.04],
|
||||
[8.07, 6.95],
|
||||
[13.0, 7.58],
|
||||
[9.05, 8.81],
|
||||
[11.0, 8.33],
|
||||
[14.0, 7.66],
|
||||
[13.4, 6.81],
|
||||
[10.0, 6.33],
|
||||
[14.0, 8.96],
|
||||
[12.5, 6.82]
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "散点二",
|
||||
"data": [
|
||||
[9.15, 7.2],
|
||||
[11.5, 7.2],
|
||||
[3.03, 4.23],
|
||||
[12.2, 7.83],
|
||||
[2.02, 4.47],
|
||||
[1.05, 3.33],
|
||||
[4.05, 4.96],
|
||||
[6.03, 7.24],
|
||||
[12.0, 6.26],
|
||||
[12.0, 8.84],
|
||||
[7.08, 5.82],
|
||||
[5.02, 5.68]
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
"Bubble": {
|
||||
"series": [
|
||||
{
|
||||
"name": "气泡一",
|
||||
"data": [
|
||||
[95, 95, 23, "标题1"],
|
||||
[30, 55, 33, "标题2"]
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "气泡二",
|
||||
"data": [
|
||||
[130, 30, 30, "标题3"],
|
||||
[200, 90, 40, "标题4"]
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
"Column": {
|
||||
"categories": ["2016", "2017", "2018", "2019", "2020", "2021"],
|
||||
"series": [
|
||||
{
|
||||
"name": "目标值",
|
||||
"data": [35, 36, 31, 33, 13, 34]
|
||||
},
|
||||
{
|
||||
"name": "完成量",
|
||||
"data": [18, 27, 21, 24, 6, 28]
|
||||
}
|
||||
]
|
||||
},
|
||||
"ColumnA": {
|
||||
"categories": ["2016", "2017", "2018", "2019", "2020", "2021"],
|
||||
"series": [
|
||||
{
|
||||
"name": "成交量1",
|
||||
"data": [15, { "value": 20, "color": "#f04864" }, 45, 37, 43, 34]
|
||||
},
|
||||
{
|
||||
"name": "成交量2",
|
||||
"data": [30, { "value": 40, "color": "#facc14" }, 25, 14, 34, 18]
|
||||
}
|
||||
]
|
||||
},
|
||||
"Mix": {
|
||||
"categories": ["2016", "2017", "2018", "2019", "2020", "2021"],
|
||||
"series": [
|
||||
{
|
||||
"name": "曲面",
|
||||
"data": [70, 50, 85, 130, 64, 88],
|
||||
"type": "area",
|
||||
"style": "curve"
|
||||
},
|
||||
{
|
||||
"name": "柱1",
|
||||
"index": 1,
|
||||
"data": [40, { "value": 30, "color": "#f04864" }, 55, 110, 24, 58],
|
||||
"type": "column"
|
||||
},
|
||||
{
|
||||
"name": "柱2",
|
||||
"index": 1,
|
||||
"data": [50, 20, 75, 60, 34, 38],
|
||||
"type": "column"
|
||||
},
|
||||
{
|
||||
"name": "曲线",
|
||||
"data": [70, 50, 85, 130, 64, 88],
|
||||
"type": "line",
|
||||
"style": "curve",
|
||||
"color": "#1890ff",
|
||||
"disableLegend": true
|
||||
},
|
||||
{
|
||||
"name": "折线",
|
||||
"data": [120, 140, 105, 170, 95, 160],
|
||||
"type": "line",
|
||||
"color": "#2fc25b"
|
||||
},
|
||||
{
|
||||
"name": "点",
|
||||
"index": 2,
|
||||
"data": [100, 80, 125, 150, 112, 132],
|
||||
"type": "point",
|
||||
"color": "#f04864"
|
||||
}
|
||||
]
|
||||
},
|
||||
"Line": {
|
||||
"categories": ["2016", "2017", "2018", "2019", "2020", "2021"],
|
||||
"series": [
|
||||
{
|
||||
"name": "成交量A",
|
||||
"data": [35, 8, 25, 37, 4, 20]
|
||||
},
|
||||
{
|
||||
"name": "成交量B",
|
||||
"data": [70, 40, 65, 100, 44, 68]
|
||||
},
|
||||
{
|
||||
"name": "成交量C",
|
||||
"data": [100, 80, 95, 150, 112, 132]
|
||||
}
|
||||
]
|
||||
},
|
||||
"Pie": {
|
||||
"series": [
|
||||
{
|
||||
"name": "一班",
|
||||
"data": 50
|
||||
},
|
||||
{
|
||||
"name": "二班",
|
||||
"data": 30
|
||||
},
|
||||
{
|
||||
"name": "三班",
|
||||
"data": 20
|
||||
},
|
||||
{
|
||||
"name": "四班",
|
||||
"data": 18
|
||||
},
|
||||
{
|
||||
"name": "五班",
|
||||
"data": 8
|
||||
}
|
||||
]
|
||||
},
|
||||
"PieA": {
|
||||
"series": [
|
||||
{
|
||||
"data": [
|
||||
{
|
||||
"name": "一班",
|
||||
"value": 50
|
||||
},
|
||||
{
|
||||
"name": "二班",
|
||||
"value": 30
|
||||
},
|
||||
{
|
||||
"name": "三班",
|
||||
"value": 20
|
||||
},
|
||||
{
|
||||
"name": "四班",
|
||||
"value": 18
|
||||
},
|
||||
{
|
||||
"name": "五班",
|
||||
"value": 8
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
"Mount": {
|
||||
"series": [
|
||||
{
|
||||
"data": [
|
||||
{
|
||||
"name": "一班",
|
||||
"value": 82
|
||||
},
|
||||
{
|
||||
"name": "二班",
|
||||
"value": 63
|
||||
},
|
||||
{
|
||||
"name": "三班",
|
||||
"value": 86
|
||||
},
|
||||
{
|
||||
"name": "四班",
|
||||
"value": 65
|
||||
},
|
||||
{
|
||||
"name": "五班",
|
||||
"value": 79
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
"Radar": {
|
||||
"categories": ["维度1", "维度2", "维度3", "维度4", "维度5", "维度6"],
|
||||
"series": [
|
||||
{
|
||||
"name": "成交量1",
|
||||
"data": [90, 110, 165, 195, 187, 172]
|
||||
},
|
||||
{
|
||||
"name": "成交量2",
|
||||
"data": [190, 210, 105, 35, 27, 102]
|
||||
}
|
||||
]
|
||||
},
|
||||
"Arcbar1": {
|
||||
"series": [
|
||||
{
|
||||
"name": "正确率",
|
||||
"data": 0.8,
|
||||
"color": "#2fc25b"
|
||||
}
|
||||
]
|
||||
},
|
||||
"Arcbar2": {
|
||||
"series": [
|
||||
{
|
||||
"name": "一班",
|
||||
"data": 0.8
|
||||
},
|
||||
{
|
||||
"name": "二班",
|
||||
"data": 0.6
|
||||
},
|
||||
{
|
||||
"name": "三班",
|
||||
"data": 0.45
|
||||
},
|
||||
{
|
||||
"name": "四班",
|
||||
"data": 0.3
|
||||
},
|
||||
{
|
||||
"name": "五班",
|
||||
"data": 0.15
|
||||
}
|
||||
]
|
||||
},
|
||||
"Gauge": {
|
||||
"categories": [
|
||||
{
|
||||
"value": 0.2,
|
||||
"color": "#1890ff"
|
||||
},
|
||||
{
|
||||
"value": 0.8,
|
||||
"color": "#2fc25b"
|
||||
},
|
||||
{
|
||||
"value": 1,
|
||||
"color": "#f04864"
|
||||
}
|
||||
],
|
||||
"series": [
|
||||
{
|
||||
"name": "完成率",
|
||||
"data": 0.66
|
||||
}
|
||||
]
|
||||
},
|
||||
"Candle": {
|
||||
"categories": [
|
||||
"2020/1/24",
|
||||
"2020/1/25",
|
||||
"2020/1/28",
|
||||
"2020/1/29",
|
||||
"2020/1/30",
|
||||
"2020/1/31",
|
||||
"2020/2/1",
|
||||
"2020/2/4",
|
||||
"2020/2/5",
|
||||
"2020/2/6",
|
||||
"2020/2/7",
|
||||
"2020/2/8",
|
||||
"2020/2/18",
|
||||
"2020/2/19",
|
||||
"2020/2/20",
|
||||
"2020/2/21",
|
||||
"2020/2/22",
|
||||
"2020/2/25",
|
||||
"2020/2/26",
|
||||
"2020/2/27",
|
||||
"2020/2/28",
|
||||
"2020/3/1",
|
||||
"2020/3/4",
|
||||
"2020/3/5",
|
||||
"2020/3/6",
|
||||
"2020/3/7",
|
||||
"2020/3/8",
|
||||
"2020/3/11",
|
||||
"2020/3/12",
|
||||
"2020/3/13",
|
||||
"2020/3/14",
|
||||
"2020/3/15",
|
||||
"2020/3/18",
|
||||
"2020/3/19",
|
||||
"2020/3/20",
|
||||
"2020/3/21",
|
||||
"2020/3/22",
|
||||
"2020/3/25",
|
||||
"2020/3/26",
|
||||
"2020/3/27",
|
||||
"2020/3/28",
|
||||
"2020/3/29",
|
||||
"2020/4/1",
|
||||
"2020/4/2",
|
||||
"2020/4/3",
|
||||
"2020/4/8",
|
||||
"2020/4/9",
|
||||
"2020/4/10",
|
||||
"2020/4/11",
|
||||
"2020/4/12",
|
||||
"2020/4/15",
|
||||
"2020/4/16",
|
||||
"2020/4/17",
|
||||
"2020/4/18",
|
||||
"2020/4/19",
|
||||
"2020/4/22",
|
||||
"2020/4/23",
|
||||
"2020/4/24",
|
||||
"2020/4/25",
|
||||
"2020/4/26",
|
||||
"2020/5/2",
|
||||
"2020/5/3",
|
||||
"2020/5/6",
|
||||
"2020/5/7",
|
||||
"2020/5/8",
|
||||
"2020/5/9",
|
||||
"2020/5/10",
|
||||
"2020/5/13",
|
||||
"2020/5/14",
|
||||
"2020/5/15",
|
||||
"2020/5/16",
|
||||
"2020/5/17",
|
||||
"2020/5/20",
|
||||
"2020/5/21",
|
||||
"2020/5/22",
|
||||
"2020/5/23",
|
||||
"2020/5/24",
|
||||
"2020/5/27",
|
||||
"2020/5/28",
|
||||
"2020/5/29",
|
||||
"2020/5/30",
|
||||
"2020/5/31",
|
||||
"2020/6/3",
|
||||
"2020/6/4",
|
||||
"2020/6/5",
|
||||
"2020/6/6",
|
||||
"2020/6/7",
|
||||
"2020/6/13"
|
||||
],
|
||||
"series": [
|
||||
{
|
||||
"name": "上证指数",
|
||||
"data": [
|
||||
[2320.26, 2302.6, 2287.3, 2362.94],
|
||||
[2300, 2291.3, 2288.26, 2308.38],
|
||||
[2295.35, 2346.5, 2295.35, 2346.92],
|
||||
[2347.22, 2358.98, 2337.35, 2363.8],
|
||||
[2360.75, 2382.48, 2347.89, 2383.76],
|
||||
[2383.43, 2385.42, 2371.23, 2391.82],
|
||||
[2377.41, 2419.02, 2369.57, 2421.15],
|
||||
[2425.92, 2428.15, 2417.58, 2440.38],
|
||||
[2411, 2433.13, 2403.3, 2437.42],
|
||||
[2432.68, 2434.48, 2427.7, 2441.73],
|
||||
[2430.69, 2418.53, 2394.22, 2433.89],
|
||||
[2416.62, 2432.4, 2414.4, 2443.03],
|
||||
[2441.91, 2421.56, 2415.43, 2444.8],
|
||||
[2420.26, 2382.91, 2373.53, 2427.07],
|
||||
[2383.49, 2397.18, 2370.61, 2397.94],
|
||||
[2378.82, 2325.95, 2309.17, 2378.82],
|
||||
[2322.94, 2314.16, 2308.76, 2330.88],
|
||||
[2320.62, 2325.82, 2315.01, 2338.78],
|
||||
[2313.74, 2293.34, 2289.89, 2340.71],
|
||||
[2297.77, 2313.22, 2292.03, 2324.63],
|
||||
[2322.32, 2365.59, 2308.92, 2366.16],
|
||||
[2364.54, 2359.51, 2330.86, 2369.65],
|
||||
[2332.08, 2273.4, 2259.25, 2333.54],
|
||||
[2274.81, 2326.31, 2270.1, 2328.14],
|
||||
[2333.61, 2347.18, 2321.6, 2351.44],
|
||||
[2340.44, 2324.29, 2304.27, 2352.02],
|
||||
[2326.42, 2318.61, 2314.59, 2333.67],
|
||||
[2314.68, 2310.59, 2296.58, 2320.96],
|
||||
[2309.16, 2286.6, 2264.83, 2333.29],
|
||||
[2282.17, 2263.97, 2253.25, 2286.33],
|
||||
[2255.77, 2270.28, 2253.31, 2276.22],
|
||||
[2269.31, 2278.4, 2250, 2312.08],
|
||||
[2267.29, 2240.02, 2239.21, 2276.05],
|
||||
[2244.26, 2257.43, 2232.02, 2261.31],
|
||||
[2257.74, 2317.37, 2257.42, 2317.86],
|
||||
[2318.21, 2324.24, 2311.6, 2330.81],
|
||||
[2321.4, 2328.28, 2314.97, 2332],
|
||||
[2334.74, 2326.72, 2319.91, 2344.89],
|
||||
[2318.58, 2297.67, 2281.12, 2319.99],
|
||||
[2299.38, 2301.26, 2289, 2323.48],
|
||||
[2273.55, 2236.3, 2232.91, 2273.55],
|
||||
[2238.49, 2236.62, 2228.81, 2246.87],
|
||||
[2229.46, 2234.4, 2227.31, 2243.95],
|
||||
[2234.9, 2227.74, 2220.44, 2253.42],
|
||||
[2232.69, 2225.29, 2217.25, 2241.34],
|
||||
[2196.24, 2211.59, 2180.67, 2212.59],
|
||||
[2215.47, 2225.77, 2215.47, 2234.73],
|
||||
[2224.93, 2226.13, 2212.56, 2233.04],
|
||||
[2236.98, 2219.55, 2217.26, 2242.48],
|
||||
[2218.09, 2206.78, 2204.44, 2226.26],
|
||||
[2199.91, 2181.94, 2177.39, 2204.99],
|
||||
[2169.63, 2194.85, 2165.78, 2196.43],
|
||||
[2195.03, 2193.8, 2178.47, 2197.51],
|
||||
[2181.82, 2197.6, 2175.44, 2206.03],
|
||||
[2201.12, 2244.64, 2200.58, 2250.11],
|
||||
[2236.4, 2242.17, 2232.26, 2245.12],
|
||||
[2242.62, 2184.54, 2182.81, 2242.62],
|
||||
[2187.35, 2218.32, 2184.11, 2226.12],
|
||||
[2213.19, 2199.31, 2191.85, 2224.63],
|
||||
[2203.89, 2177.91, 2173.86, 2210.58],
|
||||
[2170.78, 2174.12, 2161.14, 2179.65],
|
||||
[2179.05, 2205.5, 2179.05, 2222.81],
|
||||
[2212.5, 2231.17, 2212.5, 2236.07],
|
||||
[2227.86, 2235.57, 2219.44, 2240.26],
|
||||
[2242.39, 2246.3, 2235.42, 2255.21],
|
||||
[2246.96, 2232.97, 2221.38, 2247.86],
|
||||
[2228.82, 2246.83, 2225.81, 2247.67],
|
||||
[2247.68, 2241.92, 2231.36, 2250.85],
|
||||
[2238.9, 2217.01, 2205.87, 2239.93],
|
||||
[2217.09, 2224.8, 2213.58, 2225.19],
|
||||
[2221.34, 2251.81, 2210.77, 2252.87],
|
||||
[2249.81, 2282.87, 2248.41, 2288.09],
|
||||
[2286.33, 2299.99, 2281.9, 2309.39],
|
||||
[2297.11, 2305.11, 2290.12, 2305.3],
|
||||
[2303.75, 2302.4, 2292.43, 2314.18],
|
||||
[2293.81, 2275.67, 2274.1, 2304.95],
|
||||
[2281.45, 2288.53, 2270.25, 2292.59],
|
||||
[2286.66, 2293.08, 2283.94, 2301.7],
|
||||
[2293.4, 2321.32, 2281.47, 2322.1],
|
||||
[2323.54, 2324.02, 2321.17, 2334.33],
|
||||
[2316.25, 2317.75, 2310.49, 2325.72],
|
||||
[2320.74, 2300.59, 2299.37, 2325.53],
|
||||
[2300.21, 2299.25, 2294.11, 2313.43],
|
||||
[2297.1, 2272.42, 2264.76, 2297.1],
|
||||
[2270.71, 2270.93, 2260.87, 2276.86],
|
||||
[2264.43, 2242.11, 2240.07, 2266.69],
|
||||
[2242.26, 2210.9, 2205.07, 2250.63],
|
||||
[2190.1, 2148.35, 2126.22, 2190.1]
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
"CandleColumn": {
|
||||
"categories": [
|
||||
"2020/1/24",
|
||||
"2020/1/25",
|
||||
"2020/1/28",
|
||||
"2020/1/29",
|
||||
"2020/1/30",
|
||||
"2020/1/31",
|
||||
"2020/2/1",
|
||||
"2020/2/4",
|
||||
"2020/2/5",
|
||||
"2020/2/6",
|
||||
"2020/2/7",
|
||||
"2020/2/8",
|
||||
"2020/2/18",
|
||||
"2020/2/19",
|
||||
"2020/2/20",
|
||||
"2020/2/21",
|
||||
"2020/2/22",
|
||||
"2020/2/25",
|
||||
"2020/2/26",
|
||||
"2020/2/27",
|
||||
"2020/2/28",
|
||||
"2020/3/1",
|
||||
"2020/3/4",
|
||||
"2020/3/5",
|
||||
"2020/3/6",
|
||||
"2020/3/7",
|
||||
"2020/3/8",
|
||||
"2020/3/11",
|
||||
"2020/3/12",
|
||||
"2020/3/13",
|
||||
"2020/3/14",
|
||||
"2020/3/15",
|
||||
"2020/3/18",
|
||||
"2020/3/19",
|
||||
"2020/3/20",
|
||||
"2020/3/21",
|
||||
"2020/3/22",
|
||||
"2020/3/25",
|
||||
"2020/3/26",
|
||||
"2020/3/27",
|
||||
"2020/3/28",
|
||||
"2020/3/29",
|
||||
"2020/4/1",
|
||||
"2020/4/2",
|
||||
"2020/4/3",
|
||||
"2020/4/8",
|
||||
"2020/4/9",
|
||||
"2020/4/10",
|
||||
"2020/4/11",
|
||||
"2020/4/12",
|
||||
"2020/4/15",
|
||||
"2020/4/16",
|
||||
"2020/4/17",
|
||||
"2020/4/18",
|
||||
"2020/4/19",
|
||||
"2020/4/22",
|
||||
"2020/4/23",
|
||||
"2020/4/24",
|
||||
"2020/4/25",
|
||||
"2020/4/26",
|
||||
"2020/5/2",
|
||||
"2020/5/3",
|
||||
"2020/5/6",
|
||||
"2020/5/7",
|
||||
"2020/5/8",
|
||||
"2020/5/9",
|
||||
"2020/5/10",
|
||||
"2020/5/13",
|
||||
"2020/5/14",
|
||||
"2020/5/15",
|
||||
"2020/5/16",
|
||||
"2020/5/17",
|
||||
"2020/5/20",
|
||||
"2020/5/21",
|
||||
"2020/5/22",
|
||||
"2020/5/23",
|
||||
"2020/5/24",
|
||||
"2020/5/27",
|
||||
"2020/5/28",
|
||||
"2020/5/29",
|
||||
"2020/5/30",
|
||||
"2020/5/31",
|
||||
"2020/6/3",
|
||||
"2020/6/4",
|
||||
"2020/6/5",
|
||||
"2020/6/6",
|
||||
"2020/6/7",
|
||||
"2020/6/13"
|
||||
],
|
||||
"series": [
|
||||
{
|
||||
"name": "成交量1",
|
||||
"data": [
|
||||
15, 20, 45, 37, 43, 15, 20, 45, 37, 43, 15, 20, 45, 37, 43, 15, 20,
|
||||
45, 37, 43, 15, 20, 45, 37, 43, 15, 20, 45, 37, 43, 15, 20, 45, 37,
|
||||
43, 15, 20, 45, 37, 43, 15, 20, 45, 37, 43, 15, 20, 45, 37, 43, 15,
|
||||
20, 45, 37, 43, 15, 20, 45, 37, 43, 15, 20, 45, 37, 43, 15, 20, 45,
|
||||
37, 43, 15, 20, 45, 37, 43, 15, 20, 45, 37, 43, 15, 20, 45, 37, 43,
|
||||
15, 20, 45
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
"Word": {
|
||||
"series": [
|
||||
{
|
||||
"name": "跨全端图表",
|
||||
"textSize": 25
|
||||
},
|
||||
{
|
||||
"name": "微信小程序",
|
||||
"textSize": 20
|
||||
},
|
||||
{
|
||||
"name": "支付宝小程序",
|
||||
"textSize": 20
|
||||
},
|
||||
{
|
||||
"name": "百度小程序",
|
||||
"textSize": 20
|
||||
},
|
||||
{
|
||||
"name": "QQ小程序",
|
||||
"textSize": 20
|
||||
},
|
||||
{
|
||||
"name": "头条小程序",
|
||||
"textSize": 20
|
||||
},
|
||||
{
|
||||
"name": "抖音小程序",
|
||||
"textSize": 20
|
||||
},
|
||||
{
|
||||
"name": "360小程序",
|
||||
"textSize": 20
|
||||
},
|
||||
{
|
||||
"name": "跨全端",
|
||||
"textSize": 10
|
||||
},
|
||||
{
|
||||
"name": "跨全端",
|
||||
"textSize": 12
|
||||
},
|
||||
{
|
||||
"name": "跨全端",
|
||||
"textSize": 10
|
||||
},
|
||||
{
|
||||
"name": "跨全端",
|
||||
"textSize": 12
|
||||
},
|
||||
{
|
||||
"name": "跨全端",
|
||||
"textSize": 10
|
||||
},
|
||||
{
|
||||
"name": "跨全端",
|
||||
"textSize": 12
|
||||
},
|
||||
{
|
||||
"name": "跨全端",
|
||||
"textSize": 10
|
||||
},
|
||||
{
|
||||
"name": "跨全端",
|
||||
"textSize": 12
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
100
src/pages-demo/ucharts/index.vue
Normal file
100
src/pages-demo/ucharts/index.vue
Normal file
@ -0,0 +1,100 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<qiun-title-bar title="tooltip提示窗format" />
|
||||
<view class="charts-box">
|
||||
<qiun-data-charts
|
||||
type="column"
|
||||
:echarts-h5="true"
|
||||
:echarts-app="true"
|
||||
:chart-data="chartsDataLine1"
|
||||
tooltip-format="tooltipDemo1"
|
||||
/>
|
||||
</view>
|
||||
<qiun-title-bar title="图例的format" />
|
||||
<view class="charts-box">
|
||||
<qiun-data-charts
|
||||
type="line"
|
||||
:echarts-h5="true"
|
||||
:echarts-app="true"
|
||||
:eopts="{ legend: { format: 'legendFormat' } }"
|
||||
:chart-data="chartsDataColumn2"
|
||||
/>
|
||||
</view>
|
||||
<qiun-title-bar title="Y轴format方式1" />
|
||||
<view class="charts-box">
|
||||
<qiun-data-charts
|
||||
type="line"
|
||||
:echarts-h5="true"
|
||||
:echarts-app="true"
|
||||
:eopts="{ yAxis: { axisLabel: { format: 'yAxisFormatDemo' } } }"
|
||||
:chart-data="chartsDataLine1"
|
||||
/>
|
||||
</view>
|
||||
<qiun-title-bar title="Y轴format方式2" />
|
||||
<view class="charts-box">
|
||||
<qiun-data-charts
|
||||
type="line"
|
||||
:echarts-h5="true"
|
||||
:echarts-app="true"
|
||||
:eopts="{ yAxis: { axisLabel: { formatter: '{value} 元' } } }"
|
||||
:chart-data="chartsDataLine1"
|
||||
/>
|
||||
</view>
|
||||
<qiun-title-bar title="series数据点format方法1" />
|
||||
<view class="charts-box">
|
||||
<qiun-data-charts
|
||||
type="line"
|
||||
:echarts-h5="true"
|
||||
:echarts-app="true"
|
||||
:eopts="{ seriesTemplate: { label: { format: 'seriesFormatDemo' } } }"
|
||||
:chart-data="chartsDataLine1"
|
||||
/>
|
||||
</view>
|
||||
<qiun-title-bar title="series数据点format方法2" />
|
||||
<view class="charts-box">
|
||||
<qiun-data-charts
|
||||
type="line"
|
||||
:echarts-h5="true"
|
||||
:echarts-app="true"
|
||||
:eopts="{ seriesTemplate: { label: { formatter: '{b}年{c}元' } } }"
|
||||
:chart-data="chartsDataLine1"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue'
|
||||
import demodata from './data.json'
|
||||
|
||||
definePage({
|
||||
style: { navigationBarTitleText: 'ucharts 图表' },
|
||||
})
|
||||
|
||||
const chartsDataLine1 = ref({})
|
||||
const chartsDataColumn2 = ref({})
|
||||
|
||||
function getServerData() {
|
||||
setTimeout(() => {
|
||||
chartsDataLine1.value = JSON.parse(JSON.stringify(demodata.Line))
|
||||
chartsDataColumn2.value = JSON.parse(JSON.stringify(demodata.Column))
|
||||
}, 1500)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getServerData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.content {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.charts-box {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
</style>
|
||||
13
src/pages/about/about.vue
Normal file
13
src/pages/about/about.vue
Normal file
@ -0,0 +1,13 @@
|
||||
<script lang="ts" setup>
|
||||
definePage({
|
||||
style: {
|
||||
navigationBarTitleText: '关于',
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="mt-10 text-center text-green-500">
|
||||
关于页面
|
||||
</view>
|
||||
</template>
|
||||
20
src/pages/auth/README.md
Normal file
20
src/pages/auth/README.md
Normal file
@ -0,0 +1,20 @@
|
||||
# 登录页
|
||||
需要输入账号、密码/验证码的登录页。
|
||||
|
||||
## 适用性
|
||||
|
||||
本页面主要用于 `h5` 和 `APP`。
|
||||
|
||||
小程序通常有平台的登录方式 `uni.login` 通常用不到登录页，所以不适用于 `小程序`。（即默认情况下，小程序环境是不会走登录拦截逻辑的。）
|
||||
|
||||
但是如果您的小程序也需要现实的 `登录页` 那也是可以使用的。
|
||||
|
||||
在 `src/router/config.ts` 中有一个变量 `LOGIN_PAGE_ENABLE_IN_MP` 来控制是否在小程序中使用 `H5的登录页`。
|
||||
|
||||
更多信息请看 `src/router` 文件夹的内容。
|
||||
|
||||
## 登录跳转
|
||||
|
||||
目前登录的跳转逻辑主要在 `src/router/interceptor.ts` 和 `src/pages/login/login.vue` 里面，默认会在登录后自动重定向到来源/配置的页面。
|
||||
|
||||
如果与您的业务不符，您可以自行修改。
|
||||
44
src/pages/auth/login.vue
Normal file
44
src/pages/auth/login.vue
Normal file
@ -0,0 +1,44 @@
|
||||
<script lang="ts" setup>
|
||||
import { useTokenStore } from '@/store/token'
|
||||
|
||||
definePage({
|
||||
style: {
|
||||
navigationBarTitleText: '登录',
|
||||
},
|
||||
})
|
||||
|
||||
const tokenStore = useTokenStore()
|
||||
async function doLogin() {
|
||||
if (tokenStore.hasLogin) {
|
||||
uni.navigateBack()
|
||||
return
|
||||
}
|
||||
try {
|
||||
// 调用登录接口
|
||||
await tokenStore.login({
|
||||
username: '菲鸽',
|
||||
password: '123456',
|
||||
})
|
||||
uni.navigateBack()
|
||||
}
|
||||
catch (error) {
|
||||
console.log('登录失败', error)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="login">
|
||||
<!-- 本页面是非MP的登录页，主要用于 h5 和 APP -->
|
||||
<view class="text-center">
|
||||
登录页
|
||||
</view>
|
||||
<button class="mt-4 w-40 text-center" @click="doLogin">
|
||||
点击模拟登录
|
||||
</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
//
|
||||
</style>
|
||||
34
src/pages/auth/register.vue
Normal file
34
src/pages/auth/register.vue
Normal file
@ -0,0 +1,34 @@
|
||||
<script lang="ts" setup>
|
||||
import { LOGIN_PAGE } from '@/router/config'
|
||||
|
||||
definePage({
|
||||
style: {
|
||||
navigationBarTitleText: '注册',
|
||||
},
|
||||
})
|
||||
|
||||
function doRegister() {
|
||||
uni.showToast({
|
||||
title: '注册成功',
|
||||
})
|
||||
// 注册成功后跳转到登录页
|
||||
uni.navigateTo({
|
||||
url: LOGIN_PAGE,
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="login">
|
||||
<view class="text-center">
|
||||
注册页
|
||||
</view>
|
||||
<button class="mt-4 w-40 text-center" @click="doRegister">
|
||||
点击模拟注册
|
||||
</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
//
|
||||
</style>
|
||||
53
src/pages/index/index.vue
Normal file
53
src/pages/index/index.vue
Normal file
@ -0,0 +1,53 @@
|
||||
<script lang="ts" setup>
|
||||
defineOptions({
|
||||
name: 'Home',
|
||||
})
|
||||
definePage({
|
||||
// 使用 type: "home" 属性设置首页，其他页面不需要设置，默认为page
|
||||
type: 'home',
|
||||
style: {
|
||||
// 'custom' 表示开启自定义导航栏，默认 'default'
|
||||
navigationStyle: 'custom',
|
||||
navigationBarTitleText: '首页',
|
||||
},
|
||||
})
|
||||
|
||||
const description = ref(
|
||||
'unibest 是一个集成了多种工具和技术的 uniapp 开发模板，由 uniapp + Vue3 + Ts + Vite5 + UnoCss + VSCode 构建，模板具有代码提示、自动格式化、统一配置、代码片段等功能，并内置了许多常用的基本组件和基本功能，让你编写 uniapp 拥有 best 体验。',
|
||||
)
|
||||
console.log('index/index 首页打印了')
|
||||
|
||||
onLoad(() => {
|
||||
console.log('测试 uni API 自动引入: onLoad')
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="bg-white px-4 pt-safe">
|
||||
<view class="mt-10">
|
||||
<image src="/static/logo.svg" alt="" class="mx-auto block h-28 w-28" />
|
||||
</view>
|
||||
<view class="mt-4 text-center text-4xl text-[#d14328]">
|
||||
unibest
|
||||
</view>
|
||||
<view class="mb-8 mt-2 text-center text-2xl">
|
||||
最好用的 uniapp 开发模板
|
||||
</view>
|
||||
|
||||
<view class="m-auto mb-2 max-w-100 text-justify indent text-4">
|
||||
{{ description }}
|
||||
</view>
|
||||
<view class="mt-4 text-center">
|
||||
作者：
|
||||
<text class="text-green-500">
|
||||
菲鸽
|
||||
</text>
|
||||
</view>
|
||||
<view class="mt-4 text-center">
|
||||
官网地址：
|
||||
<text class="text-green-500">
|
||||
https://unibest.tech
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
79
src/pages/me/me.vue
Normal file
79
src/pages/me/me.vue
Normal file
@ -0,0 +1,79 @@
|
||||
<script lang="ts" setup>
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { LOGIN_PAGE } from '@/router/config'
|
||||
import { useUserStore } from '@/store'
|
||||
import { useTokenStore } from '@/store/token'
|
||||
|
||||
definePage({
|
||||
style: {
|
||||
navigationBarTitleText: '我的',
|
||||
},
|
||||
})
|
||||
|
||||
const userStore = useUserStore()
|
||||
const tokenStore = useTokenStore()
|
||||
// 使用storeToRefs解构userInfo
|
||||
const { userInfo } = storeToRefs(userStore)
|
||||
|
||||
// 微信小程序下登录
|
||||
async function handleLogin() {
|
||||
// #ifdef MP-WEIXIN
|
||||
// 微信登录
|
||||
await tokenStore.wxLogin()
|
||||
|
||||
// #endif
|
||||
// #ifndef MP-WEIXIN
|
||||
uni.navigateTo({
|
||||
url: `${LOGIN_PAGE}`,
|
||||
})
|
||||
// #endif
|
||||
}
|
||||
|
||||
function handleLogout() {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定要退出登录吗？',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
// 清空用户信息
|
||||
useTokenStore().logout()
|
||||
// 执行退出登录逻辑
|
||||
uni.showToast({
|
||||
title: '退出登录成功',
|
||||
icon: 'success',
|
||||
})
|
||||
// #ifdef MP-WEIXIN
|
||||
// 微信小程序，去首页
|
||||
// uni.reLaunch({ url: '/pages/index/index' })
|
||||
// #endif
|
||||
// #ifndef MP-WEIXIN
|
||||
// 非微信小程序，去登录页
|
||||
// uni.navigateTo({ url: LOGIN_PAGE })
|
||||
// #endif
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="profile-container">
|
||||
<view class="mt-3 break-all px-3 text-center text-green-500">
|
||||
{{ userInfo.username ? '已登录' : '未登录' }}
|
||||
</view>
|
||||
<view class="mt-3 break-all px-3">
|
||||
{{ JSON.stringify(userInfo, null, 2) }}
|
||||
</view>
|
||||
|
||||
<view class="mt-[60vh] px-3">
|
||||
<view class="m-auto w-160px text-center">
|
||||
<button v-if="tokenStore.hasLogin" type="warn" class="w-full" @click="handleLogout">
|
||||
退出登录
|
||||
</button>
|
||||
<button v-else type="primary" class="w-full" @click="handleLogin">
|
||||
登录
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
55
src/router/README.md
Normal file
55
src/router/README.md
Normal file
@ -0,0 +1,55 @@
|
||||
# 登录 说明
|
||||
|
||||
## 登录 2种策略
|
||||
- 默认无需登录策略： DEFAULT_NO_NEED_LOGIN
|
||||
- 默认需要登录策略： DEFAULT_NEED_LOGIN
|
||||
|
||||
### 默认无需登录策略： DEFAULT_NO_NEED_LOGIN
|
||||
进入任何页面都不需要登录，只有进入到黑名单中的页面/或者页面中某些动作需要登录，才需要登录。
|
||||
|
||||
比如大部分2C的应用，美团、今日头条、抖音等，都可以直接浏览，只有点赞、评论、分享等操作或者去特殊页面（比如个人中心），才需要登录。
|
||||
|
||||
### 默认需要登录策略： DEFAULT_NEED_LOGIN
|
||||
|
||||
进入任何页面都需要登录，只有进入到白名单中的页面，才不需要登录。默认进入应用需要先去登录页。
|
||||
|
||||
比如大部分2B和后台管理类的应用，比如企业微信、钉钉、飞书、内部报表系统、CMS系统等，都需要登录，只有登录后，才能使用。
|
||||
|
||||
### EXCLUDE_LOGIN_PATH_LIST
|
||||
`EXCLUDE_LOGIN_PATH_LIST` 表示排除的路由列表。
|
||||
|
||||
在 `默认无需登录策略： DEFAULT_NO_NEED_LOGIN` 中，只有路由在 `EXCLUDE_LOGIN_PATH_LIST` 中，才需要登录，相当于黑名单。
|
||||
|
||||
在 `默认需要登录策略： DEFAULT_NEED_LOGIN` 中，只有路由在 `EXCLUDE_LOGIN_PATH_LIST` 中，才不需要登录，相当于白名单。
|
||||
|
||||
### excludeLoginPath
|
||||
definePage 中可以通过 `excludeLoginPath` 来配置路由是否需要登录。(类似过去的 needLogin 的功能)
|
||||
|
||||
```ts
|
||||
definePage({
|
||||
style: {
|
||||
navigationBarTitleText: '关于',
|
||||
},
|
||||
// 登录授权(可选)：跟以前的 needLogin 类似功能，但是同时支持黑白名单，详情请见 src/router 文件夹
|
||||
excludeLoginPath: true,
|
||||
// 角色授权(可选)：如果需要根据角色授权，就配置这个
|
||||
roleAuth: {
|
||||
field: 'role',
|
||||
value: 'admin',
|
||||
redirect: '/pages/auth/403',
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
## 登录注册页路由
|
||||
|
||||
登录页 `login.vue` 对应路由是 `/pages/login/login`.
|
||||
注册页 `register.vue` 对应路由是 `/pages/login/register`.
|
||||
|
||||
## 登录注册页适用性
|
||||
|
||||
登录注册页主要适用于 `h5` 和 `App`，默认不适用于 `小程序`，因为 `小程序` 通常会使用平台提供的快捷登录。
|
||||
|
||||
特殊情况例外，如业务需要跨平台复用登录注册页时，也可以用在 `小程序` 上，所以主要还是看业务需求。
|
||||
|
||||
通过一个参数 `LOGIN_PAGE_ENABLE_IN_MP` 来控制是否在 `小程序` 中使用 `H5登录页` 的登录逻辑。
|
||||
30
src/router/config.ts
Normal file
30
src/router/config.ts
Normal file
@ -0,0 +1,30 @@
|
||||
import { getAllPages } from '@/utils'
|
||||
|
||||
export const LOGIN_STRATEGY_MAP = {
|
||||
DEFAULT_NO_NEED_LOGIN: 0, // 黑名单策略，默认可以进入APP
|
||||
DEFAULT_NEED_LOGIN: 1, // 白名单策略，默认不可以进入APP，需要强制登录
|
||||
}
|
||||
// TODO: 1/3 登录策略，默认使用`无需登录策略`，即默认不需要登录就可以访问
|
||||
export const LOGIN_STRATEGY = LOGIN_STRATEGY_MAP.DEFAULT_NO_NEED_LOGIN
|
||||
export const isNeedLoginMode = LOGIN_STRATEGY === LOGIN_STRATEGY_MAP.DEFAULT_NEED_LOGIN
|
||||
|
||||
export const LOGIN_PAGE = '/pages/auth/login'
|
||||
export const REGISTER_PAGE = '/pages/auth/register'
|
||||
|
||||
export const LOGIN_PAGE_LIST = [LOGIN_PAGE, REGISTER_PAGE]
|
||||
|
||||
// 在 definePage 里面配置了 excludeLoginPath 的页面，功能与 EXCLUDE_LOGIN_PATH_LIST 相同
|
||||
export const excludeLoginPathList = getAllPages('excludeLoginPath').map(page => page.path)
|
||||
|
||||
// 排除在外的列表，白名单策略指白名单列表，黑名单策略指黑名单列表
|
||||
// TODO: 2/3 在 definePage 配置 excludeLoginPath，或者在下面配置 EXCLUDE_LOGIN_PATH_LIST
|
||||
export const EXCLUDE_LOGIN_PATH_LIST = [
|
||||
'/pages/xxx/index', // 示例值
|
||||
'/pages-sub/xxx/index', // 示例值
|
||||
...excludeLoginPathList, // 都是以 / 开头的 path
|
||||
]
|
||||
|
||||
// 在小程序里面是否使用H5的登录页，默认为 false
|
||||
// 如果为 true 则复用 h5 的登录逻辑
|
||||
// TODO: 3/3 确定自己的登录页是否需要在小程序里面使用
|
||||
export const LOGIN_PAGE_ENABLE_IN_MP = false
|
||||
145
src/router/interceptor.ts
Normal file
145
src/router/interceptor.ts
Normal file
@ -0,0 +1,145 @@
|
||||
import { isMp } from '@uni-helper/uni-env'
|
||||
/**
|
||||
* by 菲鸽 on 2025-08-19
|
||||
* 路由拦截，通常也是登录拦截
|
||||
* 黑、白名单的配置，请看 config.ts 文件， EXCLUDE_LOGIN_PATH_LIST
|
||||
*/
|
||||
import { useTokenStore } from '@/store/token'
|
||||
import { isPageTabbar, tabbarStore } from '@/tabbar/store'
|
||||
import { getAllPages, getLastPage, HOME_PAGE, parseUrlToObj } from '@/utils/index'
|
||||
import { EXCLUDE_LOGIN_PATH_LIST, isNeedLoginMode, LOGIN_PAGE, LOGIN_PAGE_ENABLE_IN_MP } from './config'
|
||||
|
||||
export const FG_LOG_ENABLE = false
|
||||
|
||||
export function judgeIsExcludePath(path: string) {
|
||||
const isDev = import.meta.env.DEV
|
||||
if (!isDev) {
|
||||
return EXCLUDE_LOGIN_PATH_LIST.includes(path)
|
||||
}
|
||||
const allExcludeLoginPages = getAllPages('excludeLoginPath') // dev 环境下，需要每次都重新获取，否则新配置就不会生效
|
||||
return EXCLUDE_LOGIN_PATH_LIST.includes(path) || (isDev && allExcludeLoginPages.some(page => page.path === path))
|
||||
}
|
||||
|
||||
export const navigateToInterceptor = {
|
||||
// 注意，这里的url是 '/' 开头的，如 '/pages/index/index'，跟 'pages.json' 里面的 path 不同
|
||||
// 增加对相对路径的处理，BY 网友 @ideal
|
||||
invoke({ url, query }: { url: string, query?: Record<string, string> }) {
|
||||
if (url === undefined) {
|
||||
return
|
||||
}
|
||||
let { path, query: _query } = parseUrlToObj(url)
|
||||
|
||||
FG_LOG_ENABLE && console.log('\n\n路由拦截器:-------------------------------------')
|
||||
FG_LOG_ENABLE && console.log('路由拦截器 1: url->', url, ', query ->', query)
|
||||
const myQuery = { ..._query, ...query }
|
||||
// /pages/route-interceptor/index?name=feige&age=30
|
||||
FG_LOG_ENABLE && console.log('路由拦截器 2: path->', path, ', _query ->', _query)
|
||||
FG_LOG_ENABLE && console.log('路由拦截器 3: myQuery ->', myQuery)
|
||||
|
||||
// 处理相对路径
|
||||
if (!path.startsWith('/')) {
|
||||
const currentPath = getLastPage()?.route || ''
|
||||
const normalizedCurrentPath = currentPath.startsWith('/') ? currentPath : `/${currentPath}`
|
||||
const baseDir = normalizedCurrentPath.substring(0, normalizedCurrentPath.lastIndexOf('/'))
|
||||
path = `${baseDir}/${path}`
|
||||
}
|
||||
|
||||
// // 处理路由不存在的情况
|
||||
// if (path !== '/' && !getAllPages().some(page => page.path === path)) {
|
||||
// console.warn('路由不存在:', path)
|
||||
// return false // 明确表示阻止原路由继续执行
|
||||
// }
|
||||
|
||||
// // 插件页面
|
||||
// if (url.startsWith('plugin://')) {
|
||||
// FG_LOG_ENABLE && console.log('路由拦截器 4: plugin:// 路径 ==>', url)
|
||||
// path = url
|
||||
// }
|
||||
|
||||
// 处理直接进入路由非首页时，tabbarIndex 不正确的问题
|
||||
tabbarStore.setAutoCurIdx(path)
|
||||
|
||||
// 小程序里面使用平台自带的登录，则不走下面的逻辑
|
||||
if (isMp && !LOGIN_PAGE_ENABLE_IN_MP) {
|
||||
return true // 明确表示允许路由继续执行
|
||||
}
|
||||
|
||||
const tokenStore = useTokenStore()
|
||||
FG_LOG_ENABLE && console.log('tokenStore.hasLogin:', tokenStore.hasLogin)
|
||||
|
||||
// 不管黑白名单，登录了就直接去吧（但是当前不能是登录页）
|
||||
if (tokenStore.hasLogin) {
|
||||
if (path !== LOGIN_PAGE) {
|
||||
return true // 明确表示允许路由继续执行
|
||||
}
|
||||
else {
|
||||
console.log('已经登录，但是还在登录页', myQuery.redirect)
|
||||
const url = myQuery.redirect || HOME_PAGE
|
||||
if (isPageTabbar(url)) {
|
||||
uni.switchTab({ url })
|
||||
}
|
||||
else {
|
||||
uni.navigateTo({ url })
|
||||
}
|
||||
return false // 明确表示阻止原路由继续执行
|
||||
}
|
||||
}
|
||||
let fullPath = path
|
||||
|
||||
if (Object.keys(myQuery).length) {
|
||||
fullPath += `?${Object.keys(myQuery).map(key => `${key}=${myQuery[key]}`).join('&')}`
|
||||
}
|
||||
const redirectUrl = `${LOGIN_PAGE}?redirect=${encodeURIComponent(fullPath)}`
|
||||
|
||||
// #region 1/2 默认需要登录的情况(白名单策略) ---------------------------
|
||||
if (isNeedLoginMode) {
|
||||
// 需要登录里面的 EXCLUDE_LOGIN_PATH_LIST 表示白名单，可以直接通过
|
||||
if (judgeIsExcludePath(path)) {
|
||||
return true // 明确表示允许路由继续执行
|
||||
}
|
||||
// 否则需要重定向到登录页
|
||||
else {
|
||||
if (path === LOGIN_PAGE) {
|
||||
return true // 明确表示允许路由继续执行
|
||||
}
|
||||
FG_LOG_ENABLE && console.log('1 isNeedLogin(白名单策略) redirectUrl:', redirectUrl)
|
||||
uni.navigateTo({ url: redirectUrl })
|
||||
return false // 明确表示阻止原路由继续执行
|
||||
}
|
||||
}
|
||||
// #endregion 1/2 默认需要登录的情况(白名单策略) ---------------------------
|
||||
|
||||
// #region 2/2 默认不需要登录的情况(黑名单策略) ---------------------------
|
||||
else {
|
||||
// 不需要登录里面的 EXCLUDE_LOGIN_PATH_LIST 表示黑名单，需要重定向到登录页
|
||||
if (judgeIsExcludePath(path)) {
|
||||
FG_LOG_ENABLE && console.log('2 isNeedLogin(黑名单策略) redirectUrl:', redirectUrl)
|
||||
uni.navigateTo({ url: redirectUrl })
|
||||
return false // 修改为false，阻止原路由继续执行
|
||||
}
|
||||
return true // 明确表示允许路由继续执行
|
||||
}
|
||||
// #endregion 2/2 默认不需要登录的情况(黑名单策略) ---------------------------
|
||||
},
|
||||
}
|
||||
|
||||
// 针对 chooseLocation 的特殊处理
|
||||
export const chooseLocationInterceptor = {
|
||||
invoke(options: any) {
|
||||
// 直接放行 chooseLocation 调用
|
||||
FG_LOG_ENABLE && console.log('chooseLocation 调用，直接放行:', options)
|
||||
return true
|
||||
},
|
||||
}
|
||||
|
||||
export const routeInterceptor = {
|
||||
install() {
|
||||
uni.addInterceptor('navigateTo', navigateToInterceptor)
|
||||
uni.addInterceptor('reLaunch', navigateToInterceptor)
|
||||
uni.addInterceptor('redirectTo', navigateToInterceptor)
|
||||
uni.addInterceptor('switchTab', navigateToInterceptor)
|
||||
|
||||
// 添加 chooseLocation 的拦截器，确保直接放行
|
||||
uni.addInterceptor('chooseLocation', chooseLocationInterceptor)
|
||||
},
|
||||
}
|
||||
11
src/router/permission.ts
Normal file
11
src/router/permission.ts
Normal file
@ -0,0 +1,11 @@
|
||||
import { tabbarStore } from '@/tabbar/store'
|
||||
|
||||
export const permission = {
|
||||
install(router) {
|
||||
router.beforeEach((to, from, next) => {
|
||||
const path = to.path
|
||||
tabbarStore.setAutoCurIdx(path)
|
||||
next()
|
||||
})
|
||||
},
|
||||
}
|
||||
6
src/service/index.ts
Normal file
6
src/service/index.ts
Normal file
@ -0,0 +1,6 @@
|
||||
/* eslint-disable */
|
||||
// @ts-ignore
|
||||
export * from './types';
|
||||
|
||||
export * from './listAll';
|
||||
export * from './info';
|
||||
14
src/service/info.ts
Normal file
14
src/service/info.ts
Normal file
@ -0,0 +1,14 @@
|
||||
/* eslint-disable */
|
||||
// @ts-ignore
|
||||
import request from '@/http/vue-query';
|
||||
import { CustomRequestOptions_ } from '@/http/types';
|
||||
|
||||
import * as API from './types';
|
||||
|
||||
/** 用户信息 GET /user/info */
|
||||
export function infoUsingGet({ options }: { options?: CustomRequestOptions_ }) {
|
||||
return request<API.InfoUsingGetResponse>('/user/info', {
|
||||
method: 'GET',
|
||||
...(options || {}),
|
||||
});
|
||||
}
|
||||
18
src/service/listAll.ts
Normal file
18
src/service/listAll.ts
Normal file
@ -0,0 +1,18 @@
|
||||
/* eslint-disable */
|
||||
// @ts-ignore
|
||||
import request from '@/http/vue-query';
|
||||
import { CustomRequestOptions_ } from '@/http/types';
|
||||
|
||||
import * as API from './types';
|
||||
|
||||
/** 用户列表 GET /user/listAll */
|
||||
export function listAllUsingGet({
|
||||
options,
|
||||
}: {
|
||||
options?: CustomRequestOptions_;
|
||||
}) {
|
||||
return request<API.ListAllUsingGetResponse>('/user/listAll', {
|
||||
method: 'GET',
|
||||
...(options || {}),
|
||||
});
|
||||
}
|
||||
29
src/service/types.ts
Normal file
29
src/service/types.ts
Normal file
@ -0,0 +1,29 @@
|
||||
/* eslint-disable */
|
||||
// @ts-ignore
|
||||
|
||||
export type InfoUsingGetResponse = {
|
||||
code: number;
|
||||
msg: string;
|
||||
data: UserItem;
|
||||
};
|
||||
|
||||
export type InfoUsingGetResponses = {
|
||||
200: InfoUsingGetResponse;
|
||||
};
|
||||
|
||||
export type ListAllUsingGetResponse = {
|
||||
code: number;
|
||||
msg: string;
|
||||
data: UserItem[];
|
||||
};
|
||||
|
||||
export type ListAllUsingGetResponses = {
|
||||
200: ListAllUsingGetResponse;
|
||||
};
|
||||
|
||||
export type UserItem = {
|
||||
userId: number;
|
||||
username: string;
|
||||
nickname: string;
|
||||
avatar: string;
|
||||
};
|
||||
BIN
src/static/app/icons/1024x1024.png
Normal file
BIN
src/static/app/icons/1024x1024.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
BIN
src/static/app/icons/120x120.png
Normal file
BIN
src/static/app/icons/120x120.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
BIN
src/static/app/icons/144x144.png
Normal file
BIN
src/static/app/icons/144x144.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
BIN
src/static/app/icons/152x152.png
Normal file
BIN
src/static/app/icons/152x152.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
BIN
src/static/app/icons/167x167.png
Normal file
BIN
src/static/app/icons/167x167.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
BIN
src/static/app/icons/180x180.png
Normal file
BIN
src/static/app/icons/180x180.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
BIN
src/static/app/icons/192x192.png
Normal file
BIN
src/static/app/icons/192x192.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user