blackteay/vue3-vant4-mobile
1
0
Fork 0
mirror of https://github.com/xiangshu233/vue3-vant4-mobile.git synced 2025-04-05 06:22:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #22 from xiangshu233/feature

Browse Source 
chore: delete useless workflows
This commit is contained in:
傲慢或香橙 2024-02-20 00:25:05 +08:00 committed by GitHub
commit cc52955c6c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
120 changed files with 7020 additions and 4557 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
.eslintignore
View File

@ -1,16 +0,0 @@
*.sh
node_modules
*.md
*.woff
*.ttf
.vscode
.idea
dist
/public
/docs
.husky
.local
/bin
Dockerfile
components.d.ts
components.d.ts

78
.eslintrc.js
View File

@ -1,78 +0,0 @@
// @ts-check
const { defineConfig } = require('eslint-define-config');
module.exports = defineConfig({
root: true,
env: {
browser: true,
node: true,
es6: true,
},
parser: 'vue-eslint-parser',
parserOptions: {
parser: '@typescript-eslint/parser',
ecmaVersion: 2020,
sourceType: 'module',
jsxPragma: 'React',
ecmaFeatures: {
jsx: true,
},
},
extends: [
'plugin:vue/vue3-recommended',
'plugin:@typescript-eslint/recommended',
'prettier',
'plugin:prettier/recommended',
],
rules: {
'vue/script-setup-uses-vars': 'error',
'@typescript-eslint/ban-ts-ignore': 'off',
'@typescript-eslint/explicit-function-return-type': 'off',
'@typescript-eslint/no-explicit-any': 'off',
'@typescript-eslint/no-var-requires': 'off',
'@typescript-eslint/no-empty-function': 'off',
'vue/custom-event-name-casing': 'off',
'no-use-before-define': 'off',
'@typescript-eslint/no-use-before-define': 'off',
'@typescript-eslint/ban-ts-comment': 'off',
'@typescript-eslint/ban-types': 'off',
'@typescript-eslint/no-non-null-assertion': 'off',
'@typescript-eslint/explicit-module-boundary-types': 'off',
'@typescript-eslint/no-unused-vars': [
'error',
{
argsIgnorePattern: '^_',
varsIgnorePattern: '^_',
},
],
'no-unused-vars': [
'error',
{
argsIgnorePattern: '^_',
varsIgnorePattern: '^_',
},
],
'space-before-function-paren': 'off',
'vue/attributes-order': 'off',
'vue/one-component-per-file': 'off',
'vue/html-closing-bracket-newline': 'off',
'vue/max-attributes-per-line': 'off',
'vue/multiline-html-element-content-newline': 'off',
'vue/singleline-html-element-content-newline': 'off',
'vue/attribute-hyphenation': 'off',
'vue/require-default-prop': 'off',
'vue/multi-word-component-names': 'off',
'vue/html-self-closing': [
'error',
{
html: {
void: 'always',
normal: 'never',
component: 'always',
},
svg: 'always',
math: 'always',
},
],
},
});

31
.github/workflows/node.js.yml vendored
View File

@ -1,31 +0,0 @@
# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs
name: Node.js CI
on:
push:
branches: [ "main" ]
pull_request:
branches: [ "main" ]
jobs:
build:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [14.x, 16.x, 18.x]
# See supported Node.js release schedule at https://nodejs.org/en/about/releases/
steps:
- uses: actions/checkout@v3
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v3
with:
node-version: ${{ matrix.node-version }}
cache: 'npm'
- run: npm ci
- run: npm run build --if-present
- run: npm test

4
.husky/commit-msg
View File

@ -1,4 +0,0 @@
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npx --no-install commitlint --edit "$1"

4
.husky/pre-commit
View File

@ -1,4 +0,0 @@
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npm run lint:lint-staged

9
.prettierignore
View File

@ -1,9 +0,0 @@
/dist/*
.local
.output.js
/node_modules/**
**/*.svg
**/*.sh
/public/*

3
.stylelintignore
View File

@ -1,3 +0,0 @@
/dist/*
/public/*
public/*

150
README.md
View File

@ -1,7 +1,6 @@
<div align="center">
<a href="https://github.com/xiangshu233/vue3-vant4-mobile">
<img alt="Vue3Vant4MobileLogo" width="200" height="200" src="https://fastly.jsdelivr.net/gh/xiangshu233/blogAssets/2022/07/logo.svg">
</a>
</div><br><br>
@ -17,41 +16,44 @@
## 介绍
👋👋👋 Vue3 Vant4 Mobile 使用了最新的 `Vue3.2`、`Vite3`、`Vant4`、`Pinia2`、`TypeScript`、`WindiCSS` 等主流技术开发，集成 `Dark Mode`（暗黑）模式和系统主题色，并且持久化保存，集成 `Mock` 数据，顺便写了个 登录/注册/找回密码 页面（包括逻辑），你只需要替换你的 API 即可，顺便写了个包含 `NavBar`、`TabBar` 的 Layout，顺便集成了 `Axios`、`useECharts`、`IconSvg`，顺便集成了代码规范检查工具 `Eslint`、`Prettier`、`Stylelint`。顺便全页面均可以 `<keep-alive>`，顺便......好吧没有了。现在，你可以在此之上直接开发你的业务代码！希望你能喜欢。🥳🥳🥳
👋👋👋 Vue3 Vant4 Mobile 使用了最新的 `Vue3.2`、`Vite3`、`Vant4`、`Pinia2`、`TypeScript`、`UnoCSS` 等主流技术开发，集成 `Dark Mode`（暗黑）模式和系统主题色，并且持久化保存，集成 `Mock` 数据，顺便写了登录/注册/找回密码 页面（包括逻辑），只需替换你的 API 即可，另外页面均可以 `<keep-alive>`，随便写了个包含 `NavBar`、`TabBar` 的 Layout，集成了 `Axios`、`useECharts`、`IconSvg`。
项目使用了 [antfu](https://github.com/antfu) 大佬的 [antfu/eslint-config](https://github.com/antfu/eslint-config) 作为代码规范检查工具，摆脱繁琐无聊的 Eslint 配置，配合 `cz-git`、 `lint-staged`、`simple-git-hooks`可对暂存区代码提交校验，代码风格不合格可打断提交，保证多人协作开发时上游 Git 库的干净。
现在你可以在此之上直接开发你的业务代码！希望你能喜欢！
## 截图预览
<table>
<tr>
<td><img src="https://fastly.jsdelivr.net/gh/xiangshu233/blogAssets/2022/10/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20221022091917.png" width="400" alt="登录页面" /></td>
<td><img src="https://fastly.jsdelivr.net/gh/xiangshu233/blogAssets/2022/10/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20221022092004.png" width="400" alt="主控台页(首页）" /></td>
</tr>
<tr>
<tr>
<td><img src="https://fastly.jsdelivr.net/gh/xiangshu233/blogAssets/2022/10/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20221022091917.png" width="400" alt="登录页面" /></td>
<td><img src="https://fastly.jsdelivr.net/gh/xiangshu233/blogAssets/2022/10/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20221022092004.png" width="400" alt="主控台页(首页）" /></td>
</tr>
<tr>
<td><img src="https://fastly.jsdelivr.net/gh/xiangshu233/blogAssets/2022/10/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20221022092015.png" width="400" alt="消息页（图标页）" /></td>
<td><img src="https://fastly.jsdelivr.net/gh/xiangshu233/blogAssets/2022/10/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20221022092022.png" width="400" alt="我的（我的信息页面）" /></td>
</tr>
<td><img src="https://fastly.jsdelivr.net/gh/xiangshu233/blogAssets/2022/10/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20221022092022.png" width="400" alt="我的（我的信息页面）" /></td>
</tr>
</table>
<details>
<summary>展开预览暗黑模式下的界面截图。</summary>
<table>
<tr>
<td><img src="https://fastly.jsdelivr.net/gh/xiangshu233/blogAssets/2022/10/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20221022092052.png" width="400" alt="登录页面（暗黑模式）" /></td>
<td><img src="https://fastly.jsdelivr.net/gh/xiangshu233/blogAssets/2022/10/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20221022092140.png" width="400" alt="主控台页（暗黑模式）" /></td>
</tr>
<tr>
<tr>
<td><img src="https://fastly.jsdelivr.net/gh/xiangshu233/blogAssets/2022/10/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20221022092052.png" width="400" alt="登录页面（暗黑模式）" /></td>
<td><img src="https://fastly.jsdelivr.net/gh/xiangshu233/blogAssets/2022/10/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20221022092140.png" width="400" alt="主控台页（暗黑模式）" /></td>
</tr>
<tr>
<td><img src="https://fastly.jsdelivr.net/gh/xiangshu233/blogAssets/2022/10/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20221022092224.png" width="400" alt="我的页面（暗黑模式）" /></td>
<td><img src="https://fastly.jsdelivr.net/gh/xiangshu233/blogAssets/2022/10/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20221023152559.png" width="400" alt="主题设置页面（暗黑模式）" /></td>
</tr>
<td><img src="https://fastly.jsdelivr.net/gh/xiangshu233/blogAssets/2022/10/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20221023152559.png" width="400" alt="主题设置页面（暗黑模式）" /></td>
</tr>
</table>
</details>
## 线上预览
预览链接：*[https://vvmobile.xiangshu233.cn/](https://vvmobile.xiangshu233.cn/)*
预览链接：_[https://vvmobile.xiangshu233.cn/](https://vvmobile.xiangshu233.cn/)_
账号：admin，密码：123456
@ -75,28 +77,32 @@
- [xicons](https://www.xicons.org/#/) - 本项目推荐图标库，当然你也可以使用 `IconSVg`
- [postcss-mobile-forever](https://github.com/wswmsword/postcss-mobile-forever) - 了解手机端 `px` 转 `viewport` 插件的作用
- [Lodash-es](https://www.lodashjs.com/) - `JS`高性能工具库
- [WindiCSS](https://cn.windicss.org/guide/) - 原子化 `CSS`，熟悉 `WindiCSS` 基本使用
- [UnoCSS](https://unocss.dev/) - 原子化 `CSS`，熟悉 `UnoCSS` 基本使用
- [Mock.js](https://github.com/nuysoft/Mock) - 了解 `Mockjs` 基本语法
- [ES6+](http://es6.ruanyifeng.com/) - 熟悉 `ES6` 基本语法
## 环境准备
本地环境需要安装 [pnpm7.x](https://www.pnpm.cn/)、[Node.js](http://nodejs.org/) 和 [Git](https://git-scm.com/)
本地环境需要安装 [Pnpm](https://www.pnpm.cn/)、[Node.js](http://nodejs.org/) 和 [Git](https://git-scm.com/)
- 必须使用[pnpm7.x](https://www.pnpm.cn/)，否则依赖可能安装不上。
- [Node.js](http://nodejs.org/) 版本要求`12.x`以上，且不能为`13.x`版本，这里推荐 `15.x` 及以上。
- 必须使用 [pnpm>=8.6.10](https://www.pnpm.cn/)，否则依赖可能安装不上。
- [Node.js](http://nodejs.org/) 版本要求`18.x`以上，且不能为`13.x`版本，这里推荐 ` ^20.9.0 || >=21.1.0`。
## VS Code 配套插件
如果你使用的 IDE 是 [VS Code](https://code.visualstudio.com/)（推荐）的话，可以安装以下工具来提高开发效率及代码格式化
- [WindiCSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=voorjaar.windicss-intellisense) - WindiCSS 提示插件
- [UnoCSS](https://marketplace.visualstudio.com/items?itemName=antfu.unocss) - UnoCSS 提示插件
- [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) - Vue 开发必备
- [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) - 用于 TypeScript 服务器的 Vue 插件
- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) - 脚本代码检查
- [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - 代码格式化
- [Stylelint](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint) - CSS 格式化
- [DotENV](https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv) - `.env` 文件 高亮
- [Error Lens](https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens) - 更好的错误定位
- [EditorConfig for VS Code](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig) - 不同 IDE 维护一致的编码样式
- [File Nesting Updater](https://marketplace.visualstudio.com/items?itemName=antfu.file-nesting) - 使用 VS Code 的文件嵌套功能使文件树更干净的配置
- [Pretty TypeScript Errors](https://marketplace.visualstudio.com/items?itemName=antfu.file-nesting) - 使 VSCode 中的 TypeScript 错误更漂亮、更易于理解
- [Todo Tree](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree) - 在树视图中显示 TODO、FIXME 等注释标签
- [Trailing Spaces](https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces) - 突出显示尾随空格并立即将其删除
## 使用
@ -115,22 +121,82 @@ pnpm dev
pnpm build
```
## Git 贡献提交规范
## Git 提交规范
- 参考 [vue](https://github.com/vuejs/vue/blob/dev/.github/COMMIT_CONVENTION.md) 规范 ([Angular](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-angular))
- `feat` 增加新功能
- `fix` 修复问题/BUG
- `style` 代码风格相关无影响运行结果的
- `perf` 优化/性能提升
- `refactor` 重构
- `revert` 撤销修改
- `test` 测试相关
- `docs` 文档/注释
- `chore` 依赖更新/脚手架配置修改等
- `workflow` 工作流改进
- `ci` 持续集成
- `types` 类型定义文件更改
- `wip` 开发中
### 提交规范
参考 [vue](https://github.com/vuejs/vue/blob/dev/.github/COMMIT_CONVENTION.md) 规范 ([Angular](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-angular))
- `feat` 增加新功能
- `fix` 修复问题/BUG
- `style` 代码风格相关无影响运行结果的
- `perf` 优化/性能提升
- `refactor` 重构
- `revert` 撤销修改
- `test` 测试相关
- `docs` 文档/注释
- `chore` 依赖更新/脚手架配置修改等
- `workflow` 工作流改进
- `ci` 持续集成
- `types` 类型定义文件更改
- `wip` 开发中
### 提交校验
关于前端工程化 **配置构建代码检查工作流** 不了解的可以看下面这两篇文章了解下
[前端工程化配置(上) 构建代码检查工作流](https://xiangshu233.cn/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96%E9%85%8D%E7%BD%AE%EF%BC%88%E4%B8%8A%EF%BC%89%20%E6%9E%84%E5%BB%BA%E4%BB%A3%E7%A0%81%E6%A3%80%E6%9F%A5%E5%B7%A5%E4%BD%9C%E6%B5%81/)
[前端工程化配置(下) 规范仓库提交记录 commitlint + commitizen + cz-git + 配置](https://xiangshu233.cn/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96%E9%85%8D%E7%BD%AE%EF%BC%88%E4%B8%8B%EF%BC%89%20%E8%A7%84%E8%8C%83%E4%BB%93%E5%BA%93%E6%8F%90%E4%BA%A4%E8%AE%B0%E5%BD%95/)
代码首次拉下来 `pnpm install` 后 需要执行以下命令来更新 `git hooks`
```shell
# Update ./git/hooks
npx simple-git-hooks
```
本项目提交规范校验使用 [simple-git-hooks](https://github.com/toplenboren/simple-git-hooks) 作为 git hooks，使用 [cz-git](https://github.com/Zhengqbbb/cz-git) 作为 commitlint commitizen。
代码要想使用 commitlint 规范提交需要在更改的文件 `git add` 后，控制台执行 `cz` 命令开启 cz-git CLI
若想直接执行 `git commit` 需要满足上面提交规范才能通过校验，否则无法提交
simple-git-hooks 和 husky 都是用于管理 Git 钩子（Git hooks）的工具，但它们有一些区别：
1. simple-git-hooks:
- 简介: simple-git-hooks 是一个轻量级的工具，用于管理和运行Git钩子。
- 特点:
- 提供了简单的配置方式来定义和运行 Gi 钩子。
- 适合于小型项目或对 Git 钩子需求不复杂的项目。
- 相对较少的功能和配置选项。
- 使用场景: 适用于简单的项目或对 Git 钩子管理需求不高的情况。
2. husky:
- 简介: husky 是一个功能强大的工具，用于管理 Git 钩子，并且在项目中被广泛使用。
- 特点:
- 提供了丰富的配置选项和灵活性，可以精细地控制 Git 钩子的行为。
- 支持在不同的 Git 钩子事件上运行自定义脚本。
- 可以与其他工具（如linters、测试框架等）集成，实现更复杂的工作流。
- 使用场景: 适用于需要灵活配置和管理 Git 钩子的项目，尤其是大型或复杂的项目。
```json
// package.json
{
"simple-git-hooks": {
// 对暂存区执行 eslint --fix
"pre-commit": "pnpm lint-staged",
// 对提交信息进行校验
"commit-msg": "npx --no-install commitlint --edit $1"
},
"lint-staged": {
"*": "eslint --fix"
}
}
```
## 浏览器支持
@ -139,8 +205,8 @@ pnpm build
支持现代浏览器, 不支持 IE
| [![ Edge](https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png)](http://godban.github.io/browsers-support-badges/) IE | [![ Edge](https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png)](http://godban.github.io/browsers-support-badges/) Edge | [![Firefox](https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png)](http://godban.github.io/browsers-support-badges/) Firefox | [![Chrome](https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png)](http://godban.github.io/browsers-support-badges/) Chrome | [![Safari](https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png)](http://godban.github.io/browsers-support-badges/) Safari |
| --- | --- | --- | --- | --- |
| not support | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
| ----------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| not support | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
## 维护者

4
build/constant.ts
View File

@ -1,6 +1,6 @@
/**
* The name of the configuration file entered in the production environment
*/
export const GLOB_CONFIG_FILE_NAME = 'app.config.js';
export const GLOB_CONFIG_FILE_NAME = 'app.config.js'
export const OUTPUT_DIR = 'dist/vant-mobile';
export const OUTPUT_DIR = 'dist/vant-mobile'

6
build/getConfigFileName.ts
View File

@ -2,8 +2,8 @@
* Get the configuration file variable name
* @param env
*/
export const getConfigFileName = (env: Record<string, any>) => {
export function getConfigFileName(env: Record<string, any>) {
return `__PRODUCTION__${env.VITE_GLOB_APP_SHORT_NAME || '__APP'}__CONF__`
.toUpperCase()
.replace(/\s/g, '');
};
.replace(/\s/g, '')
}

37
build/script/buildConf.ts
View File

@ -1,24 +1,24 @@
/**
* Generate additional configuration files when used for packaging. The file can be configured with some global variables, so that it can be changed directly externally without repackaging
*/
import { GLOB_CONFIG_FILE_NAME, OUTPUT_DIR } from '../constant';
import fs, { writeFileSync } from 'fs-extra';
import colors from 'picocolors';
import fs from 'fs-extra'
import colors from 'picocolors'
import { GLOB_CONFIG_FILE_NAME, OUTPUT_DIR } from '../constant'
import { getRootPath, getEnvConfig } from '../utils';
import { getConfigFileName } from '../getConfigFileName';
import { getEnvConfig, getRootPath } from '../utils'
import { getConfigFileName } from '../getConfigFileName'
import pkg from '../../package.json';
import pkg from '../../package.json'
function createConfig(
{
configName,
config,
configFileName = GLOB_CONFIG_FILE_NAME,
}: { configName: string; config: any; configFileName?: string } = { configName: '', config: {} }
}: { configName: string, config: any, configFileName?: string } = { configName: '', config: {} },
) {
try {
const windowConf = `window.${configName}`;
const windowConf = `window.${configName}`
// Ensure that the variable will not be modified
const configStr = `${windowConf}=${JSON.stringify(config)};
Object.freeze(${windowConf});
@ -26,19 +26,20 @@ function createConfig(
configurable: false,
writable: false,
});
`.replace(/\s/g, '');
fs.mkdirp(getRootPath(OUTPUT_DIR));
writeFileSync(getRootPath(`${OUTPUT_DIR}/${configFileName}`), configStr);
`.replace(/\s/g, '')
fs.mkdirp(getRootPath(OUTPUT_DIR))
fs.writeFileSync(getRootPath(`${OUTPUT_DIR}/${configFileName}`), configStr)
console.log(colors.cyan(`✨ [${pkg.name}]`) + ` - configuration file is build successfully:`);
console.log(colors.gray(OUTPUT_DIR + '/' + colors.green(configFileName)) + '\n');
} catch (error) {
console.log(colors.red('configuration file configuration file failed to package:\n' + error));
console.log(`${colors.cyan(`✨ [${pkg.name}]`)} - configuration file is build successfully:`)
console.log(`${colors.gray(`${OUTPUT_DIR}/${colors.green(configFileName)}`)}\n`)
}
catch (error) {
console.log(colors.red(`configuration file configuration file failed to package:\n${error}`))
}
}
export function runBuildConfig() {
const config = getEnvConfig();
const configFileName = getConfigFileName(config);
createConfig({ config, configName: configFileName });
const config = getEnvConfig()
const configFileName = getConfigFileName(config)
createConfig({ config, configName: configFileName })
}

25
build/script/postBuild.ts
View File

@ -1,23 +1,24 @@
// #!/usr/bin/env node
import { runBuildConfig } from './buildConf';
import colors from 'picocolors';
import colors from 'picocolors'
import pkg from '../../package.json';
import pkg from '../../package.json'
import { runBuildConfig } from './buildConf'
export const runBuild = async () => {
export async function runBuild() {
try {
const argvList = process.argv.splice(2);
const argvList = process.argv.splice(2)
// Generate configuration file
if (!argvList.includes('disabled-config')) {
await runBuildConfig();
await runBuildConfig()
}
console.log(`✨ ${colors.cyan(`[${pkg.name}]`)}` + ' - build successfully!');
} catch (error) {
console.log(colors.red('vite build error:\n' + error));
process.exit(1);
console.log(`✨ ${colors.cyan(`[${pkg.name}]`)} - build successfully!`)
}
};
runBuild();
catch (error) {
console.log(colors.red(`vite build error:\n${error}`))
process.exit(1)
}
}
runBuild()

52
build/utils.ts
View File

@ -1,44 +1,45 @@
import fs from 'fs';
import path from 'path';
import dotenv from 'dotenv';
import fs from 'node:fs'
import path from 'node:path'
import dotenv from 'dotenv'
export function isDevFn(mode: string): boolean {
return mode === 'development';
return mode === 'development'
}
export function isProdFn(mode: string): boolean {
return mode === 'production';
return mode === 'production'
}
/**
* Whether to generate package preview
*/
export function isReportMode(): boolean {
return process.env.REPORT === 'true';
return process.env.REPORT === 'true'
}
// Read all environment variable configuration files to process.env
// 读取并处理所有环境变量配置文件 .env
export function wrapperEnv(envConf: Recordable): ViteEnv {
const ret: any = {};
const ret: any = {}
for (const envName of Object.keys(envConf)) {
// 去除空格
let realName = envConf[envName].replace(/\\n/g, '\n');
realName = realName === 'true' ? true : realName === 'false' ? false : realName;
let realName = envConf[envName].replace(/\\n/g, '\n')
realName = realName === 'true' ? true : realName === 'false' ? false : realName
if (envName === 'VITE_PORT') {
realName = Number(realName);
realName = Number(realName)
}
if (envName === 'VITE_PROXY') {
try {
realName = JSON.parse(realName);
} catch (error) {}
realName = JSON.parse(realName)
}
catch (error) {}
}
ret[envName] = realName;
process.env[envName] = realName;
ret[envName] = realName
process.env[envName] = realName
}
return ret;
return ret
}
/**
@ -47,21 +48,22 @@ export function wrapperEnv(envConf: Recordable): ViteEnv {
* @param confFiles ext
*/
export function getEnvConfig(match = 'VITE_GLOB_', confFiles = ['.env', '.env.production']) {
let envConfig = {};
let envConfig = {}
confFiles.forEach((item) => {
try {
const env = dotenv.parse(fs.readFileSync(path.resolve(process.cwd(), item)));
envConfig = { ...envConfig, ...env };
} catch (error) {}
});
const env = dotenv.parse(fs.readFileSync(path.resolve(process.cwd(), item)))
envConfig = { ...envConfig, ...env }
}
catch (error) {}
})
Object.keys(envConfig).forEach((key) => {
const reg = new RegExp(`^(${match})`);
const reg = new RegExp(`^(${match})`)
if (!reg.test(key)) {
Reflect.deleteProperty(envConfig, key);
Reflect.deleteProperty(envConfig, key)
}
});
return envConfig;
})
return envConfig
}
/**
@ -69,5 +71,5 @@ export function getEnvConfig(match = 'VITE_GLOB_', confFiles = ['.env', '.env.pr
* @param dir file path
*/
export function getRootPath(...dir: string[]) {
return path.resolve(process.cwd(), ...dir);
return path.resolve(process.cwd(), ...dir)
}

20
build/vite/plugin/compress.ts
View File

@ -2,25 +2,25 @@
* Used to package and output gzip. Note that this does not work properly in Vite, the specific reason is still being investigated
* https://github.com/anncwb/vite-plugin-compression
*/
import type { PluginOption } from 'vite';
import type { PluginOption } from 'vite'
import compressPlugin from 'vite-plugin-compression';
import compressPlugin from 'vite-plugin-compression'
export function configCompressPlugin(
compress: 'gzip' | 'brotli' | 'none',
deleteOriginFile = false
deleteOriginFile = false,
): PluginOption | PluginOption[] {
const compressList = compress.split(',');
const compressList = compress.split(',')
const plugins: PluginOption[] = [];
const plugins: PluginOption[] = []
if (compressList.includes('gzip')) {
plugins.push(
compressPlugin({
ext: '.gz',
deleteOriginFile,
})
);
}),
)
}
if (compressList.includes('brotli')) {
plugins.push(
@ -28,8 +28,8 @@ export function configCompressPlugin(
ext: '.br',
algorithm: 'brotliCompress',
deleteOriginFile,
})
);
}),
)
}
return plugins;
return plugins
}

20
build/vite/plugin/html.ts
View File

@ -2,19 +2,19 @@
* Plugin to minimize and use ejs template syntax in index.html.
* https://github.com/anncwb/vite-plugin-html
*/
import type { PluginOption } from 'vite';
import { createHtmlPlugin } from 'vite-plugin-html';
import pkg from '../../../package.json';
import { GLOB_CONFIG_FILE_NAME } from '../../constant';
import type { PluginOption } from 'vite'
import { createHtmlPlugin } from 'vite-plugin-html'
import pkg from '../../../package.json'
import { GLOB_CONFIG_FILE_NAME } from '../../constant'
export function configHtmlPlugin(env: ViteEnv, isBuild: boolean) {
const { VITE_GLOB_APP_TITLE, VITE_PUBLIC_PATH } = env;
const { VITE_GLOB_APP_TITLE, VITE_PUBLIC_PATH } = env
const path = VITE_PUBLIC_PATH.endsWith('/') ? VITE_PUBLIC_PATH : `${VITE_PUBLIC_PATH}/`;
const path = VITE_PUBLIC_PATH.endsWith('/') ? VITE_PUBLIC_PATH : `${VITE_PUBLIC_PATH}/`
const getAppConfigSrc = () => {
return `${path || '/'}${GLOB_CONFIG_FILE_NAME}?v=${pkg.version}-${new Date().getTime()}`;
};
return `${path || '/'}${GLOB_CONFIG_FILE_NAME}?v=${pkg.version}-${new Date().getTime()}`
}
// 当执行 yarn build 构建项目之后，会自动生成 _app.config.js 文件并插入 index.html
// _app.config.js 用于项目在打包后，需要动态修改配置的需求，如接口地址
@ -41,6 +41,6 @@ export function configHtmlPlugin(env: ViteEnv, isBuild: boolean) {
]
: [],
},
});
return htmlPlugin;
})
return htmlPlugin
}

46
build/vite/plugin/index.ts
View File

@ -1,16 +1,14 @@
import type { PluginOption } from 'vite';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';
import type { PluginOption } from 'vite'
import Components from 'unplugin-vue-components/vite'
import { VantResolver } from 'unplugin-vue-components/resolvers'
import vue from '@vitejs/plugin-vue'
import UnoCSS from 'unocss/vite'
import vue from '@vitejs/plugin-vue';
import vueSetupExtend from 'vite-plugin-vue-setup-extend';
import WindiCSS from 'vite-plugin-windicss';
import { configHtmlPlugin } from './html';
import { configMockPlugin } from './mock';
import { configCompressPlugin } from './compress';
import { configVisualizerConfig } from './visualizer';
import { configSvgIconsPlugin } from './svgSprite';
import { configHtmlPlugin } from './html'
import { configMockPlugin } from './mock'
import { configCompressPlugin } from './compress'
import { configVisualizerConfig } from './visualizer'
import { configSvgIconsPlugin } from './svgSprite'
/**
* 配置 vite 插件
@ -24,43 +22,41 @@ export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean, prodMock:
// 如果你需要多种形式，你可以用','来分隔
// VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE 打包使用压缩时是否删除原始文件，默认为 false
const { VITE_USE_MOCK, VITE_BUILD_COMPRESS, VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE } = viteEnv;
const { VITE_USE_MOCK, VITE_BUILD_COMPRESS, VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE } = viteEnv
const vitePlugins: (PluginOption | PluginOption[])[] = [
// have to
vue(),
// support name https://github.com/vbenjs/vite-plugin-vue-setup-extend
vueSetupExtend(),
// 按需引入VantUi且自动创建组件声明
Components({
dts: true,
resolvers: [VantResolver()],
types: [],
}),
];
]
// vite-plugin-windicss
vitePlugins.push(WindiCSS());
// UnoCSS
vitePlugins.push(UnoCSS())
// 加载 html 插件 vite-plugin-html
vitePlugins.push(configHtmlPlugin(viteEnv, isBuild));
vitePlugins.push(configHtmlPlugin(viteEnv, isBuild))
// rollup-plugin-visualizer
vitePlugins.push(configVisualizerConfig());
vitePlugins.push(configVisualizerConfig())
// vite-plugin-mock
VITE_USE_MOCK && vitePlugins.push(configMockPlugin(isBuild, prodMock));
VITE_USE_MOCK && vitePlugins.push(configMockPlugin(isBuild, prodMock))
// vite-plugin-svg-icons
vitePlugins.push(configSvgIconsPlugin(isBuild));
vitePlugins.push(configSvgIconsPlugin(isBuild))
if (isBuild) {
// rollup-plugin-gzip
// 加载 gzip 打包
vitePlugins.push(
configCompressPlugin(VITE_BUILD_COMPRESS, VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE)
);
configCompressPlugin(VITE_BUILD_COMPRESS, VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE),
)
}
return vitePlugins;
return vitePlugins
}

4
build/vite/plugin/mock.ts
View File

@ -2,7 +2,7 @@
* Mock plugin for development and production.
* https://github.com/anncwb/vite-plugin-mock
*/
import { viteMockServe } from 'vite-plugin-mock';
import { viteMockServe } from 'vite-plugin-mock'
export function configMockPlugin(isBuild: boolean, prodMock: boolean) {
return viteMockServe({
@ -15,5 +15,5 @@ export function configMockPlugin(isBuild: boolean, prodMock: boolean) {
setupProdMockServer();
`,
});
})
}

8
build/vite/plugin/svgSprite.ts
View File

@ -3,8 +3,8 @@
* https://github.com/anncwb/vite-plugin-svg-icons
*/
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
import path from 'path';
import path from 'node:path'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
export function configSvgIconsPlugin(isBuild: boolean) {
// 指定需要缓存的图标文件夹
@ -14,6 +14,6 @@ export function configSvgIconsPlugin(isBuild: boolean) {
svgoOptions: isBuild,
// 指定symbolId格式
symbolId: 'icon-[dir]-[name]',
});
return svgIconsPlugin;
})
return svgIconsPlugin
}

10
build/vite/plugin/visualizer.ts
View File

@ -1,9 +1,9 @@
/**
* Package file volume analysis
*/
import visualizer from 'rollup-plugin-visualizer';
import type { PluginOption } from 'vite';
import { isReportMode } from '../../utils';
import visualizer from 'rollup-plugin-visualizer'
import type { PluginOption } from 'vite'
import { isReportMode } from '../../utils'
export function configVisualizerConfig() {
if (isReportMode()) {
@ -12,7 +12,7 @@ export function configVisualizerConfig() {
open: true,
gzipSize: true,
brotliSize: true,
}) as PluginOption;
}) as PluginOption
}
return [];
return []
}

22
build/vite/proxy.ts
View File

@ -1,38 +1,38 @@
/**
* Used to parse the .env.development proxy configuration
*/
import type { ProxyOptions } from 'vite';
import type { ProxyOptions } from 'vite'
type ProxyItem = [string, string];
type ProxyItem = [string, string]
type ProxyList = ProxyItem[];
type ProxyList = ProxyItem[]
type ProxyTargetList = Record<string, ProxyOptions & { rewrite: (path: string) => string }>;
type ProxyTargetList = Record<string, ProxyOptions & { rewrite: (path: string) => string }>
const httpsRE = /^https:\/\//;
const httpsRE = /^https:\/\//
/**
* Generate proxy
* @param list
*/
export function createProxy(list: ProxyList = []) {
const ret: ProxyTargetList = {};
const ret: ProxyTargetList = {}
for (const [prefix, target] of list) {
const isHttps = httpsRE.test(target);
const isHttps = httpsRE.test(target)
// https://github.com/http-party/node-http-proxy#options
ret[prefix] = {
target: target,
target,
changeOrigin: true,
ws: true,
rewrite: (path) => path.replace(new RegExp(`^${prefix}`), ''),
rewrite: path => path.replace(new RegExp(`^${prefix}`), ''),
// https is require secure=false
// 如果您secure="true"只允许来自 HTTPS 的请求，则secure="false"意味着允许来自 HTTP 和 HTTPS 的请求。
...(isHttps ? { secure: false } : {}),
};
}
}
return ret;
return ret
// ret
// {

22
commitlint.config.js → commitlint.config.cjs
View File

@ -1,26 +1,26 @@
// commitlint.config.js
const fs = require('fs');
const path = require('path');
const { execSync } = require('child_process');
const fs = require('node:fs')
const path = require('node:path')
const { execSync } = require('node:child_process')
const scopes = fs
.readdirSync(path.resolve(__dirname, 'src'), { withFileTypes: true })
.filter((dirent) => dirent.isDirectory())
.map((dirent) => dirent.name.replace(/s$/, ''));
.filter(dirent => dirent.isDirectory())
.map(dirent => dirent.name.replace(/s$/, ''))
// precomputed scope
const scopeComplete = execSync('git status --porcelain || true')
.toString()
.trim()
.split('\n')
.find((r) => ~r.indexOf('M src'))
.find(r => ~r.indexOf('M src'))
?.replace(/(\/)/g, '%%')
?.match(/src%%((\w|-)*)/)?.[1]
?.replace(/s$/, '');
?.replace(/s$/, '')
/** @type {import('cz-git').UserConfig} */
module.exports = {
ignores: [(commit) => commit.includes('init')],
ignores: [commit => commit.includes('init')],
extends: ['@commitlint/config-conventional'],
rules: {
'body-leading-blank': [2, 'always'],
@ -144,12 +144,12 @@ module.exports = {
emptyIssuePrefixsAlias: 'skip',
customIssuePrefixsAlias: 'custom',
confirmColorize: true,
maxHeaderLength: Infinity,
maxSubjectLength: Infinity,
maxHeaderLength: Number.POSITIVE_INFINITY,
maxSubjectLength: Number.POSITIVE_INFINITY,
minSubjectLength: 0,
scopeOverrides: undefined,
defaultBody: '',
defaultIssues: '',
defaultSubject: '',
},
};
}

61
eslint.config.js Normal file
View File

@ -0,0 +1,61 @@
// eslint.config.js
import antfu from '@antfu/eslint-config'
export default antfu({
unocss: true,
stylistic: {
indent: 2, // 4, or 'tab'
quotes: 'single', // or 'double'
},
// 使用外部格式化程序来格式化 ESLint 无法处理的文件（ .css 、 .html 等）
formatters: {
css: true,
html: true,
markdown: 'prettier',
},
// https://alloyteam.github.io/eslint-config-alloy/?language=zh-CN&rule=base
// https://eslint.vuejs.org/rules/
rules: {
'no-console': 'off',
// 强制组件顶级元素的顺序
'vue/block-order': [
'error',
{
order: ['template', 'script', 'style'],
},
],
'max-params': ['error', 4],
// 代码块嵌套的深度禁止超过 4 层
'max-depth': ['error', 4],
// 回调函数嵌套禁止超过 3 层，多了请用 async await 替代
'max-nested-callbacks': ['error', 4],
// 禁止使用 Array 构造函数时传入的参数超过一个
// 参数为多个时表示创建一个指定内容的数组，此时可以用数组字面量实现，不必使用构造函数
'no-array-constructor': 'error',
// 禁止 if else 的条件判断中出现重复的条件
'no-dupe-else-if': 'error',
// 禁止出现空代码块，允许 catch 为空代码块
'no-empty': [
'error',
{
allowEmptyCatch: true,
},
],
// 禁止出现没必要的字符串连接
'no-useless-concat': 'error',
// 禁止使用 var
'no-var': 'error',
// 禁止变量申明时用逗号一次申明多个
'one-var': ['error', 'never'],
// 必须使用 ... 而不是 Object.assign，除非 Object.assign 的第一个参数是一个变量
'prefer-object-spread': 'error',
// 回调函数必须使用箭头函数
'prefer-arrow-callback': 'error',
// "stroustrup"：强制一致的大括号风格，左括号必须与控制语句在同一行开始，右括号必须独占一行。
'brace-style': ['error', 'stroustrup'],
// 强制使用 node 全局变量 process 而不是 require("process") 。
'node/prefer-global/process': 'off',
// 对所有控制语句强制执行一致的大括号样式，（只有一行的时候eslint默认是不需要大括号的，这样会降低代码清晰度）
'curly': ['error', 'all'],
},
})

55
index.html
View File

@ -1,27 +1,26 @@
<!DOCTYPE html>
<!doctype html>
<html lang="zh-cmn-Hans" id="htmlRoot" class>
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/logo.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>
<%= title %>
</title>
<title><%= title %></title>
</head>
<body>
<div id="app">
<script>
(() => {
let htmlRoot = document.getElementById('htmlRoot');
;(() => {
let htmlRoot = document.getElementById('htmlRoot')
const appDesignSetting = window.localStorage.getItem('DESIGN-SETTING')
let darkMode = appDesignSetting && JSON.parse(appDesignSetting).darkMode
let darkMode =
appDesignSetting && JSON.parse(appDesignSetting).darkMode
if (htmlRoot && darkMode) {
htmlRoot.setAttribute('data-theme', darkMode);
darkMode = htmlRoot = null;
htmlRoot.setAttribute('data-theme', darkMode)
darkMode = htmlRoot = null
} else {
htmlRoot.setAttribute('data-theme', 'light');
htmlRoot.setAttribute('data-theme', 'light')
}
})();
})()
</script>
<style>
body {
@ -38,14 +37,14 @@
align-items: center;
flex-direction: column;
}
.first-loading-wrap>h1 {
font-size: 128px
.first-loading-wrap > h1 {
font-size: 128px;
}
.first-loading-wrap .loading-wrap {
padding: 98px;
display: flex;
justify-content: center;
align-items: center
align-items: center;
}
.dot {
animation: antRotate 1.2s infinite linear;
@ -55,7 +54,7 @@
font-size: 52px;
width: 52px;
height: 52px;
box-sizing: border-box
box-sizing: border-box;
}
.dot i {
width: 24px;
@ -64,53 +63,53 @@
display: block;
background-color: #1890ff;
border-radius: 100%;
transform: scale(.75);
transform: scale(0.75);
transform-origin: 50% 50%;
opacity: .3;
animation: antSpinMove 1s infinite linear alternate
opacity: 0.3;
animation: antSpinMove 1s infinite linear alternate;
}
.dot i:nth-child(1) {
top: 0;
left: 0
left: 0;
}
.dot i:nth-child(2) {
top: 0;
right: 0;
-webkit-animation-delay: .4s;
animation-delay: .4s
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
.dot i:nth-child(3) {
right: 0;
bottom: 0;
-webkit-animation-delay: .8s;
animation-delay: .8s
-webkit-animation-delay: 0.8s;
animation-delay: 0.8s;
}
.dot i:nth-child(4) {
bottom: 0;
left: 0;
-webkit-animation-delay: 1.2s;
animation-delay: 1.2s
animation-delay: 1.2s;
}
@keyframes antRotate {
to {
-webkit-transform: rotate(405deg);
transform: rotate(405deg)
transform: rotate(405deg);
}
}
@-webkit-keyframes antRotate {
to {
-webkit-transform: rotate(405deg);
transform: rotate(405deg)
transform: rotate(405deg);
}
}
@keyframes antSpinMove {
to {
opacity: 1
opacity: 1;
}
}
@-webkit-keyframes antSpinMove {
to {
opacity: 1
opacity: 1;
}
}
</style>

14
mock/_createProductionServer.ts
View File

@ -1,18 +1,18 @@
import { createProdMockServer } from 'vite-plugin-mock/es/createProdMockServer';
import { createProdMockServer } from 'vite-plugin-mock/es/createProdMockServer'
const modules = import.meta.glob('./**/*.ts', { eager: true }) as any;
const modules = import.meta.glob('./**/*.ts', { eager: true }) as any
const mockModules: any[] = [];
const mockModules: any[] = []
Object.keys(modules).forEach((key) => {
if (key.includes('/_')) {
return;
return
}
mockModules.push(...modules[key].default);
});
mockModules.push(...modules[key].default)
})
/**
* Used in a production environment. Need to manually import all modules
*/
export function setupProdMockServer() {
createProdMockServer(mockModules);
createProdMockServer(mockModules)
}

42
mock/_util.ts
View File

@ -1,5 +1,5 @@
import Mock from 'mockjs';
import { ResultEnum } from '@/enums/httpEnum';
import Mock from 'mockjs'
import { ResultEnum } from '@/enums/httpEnum'
export function resultSuccess<T = Recordable>(result: T, { message = 'ok' } = {}) {
return Mock.mock({
@ -7,16 +7,16 @@ export function resultSuccess<T = Recordable>(result: T, { message = 'ok' } = {}
result,
message,
type: 'success',
});
})
}
export function resultPageSuccess<T = any>(
page: number,
pageSize: number,
list: T[],
{ message = 'ok' } = {}
{ message = 'ok' } = {},
) {
const pageData = pagination(page, pageSize, list);
const pageData = pagination(page, pageSize, list)
return {
...resultSuccess({
@ -26,46 +26,46 @@ export function resultPageSuccess<T = any>(
list: pageData,
}),
message,
};
}
}
export function resultError(
message = 'Request failed',
{ code = ResultEnum.ERROR, result = null } = {}
{ code = ResultEnum.ERROR, result = null } = {},
) {
return {
code,
result,
message,
type: 'error',
};
}
}
export function pagination<T = any>(pageNo: number, pageSize: number, array: T[]): T[] {
const offset = (pageNo - 1) * Number(pageSize);
const ret =
offset + Number(pageSize) >= array.length
const offset = (pageNo - 1) * Number(pageSize)
const ret
= offset + Number(pageSize) >= array.length
? array.slice(offset, array.length)
: array.slice(offset, offset + Number(pageSize));
return ret;
: array.slice(offset, offset + Number(pageSize))
return ret
}
/**
* @param {Number} times 回调函数需要执行的次数
* @param {number} times 回调函数需要执行的次数
* @param {Function} callback 回调函数
*/
export function doCustomTimes(times: number, callback: any) {
let i = -1;
let i = -1
while (++i < times) {
callback(i);
callback(i)
}
}
export interface requestParams {
method: string;
body: any;
headers?: { authorization?: string };
query: any;
method: string
body: any
headers?: { authorization?: string }
query: any
}
/**
@ -73,5 +73,5 @@ export interface requestParams {
*
*/
export function getRequestToken({ headers }: requestParams): string | undefined {
return headers?.authorization;
return headers?.authorization
}

49
mock/user/user.ts
View File

@ -1,6 +1,7 @@
import { MockMethod } from 'vite-plugin-mock';
import { getRequestToken, requestParams, resultError, resultSuccess } from '../_util';
import { ResultEnum } from '@/enums/httpEnum';
import type { MockMethod } from 'vite-plugin-mock'
import type { requestParams } from '../_util'
import { getRequestToken, resultError, resultSuccess } from '../_util'
import { ResultEnum } from '@/enums/httpEnum'
const fakeUserList = [
{
@ -32,7 +33,7 @@ const fakeUserList = [
phone: '18822137893',
token: 'fakeToken2',
},
];
]
export default [
{
@ -40,21 +41,21 @@ export default [
timeout: 1000,
method: 'post',
response: ({ body }) => {
const { username, password } = body;
const { username, password } = body
const checkUser = fakeUserList.find(
(item) => item.username === username && password === item.password
);
item => item.username === username && password === item.password,
)
if (!checkUser) {
return resultError('帐号或密码不正确');
return resultError('帐号或密码不正确')
}
const { userId, username: _username, token, realname, sign } = checkUser;
const { userId, username: _username, token, realname, sign } = checkUser
return resultSuccess({
userId,
username: _username,
token,
realname,
sign,
});
})
},
},
{
@ -62,15 +63,17 @@ export default [
timeout: 1000,
method: 'get',
response: (request: requestParams) => {
const token = getRequestToken(request);
if (!token) return resultError('无效令牌');
const checkUser = fakeUserList.find((item) => item.token === token);
const token = getRequestToken(request)
if (!token) {
return resultError('无效令牌')
}
const checkUser = fakeUserList.find(item => item.token === token)
if (!checkUser) {
return resultError('没有获取到对应的用户信息', {
code: ResultEnum.TOKEN_EXPIRED,
});
})
}
return resultSuccess(checkUser);
return resultSuccess(checkUser)
},
},
{
@ -78,13 +81,15 @@ export default [
timeout: 1000,
method: 'post',
response: (request: requestParams) => {
const token = getRequestToken(request);
if (!token) return resultError('无效令牌');
const checkUser = fakeUserList.find((item) => item.token === token);
if (!checkUser) {
return resultError('无效令牌');
const token = getRequestToken(request)
if (!token) {
return resultError('无效令牌')
}
return resultSuccess(undefined, { message: '令牌已被销毁' });
const checkUser = fakeUserList.find(item => item.token === token)
if (!checkUser) {
return resultError('无效令牌')
}
return resultSuccess(undefined, { message: '令牌已被销毁' })
},
},
] as MockMethod[];
] as MockMethod[]

153
package.json
View File

@ -1,12 +1,18 @@
{
"name": "vue3-vant4-mobile",
"type": "module",
"version": "1.0.0",
"private": true,
"version": "0.0.1",
"packageManager": "pnpm@8.6.10",
"author": {
"name": "xiangshu233",
"email": "xiangshu233@outlook.com",
"url": "https://github.com/xiangshu233"
},
"engines": {
"node": "^18.18.0 || ^20.9.0 || >=21.1.0",
"pnpm": ">=8.6.10"
},
"scripts": {
"preinstall": "npx only-allow pnpm",
"bootstrap": "pnpm install",
@ -19,112 +25,87 @@
"preview": "vite preview",
"clean:cache": "rimraf node_modules/.cache/ && rimraf node_modules/.vite",
"clean:lib": "rimraf node_modules",
"lint:lint-staged": "lint-staged",
"lint:eslint": "eslint \"{src}/**/*.{vue,ts,tsx}\" --fix",
"lint:prettier": "prettier --write --loglevel warn \"src/**/*.{js,json,tsx,css,less,scss,vue,html,md}\"",
"lint:stylelint": "stylelint --fix \"**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/",
"prepare": "husky install"
"lint": "eslint .",
"lint:fix": "eslint . --fix",
"lint:lint-staged": "lint-staged"
},
"dependencies": {
"@types/lodash-es": "^4.17.6",
"@types/lodash-es": "^4.17.12",
"@unocss/reset": "^0.58.5",
"@vicons/antd": "^0.12.0",
"@vicons/ionicons5": "^0.12.0",
"@vicons/utils": "^0.1.4",
"@vueuse/core": "^9.2.0",
"axios": "^0.26.1",
"date-fns": "^2.29.2",
"echarts": "^5.3.3",
"@vueuse/core": "^10.7.0",
"axios": "^1.4.0",
"date-fns": "^3.0.6",
"echarts": "^5.4.3",
"lodash-es": "^4.17.21",
"mockjs": "^1.1.0",
"pinia": "^2.0.19",
"pinia": "^2.1.7",
"pinia-plugin-persist": "^1.0.0",
"qs": "^6.11.0",
"vant": "4.0.0-beta.0",
"vue": "^3.2.37",
"vue-router": "4.1.5",
"vue-types": "^4.2.1"
"qs": "^6.11.2",
"vant": "^4.8.1",
"vue": "^3.3.13",
"vue-router": "4.2.5"
},
"devDependencies": {
"@commitlint/cli": "^17.1.2",
"@commitlint/config-conventional": "^17.1.0",
"@types/fs-extra": "^9.0.13",
"@types/mockjs": "^1.0.6",
"@types/node": "^18.7.1",
"@types/qs": "^6.9.7",
"@typescript-eslint/eslint-plugin": "^5.33.1",
"@typescript-eslint/parser": "^5.33.1",
"@vitejs/plugin-vue": "^3.0.3",
"@vue/compiler-sfc": "^3.2.37",
"@vue/eslint-config-typescript": "^11.0.0",
"autoprefixer": "^10.4.8",
"@antfu/eslint-config": "^2.6.3",
"@commitlint/cli": "^18.4.3",
"@commitlint/config-conventional": "^18.4.3",
"@types/fs-extra": "^11.0.4",
"@types/mockjs": "^1.0.10",
"@types/node": "^20.10.5",
"@types/qs": "^6.9.11",
"@unocss/eslint-plugin": "^0.58.4",
"@unocss/transformer-directives": "^0.58.4",
"@unocss/transformer-variant-group": "^0.58.4",
"@vitejs/plugin-vue": "^5.0.0",
"autoprefixer": "^10.4.16",
"cross-env": "^7.0.3",
"cz-git": "^1.3.12",
"dotenv": "^16.0.1",
"eslint": "^8.22.0",
"eslint-config-prettier": "^8.5.0",
"eslint-define-config": "^1.6.0",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-vue": "^9.3.0",
"cz-git": "^1.8.0",
"dotenv": "^16.3.1",
"eslint": "^8.56.0",
"eslint-plugin-format": "^0.1.0",
"esno": "^0.16.3",
"fs-extra": "^10.1.0",
"husky": "^8.0.1",
"less": "^4.1.3",
"lint-staged": "^13.0.3",
"only-allow": "^1.1.1",
"fs-extra": "^11.2.0",
"less": "^4.2.0",
"lint-staged": "^15.2.0",
"only-allow": "^1.2.1",
"picocolors": "^1.0.0",
"postcss": "^8.4.16",
"postcss-html": "^1.0.0",
"postcss": "^8.4.32",
"postcss-html": "^1.5.0",
"postcss-less": "^6.0.0",
"postcss-mobile-forever": "^4.0.0",
"prettier": "^2.7.1",
"prettier": "^3.2.4",
"rimraf": "^3.0.2",
"rollup": "^2.79.0",
"rollup-plugin-visualizer": "^5.8.1",
"stylelint": "^14.10.0",
"stylelint-config-prettier": "^9.0.3",
"stylelint-config-recommended": "^9.0.0",
"stylelint-config-recommended-vue": "^1.4.0",
"stylelint-config-standard": "^27.0.0",
"stylelint-order": "^5.0.0",
"typescript": "^4.6.4",
"unplugin-vue-components": "^0.22.4",
"vite": "^3.0.0",
"rollup": "^4.9.1",
"rollup-plugin-visualizer": "^5.11.0",
"simple-git-hooks": "^2.9.0",
"stylelint": "^16.2.0",
"stylelint-config-recommended": "^14.0.0",
"stylelint-config-recommended-vue": "^1.5.0",
"stylelint-config-standard": "^36.0.0",
"stylelint-config-standard-less": "^3.0.1",
"stylelint-order": "^6.0.4",
"stylelint-prettier": "^5.0.0",
"typescript": "^5.3.3",
"unocss": "^0.58.5",
"unplugin-vue-components": "^0.26.0",
"vite": "^5.0.10",
"vite-plugin-compression": "^0.5.1",
"vite-plugin-html": "^3.2.0",
"vite-plugin-mock": "^2.9.6",
"vite-plugin-html": "^3.2.1",
"vite-plugin-mock": "^2.9.8",
"vite-plugin-svg-icons": "^2.0.1",
"vite-plugin-vue-setup-extend": "^0.4.0",
"vite-plugin-windicss": "^1.8.7",
"vue-eslint-parser": "^9.0.0",
"vue-tsc": "^1.0.5"
"vue-tsc": "^1.8.27"
},
"engines": {
"node": ">=15",
"pnpm": ">=7"
"simple-git-hooks": {
"pre-commit": "pnpm lint-staged",
"commit-msg": "npx --no-install commitlint --edit $1"
},
"lint-staged": {
"*.{js,jsx,ts,tsx}": [
"eslint --fix",
"prettier --write"
],
"{!(package)*.json,*.code-snippets,.!(browserslist)*rc}": [
"prettier --write--parser json"
],
"package.json": [
"prettier --write"
],
"*.vue": [
"eslint --fix",
"prettier --write",
"stylelint --fix"
],
"*.{scss,less,styl,html}": [
"stylelint --fix",
"prettier --write"
],
"*.md": [
"prettier --write"
]
"*": "eslint --fix"
},
"config": {
"commitizen": {

5646
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

22
postcss.config.js
View File

@ -10,8 +10,13 @@
* 改用postcss-px-to-viewport-8-plugin替代
*/
const autoprefixer = require('autoprefixer');
const viewport = require('postcss-mobile-forever');
// FIXME: 升级 vite5 后控制台警告：The CJS build of Vite's Node API is deprecated.
// 将 "type": "module" 添加到 package.json 后，
// 所有*.js文件现在都解释为 ESM，并且需要使用 ESM 语法。您可以使用扩展名重命名文件.cjs来继续使用 CJS。
// require 是cjs 语法
import autoprefixer from 'autoprefixer'
import viewport from 'postcss-mobile-forever'
const baseViewportOpts = {
appSelector: '#app', // 根元素选择器，用于设置桌面端和横屏时的居中样式
@ -21,7 +26,8 @@ const baseViewportOpts = {
propList: [
'*',
// '!font-size'
], // 能转化为vw的属性列表，!font-size表示font-size后面的单位不会被转换
],
// 能转化为vw的属性列表，!font-size表示font-size后面的单位不会被转换
// 指定不转换为视口单位的类，可以自定义，可以无限添加，建议定义一至两个通用的类名
// 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。
// 下面配置表示类名中含有'keep-px'以及'.ignore'类都不会被转换
@ -31,16 +37,16 @@ const baseViewportOpts = {
// exclude: [/node_modules/], // 忽略某些文件夹下的文件或特定文件
// include: [/src/], // 如果设置了include，那将只有匹配到的文件才会被转换
mobileUnit: 'vw', // 指定需要转换成的视口单位，建议使用 vw
rootContainingBlockSelectorList: ["van-popup--bottom"], // 指定包含块是根包含块的选择器，这种选择器的定位通常是 `fixed`，但是选择器内没有 `position: fixed`
};
rootContainingBlockSelectorList: ['van-popup--bottom'], // 指定包含块是根包含块的选择器，这种选择器的定位通常是 `fixed`，但是选择器内没有 `position: fixed`
}
module.exports = {
export default {
plugins: [
autoprefixer(),
viewport({
...baseViewportOpts,
// 只将 vant 转为 350 设计稿的 viewport，其它样式的视图宽度为 750
viewportWidth: (file) => (file.includes('node_modules/vant/') ? 375 : 750),
viewportWidth: file => (file.includes('node_modules/vant/') ? 375 : 750),
}),
],
};
}

20
prettier.config.js
View File

@ -1,20 +0,0 @@
module.exports = {
printWidth: 100,
tabWidth: 2,
useTabs: false,
semi: true,
vueIndentScriptAndStyle: true,
singleQuote: true,
quoteProps: 'as-needed',
bracketSpacing: true,
trailingComma: 'es5',
jsxBracketSameLine: false,
jsxSingleQuote: false,
arrowParens: 'always',
insertPragma: false,
requirePragma: false,
proseWrap: 'never',
htmlWhitespaceSensitivity: 'strict',
endOfLine: 'auto',
rangeStart: 0,
};

108
src/App.vue
View File

@ -1,7 +1,7 @@
<template>
<vanConfigProvider :theme="getDarkMode" :theme-vars="getThemeVars()">
<routerView v-slot="{ Component }">
<div class="absolute top-0 bottom-0 w-full overflow-hidden">
<div class="absolute bottom-0 top-0 w-full overflow-hidden">
<transition :name="getTransitionName" mode="out-in" appear>
<keep-alive v-if="keepAliveComponents" :include="keepAliveComponents">
<component :is="Component" />
@ -13,64 +13,64 @@
</template>
<script setup lang="ts">
import { computed, unref } from 'vue';
import { darken, lighten } from '@/utils/index';
import { useRouteStore } from '@/store/modules/route';
import { useDesignSetting } from '@/hooks/setting/useDesignSetting';
import { computed, unref } from 'vue'
import { darken, lighten } from '@/utils/index'
import { useRouteStore } from '@/store/modules/route'
import { useDesignSetting } from '@/hooks/setting/useDesignSetting'
const routeStore = useRouteStore();
const { getDarkMode, getAppTheme, getIsPageAnimate, getPageAnimateType } = useDesignSetting();
const routeStore = useRouteStore()
const { getDarkMode, getAppTheme, getIsPageAnimate, getPageAnimateType } = useDesignSetting()
// 需要缓存的路由组件
const keepAliveComponents = computed(() => routeStore.keepAliveComponents);
// 需要缓存的路由组件
const keepAliveComponents = computed(() => routeStore.keepAliveComponents)
const getThemeVars = () => {
const appTheme = unref(getAppTheme);
const darkenStr = darken(appTheme, 25);
const lightenStr = lighten(appTheme, 10);
function getThemeVars() {
const appTheme = unref(getAppTheme)
const darkenStr = darken(appTheme, 25)
const lightenStr = lighten(appTheme, 10)
return {
actionSheetCancelTextColor: appTheme,
buttonPrimaryBackground: appTheme,
buttonPrimaryBorderColor: appTheme,
radioCheckedIconColor: appTheme,
sliderActiveBackground: appTheme,
cascaderActiveColor: appTheme,
checkboxCheckedIconColor: appTheme,
numberKeyboardButtonBackground: appTheme,
pickerLoadingIconColor: appTheme,
calendarRangeEdgeBackground: appTheme,
calendarRangeMiddleColor: appTheme,
calendarSelectedDayBackground: appTheme,
stepperButtonRoundThemeColor: appTheme,
switchOnBackground: appTheme,
dialogConfirmButtonTextColor: appTheme,
dropdownMenuOptionActiveColor: appTheme,
dropdownMenuTitleActiveTextColor: appTheme,
notifyPrimaryBackground: appTheme,
circleColor: appTheme,
noticeBarBackground: lightenStr,
noticeBarTextColor: darkenStr,
progressColor: appTheme,
progressPivotBackground: appTheme,
stepActiveColor: appTheme,
stepFinishLineColor: appTheme,
swipeIndicatorActiveBackground: appTheme,
tagPrimaryColor: appTheme,
navBarIconColor: appTheme,
navBarTextColor: appTheme,
paginationItemDefaultColor: appTheme,
sidebarSelectedBorderColor: appTheme,
tabsDefaultColor: appTheme,
tabsBottomBarColor: appTheme,
tabbarItemActiveColor: appTheme,
treeSelectItemActiveColor: appTheme,
};
};
return {
actionSheetCancelTextColor: appTheme,
buttonPrimaryBackground: appTheme,
buttonPrimaryBorderColor: appTheme,
radioCheckedIconColor: appTheme,
sliderActiveBackground: appTheme,
cascaderActiveColor: appTheme,
checkboxCheckedIconColor: appTheme,
numberKeyboardButtonBackground: appTheme,
pickerLoadingIconColor: appTheme,
calendarRangeEdgeBackground: appTheme,
calendarRangeMiddleColor: appTheme,
calendarSelectedDayBackground: appTheme,
stepperButtonRoundThemeColor: appTheme,
switchOnBackground: appTheme,
dialogConfirmButtonTextColor: appTheme,
dropdownMenuOptionActiveColor: appTheme,
dropdownMenuTitleActiveTextColor: appTheme,
notifyPrimaryBackground: appTheme,
circleColor: appTheme,
noticeBarBackground: lightenStr,
noticeBarTextColor: darkenStr,
progressColor: appTheme,
progressPivotBackground: appTheme,
stepActiveColor: appTheme,
stepFinishLineColor: appTheme,
swipeIndicatorActiveBackground: appTheme,
tagPrimaryColor: appTheme,
navBarIconColor: appTheme,
navBarTextColor: appTheme,
paginationItemDefaultColor: appTheme,
sidebarSelectedBorderColor: appTheme,
tabsDefaultColor: appTheme,
tabsBottomBarColor: appTheme,
tabbarItemActiveColor: appTheme,
treeSelectItemActiveColor: appTheme,
}
}
const getTransitionName = computed(() => {
return unref(getIsPageAnimate) ? unref(getPageAnimateType) : undefined;
});
const getTransitionName = computed(() => {
return unref(getIsPageAnimate) ? unref(getPageAnimateType) : undefined
})
</script>
<style lang="less">

20
src/api/system/user.ts
View File

@ -1,9 +1,9 @@
import { http } from '@/utils/http/axios';
import { http } from '@/utils/http/axios'
export interface BasicResponseModel<T = any> {
code: number;
message: string;
result: T;
code: number
message: string
result: T
}
/**
@ -18,8 +18,8 @@ export function login(params: any) {
},
{
isTransformResponse: false,
}
);
},
)
}
/**
@ -29,7 +29,7 @@ export function getUserInfo() {
return http.request({
url: '/getUserInfo',
method: 'get',
});
})
}
/**
@ -39,7 +39,7 @@ export function doLogout() {
return http.request({
url: '/logout',
method: 'POST',
});
})
}
/**
@ -54,6 +54,6 @@ export function changePassword(params: any, uid: any) {
},
{
isTransformResponse: false,
}
);
},
)
}

73
src/components/SvgIcon.vue
View File

@ -5,44 +5,45 @@
</template>
<script lang="ts">
import type { CSSProperties } from 'vue';
import { defineComponent, computed } from 'vue';
import type { CSSProperties } from 'vue'
import { computed, defineComponent } from 'vue'
export default defineComponent({
name: 'SvgIcon',
props: {
prefix: {
type: String,
default: 'icon',
},
name: {
type: String,
required: true,
},
size: {
type: [Number, String],
default: 16,
},
color: {
type: String,
default: '#333',
},
export default defineComponent({
name: 'SvgIcon',
props: {
prefix: {
type: String,
default: 'icon',
},
setup(props) {
const symbolId = computed(() => `#${props.prefix}-${props.name}`);
const getStyle = computed((): CSSProperties => {
const { size } = props;
let s = `${size}`;
s = `${s.replace('px', '')}px`;
return {
width: s,
height: s,
};
});
return { symbolId, getStyle };
name: {
type: String,
required: true,
},
});
size: {
type: [Number, String],
default: 16,
},
color: {
type: String,
default: '#333',
},
},
setup(props) {
const symbolId = computed(() => `#${props.prefix}-${props.name}`)
const getStyle = computed((): CSSProperties => {
const { size } = props
let s = `${size}`
s = `${s.replace('px', '')}px`
return {
width: s,
height: s,
}
})
return { symbolId, getStyle }
},
})
</script>
<style scoped lang="less"></style>

16
src/enums/breakpointEnum.ts
View File

@ -16,13 +16,13 @@ export enum screenEnum {
XXL = 1600,
}
const screenMap = new Map<sizeEnum, number>();
const screenMap = new Map<sizeEnum, number>()
screenMap.set(sizeEnum.XS, screenEnum.XS);
screenMap.set(sizeEnum.SM, screenEnum.SM);
screenMap.set(sizeEnum.MD, screenEnum.MD);
screenMap.set(sizeEnum.LG, screenEnum.LG);
screenMap.set(sizeEnum.XL, screenEnum.XL);
screenMap.set(sizeEnum.XXL, screenEnum.XXL);
screenMap.set(sizeEnum.XS, screenEnum.XS)
screenMap.set(sizeEnum.SM, screenEnum.SM)
screenMap.set(sizeEnum.MD, screenEnum.MD)
screenMap.set(sizeEnum.LG, screenEnum.LG)
screenMap.set(sizeEnum.XL, screenEnum.XL)
screenMap.set(sizeEnum.XXL, screenEnum.XXL)
export { screenMap };
export { screenMap }

10
src/enums/cacheEnum.ts
View File

@ -1,14 +1,14 @@
// token key
export const TOKEN_KEY = 'TOKEN';
export const TOKEN_KEY = 'TOKEN'
// user info key
export const USER_INFO_KEY = 'USER__INFO__';
export const USER_INFO_KEY = 'USER__INFO__'
// role info key
export const ROLES_KEY = 'ROLES__KEY__';
export const ROLES_KEY = 'ROLES__KEY__'
// base global local key
export const BASE_LOCAL_CACHE_KEY = 'LOCAL__CACHE__KEY__';
export const BASE_LOCAL_CACHE_KEY = 'LOCAL__CACHE__KEY__'
// base global session key
export const BASE_SESSION_CACHE_KEY = 'SESSION__CACHE__KEY__';
export const BASE_SESSION_CACHE_KEY = 'SESSION__CACHE__KEY__'

1
src/enums/pageEnum.ts
View File

@ -1,3 +1,4 @@
/* eslint-disable ts/no-duplicate-enum-values */
export enum PageEnum {
// 登录
BASE_LOGIN = '/login',

43
src/hooks/core/useTimeout.ts
View File

@ -1,47 +1,48 @@
import { ref, watch } from 'vue';
import { tryOnUnmounted } from '@vueuse/core';
import { isFunction } from '@/utils/is';
import { ref, watch } from 'vue'
import { tryOnUnmounted } from '@vueuse/core'
import { isFunction } from '@/utils/is'
export function useTimeoutFn(handle: Fn<any>, wait: number, native = false) {
if (!isFunction(handle)) {
throw new Error('handle is not Function!');
throw new Error('handle is not Function!')
}
const { readyRef, stop, start } = useTimeoutRef(wait);
const { readyRef, stop, start } = useTimeoutRef(wait)
if (native) {
handle();
} else {
handle()
}
else {
watch(
readyRef,
(maturity) => {
maturity && handle();
maturity && handle()
},
{ immediate: false }
);
{ immediate: false },
)
}
return { readyRef, stop, start };
return { readyRef, stop, start }
}
export function useTimeoutRef(wait: number) {
const readyRef = ref(false);
const readyRef = ref(false)
let timer: TimeoutHandle;
let timer: TimeoutHandle
function stop(): void {
readyRef.value = false;
timer && window.clearTimeout(timer);
readyRef.value = false
timer && window.clearTimeout(timer)
}
function start(): void {
stop();
stop()
timer = setTimeout(() => {
readyRef.value = true;
}, wait);
readyRef.value = true
}, wait)
}
start();
start()
tryOnUnmounted(stop);
tryOnUnmounted(stop)
return { readyRef, stop, start };
return { readyRef, stop, start }
}

92
src/hooks/event/useBreakpoint.ts
View File

@ -1,18 +1,19 @@
import { ref, computed, ComputedRef, unref } from 'vue';
import { useEventListener } from '@/hooks/event/useEventListener';
import { screenMap, sizeEnum, screenEnum } from '@/enums/breakpointEnum';
import type { ComputedRef } from 'vue'
import { computed, ref, unref } from 'vue'
import { useEventListener } from '@/hooks/event/useEventListener'
import { screenEnum, screenMap, sizeEnum } from '@/enums/breakpointEnum'
let globalScreenRef: ComputedRef<sizeEnum | undefined>;
let globalWidthRef: ComputedRef<number>;
let globalRealWidthRef: ComputedRef<number>;
let globalScreenRef: ComputedRef<sizeEnum | undefined>
let globalWidthRef: ComputedRef<number>
let globalRealWidthRef: ComputedRef<number>
export interface CreateCallbackParams {
screen: ComputedRef<sizeEnum | undefined>;
width: ComputedRef<number>;
realWidth: ComputedRef<number>;
screenEnum: typeof screenEnum;
screenMap: Map<sizeEnum, number>;
sizeEnum: typeof sizeEnum;
screen: ComputedRef<sizeEnum | undefined>
width: ComputedRef<number>
realWidth: ComputedRef<number>
screenEnum: typeof screenEnum
screenMap: Map<sizeEnum, number>
sizeEnum: typeof sizeEnum
}
export function useBreakpoint() {
@ -21,35 +22,40 @@ export function useBreakpoint() {
widthRef: globalWidthRef,
screenEnum,
realWidthRef: globalRealWidthRef,
};
}
}
// Just call it once
export function createBreakpointListen(fn?: (opt: CreateCallbackParams) => void) {
const screenRef = ref<sizeEnum>(sizeEnum.XL);
const realWidthRef = ref(window.innerWidth);
const screenRef = ref<sizeEnum>(sizeEnum.XL)
const realWidthRef = ref(window.innerWidth)
function getWindowWidth() {
const width = document.body.clientWidth;
const xs = screenMap.get(sizeEnum.XS)!;
const sm = screenMap.get(sizeEnum.SM)!;
const md = screenMap.get(sizeEnum.MD)!;
const lg = screenMap.get(sizeEnum.LG)!;
const xl = screenMap.get(sizeEnum.XL)!;
const width = document.body.clientWidth
const xs = screenMap.get(sizeEnum.XS)!
const sm = screenMap.get(sizeEnum.SM)!
const md = screenMap.get(sizeEnum.MD)!
const lg = screenMap.get(sizeEnum.LG)!
const xl = screenMap.get(sizeEnum.XL)!
if (width < xs) {
screenRef.value = sizeEnum.XS;
} else if (width < sm) {
screenRef.value = sizeEnum.SM;
} else if (width < md) {
screenRef.value = sizeEnum.MD;
} else if (width < lg) {
screenRef.value = sizeEnum.LG;
} else if (width < xl) {
screenRef.value = sizeEnum.XL;
} else {
screenRef.value = sizeEnum.XXL;
screenRef.value = sizeEnum.XS
}
realWidthRef.value = width;
else if (width < sm) {
screenRef.value = sizeEnum.SM
}
else if (width < md) {
screenRef.value = sizeEnum.MD
}
else if (width < lg) {
screenRef.value = sizeEnum.LG
}
else if (width < xl) {
screenRef.value = sizeEnum.XL
}
else {
screenRef.value = sizeEnum.XXL
}
realWidthRef.value = width
}
useEventListener({
@ -57,16 +63,16 @@ export function createBreakpointListen(fn?: (opt: CreateCallbackParams) => void)
name: 'resize',
listener: () => {
getWindowWidth();
resizeFn();
getWindowWidth()
resizeFn()
},
// wait: 100,
});
})
getWindowWidth();
globalScreenRef = computed(() => unref(screenRef));
globalWidthRef = computed((): number => screenMap.get(unref(screenRef)!)!);
globalRealWidthRef = computed((): number => unref(realWidthRef));
getWindowWidth()
globalScreenRef = computed(() => unref(screenRef))
globalWidthRef = computed((): number => screenMap.get(unref(screenRef)!)!)
globalRealWidthRef = computed((): number => unref(realWidthRef))
function resizeFn() {
fn?.({
@ -76,14 +82,14 @@ export function createBreakpointListen(fn?: (opt: CreateCallbackParams) => void)
screenEnum,
screenMap,
sizeEnum,
});
})
}
resizeFn();
resizeFn()
return {
screenRef: globalScreenRef,
screenEnum,
widthRef: globalWidthRef,
realWidthRef: globalRealWidthRef,
};
}
}

61
src/hooks/event/useEventListener.ts
View File

@ -1,18 +1,18 @@
import type { Ref } from 'vue';
import type { Ref } from 'vue'
import { ref, watch, unref } from 'vue';
import { useThrottleFn, useDebounceFn } from '@vueuse/core';
import { ref, unref, watch } from 'vue'
import { useDebounceFn, useThrottleFn } from '@vueuse/core'
export type RemoveEventFn = () => void;
export type RemoveEventFn = () => void
export interface UseEventParams {
el?: Element | Ref<Element | undefined> | Window | any;
name: string;
listener: EventListener;
options?: boolean | AddEventListenerOptions;
autoRemove?: boolean;
isDebounce?: boolean;
wait?: number;
el?: Element | Ref<Element | undefined> | Window | any
name: string
listener: EventListener
options?: boolean | AddEventListenerOptions
autoRemove?: boolean
isDebounce?: boolean
wait?: number
}
export function useEventListener({
@ -24,39 +24,38 @@ export function useEventListener({
isDebounce = true,
wait = 80,
}: UseEventParams): { removeEvent: RemoveEventFn } {
/* eslint-disable-next-line */
let remove: RemoveEventFn = () => {
};
const isAddRef = ref(false);
let remove: RemoveEventFn = () => {
}
const isAddRef = ref(false)
if (el) {
const element: Ref<Element> = ref(el as Element);
const element: Ref<Element> = ref(el as Element)
const handler = isDebounce ? useDebounceFn(listener, wait) : useThrottleFn(listener, wait);
const realHandler = wait ? handler : listener;
const handler = isDebounce ? useDebounceFn(listener, wait) : useThrottleFn(listener, wait)
const realHandler = wait ? handler : listener
const removeEventListener = (e: Element) => {
isAddRef.value = true;
e.removeEventListener(name, realHandler, options);
};
const addEventListener = (e: Element) => e.addEventListener(name, realHandler, options);
isAddRef.value = true
e.removeEventListener(name, realHandler, options)
}
const addEventListener = (e: Element) => e.addEventListener(name, realHandler, options)
const removeWatch = watch(
element,
(v, _ov, cleanUp) => {
if (v) {
!unref(isAddRef) && addEventListener(v);
!unref(isAddRef) && addEventListener(v)
cleanUp(() => {
autoRemove && removeEventListener(v);
});
autoRemove && removeEventListener(v)
})
}
},
{ immediate: true }
);
{ immediate: true },
)
remove = () => {
removeEventListener(element.value);
removeWatch();
};
removeEventListener(element.value)
removeWatch()
}
}
return { removeEvent: remove };
return { removeEvent: remove }
}

37
src/hooks/event/useWindowSizeFn.ts
View File

@ -1,36 +1,35 @@
import { tryOnMounted, tryOnUnmounted } from '@vueuse/core';
import { useDebounceFn } from '@vueuse/core';
import { tryOnMounted, tryOnUnmounted, useDebounceFn } from '@vueuse/core'
interface WindowSizeOptions {
once?: boolean;
immediate?: boolean;
listenerOptions?: AddEventListenerOptions | boolean;
once?: boolean
immediate?: boolean
listenerOptions?: AddEventListenerOptions | boolean
}
export function useWindowSizeFn<T>(fn: Fn<T>, wait = 150, options?: WindowSizeOptions) {
let handler = () => {
fn();
};
const handleSize = useDebounceFn(handler, wait);
handler = handleSize;
fn()
}
const handleSize = useDebounceFn(handler, wait)
handler = handleSize
const start = () => {
if (options && options.immediate) {
handler();
handler()
}
window.addEventListener('resize', handler);
};
window.addEventListener('resize', handler)
}
const stop = () => {
window.removeEventListener('resize', handler);
};
window.removeEventListener('resize', handler)
}
tryOnMounted(() => {
start();
});
start()
})
tryOnUnmounted(() => {
stop();
});
return [start, stop];
stop()
})
return [start, stop]
}

4
src/hooks/index.ts
View File

@ -1,3 +1,3 @@
import { useAsync } from './use-async';
import { useAsync } from './use-async'
export { useAsync };
export { useAsync }

20
src/hooks/setting/index.ts
View File

@ -1,8 +1,8 @@
import { warn } from '@/utils/log';
import { getAppEnvConfig } from '@/utils/env';
import { GlobConfig } from '#/config';
import { warn } from '@/utils/log'
import { getAppEnvConfig } from '@/utils/env'
import type { GlobConfig } from '#/config'
export const useGlobSetting = (): Readonly<GlobConfig> => {
export function useGlobSetting(): Readonly<GlobConfig> {
const {
VITE_GLOB_APP_TITLE,
VITE_GLOB_APP_TITLE_CN,
@ -12,12 +12,12 @@ export const useGlobSetting = (): Readonly<GlobConfig> => {
VITE_GLOB_UPLOAD_URL,
VITE_GLOB_PROD_MOCK,
VITE_GLOB_IMG_URL,
} = getAppEnvConfig();
} = getAppEnvConfig()
if (!/[a-zA-Z\_]*/.test(VITE_GLOB_APP_SHORT_NAME)) {
warn(
`VITE_GLOB_APP_SHORT_NAME Variables can only be characters/underscores, please modify in the environment variables and re-running.`
);
`VITE_GLOB_APP_SHORT_NAME Variables can only be characters/underscores, please modify in the environment variables and re-running.`,
)
}
// Take global configuration
@ -30,6 +30,6 @@ export const useGlobSetting = (): Readonly<GlobConfig> => {
uploadUrl: VITE_GLOB_UPLOAD_URL,
prodMock: VITE_GLOB_PROD_MOCK,
imgUrl: VITE_GLOB_IMG_URL,
};
return glob as Readonly<GlobConfig>;
};
}
return glob as Readonly<GlobConfig>
}

18
src/hooks/setting/useDesignSetting.ts
View File

@ -1,18 +1,18 @@
import { computed } from 'vue';
import { useDesignSettingStore } from '@/store/modules/designSetting';
import { computed } from 'vue'
import { useDesignSettingStore } from '@/store/modules/designSetting'
export function useDesignSetting() {
const designStore = useDesignSettingStore();
const designStore = useDesignSettingStore()
const getDarkMode = computed(() => designStore.darkMode);
const getDarkMode = computed(() => designStore.darkMode)
const getAppTheme = computed(() => designStore.appTheme);
const getAppTheme = computed(() => designStore.appTheme)
const getAppThemeList = computed(() => designStore.appThemeList);
const getAppThemeList = computed(() => designStore.appThemeList)
const getIsPageAnimate = computed(() => designStore.isPageAnimate);
const getIsPageAnimate = computed(() => designStore.isPageAnimate)
const getPageAnimateType = computed(() => designStore.pageAnimateType);
const getPageAnimateType = computed(() => designStore.pageAnimateType)
return {
getDarkMode,
@ -20,5 +20,5 @@ export function useDesignSetting() {
getAppThemeList,
getIsPageAnimate,
getPageAnimateType,
};
}
}

19
src/hooks/use-async.ts
View File

@ -1,15 +1,16 @@
import { isReactive, isRef } from 'vue';
import { isReactive, isRef } from 'vue'
function setLoading(loading, val) {
if (loading != undefined && isRef(loading)) {
loading.value = val;
} else if (loading != undefined && isReactive(loading)) {
loading.loading = val;
if (loading !== undefined && isRef(loading)) {
loading.value = val
}
else if (loading !== undefined && isReactive(loading)) {
loading.loading = val
}
}
export const useAsync = async (func: Promise<any>, loading: any): Promise<any> => {
setLoading(loading, true);
export async function useAsync(func: Promise<any>, loading: any): Promise<any> {
setLoading(loading, true)
return await func.finally(() => setLoading(loading, false));
};
return await func.finally(() => setLoading(loading, false))
}

18
src/hooks/useDomWidth.ts
View File

@ -1,23 +1,23 @@
import { ref, onMounted, onUnmounted } from 'vue';
import { debounce } from 'lodash-es';
import { onMounted, onUnmounted, ref } from 'vue'
import { debounce } from 'lodash-es'
/**
* description: 获取页面宽度
*/
export function useDomWidth() {
const domWidth = ref(window.innerWidth);
const domWidth = ref(window.innerWidth)
function resize() {
domWidth.value = document.body.clientWidth;
domWidth.value = document.body.clientWidth
}
onMounted(() => {
window.addEventListener('resize', debounce(resize, 80));
});
window.addEventListener('resize', debounce(resize, 80))
})
onUnmounted(() => {
window.removeEventListener('resize', resize);
});
window.removeEventListener('resize', resize)
})
return domWidth;
return domWidth
}

26
src/hooks/useOnline.ts
View File

@ -1,30 +1,30 @@
import { ref, onMounted, onUnmounted } from 'vue';
import { onMounted, onUnmounted, ref } from 'vue'
/**
* @description 用户网络是否可用
* */
*/
export function useOnline() {
const online = ref(true);
const online = ref(true)
const showStatus = (val) => {
online.value = typeof val == 'boolean' ? val : val.target.online;
};
online.value = typeof val == 'boolean' ? val : val.target.online
}
// 在页面加载后，设置正确的网络状态
navigator.onLine ? showStatus(true) : showStatus(false);
navigator.onLine ? showStatus(true) : showStatus(false)
onMounted(() => {
// 开始监听网络状态的变化
window.addEventListener('online', showStatus);
window.addEventListener('online', showStatus)
window.addEventListener('offline', showStatus);
});
window.addEventListener('offline', showStatus)
})
onUnmounted(() => {
// 移除监听网络状态的变化
window.removeEventListener('online', showStatus);
window.removeEventListener('online', showStatus)
window.removeEventListener('offline', showStatus);
});
window.removeEventListener('offline', showStatus)
})
return { online };
return { online }
}

58
src/hooks/useTime.ts
View File

@ -1,33 +1,33 @@
import { ref, onMounted, onUnmounted } from 'vue';
import { onMounted, onUnmounted, ref } from 'vue'
/**
* @description 获取本地时间
*/
export function useTime() {
let timer; // 定时器
const year = ref(0); // 年份
const month = ref(0); // 月份
const week = ref(''); // 星期几
const day = ref(0); // 天数
const hour = ref<number | string>(0); // 小时
const minute = ref<number | string>(0); // 分钟
const second = ref(0); // 秒
let timer // 定时器
const year = ref(0) // 年份
const month = ref(0) // 月份
const week = ref('') // 星期几
const day = ref(0) // 天数
const hour = ref<number | string>(0) // 小时
const minute = ref<number | string>(0) // 分钟
const second = ref(0) // 秒
// 更新时间
const updateTime = () => {
const date = new Date();
year.value = date.getFullYear();
month.value = date.getMonth() + 1;
week.value = '日一二三四五六'.charAt(date.getDay());
day.value = date.getDate();
hour.value =
(date.getHours() + '')?.padStart(2, '0') ||
new Intl.NumberFormat(undefined, { minimumIntegerDigits: 2 }).format(date.getHours());
minute.value =
(date.getMinutes() + '')?.padStart(2, '0') ||
new Intl.NumberFormat(undefined, { minimumIntegerDigits: 2 }).format(date.getMinutes());
second.value = date.getSeconds();
};
const date = new Date()
year.value = date.getFullYear()
month.value = date.getMonth() + 1
week.value = '日一二三四五六'.charAt(date.getDay())
day.value = date.getDate()
hour.value
= (`${date.getHours()}`)?.padStart(2, '0')
|| new Intl.NumberFormat(undefined, { minimumIntegerDigits: 2 }).format(date.getHours())
minute.value
= (`${date.getMinutes()}`)?.padStart(2, '0')
|| new Intl.NumberFormat(undefined, { minimumIntegerDigits: 2 }).format(date.getMinutes())
second.value = date.getSeconds()
}
// 原生时间格式化
// new Intl.DateTimeFormat('zh', {
@ -40,16 +40,16 @@ export function useTime() {
// hour12: false
// }).format(new Date())
updateTime();
updateTime()
onMounted(() => {
clearInterval(timer);
timer = setInterval(() => updateTime(), 1000);
});
clearInterval(timer)
timer = setInterval(() => updateTime(), 1000)
})
onUnmounted(() => {
clearInterval(timer);
});
clearInterval(timer)
})
return { month, day, hour, minute, second, week };
return { month, day, hour, minute, second, week }
}

113
src/hooks/web/useECharts.ts
View File

@ -1,111 +1,116 @@
import type { EChartsOption } from 'echarts';
import type { Ref } from 'vue';
import type { EChartsOption } from 'echarts'
import type { Ref } from 'vue'
import { useTimeoutFn } from '@/hooks/core/useTimeout';
import { Fn, tryOnUnmounted } from '@vueuse/core';
import { unref, nextTick, watch, computed, ref } from 'vue';
import { useDebounceFn } from '@vueuse/core';
import { useEventListener } from '@/hooks/event/useEventListener';
import { useBreakpoint } from '@/hooks/event/useBreakpoint';
import { useDesignSettingStore } from '@/store/modules/designSetting';
import echarts from '@/utils/lib/echarts';
import type { Fn } from '@vueuse/core'
import { tryOnUnmounted, useDebounceFn } from '@vueuse/core'
import { computed, nextTick, ref, unref, watch } from 'vue'
import { useTimeoutFn } from '@/hooks/core/useTimeout'
import { useEventListener } from '@/hooks/event/useEventListener'
import { useBreakpoint } from '@/hooks/event/useBreakpoint'
import { useDesignSettingStore } from '@/store/modules/designSetting'
import echarts from '@/utils/lib/echarts'
export function useECharts(
elRef: Ref<HTMLDivElement>,
theme: 'light' | 'dark' | 'default' = 'default'
theme: 'light' | 'dark' | 'default' = 'default',
) {
const designStore = useDesignSettingStore();
const designStore = useDesignSettingStore()
const getDarkMode = computed(() => {
return theme === 'default' ? designStore.getDarkMode : theme;
});
return theme === 'default' ? designStore.getDarkMode : theme
})
let chartInstance: echarts.ECharts | null = null;
let resizeFn: Fn = resize;
const cacheOptions = ref({});
let removeResizeFn: Fn = () => {};
resizeFn = useDebounceFn(resize, 200);
let chartInstance: echarts.ECharts | null = null
let resizeFn: Fn = resize
const cacheOptions = ref({})
let removeResizeFn: Fn = () => {}
resizeFn = useDebounceFn(resize, 200)
const getOptions = computed((): EChartsOption => {
if (getDarkMode.value !== 'dark') {
return cacheOptions.value;
return cacheOptions.value
}
return {
backgroundColor: 'transparent',
...cacheOptions.value,
};
});
}
})
function initCharts(t = theme) {
const el = unref(elRef);
const el = unref(elRef)
if (!el || !unref(el)) {
return;
return
}
chartInstance = echarts.init(el, t);
chartInstance = echarts.init(el, t)
const { removeEvent } = useEventListener({
el: window,
name: 'resize',
listener: resizeFn,
});
removeResizeFn = removeEvent;
const { widthRef, screenEnum } = useBreakpoint();
})
removeResizeFn = removeEvent
const { widthRef, screenEnum } = useBreakpoint()
if (unref(widthRef) <= screenEnum.MD || el.offsetHeight === 0) {
useTimeoutFn(() => {
resizeFn();
}, 30);
resizeFn()
}, 30)
}
}
function setOptions(options: EChartsOption, clear = true) {
cacheOptions.value = options;
cacheOptions.value = options
if (unref(elRef)?.offsetHeight === 0) {
useTimeoutFn(() => {
setOptions(unref(getOptions));
}, 30);
return;
setOptions(unref(getOptions))
}, 30)
return
}
nextTick(() => {
useTimeoutFn(() => {
if (!chartInstance) {
initCharts(getDarkMode.value as 'default');
initCharts(getDarkMode.value as 'default')
if (!chartInstance) return;
if (!chartInstance) {
return
}
}
clear && chartInstance?.clear();
clear && chartInstance?.clear()
chartInstance?.setOption(unref(getOptions));
}, 30);
});
chartInstance?.setOption(unref(getOptions))
}, 30)
})
}
function resize() {
chartInstance?.resize();
chartInstance?.resize()
}
watch(
() => getDarkMode.value,
(theme) => {
if (chartInstance) {
chartInstance.dispose();
initCharts(theme as 'default');
setOptions(cacheOptions.value);
chartInstance.dispose()
initCharts(theme as 'default')
setOptions(cacheOptions.value)
}
}
);
},
)
tryOnUnmounted(() => {
if (!chartInstance) return;
removeResizeFn();
chartInstance.dispose();
chartInstance = null;
});
if (!chartInstance) {
return
}
removeResizeFn()
chartInstance.dispose()
chartInstance = null
})
function getInstance(): echarts.ECharts | null {
if (!chartInstance) {
initCharts(getDarkMode.value as 'default');
initCharts(getDarkMode.value as 'default')
}
return chartInstance;
return chartInstance
}
return {
@ -113,5 +118,5 @@ export function useECharts(
resize,
echarts,
getInstance,
};
}
}

57
src/layout/index.vue
View File

@ -1,61 +1,58 @@
<!-- eslint-disable prettier/prettier -->
<template>
<div class="h-screen flex flex-col">
<van-nav-bar v-if="getShowHeader" fixed placeholder :title="getTitle" />
<van-nav-bar v-if="getShowHeader" placeholder fixed :title="getTitle" />
<routerView class="flex-1 overflow-x-hidden">
<template #default="{ Component, route }">
<!--
keep-alive 标签的 include 属性是根据组件的 name 判断的，
所以 index.vue 和 list.vue 等页面 vue 文件里一定要写上 name，
并且与 router 路由表中使用的 name 属性 一致，否则无效
本项目使用了 vite-plugin-vue-setup-extend 插件
可直接在 script 标签上书写 name 如：
<script setup lang="ts" name="DashboardPage">
Vue 3.3 中新引入了 defineOptions 宏声明 name 属性
https://gist.github.com/sxzz/3995fc7251567c7c95de35f45539b9c2
-->
<keep-alive v-if="keepAliveComponents" :include="keepAliveComponents">
<component :is="Component" :key="route.fullPath" />
</keep-alive>
<component v-else :is="Component" :key="route.fullPath" />
<component :is="Component" v-else :key="route.fullPath" />
</template>
</routerView>
<van-tabbar route class="tabbar">
<van-tabbar placeholder route fixed>
<van-tabbar-item
fixed
replace
v-for="menu in getMenus"
:key="menu.name"
replace
:to="menu.path"
:icon="(menu.meta?.icon as string)"
>{{ menu.meta?.title }}
>
{{ menu.meta?.title }}
</van-tabbar-item>
</van-tabbar>
</div>
</template>
<script setup lang="ts">
import { computed } from 'vue';
import { useRoute } from 'vue-router';
import { useRouteStore } from '@/store/modules/route';
import type { ComputedRef } from 'vue'
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import type { RouteRecordRaw } from 'vue-router'
import { useRouteStore } from '@/store/modules/route'
const routeStore = useRouteStore();
// 需要缓存的路由组件
const keepAliveComponents = computed(() => routeStore.keepAliveComponents);
const currentRoute = useRoute();
const routeStore = useRouteStore()
// 需要缓存的路由组件
const keepAliveComponents = computed(() => routeStore.keepAliveComponents)
const currentRoute = useRoute()
const getTitle = computed(() => currentRoute.meta.title as string);
const getTitle = computed(() => currentRoute.meta.title as string)
// 菜单
const getMenus = computed(() =>
routeStore.menus.filter((item) => {
return !item.meta?.innerPage;
})
);
// 菜单
const getMenus: ComputedRef<RouteRecordRaw[]> = computed(() =>
routeStore.menus.filter((item) => {
return !item.meta?.innerPage
}),
)
const getShowHeader = computed(() => !currentRoute.meta.hiddenHeader);
const getShowHeader = computed(() => !currentRoute.meta.hiddenHeader)
</script>
<style scoped lang="less">
.tabbar {
position: fixed;
width: 100%;
}
</style>
<style scoped lang="less"></style>

39
src/main.ts
View File

@ -1,28 +1,31 @@
import 'virtual:windi.css';
import 'vant/es/toast/style';
import 'vant/es/dialog/style';
import 'virtual:uno.css'
import 'vant/es/toast/style'
import 'vant/es/dialog/style'
import '@unocss/reset/tailwind.css'
import '@unocss/reset/tailwind-compat.css'
// Register icon sprite
import 'virtual:svg-icons-register';
import { createApp } from 'vue';
import App from './App.vue';
import { setupStore } from '@/store';
import router, { setupRouter } from './router';
import { updateDarkSign } from './theme';
import 'virtual:svg-icons-register'
import { createApp } from 'vue'
import App from './App.vue'
import router, { setupRouter } from './router'
import { updateDarkSign } from './theme'
import { setupStore } from '@/store'
async function bootstrap() {
const app = createApp(App);
const app = createApp(App)
// 挂载状态管理
setupStore(app);
setupStore(app)
// 挂载路由
setupRouter(app);
await router.isReady();
setupRouter(app)
await router.isReady()
// 路由准备就绪后挂载APP实例
app.mount('#app', true);
app.mount('#app', true)
// 根节点挂载 dark 标识
const appDesignSetting = window.localStorage.getItem('DESIGN-SETTING');
const darkMode = appDesignSetting && JSON.parse(appDesignSetting).darkMode;
updateDarkSign(darkMode);
const appDesignSetting = window.localStorage.getItem('DESIGN-SETTING')
const darkMode = appDesignSetting && JSON.parse(appDesignSetting).darkMode
updateDarkSign(darkMode)
}
void bootstrap();
void bootstrap()

12
src/router/base.ts
View File

@ -1,7 +1,7 @@
import { RouteRecordRaw } from 'vue-router';
import { PageEnum } from '@/enums/pageEnum';
import type { RouteRecordRaw } from 'vue-router'
import { PageEnum } from '@/enums/pageEnum'
const Layout = () => import('@/layout/index.vue');
const Layout = () => import('@/layout/index.vue')
// 404 on a page
export const ErrorPageRoute: RouteRecordRaw = {
@ -23,7 +23,7 @@ export const ErrorPageRoute: RouteRecordRaw = {
},
},
],
};
}
export const RootRoute: RouteRecordRaw = {
path: '/',
@ -32,7 +32,7 @@ export const RootRoute: RouteRecordRaw = {
meta: {
title: 'Root',
},
};
}
export const LoginRoute: RouteRecordRaw = {
path: '/login',
@ -41,4 +41,4 @@ export const LoginRoute: RouteRecordRaw = {
meta: {
title: '登录',
},
};
}

29
src/router/index.ts
View File

@ -1,31 +1,32 @@
import { App } from 'vue';
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
import { LoginRoute, RootRoute, ErrorPageRoute } from '@/router/base';
import { createRouterGuards } from './router-guards';
import { useRouteStoreWidthOut } from '@/store/modules/route';
import type { App } from 'vue'
import type { RouteRecordRaw } from 'vue-router'
import { createRouter, createWebHashHistory } from 'vue-router'
import { createRouterGuards } from './router-guards'
import routeModuleList from './modules'
import { ErrorPageRoute, LoginRoute, RootRoute } from '@/router/base'
import { useRouteStoreWidthOut } from '@/store/modules/route'
// 菜单
import routeModuleList from './modules';
// 普通路由
export const constantRouter: RouteRecordRaw[] = [LoginRoute, RootRoute, ErrorPageRoute];
export const constantRouter: RouteRecordRaw[] = [LoginRoute, RootRoute, ErrorPageRoute]
const routeStore = useRouteStoreWidthOut();
const routeStore = useRouteStoreWidthOut()
routeStore.setMenus(routeModuleList);
routeStore.setRouters(constantRouter.concat(routeModuleList));
routeStore.setMenus(routeModuleList)
routeStore.setRouters(constantRouter.concat(routeModuleList))
const router = createRouter({
history: createWebHashHistory(''),
routes: constantRouter.concat(...routeModuleList),
strict: true,
scrollBehavior: () => ({ left: 0, top: 0 }),
});
})
export function setupRouter(app: App) {
app.use(router);
app.use(router)
// 创建路由守卫
createRouterGuards(router);
createRouterGuards(router)
}
export default router;
export default router

8
src/router/modules.ts
View File

@ -1,6 +1,6 @@
import { RouteRecordRaw } from 'vue-router';
import type { RouteRecordRaw } from 'vue-router'
const Layout = () => import('@/layout/index.vue');
const Layout = () => import('@/layout/index.vue')
const routeModuleList: Array<RouteRecordRaw> = [
{
@ -121,6 +121,6 @@ const routeModuleList: Array<RouteRecordRaw> = [
},
component: () => import('@/views/my/ThemeSetting.vue'),
},
];
]
export default routeModuleList;
export default routeModuleList

75
src/router/router-guards.ts
View File

@ -1,88 +1,91 @@
import { isNavigationFailure, Router } from 'vue-router';
import { useRouteStoreWidthOut } from '@/store/modules/route';
import { useUserStoreWidthOut } from '@/store/modules/user';
import { ACCESS_TOKEN } from '@/store/mutation-types';
import { storage } from '@/utils/Storage';
import { PageEnum } from '@/enums/pageEnum';
import type { Router } from 'vue-router'
import { isNavigationFailure } from 'vue-router'
import { useRouteStoreWidthOut } from '@/store/modules/route'
import { useUserStoreWidthOut } from '@/store/modules/user'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import { storage } from '@/utils/Storage'
import { PageEnum } from '@/enums/pageEnum'
const LOGIN_PATH = PageEnum.BASE_LOGIN;
const LOGIN_PATH = PageEnum.BASE_LOGIN
const whitePathList = [LOGIN_PATH]; // no redirect whitelist
const whitePathList = [LOGIN_PATH] // no redirect whitelist
export function createRouterGuards(router: Router) {
router.beforeEach(async (to, from, next) => {
// to: 即将要进入的目标
// from: 当前导航正要离开的路由
const userStore = useUserStoreWidthOut();
const userStore = useUserStoreWidthOut()
if (from.path === LOGIN_PATH && to.name === PageEnum.ERROR_PAGE_NAME) {
next(PageEnum.BASE_HOME);
return;
next(PageEnum.BASE_HOME)
return
}
// Whitelist can be directly entered
if (whitePathList.includes(to.path as PageEnum)) {
next();
return;
next()
return
}
const token = storage.get(ACCESS_TOKEN);
const token = storage.get(ACCESS_TOKEN)
if (!token) {
// redirect login page
next(LOGIN_PATH);
return;
next(LOGIN_PATH)
return
}
// 当上次更新时间为空时获取用户信息
if (userStore.getLastUpdateTime === 0) {
try {
await userStore.GetUserInfo();
} catch (err) {
next();
return;
await userStore.GetUserInfo()
}
catch (err) {
next()
return
}
}
next();
});
next()
})
// 进入某个路由之后触发的钩子
router.afterEach((to, _, failure) => {
// 设置每个页面的 title
document.title = (to?.meta?.title as string) || document.title;
document.title = (to?.meta?.title as string) || document.title
if (isNavigationFailure(failure)) {
console.log('failed navigation', failure);
console.warn('failed navigation', failure)
}
const routeStore = useRouteStoreWidthOut();
const routeStore = useRouteStoreWidthOut()
// 在这里设置需要缓存的组件名称
const keepAliveComponents = routeStore.keepAliveComponents;
const keepAliveComponents = routeStore.keepAliveComponents
// 获取当前组件名
const currentComName: any = to.matched.find((item) => item.name == to.name)?.name;
const currentComName: any = to.matched.find(item => item.name === to.name)?.name
// 如果 currentComName 且 keepAliveComponents 不包含 currentComName 且 即将要进入的路由 meta 属性里 keepAlive 为 true，则缓存该组件
if (currentComName && !keepAliveComponents.includes(currentComName) && to.meta?.keepAlive) {
// 需要缓存的组件
keepAliveComponents.push(currentComName);
keepAliveComponents.push(currentComName)
// keepAlive 为 false 则不缓存
} else if (!to.meta?.keepAlive) {
}
else if (!to.meta?.keepAlive) {
// 不需要缓存的组件
// 这里的作用一开始组件设置为缓存，之后又设置不缓存但是它还是存在 keepAliveComponents 数组中
// keepAliveComponents 使用 findIndex 与 当前路由对比，如果存在则返回具体下标位置，不存在返回 -1
const index = routeStore.keepAliveComponents.findIndex((name) => name == currentComName);
if (index != -1) {
const index = routeStore.keepAliveComponents.findIndex(name => name === currentComName)
if (index !== -1) {
// 通过返回具体下标位置删除 keepAliveComponents 数组中缓存的 元素
keepAliveComponents.splice(index, 1);
keepAliveComponents.splice(index, 1)
}
}
routeStore.setKeepAliveComponents(keepAliveComponents);
});
routeStore.setKeepAliveComponents(keepAliveComponents)
})
router.onError((error) => {
console.error(error, '路由错误');
});
console.error(error, '路由错误')
})
}

2
src/settings/animateSetting.ts
View File

@ -5,4 +5,4 @@ export const animates = [
{ value: 'fade', text: '消退' },
{ value: 'fade-bottom', text: '底部消退' },
{ value: 'fade-scale', text: '缩放消退' },
];
]

8
src/settings/componentSetting.ts
View File

@ -1,15 +1,15 @@
export default {
upload: {
//考虑接口规范不同
// 考虑接口规范不同
apiSetting: {
// 集合字段名
infoField: 'result',
// 图片地址字段名
imgField: 'imagePath',
},
//最大上传图片大小
// 最大上传图片大小
maxSize: 1,
//图片上传类型
// 图片上传类型
fileType: ['image/png', 'image/jpg', 'image/jpeg', 'image/gif', 'image/svg+xml'],
},
};
}

26
src/settings/designSetting.ts
View File

@ -2,15 +2,15 @@
export interface DesignSettingState {
// 系统主题
darkMode: 'light' | 'dark';
darkMode: 'light' | 'dark'
// 系统风格
appTheme: string;
appTheme: string
// 系统内置风格
appThemeList: string[];
appThemeList: string[]
// 是否开启路由动画
isPageAnimate: boolean;
isPageAnimate: boolean
// 路由动画类型
pageAnimateType: string;
pageAnimateType: string
}
export const appThemeList: string[] = [
@ -33,19 +33,19 @@ export const appThemeList: string[] = [
'#FB9300',
'#FC5404',
'#8675ff',
];
]
const setting: DesignSettingState = {
//深色主题
// 深色主题
darkMode: 'light',
//系统主题色
// 系统主题色
appTheme: '#5d9dfe',
//系统内置主题色列表
// 系统内置主题色列表
appThemeList,
//是否开启路由动画
// 是否开启路由动画
isPageAnimate: true,
//路由动画类型
// 路由动画类型
pageAnimateType: 'zoom-fade',
};
}
export default setting;
export default setting

14
src/store/index.ts
View File

@ -1,12 +1,12 @@
import type { App } from 'vue';
import { createPinia } from 'pinia';
import piniaPersist from 'pinia-plugin-persist';
import type { App } from 'vue'
import { createPinia } from 'pinia'
import piniaPersist from 'pinia-plugin-persist'
const store = createPinia();
store.use(piniaPersist);
const store = createPinia()
store.use(piniaPersist)
export function setupStore(app: App<Element>) {
app.use(store);
app.use(store)
}
export { store };
export { store }

28
src/store/modules/designSetting.ts
View File

@ -1,9 +1,9 @@
import { defineStore } from 'pinia';
import { store } from '@/store';
import designSetting from '@/settings/designSetting';
import type { DesignSettingState } from '@/settings/designSetting';
import { defineStore } from 'pinia'
import { store } from '@/store'
import designSetting from '@/settings/designSetting'
import type { DesignSettingState } from '@/settings/designSetting'
const { darkMode, appTheme, appThemeList, isPageAnimate, pageAnimateType } = designSetting;
const { darkMode, appTheme, appThemeList, isPageAnimate, pageAnimateType } = designSetting
export const useDesignSettingStore = defineStore({
id: 'app-design-setting',
@ -16,27 +16,27 @@ export const useDesignSettingStore = defineStore({
}),
getters: {
getDarkMode(): 'light' | 'dark' {
return this.darkMode;
return this.darkMode
},
getAppTheme(): string {
return this.appTheme;
return this.appTheme
},
getAppThemeList(): string[] {
return this.appThemeList;
return this.appThemeList
},
getIsPageAnimate(): boolean {
return this.isPageAnimate;
return this.isPageAnimate
},
getPageAnimateType(): string {
return this.pageAnimateType;
return this.pageAnimateType
},
},
actions: {
setDarkMode(mode: 'light' | 'dark'): void {
this.darkMode = mode;
this.darkMode = mode
},
setPageAnimateType(type: string): void {
this.pageAnimateType = type;
this.pageAnimateType = type
},
},
// 持久化
@ -49,9 +49,9 @@ export const useDesignSettingStore = defineStore({
},
],
},
});
})
// Need to be used outside the setup
export function useDesignSettingWithOut() {
return useDesignSettingStore(store);
return useDesignSettingStore(store)
}

24
src/store/modules/route.ts
View File

@ -1,11 +1,11 @@
import { defineStore } from 'pinia';
import { RouteRecordRaw } from 'vue-router';
import { store } from '@/store';
import { defineStore } from 'pinia'
import type { RouteRecordRaw } from 'vue-router'
import { store } from '@/store'
export interface IRouteState {
menus: RouteRecordRaw[];
routers: RouteRecordRaw[];
keepAliveComponents: string[];
menus: RouteRecordRaw[]
routers: RouteRecordRaw[]
keepAliveComponents: string[]
}
export const useRouteStore = defineStore({
@ -17,24 +17,24 @@ export const useRouteStore = defineStore({
}),
getters: {
getMenus(): RouteRecordRaw[] {
return this.menus;
return this.menus
},
},
actions: {
setRouters(routers: RouteRecordRaw[]) {
this.routers = routers;
this.routers = routers
},
setMenus(menus: RouteRecordRaw[]) {
this.menus = menus;
this.menus = menus
},
setKeepAliveComponents(compNames: string[]) {
// 设置需要缓存的组件
this.keepAliveComponents = compNames;
this.keepAliveComponents = compNames
},
},
});
})
// Need to be used outside the setup
export function useRouteStoreWidthOut() {
return useRouteStore(store);
return useRouteStore(store)
}

111
src/store/modules/user.ts
View File

@ -1,35 +1,36 @@
import { defineStore } from 'pinia';
import { createStorage } from '@/utils/Storage';
import { store } from '@/store';
import { ACCESS_TOKEN, CURRENT_USER } from '@/store/mutation-types';
import { ResultEnum } from '@/enums/httpEnum';
const Storage = createStorage({ storage: localStorage });
import { getUserInfo, login, doLogout } from '@/api/system/user';
import { PageEnum } from '@/enums/pageEnum';
import router from '@/router';
import { defineStore } from 'pinia'
import { createStorage } from '@/utils/Storage'
import { store } from '@/store'
import { ACCESS_TOKEN, CURRENT_USER } from '@/store/mutation-types'
import { ResultEnum } from '@/enums/httpEnum'
import { doLogout, getUserInfo, login } from '@/api/system/user'
import { PageEnum } from '@/enums/pageEnum'
import router from '@/router'
const Storage = createStorage({ storage: localStorage })
interface UserInfo {
userId: string | number;
username: string;
realname: string;
nickname: string;
avatar: string;
cover: string;
gender: number;
phone: string;
sign?: string;
industry?: number;
userId: string | number
username: string
realname: string
nickname: string
avatar: string
cover: string
gender: number
phone: string
sign?: string
industry?: number
}
interface IUserState {
token?: string;
userInfo: Nullable<UserInfo>;
lastUpdateTime: number;
token?: string
userInfo: Nullable<UserInfo>
lastUpdateTime: number
}
interface LoginParams {
username: string;
password: string;
username: string
password: string
}
export const useUserStore = defineStore({
@ -41,37 +42,38 @@ export const useUserStore = defineStore({
}),
getters: {
getUserInfo(): UserInfo {
return this.userInfo || Storage.get(CURRENT_USER, '') || {};
return this.userInfo || Storage.get(CURRENT_USER, '') || {}
},
getToken(): string {
return this.token || Storage.get(ACCESS_TOKEN, '');
return this.token || Storage.get(ACCESS_TOKEN, '')
},
getLastUpdateTime(): number {
return this.lastUpdateTime;
return this.lastUpdateTime
},
},
actions: {
setToken(token: string | undefined) {
this.token = token ? token : '';
Storage.set(ACCESS_TOKEN, token);
this.token = token || ''
Storage.set(ACCESS_TOKEN, token)
},
setUserInfo(info: UserInfo | null) {
this.userInfo = info;
this.lastUpdateTime = new Date().getTime();
Storage.set(CURRENT_USER, info);
this.userInfo = info
this.lastUpdateTime = new Date().getTime()
Storage.set(CURRENT_USER, info)
},
async Login(params: LoginParams) {
try {
const response = await login(params);
const { result, code } = response;
const response = await login(params)
const { result, code } = response
if (code === ResultEnum.SUCCESS) {
// save token
this.setToken(result.token);
this.setToken(result.token)
}
return Promise.resolve(response);
} catch (error) {
return Promise.reject(error);
return Promise.resolve(response)
}
catch (error) {
return Promise.reject(error)
}
},
@ -79,34 +81,35 @@ export const useUserStore = defineStore({
return new Promise((resolve, reject) => {
getUserInfo()
.then((res) => {
this.setUserInfo(res);
resolve(res);
this.setUserInfo(res)
resolve(res)
})
.catch((error) => {
reject(error);
});
});
reject(error)
})
})
},
async Logout() {
if (this.getToken) {
try {
await doLogout();
} catch {
console.error('注销Token失败');
await doLogout()
}
catch {
console.error('注销Token失败')
}
}
this.setToken(undefined);
this.setUserInfo(null);
Storage.remove(ACCESS_TOKEN);
Storage.remove(CURRENT_USER);
router.push(PageEnum.BASE_LOGIN);
location.reload();
this.setToken(undefined)
this.setUserInfo(null)
Storage.remove(ACCESS_TOKEN)
Storage.remove(CURRENT_USER)
router.push(PageEnum.BASE_LOGIN)
location.reload()
},
},
});
})
// Need to be used outside the setup
export function useUserStoreWidthOut() {
return useUserStore(store);
return useUserStore(store)
}

8
src/store/mutation-types.ts
View File

@ -1,4 +1,4 @@
export const FIRST_VISIT = 'FIRST-VISIT'; // 是否首次访问
export const ACCESS_TOKEN = 'ACCESS-TOKEN'; // 用户token
export const CURRENT_USER = 'CURRENT-USER'; // 当前用户信息
export const DESIGN_SETTING = 'DESIGN-SETTING'; // 当前用户主题信息
export const FIRST_VISIT = 'FIRST-VISIT' // 是否首次访问
export const ACCESS_TOKEN = 'ACCESS-TOKEN' // 用户token
export const CURRENT_USER = 'CURRENT-USER' // 当前用户信息
export const DESIGN_SETTING = 'DESIGN-SETTING' // 当前用户主题信息

6
src/styles/common.less
View File

@ -11,7 +11,6 @@ html {
}
[data-theme='dark'] {
&,
* {
color-scheme: dark !important;
@ -24,7 +23,6 @@ html {
}
[data-theme='light'] {
&,
* {
color-scheme: light !important;
@ -80,7 +78,9 @@ a:hover {
.zoom-fade-enter-active,
.zoom-fade-leave-active {
transition: transform 0.35s, opacity 0.28s ease-in-out;
transition:
transform 0.35s,
opacity 0.28s ease-in-out;
}
.zoom-fade-enter-from {

168
src/styles/entry.css Normal file
View File

@ -0,0 +1,168 @@
* > .enter-x:nth-child(1) {
transform: translateX(50px);
}
* > .-enter-x:nth-child(1) {
transform: translateX(-50px);
}
* > .enter-x:nth-child(1),
* > .-enter-x:nth-child(1) {
z-index: 9;
opacity: 0;
animation: enter-x-animation 0.4s ease-in-out 0.3s;
animation-fill-mode: forwards;
animation-delay: 0.1s;
}
* > .enter-x:nth-child(2) {
transform: translateX(50px);
}
* > .-enter-x:nth-child(2) {
transform: translateX(-50px);
}
* > .enter-x:nth-child(2),
* > .-enter-x:nth-child(2) {
z-index: 8;
opacity: 0;
animation: enter-x-animation 0.4s ease-in-out 0.3s;
animation-fill-mode: forwards;
animation-delay: 0.2s;
}
* > .enter-x:nth-child(3) {
transform: translateX(50px);
}
* > .-enter-x:nth-child(3) {
transform: translateX(-50px);
}
* > .enter-x:nth-child(3),
* > .-enter-x:nth-child(3) {
z-index: 7;
opacity: 0;
animation: enter-x-animation 0.4s ease-in-out 0.3s;
animation-fill-mode: forwards;
animation-delay: 0.3s;
}
* > .enter-x:nth-child(4) {
transform: translateX(50px);
}
* > .-enter-x:nth-child(4) {
transform: translateX(-50px);
}
* > .enter-x:nth-child(4),
* > .-enter-x:nth-child(4) {
z-index: 6;
opacity: 0;
animation: enter-x-animation 0.4s ease-in-out 0.3s;
animation-fill-mode: forwards;
animation-delay: 0.4s;
}
* > .enter-x:nth-child(5) {
transform: translateX(50px);
}
* > .-enter-x:nth-child(5) {
transform: translateX(-50px);
}
* > .enter-x:nth-child(5),
* > .-enter-x:nth-child(5) {
z-index: 5;
opacity: 0;
animation: enter-x-animation 0.4s ease-in-out 0.3s;
animation-fill-mode: forwards;
animation-delay: 0.5s;
}
* > .enter-y:nth-child(1) {
transform: translateX(50px);
}
* > .-enter-y:nth-child(1) {
transform: translateX(-50px);
}
* > .enter-y:nth-child(1),
* > .-enter-y:nth-child(1) {
z-index: 9;
opacity: 0;
animation: enter-y-animation 0.4s ease-in-out 0.3s;
animation-fill-mode: forwards;
animation-delay: 0.1s;
}
* > .enter-y:nth-child(2) {
transform: translateX(50px);
}
* > .-enter-y:nth-child(2) {
transform: translateX(-50px);
}
* > .enter-y:nth-child(2),
* > .-enter-y:nth-child(2) {
z-index: 8;
opacity: 0;
animation: enter-y-animation 0.4s ease-in-out 0.3s;
animation-fill-mode: forwards;
animation-delay: 0.2s;
}
* > .enter-y:nth-child(3) {
transform: translateX(50px);
}
* > .-enter-y:nth-child(3) {
transform: translateX(-50px);
}
* > .enter-y:nth-child(3),
* > .-enter-y:nth-child(3) {
z-index: 7;
opacity: 0;
animation: enter-y-animation 0.4s ease-in-out 0.3s;
animation-fill-mode: forwards;
animation-delay: 0.3s;
}
* > .enter-y:nth-child(4) {
transform: translateX(50px);
}
* > .-enter-y:nth-child(4) {
transform: translateX(-50px);
}
* > .enter-y:nth-child(4),
* > .-enter-y:nth-child(4) {
z-index: 6;
opacity: 0;
animation: enter-y-animation 0.4s ease-in-out 0.3s;
animation-fill-mode: forwards;
animation-delay: 0.4s;
}
* > .enter-y:nth-child(5) {
transform: translateX(50px);
}
* > .-enter-y:nth-child(5) {
transform: translateX(-50px);
}
* > .enter-y:nth-child(5),
* > .-enter-y:nth-child(5) {
z-index: 5;
opacity: 0;
animation: enter-y-animation 0.4s ease-in-out 0.3s;
animation-fill-mode: forwards;
animation-delay: 0.5s;
}
@keyframes enter-x-animation {
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes enter-y-animation {
to {
opacity: 1;
transform: translateY(0);
}
}

1
src/styles/index.less
View File

@ -1,3 +1,4 @@
@import './common.less';
@import 'transition/index.less';
@import 'entry.css';
@import './vant.less';

8
src/styles/transition/fade.less
View File

@ -31,7 +31,9 @@
// Speed: 1x
.fade-bottom-enter-active,
.fade-bottom-leave-active {
transition: opacity 0.25s, transform 0.3s;
transition:
opacity 0.25s,
transform 0.3s;
}
.fade-bottom-enter-from {
@ -67,7 +69,9 @@
// Speed: 1x
.fade-top-enter-active,
.fade-top-leave-active {
transition: opacity 0.2s, transform 0.25s;
transition:
opacity 0.2s,
transform 0.25s;
}
.fade-top-enter-from {

5
src/styles/transition/index.less
View File

@ -6,5 +6,8 @@
@import './zoom.less';
.collapse-transition {
transition: 0.2s height ease-in-out, 0.2s padding-top ease-in-out, 0.2s padding-bottom ease-in-out;
transition:
0.2s height ease-in-out,
0.2s padding-top ease-in-out,
0.2s padding-bottom ease-in-out;
}

8
src/styles/transition/zoom.less
View File

@ -1,7 +1,9 @@
// zoom-out
.zoom-out-enter-active,
.zoom-out-leave-active {
transition: opacity 0.1 ease-in-out, transform 0.15s ease-out;
transition:
opacity 0.1 ease-in-out,
transform 0.15s ease-out;
}
.zoom-out-enter-from,
@ -13,7 +15,9 @@
// zoom-fade
.zoom-fade-enter-active,
.zoom-fade-leave-active {
transition: transform 0.2s, opacity 0.3s ease-out;
transition:
transform 0.2s,
opacity 0.3s ease-out;
}
.zoom-fade-enter-from {

19
src/theme/index.ts
View File

@ -1,24 +1,25 @@
import { addClass, removeClass, hasClass } from '@/utils/domUtils';
import { addClass, hasClass, removeClass } from '@/utils/domUtils'
/**
* html 根标签上挂载 暗/亮 属性标识
*/
export function updateDarkSign(mode: 'light' | 'dark') {
const htmlRoot = document.getElementById('htmlRoot');
const htmlRoot = document.getElementById('htmlRoot')
if (!htmlRoot) {
return;
return
}
const hasDarkClass = hasClass(htmlRoot, 'dark');
const hasDarkClass = hasClass(htmlRoot, 'dark')
if (mode === 'dark') {
htmlRoot.setAttribute('data-theme', 'dark');
htmlRoot.setAttribute('data-theme', 'dark')
if (!hasDarkClass) {
addClass(htmlRoot, 'dark');
addClass(htmlRoot, 'dark')
}
} else {
htmlRoot.setAttribute('data-theme', 'light');
}
else {
htmlRoot.setAttribute('data-theme', 'light')
if (hasDarkClass) {
removeClass(htmlRoot, 'dark');
removeClass(htmlRoot, 'dark')
}
}
}

66
src/utils/Storage.ts
View File

@ -1,22 +1,21 @@
// 默认缓存期限为7天
const DEFAULT_CACHE_TIME = 60 * 60 * 24 * 7;
const DEFAULT_CACHE_TIME = 60 * 60 * 24 * 7
/**
* 创建本地缓存对象
* @param {string=} prefixKey -
* @param {Object} [storage=localStorage] - sessionStorage | localStorage
* @param {string} prefixKey -
*/
export const createStorage = ({ prefixKey = '', storage = localStorage } = {}) => {
export function createStorage({ prefixKey = '', storage = localStorage } = {}) {
/**
* 本地缓存类
* @class Storage
*/
const Storage = class {
private storage = storage;
private prefixKey?: string = prefixKey;
private storage = storage
private prefixKey?: string = prefixKey
private getKey(key: string) {
return `${this.prefixKey}${key}`.toUpperCase();
return `${this.prefixKey}${key}`.toUpperCase()
}
/**
@ -29,8 +28,8 @@ export const createStorage = ({ prefixKey = '', storage = localStorage } = {}) =
const stringData = JSON.stringify({
value,
expire: expire !== null ? new Date().getTime() + expire * 1000 : null,
});
this.storage.setItem(this.getKey(key), stringData);
})
this.storage.setItem(this.getKey(key), stringData)
}
/**
@ -39,21 +38,22 @@ export const createStorage = ({ prefixKey = '', storage = localStorage } = {}) =
* @param {*=} def 默认值
*/
get(key: string, def: any = null) {
const item = this.storage.getItem(this.getKey(key));
const item = this.storage.getItem(this.getKey(key))
if (item) {
try {
const data = JSON.parse(item);
const { value, expire } = data;
const data = JSON.parse(item)
const { value, expire } = data
// 在有效期内直接返回
if (expire === null || expire >= Date.now()) {
return value;
return value
}
this.remove(key);
} catch (e) {
return def;
this.remove(key)
}
catch (e) {
return def
}
}
return def;
return def
}
/**
@ -61,7 +61,7 @@ export const createStorage = ({ prefixKey = '', storage = localStorage } = {}) =
* @param {string} key
*/
remove(key: string) {
this.storage.removeItem(this.getKey(key));
this.storage.removeItem(this.getKey(key))
}
/**
@ -69,7 +69,7 @@ export const createStorage = ({ prefixKey = '', storage = localStorage } = {}) =
* @memberOf Cache
*/
clear(): void {
this.storage.clear();
this.storage.clear()
}
/**
@ -81,7 +81,7 @@ export const createStorage = ({ prefixKey = '', storage = localStorage } = {}) =
* @example
*/
setCookie(name: string, value: any, expire: number | null = DEFAULT_CACHE_TIME) {
document.cookie = `${this.getKey(name)}=${value}; Max-Age=${expire}`;
document.cookie = `${this.getKey(name)}=${value}; Max-Age=${expire}`
}
/**
@ -89,14 +89,14 @@ export const createStorage = ({ prefixKey = '', storage = localStorage } = {}) =
* @param name
*/
getCookie(name: string): string {
const cookieArr = document.cookie.split('; ');
const cookieArr = document.cookie.split('; ')
for (let i = 0, length = cookieArr.length; i < length; i++) {
const kv = cookieArr[i].split('=');
const kv = cookieArr[i].split('=')
if (kv[0] === this.getKey(name)) {
return kv[1];
return kv[1]
}
}
return '';
return ''
}
/**
@ -104,24 +104,24 @@ export const createStorage = ({ prefixKey = '', storage = localStorage } = {}) =
* @param {string} key
*/
removeCookie(key: string) {
this.setCookie(key, 1, -1);
this.setCookie(key, 1, -1)
}
/**
* 清空cookie，使所有cookie失效
*/
clearCookie(): void {
const keys = document.cookie.match(/[^ =;]+(?==)/g);
const keys = document.cookie.match(/[^ =;]+(?==)/g)
if (keys) {
for (let i = keys.length; i--; ) {
document.cookie = keys[i] + '=0;expire=' + new Date(0).toUTCString();
for (let i = keys.length; i--;) {
document.cookie = `${keys[i]}=0;expire=${new Date(0).toUTCString()}`
}
}
}
};
return new Storage();
};
}
return new Storage()
}
export const storage = createStorage();
export const storage = createStorage()
export default Storage;
export default Storage

10
src/utils/dateUtil.ts
View File

@ -1,12 +1,12 @@
import { format } from 'date-fns';
import { format } from 'date-fns'
const DATE_TIME_FORMAT = 'yyyy-MM-dd HH:mm:ss';
const DATE_FORMAT = 'YYYY-MM-DD ';
const DATE_TIME_FORMAT = 'yyyy-MM-dd HH:mm:ss'
const DATE_FORMAT = 'YYYY-MM-DD '
export function formatToDateTime(date: number | Date, formatStr = DATE_TIME_FORMAT): string {
return format(date, formatStr);
return format(date, formatStr)
}
export function formatToDate(date: number | Date, formatStr = DATE_FORMAT): string {
return format(date, formatStr);
return format(date, formatStr)
}

172
src/utils/domUtils.ts
View File

@ -1,76 +1,92 @@
import type { FunctionArgs } from '@vueuse/core';
import { upperFirst } from 'lodash-es';
/* eslint-disable ts/ban-ts-comment */
import type { FunctionArgs } from '@vueuse/core'
import { upperFirst } from 'lodash-es'
export interface ViewportOffsetResult {
left: number;
top: number;
right: number;
bottom: number;
rightIncludeBody: number;
bottomIncludeBody: number;
left: number
top: number
right: number
bottom: number
rightIncludeBody: number
bottomIncludeBody: number
}
export function getBoundingClientRect(element: Element): DOMRect | number {
if (!element || !element.getBoundingClientRect) {
return 0;
return 0
}
return element.getBoundingClientRect();
return element.getBoundingClientRect()
}
function trim(string: string) {
return (string || '').replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g, '');
return (string || '').replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g, '')
}
/* istanbul ignore next */
export function hasClass(el: Element, cls: string) {
if (!el || !cls) return false;
if (cls.indexOf(' ') !== -1) throw new Error('className should not contain space.');
if (!el || !cls) {
return false
}
if (cls.includes(' ')) {
throw new Error('className should not contain space.')
}
if (el.classList) {
return el.classList.contains(cls);
} else {
return (' ' + el.className + ' ').indexOf(' ' + cls + ' ') > -1;
return el.classList.contains(cls)
}
else {
return (` ${el.className} `).includes(` ${cls} `)
}
}
/* istanbul ignore next */
export function addClass(el: Element, cls: string) {
if (!el) return;
let curClass = el.className;
const classes = (cls || '').split(' ');
if (!el) {
return
}
let curClass = el.className
const classes = (cls || '').split(' ')
for (let i = 0, j = classes.length; i < j; i++) {
const clsName = classes[i];
if (!clsName) continue;
const clsName = classes[i]
if (!clsName) {
continue
}
if (el.classList) {
el.classList.add(clsName);
} else if (!hasClass(el, clsName)) {
curClass += ' ' + clsName;
el.classList.add(clsName)
}
else if (!hasClass(el, clsName)) {
curClass += ` ${clsName}`
}
}
if (!el.classList) {
el.className = curClass;
el.className = curClass
}
}
/* istanbul ignore next */
export function removeClass(el: Element, cls: string) {
if (!el || !cls) return;
const classes = cls.split(' ');
let curClass = ' ' + el.className + ' ';
if (!el || !cls) {
return
}
const classes = cls.split(' ')
let curClass = ` ${el.className} `
for (let i = 0, j = classes.length; i < j; i++) {
const clsName = classes[i];
if (!clsName) continue;
const clsName = classes[i]
if (!clsName) {
continue
}
if (el.classList) {
el.classList.remove(clsName);
} else if (hasClass(el, clsName)) {
curClass = curClass.replace(' ' + clsName + ' ', ' ');
el.classList.remove(clsName)
}
else if (hasClass(el, clsName)) {
curClass = curClass.replace(` ${clsName} `, ' ')
}
}
if (!el.classList) {
el.className = trim(curClass);
el.className = trim(curClass)
}
}
/**
@ -85,61 +101,61 @@ export function removeClass(el: Element, cls: string) {
* @description:
*/
export function getViewportOffset(element: Element): ViewportOffsetResult {
const doc = document.documentElement;
const doc = document.documentElement
const docScrollLeft = doc.scrollLeft;
const docScrollTop = doc.scrollTop;
const docClientLeft = doc.clientLeft;
const docClientTop = doc.clientTop;
const docScrollLeft = doc.scrollLeft
const docScrollTop = doc.scrollTop
const docClientLeft = doc.clientLeft
const docClientTop = doc.clientTop
const pageXOffset = window.pageXOffset;
const pageYOffset = window.pageYOffset;
const pageXOffset = window.pageXOffset
const pageYOffset = window.pageYOffset
const box = getBoundingClientRect(element);
const box = getBoundingClientRect(element)
const { left: retLeft, top: rectTop, width: rectWidth, height: rectHeight } = box as DOMRect;
const { left: retLeft, top: rectTop, width: rectWidth, height: rectHeight } = box as DOMRect
const scrollLeft = (pageXOffset || docScrollLeft) - (docClientLeft || 0);
const scrollTop = (pageYOffset || docScrollTop) - (docClientTop || 0);
const offsetLeft = retLeft + pageXOffset;
const offsetTop = rectTop + pageYOffset;
const scrollLeft = (pageXOffset || docScrollLeft) - (docClientLeft || 0)
const scrollTop = (pageYOffset || docScrollTop) - (docClientTop || 0)
const offsetLeft = retLeft + pageXOffset
const offsetTop = rectTop + pageYOffset
const left = offsetLeft - scrollLeft;
const top = offsetTop - scrollTop;
const left = offsetLeft - scrollLeft
const top = offsetTop - scrollTop
const clientWidth = window.document.documentElement.clientWidth;
const clientHeight = window.document.documentElement.clientHeight;
const clientWidth = window.document.documentElement.clientWidth
const clientHeight = window.document.documentElement.clientHeight
return {
left: left,
top: top,
left,
top,
right: clientWidth - rectWidth - left,
bottom: clientHeight - rectHeight - top,
rightIncludeBody: clientWidth - left,
bottomIncludeBody: clientHeight - top,
};
}
}
export function hackCss(attr: string, value: string) {
const prefix: string[] = ['webkit', 'Moz', 'ms', 'OT'];
const prefix: string[] = ['webkit', 'Moz', 'ms', 'OT']
const styleObj: any = {};
const styleObj: any = {}
prefix.forEach((item) => {
styleObj[`${item}${upperFirst(attr)}`] = value;
});
styleObj[`${item}${upperFirst(attr)}`] = value
})
return {
...styleObj,
[attr]: value,
};
}
}
/* istanbul ignore next */
export function on(
element: Element | HTMLElement | Document | Window,
event: string,
handler: EventListenerOrEventListenerObject
handler: EventListenerOrEventListenerObject,
): void {
if (element && event && handler) {
element.addEventListener(event, handler, false);
element.addEventListener(event, handler, false)
}
}
@ -147,10 +163,10 @@ export function on(
export function off(
element: Element | HTMLElement | Document | Window,
event: string,
handler: Fn
handler: Fn,
): void {
if (element && event && handler) {
element.removeEventListener(event, handler, false);
element.removeEventListener(event, handler, false)
}
}
@ -158,24 +174,26 @@ export function off(
export function once(el: HTMLElement, event: string, fn: EventListener): void {
const listener = function (this: any, ...args: unknown[]) {
if (fn) {
// @ts-ignore
fn.apply(this, args);
// @ts-expect-error
fn.apply(this, args)
}
off(el, event, listener);
};
on(el, event, listener);
off(el, event, listener)
}
on(el, event, listener)
}
export function useRafThrottle<T extends FunctionArgs>(fn: T): T {
let locked = false;
// @ts-ignore
let locked = false
// @ts-expect-error
return function (...args: any[]) {
if (locked) return;
locked = true;
if (locked) {
return
}
locked = true
window.requestAnimationFrame(() => {
// @ts-ignore
fn.apply(this, args);
locked = false;
});
};
// @ts-expect-error
fn.apply(this, args)
locked = false
})
}
}

40
src/utils/env.ts
View File

@ -1,26 +1,26 @@
import type { GlobEnvConfig } from '#/config';
import pkg from '../../package.json'
import { getConfigFileName } from '../../build/getConfigFileName'
import type { GlobEnvConfig } from '#/config'
import { warn } from '@/utils/log';
import pkg from '../../package.json';
import { getConfigFileName } from '../../build/getConfigFileName';
import { warn } from '@/utils/log'
export function getCommonStoragePrefix() {
const { VITE_GLOB_APP_SHORT_NAME } = getAppEnvConfig();
return `${VITE_GLOB_APP_SHORT_NAME}__${getEnv()}`.toUpperCase();
const { VITE_GLOB_APP_SHORT_NAME } = getAppEnvConfig()
return `${VITE_GLOB_APP_SHORT_NAME}__${getEnv()}`.toUpperCase()
}
// Generate cache key according to version
export function getStorageShortName() {
return `${getCommonStoragePrefix()}${`__${pkg.version}`}__`.toUpperCase();
return `${getCommonStoragePrefix()}${`__${pkg.version}`}__`.toUpperCase()
}
export function getAppEnvConfig() {
const ENV_NAME = getConfigFileName(import.meta.env);
const ENV_NAME = getConfigFileName(import.meta.env)
// Get the global configuration (the configuration will be extracted independently when packaging)
const ENV = (import.meta.env.DEV
? // Get the global configuration (the configuration will be extracted independently when packaging)
(import.meta.env as unknown as GlobEnvConfig)
: window[ENV_NAME as any]) as unknown as GlobEnvConfig;
? (import.meta.env as unknown as GlobEnvConfig)
: window[ENV_NAME as any]) as unknown as GlobEnvConfig
const {
VITE_GLOB_APP_TITLE,
@ -31,12 +31,12 @@ export function getAppEnvConfig() {
VITE_GLOB_UPLOAD_URL,
VITE_GLOB_PROD_MOCK,
VITE_GLOB_IMG_URL,
} = ENV;
} = ENV
if (!/^[a-zA-Z\_]*$/.test(VITE_GLOB_APP_SHORT_NAME)) {
warn(
`VITE_GLOB_APP_SHORT_NAME Variables can only be characters/underscores, please modify in the environment variables and re-running.`
);
`VITE_GLOB_APP_SHORT_NAME Variables can only be characters/underscores, please modify in the environment variables and re-running.`,
)
}
return {
@ -48,18 +48,18 @@ export function getAppEnvConfig() {
VITE_GLOB_UPLOAD_URL,
VITE_GLOB_PROD_MOCK,
VITE_GLOB_IMG_URL,
};
}
}
/**
* @description: Development model
*/
export const devMode = 'development';
export const devMode = 'development'
/**
* @description: Production mode
*/
export const prodMode = 'production';
export const prodMode = 'production'
/**
* @description: Get environment variables
@ -67,7 +67,7 @@ export const prodMode = 'production';
* @example:
*/
export function getEnv(): string {
return import.meta.env.MODE;
return import.meta.env.MODE
}
/**
@ -76,7 +76,7 @@ export function getEnv(): string {
* @example:
*/
export function isDevMode(): boolean {
return import.meta.env.DEV;
return import.meta.env.DEV
}
/**
@ -85,5 +85,5 @@ export function isDevMode(): boolean {
* @example:
*/
export function isProdMode(): boolean {
return import.meta.env.PROD;
return import.meta.env.PROD
}

176
src/utils/http/axios/Axios.ts
View File

@ -1,31 +1,32 @@
import type { AxiosRequestConfig, AxiosInstance, AxiosResponse } from 'axios';
/* eslint-disable ts/ban-ts-comment */
import type { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios'
import axios from 'axios';
import qs from 'qs';
import { AxiosCanceler } from './axiosCancel';
import { isFunction } from '@/utils/is';
import { cloneDeep } from 'lodash-es';
import axios from 'axios'
import qs from 'qs'
import { cloneDeep } from 'lodash-es'
import { AxiosCanceler } from './axiosCancel'
import type { CreateAxiosOptions, RequestOptions, Result, UploadFileParams } from './types'
import { isFunction } from '@/utils/is'
import type { RequestOptions, CreateAxiosOptions, Result, UploadFileParams } from './types';
import { ContentTypeEnum, RequestEnum } from '@/enums/httpEnum';
import { ContentTypeEnum, RequestEnum } from '@/enums/httpEnum'
export * from './axiosTransform';
export * from './axiosTransform'
/**
* @description: axios模块
*/
export class VAxios {
private axiosInstance: AxiosInstance;
private options: CreateAxiosOptions;
private axiosInstance: AxiosInstance
private options: CreateAxiosOptions
constructor(options: CreateAxiosOptions) {
this.options = options;
this.axiosInstance = axios.create(options);
this.setupInterceptors();
this.options = options
this.axiosInstance = axios.create(options)
this.setupInterceptors()
}
getAxios(): AxiosInstance {
return this.axiosInstance;
return this.axiosInstance
}
/**
@ -33,9 +34,9 @@ export class VAxios {
*/
configAxios(config: CreateAxiosOptions) {
if (!this.axiosInstance) {
return;
return
}
this.createAxios(config);
this.createAxios(config)
}
/**
@ -43,97 +44,99 @@ export class VAxios {
*/
setHeader(headers: any): void {
if (!this.axiosInstance) {
return;
return
}
Object.assign(this.axiosInstance.defaults.headers, headers);
Object.assign(this.axiosInstance.defaults.headers, headers)
}
/**
* @description: 请求方法
*/
request<T = any>(config: AxiosRequestConfig, options?: RequestOptions): Promise<T> {
let conf: AxiosRequestConfig = cloneDeep(config);
const transform = this.getTransform();
let conf: AxiosRequestConfig = cloneDeep(config)
const transform = this.getTransform()
const { requestOptions } = this.options;
const { requestOptions } = this.options
const opt: RequestOptions = Object.assign({}, requestOptions, options);
const opt: RequestOptions = { ...requestOptions, ...options }
const { beforeRequestHook, requestCatch, transformRequestData } = transform || {};
const { beforeRequestHook, requestCatch, transformRequestData } = transform || {}
if (beforeRequestHook && isFunction(beforeRequestHook)) {
conf = beforeRequestHook(conf, opt);
conf = beforeRequestHook(conf, opt)
}
//这里重新 赋值成最新的配置
// @ts-ignore
conf.requestOptions = opt;
// 这里重新 赋值成最新的配置
// @ts-expect-error
conf.requestOptions = opt
// 支持 FormData
conf = this.supportFormData(conf);
conf = this.supportFormData(conf)
return new Promise((resolve, reject) => {
this.axiosInstance
.request<any, AxiosResponse<Result>>(conf)
.then((res: AxiosResponse<Result>) => {
// 请求是否被取消
const isCancel = axios.isCancel(res);
const isCancel = axios.isCancel(res)
if (transformRequestData && isFunction(transformRequestData) && !isCancel) {
try {
const ret = transformRequestData(res, opt);
resolve(ret);
} catch (err) {
reject(err || new Error('request error!'));
const ret = transformRequestData(res, opt)
resolve(ret)
}
return;
catch (err) {
reject(err || new Error('request error!'))
}
return
}
resolve(res as unknown as Promise<T>);
resolve(res as unknown as Promise<T>)
})
.catch((e: Error) => {
if (requestCatch && isFunction(requestCatch)) {
reject(requestCatch(e));
return;
reject(requestCatch(e))
return
}
reject(e);
});
});
reject(e)
})
})
}
/**
* @description: 创建axios实例
*/
private createAxios(config: CreateAxiosOptions): void {
this.axiosInstance = axios.create(config);
this.axiosInstance = axios.create(config)
}
private getTransform() {
const { transform } = this.options;
return transform;
const { transform } = this.options
return transform
}
/**
* @description: 文件上传
*/
uploadFile<T = any>(config: AxiosRequestConfig, params: UploadFileParams) {
const formData = new window.FormData();
const customFilename = params.name || 'file';
const formData = new window.FormData()
const customFilename = params.name || 'file'
if (params.filename) {
formData.append(customFilename, params.file, params.filename);
} else {
formData.append(customFilename, params.file);
formData.append(customFilename, params.file, params.filename)
}
else {
formData.append(customFilename, params.file)
}
if (params.data) {
Object.keys(params.data).forEach((key) => {
const value = params.data![key];
const value = params.data![key]
if (Array.isArray(value)) {
value.forEach((item) => {
formData.append(`${key}[]`, item);
});
return;
formData.append(`${key}[]`, item)
})
return
}
formData.append(key, params.data![key]);
});
formData.append(key, params.data![key])
})
}
return this.axiosInstance.request<T>({
@ -141,80 +144,81 @@ export class VAxios {
data: formData,
headers: {
'Content-type': ContentTypeEnum.FORM_DATA,
ignoreCancelToken: true,
'ignoreCancelToken': true,
},
...config,
});
})
}
// support form-data
supportFormData(config: AxiosRequestConfig) {
const headers = config.headers || this.options.headers;
const contentType = headers?.['Content-Type'] || headers?.['content-type'];
const headers = config.headers || this.options.headers
const contentType = headers?.['Content-Type'] || headers?.['content-type']
if (
contentType !== ContentTypeEnum.FORM_URLENCODED ||
!Reflect.has(config, 'data') ||
config.method?.toUpperCase() === RequestEnum.GET
contentType !== ContentTypeEnum.FORM_URLENCODED
|| !Reflect.has(config, 'data')
|| config.method?.toUpperCase() === RequestEnum.GET
) {
return config;
return config
}
return {
...config,
data: qs.stringify(config.data, { arrayFormat: 'brackets' }),
};
}
}
/**
* @description: 拦截器配置
*/
private setupInterceptors() {
const transform = this.getTransform();
const transform = this.getTransform()
if (!transform) {
return;
return
}
const {
requestInterceptors,
requestInterceptorsCatch,
responseInterceptors,
responseInterceptorsCatch,
} = transform;
} = transform
const axiosCanceler = new AxiosCanceler();
const axiosCanceler = new AxiosCanceler()
// 请求拦截器配置处理
// @ts-expect-error
this.axiosInstance.interceptors.request.use((config: AxiosRequestConfig) => {
const { headers: { ignoreCancelToken } = { ignoreCancelToken: false } } = config;
const ignoreCancel =
ignoreCancelToken !== undefined
const { headers: { ignoreCancelToken } = { ignoreCancelToken: false } } = config
const ignoreCancel
= ignoreCancelToken !== undefined
? ignoreCancelToken
: this.options.requestOptions?.ignoreCancelToken;
: this.options.requestOptions?.ignoreCancelToken
!ignoreCancel && axiosCanceler.addPending(config);
!ignoreCancel && axiosCanceler.addPending(config)
if (requestInterceptors && isFunction(requestInterceptors)) {
config = requestInterceptors(config, this.options);
config = requestInterceptors(config, this.options)
}
return config;
}, undefined);
return config
}, undefined)
// 请求拦截器错误捕获
requestInterceptorsCatch &&
isFunction(requestInterceptorsCatch) &&
this.axiosInstance.interceptors.request.use(undefined, requestInterceptorsCatch);
requestInterceptorsCatch
&& isFunction(requestInterceptorsCatch)
&& this.axiosInstance.interceptors.request.use(undefined, requestInterceptorsCatch)
// 响应结果拦截器处理
this.axiosInstance.interceptors.response.use((res: AxiosResponse<any>) => {
res && axiosCanceler.removePending(res.config);
res && axiosCanceler.removePending(res.config)
if (responseInterceptors && isFunction(responseInterceptors)) {
res = responseInterceptors(res);
res = responseInterceptors(res)
}
return res;
}, undefined);
return res
}, undefined)
// 响应结果拦截器错误捕获
responseInterceptorsCatch &&
isFunction(responseInterceptorsCatch) &&
this.axiosInstance.interceptors.response.use(undefined, responseInterceptorsCatch);
responseInterceptorsCatch
&& isFunction(responseInterceptorsCatch)
&& this.axiosInstance.interceptors.response.use(undefined, responseInterceptorsCatch)
}
}

48
src/utils/http/axios/axiosCancel.ts
View File

@ -1,31 +1,33 @@
import axios, { AxiosRequestConfig, Canceler } from 'axios';
import type { AxiosRequestConfig, Canceler } from 'axios'
import axios from 'axios'
import qs from 'qs';
import qs from 'qs'
import { isFunction } from '@/utils/is/index';
import { isFunction } from '@/utils/is/index'
// 声明一个 Map 用于存储每个请求的标识 和 取消函数
let pendingMap = new Map<string, Canceler>();
let pendingMap = new Map<string, Canceler>()
export const getPendingUrl = (config: AxiosRequestConfig) =>
[config.method, config.url, qs.stringify(config.data), qs.stringify(config.params)].join('&');
export function getPendingUrl(config: AxiosRequestConfig) {
return [config.method, config.url, qs.stringify(config.data), qs.stringify(config.params)].join('&')
}
export class AxiosCanceler {
/**
* 添加请求
* @param {Object} config
* @param {object} config
*/
addPending(config: AxiosRequestConfig) {
this.removePending(config);
const url = getPendingUrl(config);
config.cancelToken =
config.cancelToken ||
new axios.CancelToken((cancel) => {
this.removePending(config)
const url = getPendingUrl(config)
config.cancelToken
= config.cancelToken
|| new axios.CancelToken((cancel) => {
if (!pendingMap.has(url)) {
// 如果 pending 中不存在当前请求，则添加进去
pendingMap.set(url, cancel);
pendingMap.set(url, cancel)
}
});
})
}
/**
@ -33,23 +35,23 @@ export class AxiosCanceler {
*/
removeAllPending() {
pendingMap.forEach((cancel) => {
cancel && isFunction(cancel) && cancel();
});
pendingMap.clear();
cancel && isFunction(cancel) && cancel()
})
pendingMap.clear()
}
/**
* 移除请求
* @param {Object} config
* @param {object} config
*/
removePending(config: AxiosRequestConfig) {
const url = getPendingUrl(config);
const url = getPendingUrl(config)
if (pendingMap.has(url)) {
// 如果在 pending 中存在当前请求标识，需要取消当前请求，并且移除
const cancel = pendingMap.get(url);
cancel && cancel(url);
pendingMap.delete(url);
const cancel = pendingMap.get(url)
cancel && cancel(url)
pendingMap.delete(url)
}
}
@ -57,6 +59,6 @@ export class AxiosCanceler {
* @description: 重置
*/
reset(): void {
pendingMap = new Map<string, Canceler>();
pendingMap = new Map<string, Canceler>()
}
}

24
src/utils/http/axios/axiosTransform.ts
View File

@ -1,13 +1,13 @@
/**
* 数据处理类，可以根据项目自行配置
*/
import type { AxiosRequestConfig, AxiosResponse } from 'axios';
import type { RequestOptions, Result } from './types';
import type { AxiosRequestConfig, AxiosResponse } from 'axios'
import type { RequestOptions, Result } from './types'
export interface CreateAxiosOptions extends AxiosRequestConfig {
authenticationScheme?: string;
transform?: AxiosTransform;
requestOptions?: RequestOptions;
authenticationScheme?: string
transform?: AxiosTransform
requestOptions?: RequestOptions
}
export abstract class AxiosTransform {
@ -15,17 +15,17 @@ export abstract class AxiosTransform {
* @description: 请求之前处理配置
* @description: Process configuration before request
*/
beforeRequestHook?: (config: AxiosRequestConfig, options: RequestOptions) => AxiosRequestConfig;
beforeRequestHook?: (config: AxiosRequestConfig, options: RequestOptions) => AxiosRequestConfig
/**
* @description: 请求成功处理
*/
transformRequestData?: (res: AxiosResponse<Result>, options: RequestOptions) => any;
transformRequestData?: (res: AxiosResponse<Result>, options: RequestOptions) => any
/**
* @description: 请求失败处理
*/
requestCatch?: (e: Error) => Promise<any>;
requestCatch?: (e: Error) => Promise<any>
/**
* @description: 请求之前的拦截器
@ -33,20 +33,20 @@ export abstract class AxiosTransform {
requestInterceptors?: (
config: AxiosRequestConfig,
options: CreateAxiosOptions
) => AxiosRequestConfig;
) => AxiosRequestConfig
/**
* @description: 请求之后的拦截器
*/
responseInterceptors?: (res: AxiosResponse<any>) => AxiosResponse<any>;
responseInterceptors?: (res: AxiosResponse<any>) => AxiosResponse<any>
/**
* @description: 请求之前的拦截器错误处理
*/
requestInterceptorsCatch?: (error: Error) => void;
requestInterceptorsCatch?: (error: Error) => void
/**
* @description: 请求之后的拦截器错误处理
*/
responseInterceptorsCatch?: (error: Error) => void;
responseInterceptorsCatch?: (error: Error) => void
}

52
src/utils/http/axios/checkStatus.ts
View File

@ -1,48 +1,48 @@
import { showFailToast } from 'vant';
import { showFailToast } from 'vant'
export function checkStatus(status: number, msg: string): void {
switch (status) {
case 400:
showFailToast(msg);
break;
showFailToast(msg)
break
// 401: 未登录
// 未登录则跳转登录页面，并携带当前页面的路径
// 在登录成功后返回当前页面，这一步需要在登录页操作。
case 401:
showFailToast('用户没有权限（令牌、用户名、密码错误）!');
break;
showFailToast('用户没有权限（令牌、用户名、密码错误）!')
break
case 403:
showFailToast('用户得到授权，但是访问是被禁止的。!');
break;
showFailToast('用户得到授权，但是访问是被禁止的。!')
break
// 404请求不存在
case 404:
showFailToast('网络请求错误，未找到该资源!');
break;
showFailToast('网络请求错误，未找到该资源!')
break
case 405:
showFailToast('网络请求错误，请求方法未允许!');
break;
showFailToast('网络请求错误，请求方法未允许!')
break
case 408:
showFailToast('网络请求超时');
break;
showFailToast('网络请求超时')
break
case 500:
showFailToast('服务器错误,请联系管理员!');
break;
showFailToast('服务器错误,请联系管理员!')
break
case 501:
showFailToast('网络未实现');
break;
showFailToast('网络未实现')
break
case 502:
showFailToast('网络错误');
break;
showFailToast('网络错误')
break
case 503:
showFailToast('服务不可用，服务器暂时过载或维护!');
break;
showFailToast('服务不可用，服务器暂时过载或维护!')
break
case 504:
showFailToast('网络超时');
break;
showFailToast('网络超时')
break
case 505:
showFailToast('http版本不支持该请求!');
break;
showFailToast('http版本不支持该请求!')
break
default:
showFailToast(msg);
showFailToast(msg)
}
}

29
src/utils/http/axios/helper.ts
View File

@ -1,21 +1,21 @@
import { isObject, isString } from '@/utils/is';
import { isObject, isString } from '@/utils/is'
const DATE_TIME_FORMAT = 'YYYY-MM-DD HH:mm';
const DATE_TIME_FORMAT = 'YYYY-MM-DD HH:mm'
export function joinTimestamp<T extends boolean>(
join: boolean,
restful: T
): T extends true ? string : object;
): T extends true ? string : object
export function joinTimestamp(join: boolean, restful = false): string | object {
if (!join) {
return restful ? '' : {};
return restful ? '' : {}
}
const now = new Date().getTime();
const now = new Date().getTime()
if (restful) {
return `?_t=${now}`;
return `?_t=${now}`
}
return { _t: now };
return { _t: now }
}
/**
@ -23,25 +23,26 @@ export function joinTimestamp(join: boolean, restful = false): string | object {
*/
export function formatRequestDate(params: Recordable) {
if (Object.prototype.toString.call(params) !== '[object Object]') {
return;
return
}
for (const key in params) {
if (params[key] && params[key]._isAMomentObject) {
params[key] = params[key].format(DATE_TIME_FORMAT);
params[key] = params[key].format(DATE_TIME_FORMAT)
}
if (isString(key)) {
const value = params[key];
const value = params[key]
if (value) {
try {
params[key] = isString(value) ? value.trim() : value;
} catch (error) {
throw new Error(error as any);
params[key] = isString(value) ? value.trim() : value
}
catch (error) {
throw new Error(error as any)
}
}
}
if (isObject(params[key])) {
formatRequestDate(params[key]);
formatRequestDate(params[key])
}
}
}

209
src/utils/http/axios/index.ts
View File

@ -1,27 +1,27 @@
// axios配置 可自行根据项目进行更改，只需更改该文件即可，其他文件可以不动
import { VAxios } from './Axios';
import { AxiosTransform } from './axiosTransform';
import axios, { AxiosResponse } from 'axios';
import { checkStatus } from './checkStatus';
import { joinTimestamp, formatRequestDate } from './helper';
import { RequestEnum, ResultEnum, ContentTypeEnum } from '@/enums/httpEnum';
import { PageEnum } from '@/enums/pageEnum';
import { useGlobSetting } from '@/hooks/setting';
import type { AxiosResponse } from 'axios'
import axios from 'axios'
import { showDialog, showFailToast } from 'vant'
import { VAxios } from './Axios'
import type { AxiosTransform } from './axiosTransform'
import { checkStatus } from './checkStatus'
import { formatRequestDate, joinTimestamp } from './helper'
import type { CreateAxiosOptions, RequestOptions, Result } from './types'
import { ContentTypeEnum, RequestEnum, ResultEnum } from '@/enums/httpEnum'
import { PageEnum } from '@/enums/pageEnum'
import { useGlobSetting } from '@/hooks/setting'
import { isString } from '@/utils/is/';
import { deepMerge, isUrl } from '@/utils';
import { setObjToUrlParams } from '@/utils/urlUtils';
import { isString } from '@/utils/is/'
import { deepMerge, isUrl } from '@/utils'
import { setObjToUrlParams } from '@/utils/urlUtils'
import { RequestOptions, Result, CreateAxiosOptions } from './types';
import { useUserStoreWidthOut } from '@/store/modules/user'
import { useUserStoreWidthOut } from '@/store/modules/user';
import router from '@/router'
import { storage } from '@/utils/Storage'
const globSetting = useGlobSetting();
const urlPrefix = globSetting.urlPrefix || '';
import router from '@/router';
import { storage } from '@/utils/Storage';
import { showFailToast, showDialog } from 'vant';
const globSetting = useGlobSetting()
const urlPrefix = globSetting.urlPrefix || ''
/**
* @description: 数据处理，方便区分多种处理方式
@ -39,29 +39,29 @@ const transform: AxiosTransform = {
errorMessageText,
isTransformResponse,
isReturnNativeResponse,
} = options;
} = options
// 是否返回原生响应头 比如：需要获取响应头时使用该属性
if (isReturnNativeResponse) {
return res;
return res
}
// 不进行任何处理，直接返回
// 用于页面代码可能需要直接获取code，data，message这些信息时开启
if (!isTransformResponse) {
return res.data;
return res.data
}
const { data } = res;
const { data } = res
if (!data) {
// return '[HTTP] Request has no return value';
throw new Error('请求出错，请稍候重试');
throw new Error('请求出错，请稍候重试')
}
// 这里 code，result，message为 后台统一的字段，需要修改为项目自己的接口返回格式
const { code, result, message } = data;
const { code, result, message } = data
// 请求成功
const hasSuccess = data && Reflect.has(data, 'code') && code === ResultEnum.SUCCESS;
const hasSuccess = data && Reflect.has(data, 'code') && code === ResultEnum.SUCCESS
// 是否显示提示信息
if (isShowMessage) {
if (hasSuccess && (successMessageText || isShowSuccessMessage)) {
@ -69,109 +69,116 @@ const transform: AxiosTransform = {
message: successMessageText || message || '操作成功！',
}).then(() => {
// on close
});
} else if (!hasSuccess && (errorMessageText || isShowErrorMessage)) {
})
}
else if (!hasSuccess && (errorMessageText || isShowErrorMessage)) {
// 是否显示自定义信息提示
showFailToast(message || errorMessageText || '操作失败！');
} else if (!hasSuccess && options.errorMessageMode === 'modal') {
showFailToast(message || errorMessageText || '操作失败！')
}
else if (!hasSuccess && options.errorMessageMode === 'modal') {
// errorMessageMode=‘custom-modal’的时候会显示modal错误弹窗，而不是消息提示，用于一些比较重要的错误
showDialog({
title: '提示',
message: message,
message,
}).then(() => {
// on close
});
})
}
}
// 接口请求成功，直接返回结果
if (code === ResultEnum.SUCCESS) {
return result;
return result
}
// 接口请求错误，统一提示错误信息 这里逻辑可以根据项目进行修改
let errorMsg = message;
let errorMsg = message
const LoginName = PageEnum.BASE_LOGIN_NAME
const LoginPath = PageEnum.BASE_LOGIN
switch (code) {
// 请求失败
case ResultEnum.ERROR:
showFailToast(errorMsg);
break;
showFailToast(errorMsg)
break
// token 过期
case ResultEnum.TOKEN_EXPIRED:
const LoginName = PageEnum.BASE_LOGIN_NAME;
const LoginPath = PageEnum.BASE_LOGIN;
if (router.currentRoute.value?.name === LoginName) return;
if (router.currentRoute.value?.name === LoginName) {
return
}
// 到登录页
errorMsg = '登录超时，请重新登录!';
errorMsg = '登录超时，请重新登录!'
showDialog({
title: '提示',
message: '登录身份已失效，请重新登录!',
})
.then(() => {
storage.clear();
window.location.href = LoginPath;
storage.clear()
window.location.href = LoginPath
})
.catch(() => {
// on cancel
});
break;
})
break
}
throw new Error(errorMsg);
throw new Error(errorMsg)
},
// 请求之前处理config
beforeRequestHook: (config, options) => {
const { apiUrl, joinPrefix, joinParamsToUrl, formatDate, joinTime = true, urlPrefix } = options;
const { apiUrl, joinPrefix, joinParamsToUrl, formatDate, joinTime = true, urlPrefix } = options
const isUrlStr = isUrl(config.url as string);
const isUrlStr = isUrl(config.url as string)
if (!isUrlStr && joinPrefix) {
config.url = `${urlPrefix}${config.url}`;
config.url = `${urlPrefix}${config.url}`
}
if (!isUrlStr && apiUrl && isString(apiUrl)) {
config.url = `${apiUrl}${config.url}`;
config.url = `${apiUrl}${config.url}`
}
const params = config.params || {};
const data = config.data || false;
const params = config.params || {}
const data = config.data || false
if (config.method?.toUpperCase() === RequestEnum.GET) {
if (!isString(params)) {
// 给 get 请求加上时间戳参数，避免从缓存中拿数据。
config.params = Object.assign(params || {}, joinTimestamp(joinTime, false));
} else {
// 兼容restful风格
config.url = config.url + params + `${joinTimestamp(joinTime, true)}`;
config.params = undefined;
config.params = Object.assign(params || {}, joinTimestamp(joinTime, false))
}
} else {
else {
// 兼容restful风格
config.url = `${config.url + params}${joinTimestamp(joinTime, true)}`
config.params = undefined
}
}
else {
if (!isString(params)) {
formatDate && formatRequestDate(params);
formatDate && formatRequestDate(params)
if (
Reflect.has(config, 'data') &&
config.data &&
(Object.keys(config.data).length > 0 || config.data instanceof FormData)
Reflect.has(config, 'data')
&& config.data
&& (Object.keys(config.data).length > 0 || config.data instanceof FormData)
) {
config.data = data;
config.params = params;
} else {
config.data = data
config.params = params
}
else {
// params 是添加到 url 的请求字符串中的，用于 get 请求
// 非GET请求如果没有提供 data，则将 params 视为 data
config.data = params;
config.params = undefined;
config.data = params
config.params = undefined
}
if (joinParamsToUrl) {
config.url = setObjToUrlParams(
config.url as string,
Object.assign({}, config.params, config.data)
);
{ ...config.params, ...config.data },
)
}
} else {
}
else {
// 兼容restful风格
config.url = config.url + params;
config.params = undefined;
config.url = config.url + params
config.params = undefined
}
}
return config;
return config
},
/**
@ -179,30 +186,30 @@ const transform: AxiosTransform = {
*/
requestInterceptors: (config, options) => {
// 请求之前处理config
const userStore = useUserStoreWidthOut();
const token = userStore.getToken;
const userStore = useUserStoreWidthOut()
const token = userStore.getToken
if (token && (config as Recordable)?.requestOptions?.withToken !== false) {
// jwt token
(config as Recordable).headers.Authorization = options.authenticationScheme
? `${options.authenticationScheme} ${token}`
: token;
: token
}
return config;
return config
},
/**
* @description: 响应错误处理
*/
responseInterceptorsCatch: (error: any) => {
const { response, code, message } = error || {};
const { response, code, message } = error || {}
// TODO 此处要根据后端接口返回格式修改
const msg: string =
response && response.data && response.data.message ? response.data.message : '';
const err: string = error.toString();
const msg: string
= response && response.data && response.data.message ? response.data.message : ''
const err: string = error.toString()
try {
if (code === 'ECONNABORTED' && message.indexOf('timeout') !== -1) {
showFailToast('接口请求超时，请刷新页面重试!');
return;
if (code === 'ECONNABORTED' && message.includes('timeout')) {
showFailToast('接口请求超时，请刷新页面重试!')
return
}
if (err && err.includes('Network Error')) {
showDialog({
@ -210,23 +217,25 @@ const transform: AxiosTransform = {
message: '请检查您的网络连接是否正常',
})
.then(() => {})
.catch(() => {});
return Promise.reject(error);
.catch(() => {})
return Promise.reject(error)
}
} catch (error) {
throw new Error(error as any);
}
catch (error) {
throw new Error(error as any)
}
// 请求是否被取消
const isCancel = axios.isCancel(error);
const isCancel = axios.isCancel(error)
if (!isCancel) {
checkStatus(error.response && error.response.status, msg);
} else {
console.warn(error, '请求被取消！');
checkStatus(error.response && error.response.status, msg)
}
//return Promise.reject(error);
return Promise.reject(response?.data);
else {
console.warn(error, '请求被取消！')
}
// return Promise.reject(error);
return Promise.reject(response?.data)
},
};
}
function createAxios(opt?: Partial<CreateAxiosOptions>) {
return new VAxios(
@ -260,7 +269,7 @@ function createAxios(opt?: Partial<CreateAxiosOptions>) {
// 接口地址
apiUrl: globSetting.apiUrl,
// 接口拼接地址
urlPrefix: urlPrefix,
urlPrefix,
// 是否加入时间戳
joinTime: true,
// 忽略重复请求
@ -270,12 +279,12 @@ function createAxios(opt?: Partial<CreateAxiosOptions>) {
},
withCredentials: false,
},
opt || {}
)
);
opt || {},
),
)
}
export const http = createAxios();
export const http = createAxios()
// 项目，多个不同 api 地址，直接在这里导出多个
// src/api ts 里面接口，就可以单独使用这个请求，

64
src/utils/http/axios/types.ts
View File

@ -1,65 +1,65 @@
import { AxiosRequestConfig } from 'axios';
import { AxiosTransform } from './axiosTransform';
import type { AxiosRequestConfig } from 'axios'
import type { AxiosTransform } from './axiosTransform'
export interface CreateAxiosOptions extends AxiosRequestConfig {
transform?: AxiosTransform;
requestOptions?: RequestOptions;
authenticationScheme?: string;
transform?: AxiosTransform
requestOptions?: RequestOptions
authenticationScheme?: string
}
// 上传文件
export interface UploadFileParams {
// 其他参数
data?: Recordable;
data?: Recordable
// 文件参数接口字段名
name?: string;
name?: string
// 文件
file: File | Blob;
file: File | Blob
// 文件名称
filename?: string;
[key: string]: any;
filename?: string
[key: string]: any
}
export interface RequestOptions {
// 请求参数拼接到url
joinParamsToUrl?: boolean;
joinParamsToUrl?: boolean
// 格式化请求参数时间
formatDate?: boolean;
formatDate?: boolean
// 是否显示提示信息
isShowMessage?: boolean;
isShowMessage?: boolean
// 是否解析成JSON
isParseToJson?: boolean;
isParseToJson?: boolean
// 成功的文本信息
successMessageText?: string;
successMessageText?: string
// 是否显示成功信息
isShowSuccessMessage?: boolean;
isShowSuccessMessage?: boolean
// 是否显示失败信息
isShowErrorMessage?: boolean;
isShowErrorMessage?: boolean
// 错误的文本信息
errorMessageText?: string;
errorMessageText?: string
// 是否加入url
joinPrefix?: boolean;
joinPrefix?: boolean
// 接口地址， 不填则使用默认apiUrl
apiUrl?: string;
apiUrl?: string
// 请求拼接路径
urlPrefix?: string;
urlPrefix?: string
// 错误消息提示类型
errorMessageMode?: 'none' | 'modal';
errorMessageMode?: 'none' | 'modal'
// 是否添加时间戳
joinTime?: boolean;
joinTime?: boolean
// 不进行任何处理，直接返回
isTransformResponse?: boolean;
isTransformResponse?: boolean
// 是否返回原生响应头
isReturnNativeResponse?: boolean;
//忽略重复请求
ignoreCancelToken?: boolean;
isReturnNativeResponse?: boolean
// 忽略重复请求
ignoreCancelToken?: boolean
// 是否携带token
withToken?: boolean;
withToken?: boolean
}
export interface Result<T = any> {
code: number;
type?: 'success' | 'error' | 'warning';
message: string;
result?: T;
code: number
type?: 'success' | 'error' | 'warning'
message: string
result?: T
}

74
src/utils/index.ts
View File

@ -1,11 +1,11 @@
import { isObject } from './is/index';
import { isObject } from './is/index'
export function deepMerge<T = any>(src: any = {}, target: any = {}): T {
let key: string;
let key: string
for (key in target) {
src[key] = isObject(src[key]) ? deepMerge(src[key], target[key]) : (src[key] = target[key]);
src[key] = isObject(src[key]) ? deepMerge(src[key], target[key]) : (src[key] = target[key])
}
return src;
return src
}
/**
@ -15,9 +15,9 @@ export function deepMerge<T = any>(src: any = {}, target: any = {}): T {
* @returns {string} The processed part of the color
*/
function addLight(color: string, amount: number) {
const cc = parseInt(color, 16) + amount;
const c = cc > 255 ? 255 : cc;
return c.toString(16).length > 1 ? c.toString(16) : `0${c.toString(16)}`;
const cc = Number.parseInt(color, 16) + amount
const c = cc > 255 ? 255 : cc
return c.toString(16).length > 1 ? c.toString(16) : `0${c.toString(16)}`
}
/**
@ -27,12 +27,12 @@ function addLight(color: string, amount: number) {
* @returns {string} The HEX representation of the processed color
*/
export function darken(color: string, amount: number) {
color = color.indexOf('#') >= 0 ? color.substring(1, color.length) : color;
amount = Math.trunc((255 * amount) / 100);
color = color.includes('#') ? color.substring(1, color.length) : color
amount = Math.trunc((255 * amount) / 100)
return `#${subtractLight(color.substring(0, 2), amount)}${subtractLight(
color.substring(2, 4),
amount
)}${subtractLight(color.substring(4, 6), amount)}`;
amount,
)}${subtractLight(color.substring(4, 6), amount)}`
}
/**
@ -42,31 +42,31 @@ export function darken(color: string, amount: number) {
* @returns {string} The processed color represented as HEX
*/
export function lighten(color: string, amount: number) {
color = color.indexOf('#') >= 0 ? color.substring(1, color.length) : color;
amount = Math.trunc((255 * amount) / 100);
color = color.includes('#') ? color.substring(1, color.length) : color
amount = Math.trunc((255 * amount) / 100)
return `#${addLight(color.substring(0, 2), amount)}${addLight(
color.substring(2, 4),
amount
)}${addLight(color.substring(4, 6), amount)}`;
amount,
)}${addLight(color.substring(4, 6), amount)}`
}
/**
* 判断是否 url
* */
const RegExp = /^http(s)?:\/\//iu;
*/
const RegExp = /^http(s)?:\/\//iu
export function isUrl(url: string) {
return RegExp.test(url);
return RegExp.test(url)
}
/**
* 一维数组转二维数组
* */
*/
export function arrayTrans(arr: number[]): number[][] {
const newArr: number[][] = [];
const newArr: number[][] = []
while (arr.length > 0) {
newArr.push(arr.splice(0, 2));
newArr.push(arr.splice(0, 2))
}
return newArr;
return newArr
}
/**
@ -76,24 +76,24 @@ export function arrayTrans(arr: number[]): number[][] {
* @returns {string} The processed part of the color
*/
function subtractLight(color: string, amount: number) {
const cc = parseInt(color, 16) - amount;
const c = cc < 0 ? 0 : cc;
return c.toString(16).length > 1 ? c.toString(16) : `0${c.toString(16)}`;
const cc = Number.parseInt(color, 16) - amount
const c = cc < 0 ? 0 : cc
return c.toString(16).length > 1 ? c.toString(16) : `0${c.toString(16)}`
}
export function hexToRgba(hex: string, opacity: number) {
const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
hex = hex.replace(shorthandRegex, function (m, r, g, b) {
return r + r + g + g + b + b;
});
const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i
hex = hex.replace(shorthandRegex, (m, r, g, b) => {
return r + r + g + g + b + b
})
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
opacity = opacity >= 0 && opacity <= 1 ? Number(opacity) : 1;
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
opacity = opacity >= 0 && opacity <= 1 ? Number(opacity) : 1
return result
? 'rgba(' +
[parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16), opacity].join(
','
) +
')'
: hex;
? `rgba(${
[Number.parseInt(result[1], 16), Number.parseInt(result[2], 16), Number.parseInt(result[3], 16), opacity].join(
',',
)
})`
: hex
}

68
src/utils/is/index.ts
View File

@ -1,125 +1,125 @@
const toString = Object.prototype.toString;
const toString = Object.prototype.toString
/**
* @description: 判断值是否未某个类型
*/
export function is(val: unknown, type: string) {
return toString.call(val) === `[object ${type}]`;
return toString.call(val) === `[object ${type}]`
}
/**
* @description: 是否为函数
*/
export function isFunction<T = Function>(val: unknown): val is T {
return is(val, 'Function');
return is(val, 'Function')
}
/**
* @description: 是否已定义
*/
export const isDef = <T = unknown>(val?: T): val is T => {
return typeof val !== 'undefined';
};
export function isDef<T = unknown>(val?: T): val is T {
return typeof val !== 'undefined'
}
export const isUnDef = <T = unknown>(val?: T): val is T => {
return !isDef(val);
};
export function isUnDef<T = unknown>(val?: T): val is T {
return !isDef(val)
}
/**
* @description: 是否为对象
*/
export const isObject = (val: any): val is Record<any, any> => {
return val !== null && is(val, 'Object');
};
export function isObject(val: any): val is Record<any, any> {
return val !== null && is(val, 'Object')
}
/**
* @description: 是否为时间
*/
export function isDate(val: unknown): val is Date {
return is(val, 'Date');
return is(val, 'Date')
}
/**
* @description: 是否为数值
*/
export function isNumber(val: unknown): val is number {
return is(val, 'Number');
return is(val, 'Number')
}
/**
* @description: 是否为AsyncFunction
*/
export function isAsyncFunction<T = any>(val: unknown): val is () => Promise<T> {
return is(val, 'AsyncFunction');
return is(val, 'AsyncFunction')
}
/**
* @description: 是否为promise
*/
export function isPromise<T = any>(val: unknown): val is Promise<T> {
return is(val, 'Promise') && isObject(val) && isFunction(val.then) && isFunction(val.catch);
return is(val, 'Promise') && isObject(val) && isFunction(val.then) && isFunction(val.catch)
}
/**
* @description: 是否为字符串
*/
export function isString(val: unknown): val is string {
return is(val, 'String');
return is(val, 'String')
}
/**
* @description: 是否为boolean类型
*/
export function isBoolean(val: unknown): val is boolean {
return is(val, 'Boolean');
return is(val, 'Boolean')
}
/**
* @description: 是否为数组
*/
export function isArray(val: any): val is Array<any> {
return val && Array.isArray(val);
return val && Array.isArray(val)
}
/**
* @description: 是否客户端
*/
export const isClient = () => {
return typeof window !== 'undefined';
};
export function isClient() {
return typeof window !== 'undefined'
}
/**
* @description: 是否为浏览器
*/
export const isWindow = (val: any): val is Window => {
return typeof window !== 'undefined' && is(val, 'Window');
};
export function isWindow(val: any): val is Window {
return typeof window !== 'undefined' && is(val, 'Window')
}
export const isElement = (val: unknown): val is Element => {
return isObject(val) && !!val.tagName;
};
export function isElement(val: unknown): val is Element {
return isObject(val) && !!val.tagName
}
export const isServer = typeof window === 'undefined';
export const isServer = typeof window === 'undefined'
// 是否为图片节点
export function isImageDom(o: Element) {
return o && ['IMAGE', 'IMG'].includes(o.tagName);
return o && ['IMAGE', 'IMG'].includes(o.tagName)
}
export function isNull(val: unknown): val is null {
return val === null;
return val === null
}
export function isNullAndUnDef(val: unknown): val is null | undefined {
return isUnDef(val) && isNull(val);
return isUnDef(val) && isNull(val)
}
export function isNullOrUnDef(val: unknown): val is null | undefined {
return isUnDef(val) || isNull(val);
return isUnDef(val) || isNull(val)
}
/**
* @description: 是否是 https
*/
export function isHttps(val: string): boolean {
return /^https?:\/\//.test(val);
return /^https?:\/\//.test(val)
}

38
src/utils/lib/echarts.ts
View File

@ -1,33 +1,33 @@
import * as echarts from 'echarts/core';
import * as echarts from 'echarts/core'
import {
BarChart,
GaugeChart,
LineChart,
PieChart,
MapChart,
PictorialBarChart,
PieChart,
RadarChart,
GaugeChart,
} from 'echarts/charts';
} from 'echarts/charts'
import {
TitleComponent,
TooltipComponent,
GridComponent,
PolarComponent,
AriaComponent,
ParallelComponent,
LegendComponent,
RadarComponent,
ToolboxComponent,
DataZoomComponent,
VisualMapComponent,
TimelineComponent,
CalendarComponent,
DataZoomComponent,
GridComponent,
LegendComponent,
MarkLineComponent,
} from 'echarts/components';
ParallelComponent,
PolarComponent,
RadarComponent,
TimelineComponent,
TitleComponent,
ToolboxComponent,
TooltipComponent,
VisualMapComponent,
} from 'echarts/components'
import { SVGRenderer } from 'echarts/renderers';
import { SVGRenderer } from 'echarts/renderers'
echarts.use([
LegendComponent,
@ -52,6 +52,6 @@ echarts.use([
TimelineComponent,
CalendarComponent,
MarkLineComponent,
]);
])
export default echarts;
export default echarts

6
src/utils/log.ts
View File

@ -1,9 +1,9 @@
const projectName = import.meta.env.VITE_GLOB_APP_TITLE;
const projectName = import.meta.env.VITE_GLOB_APP_TITLE
export function warn(message: string) {
console.warn(`[${projectName} warn]:${message}`);
console.warn(`[${projectName} warn]:${message}`)
}
export function error(message: string) {
throw new Error(`[${projectName} error]:${message}`);
throw new Error(`[${projectName} error]:${message}`)
}

17
src/utils/urlUtils.ts
View File

@ -9,16 +9,17 @@
* ==>www.baidu.com?a=3&b=4
*/
export function setObjToUrlParams(baseUrl: string, obj: object): string {
let parameters = '';
let url = '';
let parameters = ''
let url = ''
for (const key in obj) {
parameters += key + '=' + encodeURIComponent(obj[key]) + '&';
parameters += `${key}=${encodeURIComponent(obj[key])}&`
}
parameters = parameters.replace(/&$/, '');
parameters = parameters.replace(/&$/, '')
if (/\?$/.test(baseUrl)) {
url = baseUrl + parameters;
} else {
url = baseUrl.replace(/\/?$/, '?') + parameters;
url = baseUrl + parameters
}
return url;
else {
url = baseUrl.replace(/\/?$/, '?') + parameters
}
return url
}

98
src/views/dashboard/index.vue
View File

@ -1,19 +1,23 @@
<template>
<div class="flex flex-col justify-center items-center h-screen p-60px">
<div class="wel-box flex flex-col items-center justify-between w-full">
<div class="h-screen flex flex-col items-center justify-center p-60px">
<div class="wel-box w-full flex flex-col items-center justify-between">
<SvgIcon class="logo" :size="130" name="logo" />
<div class="text-darkBlue dark:text-garyWhite text-2xl font-black mt-12 mb-4 text-center"
>欢迎来到 {{ title }}</div
>
<div class="w-full mt-4 mb-6">
<div class="text-darkBlue dark:text-garyWhite mb-4 mt-12 text-center text-2xl font-black">
{{ title }}
</div>
<div class="mb-6 mt-4 w-full">
<van-swipe class="h-30" :autoplay="3000" :indicator-color="designStore.appTheme">
<van-swipe-item
class="text-gray-700 dark:text-gray-400 leading-relaxed text-center"
v-for="(text, index) in getSwipeText"
:key="index"
class="text-center text-gray-700 leading-relaxed dark:text-gray-400"
>
<p class="text-lg">{{ text.title }}</p>
<p class="text-sm">{{ text.details }}</p>
<p class="text-lg">
{{ text.title }}
</p>
<p class="text-sm">
{{ text.details }}
</p>
</van-swipe-item>
</van-swipe>
</div>
@ -21,45 +25,49 @@
</div>
</template>
<script setup lang="ts" name="DashboardPage">
import { computed } from 'vue';
import { useDesignSettingStore } from '@/store/modules/designSetting';
import SvgIcon from '@/components/SvgIcon.vue';
import { useGlobSetting } from '@/hooks/setting';
<script setup lang="ts">
import { computed } from 'vue'
import { useDesignSettingStore } from '@/store/modules/designSetting'
import SvgIcon from '@/components/SvgIcon.vue'
import { useGlobSetting } from '@/hooks/setting'
const designStore = useDesignSettingStore();
const globSetting = useGlobSetting();
defineOptions({
name: 'DashboardPage',
})
const { title } = globSetting;
const designStore = useDesignSettingStore()
const globSetting = useGlobSetting()
const getSwipeText = computed(() => {
return [
{
title: '💡 最新技术栈',
details: '基于Vue3、Vant4、Vite、TypeScript、windiCss等最新技术栈开发',
},
{
title: '⚡️ 轻量快速的热重载',
details: '无论应用程序大小如何，都始终极快的模块热重载（HMR）',
},
{
title: '🔩 主题配置',
details: '具备主题配置及黑暗主题适配，且持久化保存',
},
{
title: '🛠️ 丰富的 Vite 插件',
details: '集成大部分 Vite 插件，无需繁琐配置，开箱即用',
},
{
title: '📊 内置 useEcharts hooks',
details: '满足大部分图表展示，只需要写你的 options',
},
{
title: '🥳 完善的登录系统、路由、Axios配置',
details: '所有架构已搭建完毕，你可以直接开发你的业务需求',
},
];
});
const { title } = globSetting
const getSwipeText = computed(() => {
return [
{
title: '💡 最新技术栈',
details: '基于Vue3、Vant4、Vite、TypeScript、UnoCSS等最新技术栈开发',
},
{
title: '⚡️ 轻量快速的热重载',
details: '无论应用程序大小如何，都始终极快的模块热重载（HMR）',
},
{
title: '🔩 主题配置',
details: '具备主题配置及黑暗主题适配，且持久化保存',
},
{
title: '🛠️ 丰富的 Vite 插件',
details: '集成大部分 Vite 插件，无需繁琐配置，开箱即用',
},
{
title: '📊 内置 useEcharts hooks',
details: '满足大部分图表展示，只需要写你的 options',
},
{
title: '🥳 完善的登录系统、路由、Axios配置',
details: '所有架构已搭建完毕，你可以直接开发你的业务需求',
},
]
})
</script>
<style scoped lang="less"></style>

51
src/views/exception/403.vue
View File

@ -1,40 +1,45 @@
<template>
<div class="flex flex-col justify-center page-container">
<div class="page-container flex flex-col justify-center">
<div class="text-center">
<img src="~@/assets/icons/exception/403.svg" alt="" />
<img src="~@/assets/icons/exception/403.svg" alt="">
</div>
<div class="text-center">
<h1 class="text-base text-gray-500">抱歉，你无权访问该页面</h1>
<n-button type="info" @click="goHome">回到首页</n-button>
<h1 class="text-base text-gray-500">
抱歉，你无权访问该页面
</h1>
<n-button type="info" @click="goHome">
回到首页
</n-button>
</div>
</div>
</template>
<script lang="ts" setup>
import { useRouter } from 'vue-router';
const router = useRouter();
function goHome() {
router.push('/');
}
import { useRouter } from 'vue-router'
const router = useRouter()
function goHome() {
router.push('/')
}
</script>
<style lang="less" scoped>
.page-container {
width: 100%;
border-radius: 4px;
padding: 50px 0;
height: 100vh;
width: 100%;
border-radius: 4px;
padding: 50px 0;
height: 100vh;
.text-center {
h1 {
color: #666;
padding: 20px 0;
}
}
img {
width: 350px;
margin: 0 auto;
.text-center {
h1 {
color: #666;
padding: 20px 0;
}
}
img {
width: 350px;
margin: 0 auto;
}
}
</style>

45
src/views/exception/404.vue
View File

@ -1,37 +1,42 @@
<template>
<div class="flex flex-col justify-center page-container">
<div class="page-container flex flex-col justify-center">
<div class="text-center">
<img src="~@/assets/icons/exception/404.svg" alt="" />
<img src="~@/assets/icons/exception/404.svg" alt="">
</div>
<div class="text-center">
<h1 class="text-base text-gray-500">抱歉，你访问的页面不存在</h1>
<van-button type="primary" @click="goHome">回到首页</van-button>
<h1 class="text-base text-gray-500">
抱歉，你访问的页面不存在
</h1>
<van-button type="primary" @click="goHome">
回到首页
</van-button>
</div>
</div>
</template>
<script lang="ts" setup>
import { useRouter } from 'vue-router';
const router = useRouter();
function goHome() {
router.push('/');
}
import { useRouter } from 'vue-router'
const router = useRouter()
function goHome() {
router.push('/')
}
</script>
<style lang="less" scoped>
.page-container {
height: 100%;
height: 100%;
.text-center {
h1 {
color: #666;
padding: 20px 0;
}
}
img {
width: 350px;
margin: 0 auto;
.text-center {
h1 {
color: #666;
padding: 20px 0;
}
}
img {
width: 350px;
margin: 0 auto;
}
}
</style>

51
src/views/exception/500.vue
View File

@ -1,40 +1,45 @@
<template>
<div class="flex flex-col justify-center page-container">
<div class="page-container flex flex-col justify-center">
<div class="text-center">
<img src="~@/assets/icons/exception/500.svg" alt="" />
<img src="~@/assets/icons/exception/500.svg" alt="">
</div>
<div class="text-center">
<h1 class="text-base text-gray-500">抱歉，服务器出错了</h1>
<n-button type="info" @click="goHome">回到首页</n-button>
<h1 class="text-base text-gray-500">
抱歉，服务器出错了
</h1>
<n-button type="info" @click="goHome">
回到首页
</n-button>
</div>
</div>
</template>
<script lang="ts" setup>
import { useRouter } from 'vue-router';
const router = useRouter();
function goHome() {
router.push('/');
}
import { useRouter } from 'vue-router'
const router = useRouter()
function goHome() {
router.push('/')
}
</script>
<style lang="less" scoped>
.page-container {
width: 100%;
border-radius: 4px;
padding: 50px 0;
height: 100vh;
width: 100%;
border-radius: 4px;
padding: 50px 0;
height: 100vh;
.text-center {
h1 {
color: #666;
padding: 20px 0;
}
}
img {
width: 350px;
margin: 0 auto;
.text-center {
h1 {
color: #666;
padding: 20px 0;
}
}
img {
width: 350px;
margin: 0 auto;
}
}
</style>

73
src/views/login/ForgetPasswordForm.vue
View File

@ -1,8 +1,8 @@
<template>
<van-form ref="formRef" v-if="getShow" class="flex flex-col items-center" @submit="handleReset">
<van-form v-if="getShow" ref="formRef" class="flex flex-col items-center" @submit="handleReset">
<van-field
class="enter-y items-center mb-25px !rounded-md"
v-model="formData.username"
class="enter-y mb-25px items-center !rounded-md"
name="username"
placeholder="用户名"
:rules="getFormRules.username"
@ -15,8 +15,8 @@
</van-field>
<van-field
class="enter-y items-center mb-25px !rounded-md"
v-model="formData.mobile"
class="enter-y mb-25px items-center !rounded-md"
name="password"
placeholder="手机号码"
:rules="getFormRules.mobile"
@ -29,8 +29,8 @@
</van-field>
<van-field
class="enter-y items-center mb-70px !rounded-md"
v-model="formData.sms"
class="enter-y mb-70px items-center !rounded-md"
center
clearable
placeholder="请输入短信验证码"
@ -42,7 +42,9 @@
</Icon>
</template>
<template #button>
<van-button size="small" type="primary">发送验证码</van-button>
<van-button size="small" type="primary">
发送验证码
</van-button>
</template>
</van-field>
@ -69,39 +71,40 @@
</template>
<script setup lang="ts">
import { computed, reactive, ref, unref } from 'vue';
import type { FormInstance } from 'vant';
import { Icon } from '@vicons/utils';
import { UserOutlined, MobileOutlined, EditOutlined } from '@vicons/antd';
import { LoginStateEnum, useLoginState, useFormRules } from './useLogin';
import { computed, reactive, ref, unref } from 'vue'
import type { FormInstance } from 'vant'
import { Icon } from '@vicons/utils'
import { EditOutlined, MobileOutlined, UserOutlined } from '@vicons/antd'
import { LoginStateEnum, useFormRules, useLoginState } from './useLogin'
const { handleBackLogin, getLoginState } = useLoginState();
const { getFormRules } = useFormRules();
const getShow = computed(() => unref(getLoginState) === LoginStateEnum.RESET_PASSWORD);
const { handleBackLogin, getLoginState } = useLoginState()
const { getFormRules } = useFormRules()
const getShow = computed(() => unref(getLoginState) === LoginStateEnum.RESET_PASSWORD)
const loading = ref(false);
const formRef = ref<FormInstance>();
const formData = reactive({
username: '',
mobile: '',
sms: '',
});
const loading = ref(false)
const formRef = ref<FormInstance>()
const formData = reactive({
username: '',
mobile: '',
sms: '',
})
function handleReset() {
formRef.value
?.validate()
.then(async () => {
try {
loading.value = true;
// do something
} finally {
loading.value = false;
}
})
.catch(() => {
console.error('验证失败');
});
}
function handleReset() {
formRef.value
?.validate()
.then(async () => {
try {
loading.value = true
// do something
}
finally {
loading.value = false
}
})
.catch(() => {
console.error('验证失败')
})
}
</script>
<style scoped lang="less"></style>

26
src/views/login/Login.vue
View File

@ -1,7 +1,7 @@
<template>
<div>
<div class="flex justify-center h-screen p-8">
<div class="flex flex-col w-full">
<div class="h-screen flex justify-center p-8">
<div class="w-full flex flex-col">
<LoginTitle />
<LoginForm />
<ForgetPasswordForm />
@ -13,18 +13,18 @@
</template>
<script setup lang="ts">
import LoginTitle from './LoginTitle.vue';
import LoginForm from './LoginForm.vue';
import ForgetPasswordForm from './ForgetPasswordForm.vue';
import RegisterForm from './RegisterForm.vue';
import LoginWave from './LoginWave.vue';
import LoginTitle from './LoginTitle.vue'
import LoginForm from './LoginForm.vue'
import ForgetPasswordForm from './ForgetPasswordForm.vue'
import RegisterForm from './RegisterForm.vue'
import LoginWave from './LoginWave.vue'
</script>
<style scoped lang="less">
:deep(.van-field__left-icon) {
display: flex;
}
:deep(.van-field__right-icon) {
display: flex;
}
:deep(.van-field__left-icon) {
display: flex;
}
:deep(.van-field__right-icon) {
display: flex;
}
</style>

119
src/views/login/LoginForm.vue
View File

@ -1,8 +1,8 @@
<template>
<van-form ref="formRef" v-if="getShow" class="flex flex-col items-center" @submit="handleSubmit">
<van-form v-if="getShow" ref="formRef" class="flex flex-col items-center" @submit="handleSubmit">
<van-field
class="enter-y items-center mb-25px !rounded-md"
v-model="formData.username"
class="enter-y mb-25px items-center !rounded-md"
name="username"
placeholder="用户名"
:rules="getFormRules.username"
@ -14,8 +14,8 @@
</template>
</van-field>
<van-field
class="enter-y items-center mb-25px !rounded-md"
v-model="formData.password"
class="enter-y mb-25px items-center !rounded-md"
:type="switchPassType ? 'password' : 'text'"
name="password"
placeholder="密码"
@ -37,16 +37,16 @@
</template>
</van-field>
<div class="enter-y w-full px-5px flex justify-between mb-100px">
<div class="enter-y mb-100px w-full flex justify-between px-5px">
<div class="flex items-center">
<van-switch class="mr-8px !text-30px" v-model="rememberMe" />
<van-switch v-model="rememberMe" class="mr-8px !text-30px" />
<span class="!text-25px">记住我</span>
</div>
<a class="!text-25px" @click="setLoginState(LoginStateEnum.RESET_PASSWORD)">忘记密码?</a>
</div>
<van-button
class="enter-y !rounded-md !mb-25px"
class="enter-y !mb-25px !rounded-md"
type="primary"
block
native-type="submit"
@ -67,64 +67,69 @@
</template>
<script setup lang="ts">
import { computed, onMounted, reactive, ref, unref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { showFailToast, showLoadingToast, showSuccessToast } from 'vant';
import type { FormInstance } from 'vant';
import { Icon } from '@vicons/utils';
import { UserOutlined, LockOutlined, EyeOutlined, EyeInvisibleOutlined } from '@vicons/antd';
import { useUserStore } from '@/store/modules/user';
import { ResultEnum } from '@/enums/httpEnum';
import { PageEnum } from '@/enums/pageEnum';
import { LoginStateEnum, useLoginState, useFormRules } from './useLogin';
import { computed, onMounted, reactive, ref, unref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { showFailToast, showLoadingToast, showSuccessToast } from 'vant'
import type { FormInstance } from 'vant'
import { Icon } from '@vicons/utils'
import { EyeInvisibleOutlined, EyeOutlined, LockOutlined, UserOutlined } from '@vicons/antd'
import { LoginStateEnum, useFormRules, useLoginState } from './useLogin'
import { useUserStore } from '@/store/modules/user'
import { ResultEnum } from '@/enums/httpEnum'
import { PageEnum } from '@/enums/pageEnum'
const { setLoginState, getLoginState } = useLoginState();
const { getFormRules } = useFormRules();
const userStore = useUserStore();
const router = useRouter();
const route = useRoute();
const { setLoginState, getLoginState } = useLoginState()
const { getFormRules } = useFormRules()
const userStore = useUserStore()
const router = useRouter()
const route = useRoute()
const formRef = ref<FormInstance>();
const loading = ref(false);
const rememberMe = ref(false);
const switchPassType = ref(true);
const formData = reactive({
username: 'admin',
password: '123456',
});
const formRef = ref<FormInstance>()
const loading = ref(false)
const rememberMe = ref(false)
const switchPassType = ref(true)
const formData = reactive({
username: 'admin',
password: '123456',
})
const getShow = computed(() => unref(getLoginState) === LoginStateEnum.LOGIN);
const getShow = computed(() => unref(getLoginState) === LoginStateEnum.LOGIN)
function handleSubmit() {
formRef.value
?.validate()
.then(async () => {
try {
loading.value = true;
showLoadingToast('登录中...');
const { code, message: msg } = await userStore.Login({
username: formData.username,
password: formData.password,
});
if (code == ResultEnum.SUCCESS) {
const toPath = decodeURIComponent((route.query?.redirect || '/') as string);
showSuccessToast('登录成功，即将进入系统');
if (route.name === PageEnum.BASE_LOGIN_NAME) {
router.replace('/');
} else router.replace(toPath);
} else {
showFailToast(msg || '登录失败');
function handleSubmit() {
formRef.value
?.validate()
.then(async () => {
try {
loading.value = true
showLoadingToast('登录中...')
const { code, message: msg } = await userStore.Login({
username: formData.username,
password: formData.password,
})
if (code === ResultEnum.SUCCESS) {
const toPath = decodeURIComponent((route.query?.redirect || '/') as string)
showSuccessToast('登录成功，即将进入系统')
if (route.name === PageEnum.BASE_LOGIN_NAME) {
router.replace('/')
}
else {
router.replace(toPath)
}
} finally {
loading.value = false;
}
})
.catch(() => {
console.error('验证失败');
});
}
else {
showFailToast(msg || '登录失败')
}
}
finally {
loading.value = false
}
})
.catch(() => {
console.error('验证失败')
})
}
onMounted(() => {});
onMounted(() => {})
</script>
<style scoped lang="less"></style>

10
src/views/login/LoginTitle.vue
View File

@ -1,20 +1,20 @@
<template>
<div class="flex flex-col items-center justify-center">
<div class="logo my-35px enter-y">
<div class="logo enter-y my-35px">
<SvgIcon class="!h-250px !w-250px" name="logo" />
</div>
<div class="mb-80px text-darkBlue dark:text-garyWhite text-45px font-black enter-y">
<div class="text-darkBlue dark:text-garyWhite enter-y mb-80px text-45px font-black">
{{ title }}
</div>
</div>
</template>
<script setup lang="ts">
import { useGlobSetting } from '@/hooks/setting';
import { useGlobSetting } from '@/hooks/setting'
const globSetting = useGlobSetting();
const globSetting = useGlobSetting()
const { title } = globSetting;
const { title } = globSetting
</script>
<style scoped lang="less"></style>

100
src/views/login/LoginWave.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="enter-y fixed bottom-0 w-full !-z-5 wave-wrapper">
<div class="enter-y wave-wrapper fixed bottom-0 w-full !-z-5">
<svg
class="ignore-waves"
xmlns="http://www.w3.org/2000/svg"
@ -45,61 +45,61 @@
</template>
<script setup lang="ts">
import { useDesignSettingStore } from '@/store/modules/designSetting';
import { hexToRgba } from '@/utils/index';
import { useDesignSettingStore } from '@/store/modules/designSetting'
import { hexToRgba } from '@/utils/index'
const designStore = useDesignSettingStore();
const designStore = useDesignSettingStore()
</script>
<style scoped lang="less">
.wave-wrapper {
position: fixed;
width: 100%;
left: 0;
bottom: 0;
}
.ignore-waves {
position: relative;
display: block;
width: 100%;
height: 50px;
min-height: 40px;
max-height: 80px;
position: fixed;
width: 100%;
left: 0;
bottom: 0;
}
.ignore-waves {
position: relative;
display: block;
width: 100%;
height: 50px;
min-height: 40px;
max-height: 80px;
}
/* Animation */
.parallax > use {
animation: move-forever 12s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
animation: move-forever 12s linear infinite;
}
.parallax > use:nth-child(1) {
animation-delay: -2s;
animation-duration: 7s;
}
.parallax > use:nth-child(2) {
animation-delay: -3s;
animation-duration: 10s;
}
.parallax > use:nth-child(3) {
animation-delay: -4s;
animation-duration: 13s;
}
.parallax > use:nth-child(4) {
animation-delay: -5s;
animation-duration: 16s;
}
@keyframes move-forever {
0% {
transform: translate3d(-90px, 0, 0);
}
/* Animation */
.parallax > use {
animation: move-forever 12s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
animation: move-forever 12s linear infinite;
}
.parallax > use:nth-child(1) {
animation-delay: -2s;
animation-duration: 7s;
}
.parallax > use:nth-child(2) {
animation-delay: -3s;
animation-duration: 10s;
}
.parallax > use:nth-child(3) {
animation-delay: -4s;
animation-duration: 13s;
}
.parallax > use:nth-child(4) {
animation-delay: -5s;
animation-duration: 16s;
}
@keyframes move-forever {
0% {
transform: translate3d(-90px, 0, 0);
}
100% {
transform: translate3d(85px, 0, 0);
}
100% {
transform: translate3d(85px, 0, 0);
}
}
</style>

105
src/views/login/RegisterForm.vue
View File

@ -1,9 +1,9 @@
<template>
<van-form ref="formRef" v-if="getShow" class="flex flex-col" @submit="handleRegister">
<van-form v-if="getShow" ref="formRef" class="flex flex-col" @submit="handleRegister">
<van-cell-group inset class="enter-y !mx-0 !mb-60px">
<van-field
class="enter-y items-center !rounded-md"
v-model="formData.username"
class="enter-y items-center !rounded-md"
name="username"
placeholder="用户名"
:rules="getFormRules.username"
@ -16,8 +16,8 @@
</van-field>
<van-field
class="enter-y items-center !rounded-md"
v-model="formData.mobile"
class="enter-y items-center !rounded-md"
name="password"
placeholder="手机号码"
:rules="getFormRules.mobile"
@ -30,8 +30,8 @@
</van-field>
<van-field
class="enter-y items-center !rounded-md"
v-model="formData.sms"
class="enter-y items-center !rounded-md"
center
clearable
placeholder="请输入短信验证码"
@ -43,13 +43,15 @@
</Icon>
</template>
<template #button>
<van-button size="small" type="primary">发送验证码</van-button>
<van-button size="small" type="primary">
发送验证码
</van-button>
</template>
</van-field>
<van-field
class="enter-y items-center !rounded-md"
v-model="formData.password"
class="enter-y items-center !rounded-md"
:type="switchPassType ? 'password' : 'text'"
name="password"
placeholder="密码"
@ -72,8 +74,8 @@
</van-field>
<van-field
class="enter-y items-center !rounded-md"
v-model="formData.confirmPassword"
class="enter-y items-center !rounded-md"
:type="switchConfirmPassType ? 'password' : 'text'"
name="confirmPassword"
placeholder="确认密码"
@ -131,58 +133,59 @@
</template>
<script setup lang="ts">
import { computed, reactive, ref, unref } from 'vue';
import type { FormInstance } from 'vant';
import { Icon } from '@vicons/utils';
import {
UserOutlined,
MobileOutlined,
EditOutlined,
LockOutlined,
EyeOutlined,
EyeInvisibleOutlined,
} from '@vicons/antd';
import { LoginStateEnum, useLoginState, useFormRules } from './useLogin';
import { computed, reactive, ref, unref } from 'vue'
import type { FormInstance } from 'vant'
import { Icon } from '@vicons/utils'
import {
EditOutlined,
EyeInvisibleOutlined,
EyeOutlined,
LockOutlined,
MobileOutlined,
UserOutlined,
} from '@vicons/antd'
import { LoginStateEnum, useFormRules, useLoginState } from './useLogin'
const { handleBackLogin, getLoginState } = useLoginState();
const getShow = computed(() => unref(getLoginState) === LoginStateEnum.REGISTER);
const { handleBackLogin, getLoginState } = useLoginState()
const getShow = computed(() => unref(getLoginState) === LoginStateEnum.REGISTER)
const loading = ref(false);
const formRef = ref<FormInstance>();
const loading = ref(false)
const formRef = ref<FormInstance>()
const formData = reactive({
username: '',
mobile: '',
sms: '',
password: '',
confirmPassword: '',
policy: false,
});
const formData = reactive({
username: '',
mobile: '',
sms: '',
password: '',
confirmPassword: '',
policy: false,
})
const { getFormRules } = useFormRules(formData);
const { getFormRules } = useFormRules(formData)
const switchPassType = ref(true);
const switchConfirmPassType = ref(true);
const switchPassType = ref(true)
const switchConfirmPassType = ref(true)
function handleRegister() {
formRef.value
?.validate()
.then(async () => {
try {
loading.value = true;
// do something
function handleRegister() {
formRef.value
?.validate()
.then(async () => {
try {
loading.value = true
// do something
console.log('%c [ ]-167', 'font-size:13px; background:pink; color:#bf2c9f;');
} finally {
loading.value = false;
console.log('%c [ ]-167', 'font-size:13px; background:pink; color:#bf2c9f;')
}
finally {
loading.value = false
console.log('%c [ ]-171', 'font-size:13px; background:pink; color:#bf2c9f;');
}
})
.catch(() => {
console.error('验证失败');
});
}
console.log('%c [ ]-171', 'font-size:13px; background:pink; color:#bf2c9f;')
}
})
.catch(() => {
console.error('验证失败')
})
}
</script>
<style scoped lang="less"></style>

58
src/views/login/useLogin.ts
View File

@ -1,5 +1,5 @@
import type { FieldRule } from 'vant';
import { computed, ref, unref } from 'vue';
import type { FieldRule } from 'vant'
import { computed, ref, unref } from 'vue'
export enum LoginStateEnum {
LOGIN,
@ -7,54 +7,54 @@ export enum LoginStateEnum {
RESET_PASSWORD,
}
const currentState = ref(LoginStateEnum.LOGIN);
const currentState = ref(LoginStateEnum.LOGIN)
export function useLoginState() {
function setLoginState(state: LoginStateEnum) {
currentState.value = state;
currentState.value = state
}
const getLoginState = computed(() => currentState.value);
const getLoginState = computed(() => currentState.value)
function handleBackLogin() {
setLoginState(LoginStateEnum.LOGIN);
setLoginState(LoginStateEnum.LOGIN)
}
return { setLoginState, getLoginState, handleBackLogin };
return { setLoginState, getLoginState, handleBackLogin }
}
export function useFormRules(formData?: Recordable) {
const getUsernameFormRule = computed(() => createRule('请输入用户名'));
const getPasswordFormRule = computed(() => createRule('请输入密码'));
const getSmsFormRule = computed(() => createRule('请输入短信验证码'));
const getMobileFormRule = computed(() => createRule('请输入手机号码'));
const getUsernameFormRule = computed(() => createRule('请输入用户名'))
const getPasswordFormRule = computed(() => createRule('请输入密码'))
const getSmsFormRule = computed(() => createRule('请输入短信验证码'))
const getMobileFormRule = computed(() => createRule('请输入手机号码'))
const validatePolicy = async (value: any, _: FieldRule) => {
return !value ? Promise.resolve('勾选后才能注册') : Promise.resolve(true);
};
return !value ? Promise.resolve('勾选后才能注册') : Promise.resolve(true)
}
const validateConfirmPassword = (password: string) => {
return async (value: string) => {
if (!value) {
return Promise.resolve('请输入确认密码');
return Promise.resolve('请输入确认密码')
}
if (value !== password) {
return Promise.resolve('两次输入密码不一致');
return Promise.resolve('两次输入密码不一致')
}
return Promise.resolve(true);
};
};
return Promise.resolve(true)
}
}
const getFormRules = computed((): { [k: string]: FieldRule[] } => {
const usernameFormRule = unref(getUsernameFormRule);
const passwordFormRule = unref(getPasswordFormRule);
const smsFormRule = unref(getSmsFormRule);
const mobileFormRule = unref(getMobileFormRule);
const usernameFormRule = unref(getUsernameFormRule)
const passwordFormRule = unref(getPasswordFormRule)
const smsFormRule = unref(getSmsFormRule)
const mobileFormRule = unref(getMobileFormRule)
const mobileRule = {
sms: smsFormRule,
mobile: mobileFormRule,
};
}
switch (unref(currentState)) {
// register form rules
case LoginStateEnum.REGISTER:
@ -66,24 +66,24 @@ export function useFormRules(formData?: Recordable) {
],
policy: [{ validator: validatePolicy, trigger: 'onBlur' }],
...mobileRule,
};
}
// reset password form rules
case LoginStateEnum.RESET_PASSWORD:
return {
username: usernameFormRule,
...mobileRule,
};
}
// login form rules
default:
return {
username: usernameFormRule,
password: passwordFormRule,
};
}
}
});
return { getFormRules };
})
return { getFormRules }
}
function createRule(message: string): FieldRule[] {
@ -93,5 +93,5 @@ function createRule(message: string): FieldRule[] {
message,
trigger: 'onBlur',
},
];
]
}

175
src/views/message/barChart.vue
View File

@ -1,106 +1,107 @@
<template>
<div class="my-card m-40px p-30px rounded-2xl shadow-xl">
<div ref="chartRef" :style="{ height: '350px' }"></div>
<div class="my-card m-40px rounded-2xl p-30px shadow-xl">
<div ref="chartRef" :style="{ height: '350px' }" />
</div>
</template>
<script setup lang="ts">
import { useECharts } from '@/hooks/web/useECharts';
import { onMounted, ref, Ref } from 'vue';
import type { EChartsOption } from 'echarts';
import type { Ref } from 'vue'
import { onMounted, ref } from 'vue'
import type { EChartsOption } from 'echarts'
import { useECharts } from '@/hooks/web/useECharts'
const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
const chartRef = ref<HTMLDivElement | null>(null)
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
const chartOptions: EChartsOption = {
tooltip: {
trigger: 'axis',
axisPointer: {
// Use axis to trigger tooltip
type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow'
},
const chartOptions: EChartsOption = {
tooltip: {
trigger: 'axis',
axisPointer: {
// Use axis to trigger tooltip
type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow'
},
legend: {},
grid: {
left: '1%',
right: '7%',
bottom: '3%',
containLabel: true,
},
legend: {},
grid: {
left: '1%',
right: '7%',
bottom: '3%',
containLabel: true,
},
xAxis: {
type: 'value',
},
yAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
},
series: [
{
name: 'Direct',
type: 'bar',
stack: 'total',
label: {
show: true,
},
emphasis: {
focus: 'series',
},
data: [320, 302, 301, 334, 390, 330, 320],
},
xAxis: {
type: 'value',
{
name: 'Mail Ad',
type: 'bar',
stack: 'total',
label: {
show: true,
},
emphasis: {
focus: 'series',
},
data: [120, 132, 101, 134, 90, 230, 210],
},
yAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
{
name: 'Affiliate Ad',
type: 'bar',
stack: 'total',
label: {
show: true,
},
emphasis: {
focus: 'series',
},
data: [220, 182, 191, 234, 290, 330, 310],
},
series: [
{
name: 'Direct',
type: 'bar',
stack: 'total',
label: {
show: true,
},
emphasis: {
focus: 'series',
},
data: [320, 302, 301, 334, 390, 330, 320],
{
name: 'Video Ad',
type: 'bar',
stack: 'total',
label: {
show: true,
},
{
name: 'Mail Ad',
type: 'bar',
stack: 'total',
label: {
show: true,
},
emphasis: {
focus: 'series',
},
data: [120, 132, 101, 134, 90, 230, 210],
emphasis: {
focus: 'series',
},
{
name: 'Affiliate Ad',
type: 'bar',
stack: 'total',
label: {
show: true,
},
emphasis: {
focus: 'series',
},
data: [220, 182, 191, 234, 290, 330, 310],
data: [150, 212, 201, 154, 190, 330, 410],
},
{
name: 'Search Engine',
type: 'bar',
stack: 'total',
label: {
show: true,
},
{
name: 'Video Ad',
type: 'bar',
stack: 'total',
label: {
show: true,
},
emphasis: {
focus: 'series',
},
data: [150, 212, 201, 154, 190, 330, 410],
emphasis: {
focus: 'series',
},
{
name: 'Search Engine',
type: 'bar',
stack: 'total',
label: {
show: true,
},
emphasis: {
focus: 'series',
},
data: [820, 832, 901, 934, 1290, 1330, 1320],
},
],
};
data: [820, 832, 901, 934, 1290, 1330, 1320],
},
],
}
onMounted(() => {
setOptions(chartOptions);
});
onMounted(() => {
setOptions(chartOptions)
})
</script>
<style scoped></style>

6
src/views/message/index.vue
View File

@ -7,9 +7,9 @@
</template>
<script setup lang="ts">
import lineChart from './lineChart.vue';
import barChart from './barChart.vue';
import pieChart from './pieChart.vue';
import lineChart from './lineChart.vue'
import barChart from './barChart.vue'
import pieChart from './pieChart.vue'
</script>
<style scoped></style>

195
src/views/message/lineChart.vue
View File

@ -1,119 +1,120 @@
<template>
<div class="my-card m-40px p-30px rounded-2xl shadow-xl">
<div ref="chartRef" :style="{ height: '350px' }"></div>
<div class="my-card m-40px rounded-2xl p-30px shadow-xl">
<div ref="chartRef" :style="{ height: '350px' }" />
</div>
</template>
<script setup lang="ts">
import { useECharts } from '@/hooks/web/useECharts';
import { onMounted, ref, Ref } from 'vue';
import type { EChartsOption } from 'echarts';
import type { Ref } from 'vue'
import { onMounted, ref } from 'vue'
import type { EChartsOption } from 'echarts'
import { useECharts } from '@/hooks/web/useECharts'
const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
const chartRef = ref<HTMLDivElement | null>(null)
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
const chartOptions: EChartsOption = {
title: {
text: 'Stacked Area Chart',
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985',
},
const chartOptions: EChartsOption = {
title: {
text: 'Stacked Area Chart',
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985',
},
},
legend: {
data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
top: '10%',
},
legend: {
data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
top: '10%',
},
toolbox: {
feature: {
saveAsImage: {},
},
toolbox: {
feature: {
saveAsImage: {},
},
},
grid: {
top: '30%',
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
},
grid: {
top: '30%',
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
],
yAxis: [
{
type: 'value',
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
],
series: [
{
name: 'Email',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series',
},
],
yAxis: [
{
type: 'value',
data: [120, 132, 101, 134, 90, 230, 210],
},
{
name: 'Union Ads',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series',
},
],
series: [
{
name: 'Email',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series',
},
data: [120, 132, 101, 134, 90, 230, 210],
data: [220, 182, 191, 234, 290, 330, 310],
},
{
name: 'Video Ads',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series',
},
{
name: 'Union Ads',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series',
},
data: [220, 182, 191, 234, 290, 330, 310],
data: [150, 232, 201, 154, 190, 330, 410],
},
{
name: 'Direct',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series',
},
{
name: 'Video Ads',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series',
},
data: [150, 232, 201, 154, 190, 330, 410],
data: [320, 332, 301, 334, 390, 330, 320],
},
{
name: 'Search Engine',
type: 'line',
stack: 'Total',
label: {
show: true,
position: 'top',
},
{
name: 'Direct',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series',
},
data: [320, 332, 301, 334, 390, 330, 320],
areaStyle: {},
emphasis: {
focus: 'series',
},
{
name: 'Search Engine',
type: 'line',
stack: 'Total',
label: {
show: true,
position: 'top',
},
areaStyle: {},
emphasis: {
focus: 'series',
},
data: [820, 932, 901, 934, 1290, 1330, 1320],
},
],
};
data: [820, 932, 901, 934, 1290, 1330, 1320],
},
],
}
onMounted(() => {
setOptions(chartOptions);
});
onMounted(() => {
setOptions(chartOptions)
})
</script>
<style scoped></style>

107
src/views/message/pieChart.vue
View File

@ -1,65 +1,66 @@
<template>
<div class="my-card m-40px p-30px rounded-2xl shadow-xl">
<div ref="chartRef" :style="{ height: '350px' }"></div>
<div class="my-card m-40px rounded-2xl p-30px shadow-xl">
<div ref="chartRef" :style="{ height: '350px' }" />
</div>
</template>
<script setup lang="ts">
import { useECharts } from '@/hooks/web/useECharts';
import { onMounted, ref, Ref } from 'vue';
import type { EChartsOption } from 'echarts';
import type { Ref } from 'vue'
import { onMounted, ref } from 'vue'
import type { EChartsOption } from 'echarts'
import { useECharts } from '@/hooks/web/useECharts'
const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
const chartRef = ref<HTMLDivElement | null>(null)
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
const chartOptions: EChartsOption = {
tooltip: {
trigger: 'item',
},
legend: {
top: '5%',
left: 'center',
},
series: [
{
name: 'Access From',
type: 'pie',
radius: ['40%', '70%'],
center: ['50%', '60%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2,
},
label: {
show: false,
position: 'center',
},
emphasis: {
label: {
show: true,
fontSize: '40',
fontWeight: 'bold',
},
},
labelLine: {
show: false,
},
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' },
],
const chartOptions: EChartsOption = {
tooltip: {
trigger: 'item',
},
legend: {
top: '5%',
left: 'center',
},
series: [
{
name: 'Access From',
type: 'pie',
radius: ['40%', '70%'],
center: ['50%', '60%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2,
},
],
};
label: {
show: false,
position: 'center',
},
emphasis: {
label: {
show: true,
fontSize: '40',
fontWeight: 'bold',
},
},
labelLine: {
show: false,
},
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' },
],
},
],
}
onMounted(() => {
setOptions(chartOptions);
});
onMounted(() => {
setOptions(chartOptions)
})
</script>
<style scoped></style>

Some files were not shown because too many files have changed in this diff Show More