mirror of
https://github.com/XiaoDaiGua-Ray/ray-template.git
synced 2025-04-06 03:57:49 +08:00
yun
GitHub
commit
a82b28fb93
@ -13,5 +13,6 @@ visualizer.html
|
|||||||
.env.*
|
.env.*
|
||||||
src/locales/lang
|
src/locales/lang
|
||||||
.depcheckrc
|
.depcheckrc
|
||||||
src/components/RayChart/theme
|
src/components/RChart/theme
|
||||||
*.md
|
*.md
|
||||||
|
src/icons/*.svg
|
||||||
@ -105,8 +105,13 @@ module.exports = {
|
|||||||
'no-labels': 2, // 禁止标签声明
|
'no-labels': 2, // 禁止标签声明
|
||||||
'no-lone-blocks': 2, // 禁止不必要的嵌套块
|
'no-lone-blocks': 2, // 禁止不必要的嵌套块
|
||||||
'no-multi-spaces': 1, // 禁止使用多余的空格
|
'no-multi-spaces': 1, // 禁止使用多余的空格
|
||||||
'no-multiple-empty-lines': [1, { max: 2 }], // 空行最多不能超过 `2` 行
|
'no-multiple-empty-lines': [
|
||||||
'no-new-func': 1, // 禁止使用 `new Function`
|
'error',
|
||||||
|
{
|
||||||
|
max: 2,
|
||||||
|
},
|
||||||
|
], // 空行最多不能超过 `2` 行
|
||||||
|
'no-new-func': 2, // 禁止使用 `new Function`
|
||||||
'no-new-object': 2, // 禁止使用 `new Object`
|
'no-new-object': 2, // 禁止使用 `new Object`
|
||||||
'no-new-require': 2, // 禁止使用 `new require`
|
'no-new-require': 2, // 禁止使用 `new require`
|
||||||
'no-sparse-arrays': 2, // 禁止稀疏数组
|
'no-sparse-arrays': 2, // 禁止稀疏数组
|
||||||
@ -124,7 +129,6 @@ module.exports = {
|
|||||||
'no-useless-call': 2, // 禁止不必要的 `call` 和 `apply`
|
'no-useless-call': 2, // 禁止不必要的 `call` 和 `apply`
|
||||||
'no-var': 'error', // 禁用 `var`
|
'no-var': 'error', // 禁用 `var`
|
||||||
'no-with': 2, // 禁用 `with`
|
'no-with': 2, // 禁用 `with`
|
||||||
'no-undef': 0,
|
|
||||||
'use-isnan': 2, // 强制使用 isNaN 判断 NaN
|
'use-isnan': 2, // 强制使用 isNaN 判断 NaN
|
||||||
'no-multi-assign': 2, // 禁止连续声明变量
|
'no-multi-assign': 2, // 禁止连续声明变量
|
||||||
'prefer-arrow-callback': 2, // 强制使用箭头函数作为回调
|
'prefer-arrow-callback': 2, // 强制使用箭头函数作为回调
|
||||||
@ -143,15 +147,6 @@ module.exports = {
|
|||||||
],
|
],
|
||||||
'vue/require-v-for-key': ['error'],
|
'vue/require-v-for-key': ['error'],
|
||||||
'vue/require-valid-default-prop': ['error'],
|
'vue/require-valid-default-prop': ['error'],
|
||||||
'no-use-before-define': [
|
|
||||||
'error',
|
|
||||||
{
|
|
||||||
functions: true,
|
|
||||||
classes: true,
|
|
||||||
variables: false,
|
|
||||||
allowNamedExports: false,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
'vue/component-definition-name-casing': ['error', 'PascalCase'],
|
'vue/component-definition-name-casing': ['error', 'PascalCase'],
|
||||||
'vue/html-closing-bracket-newline': [
|
'vue/html-closing-bracket-newline': [
|
||||||
'error',
|
'error',
|
||||||
|
|||||||
10
.vscode/settings.json
vendored
10
.vscode/settings.json
vendored
@ -9,5 +9,13 @@
|
|||||||
"i18n-ally.displayLanguage": "zh-CN",
|
"i18n-ally.displayLanguage": "zh-CN",
|
||||||
"i18n-ally.enabledFrameworks": ["vue", "react"],
|
"i18n-ally.enabledFrameworks": ["vue", "react"],
|
||||||
"typescript.tsdk": "node_modules/typescript/lib",
|
"typescript.tsdk": "node_modules/typescript/lib",
|
||||||
"synthwave84.disableGlow": true
|
"alias-skip.mappings": {
|
||||||
|
"@": "/src",
|
||||||
|
"@use-utils": "/src/utils",
|
||||||
|
"@use-api": "/src/axios/api",
|
||||||
|
"@use-images": "/src/assets/images",
|
||||||
|
"@mock": "/mock"
|
||||||
|
},
|
||||||
|
"alias-skip.allowedsuffix": ["ts", "tsx"],
|
||||||
|
"alias-skip.rootpath": "package.json"
|
||||||
}
|
}
|
||||||
|
|||||||
64
CHANGELOG.md
64
CHANGELOG.md
@ -1,5 +1,69 @@
|
|||||||
# CHANGE LOG
|
# CHANGE LOG
|
||||||
|
|
||||||
|
## 4.2.1
|
||||||
|
|
||||||
|
经过综合考虑，还是给模板增加 `cdn` 的配置。基于 `vite-plugin-cdn2` 插件实现。
|
||||||
|
|
||||||
|
### Feats
|
||||||
|
|
||||||
|
- 指令相关
|
||||||
|
- `v-copy` 指令将使用 `String` 强制转换传入的值
|
||||||
|
- 统一暴露节流、防抖指令的配置项类型 `import type { DebounceBindingOptions, ThrottleBindingOptions } from '@/directives/type'`
|
||||||
|
- 现在 `v-disabled` 指令生效时会降低一点元素的亮度
|
||||||
|
- `changeMenuModelValue` 方法添加节流锁，避免重复刷新 url 导致的一些问题
|
||||||
|
- 新增 `cdn`，缩减构建体积。如果不需要该配置，搜索 `viteCDNPlugin` 注释即可
|
||||||
|
|
||||||
|
## 4.2.0
|
||||||
|
|
||||||
|
针对分包，做了全局的重新设计、调整。让包的名称更加语义化；最重要的是，重新抽离了一些全局可能常用的方法，例如：useI18n、useDayjs 等，在以前这些方法存放于对应的包中，其实这样很不合理，所以现在统一存放于 `src/hooks` 包中。并且该包以后统一存放 `hooks` 方法，并不是 `utils` 方法，做了一个本质的区分，所以 `xxxCopilot.ts` 文件中的方法并不会移动，维持存放在原有的模块下。
|
||||||
|
|
||||||
|
引入 `useGlobalVariable` 来管理全局变量。与 `pinia` `的使用场景不同，useGlobalVariable` 是用于引入一些全局的响应式变量，这些变量不需要缓存，也不依赖任何插件。一个典型的应用是实现 `GlobalSpin`。使用该方法时，请谨慎使用，避免滥用，因为这些变量会被全局缓存且无法被回收。该方法存放的值，暂不支持缓存（如果有需要，可能后期会增加该功能）。
|
||||||
|
|
||||||
|
当项目插件或者需要配置项过多时候，会导致 `vite.config.ts` 文件变得异常臃肿。所以，在本次更新中，将插件的配置单独提出维护（`vite.plugin.confit.ts`）。系统的常用配置依旧在 `cfg.ts` 文件中。所以默认情况下，一般不需要修改 `vite.config.ts` 文件。
|
||||||
|
|
||||||
|
### Feats
|
||||||
|
|
||||||
|
- 新增 `useGlobalVariable` 管理全局变量（该变量可以是在注册插件之前被调用）
|
||||||
|
- `v-disbaled` 指令现在会尝试给元素添加 `disabled` 属性，如果该属性生效的话
|
||||||
|
- 注册指令操作现在不会中断程序执行，但是会抛出错误警告
|
||||||
|
- 抽离 `vite.plugin.confit.ts` 维护项目启动所需插件
|
||||||
|
|
||||||
|
## 4.1.9
|
||||||
|
|
||||||
|
### Feats
|
||||||
|
|
||||||
|
- 新增 RayQRCode 组件（二维码）
|
||||||
|
- 基于 awesome-qr 封装，继承其所有特性。并且拓展 状态、下载、自动更新等属性
|
||||||
|
- 自动卸载于释放内存，仅需要关注 text 内容填充
|
||||||
|
- 移除 qrcode.vue 依赖
|
||||||
|
- 更新 vue-hooks-plus 版本至 v1.8.2
|
||||||
|
- 移除 office 功能集成
|
||||||
|
- 统一包命名方式
|
||||||
|
- 更改 v-copy 实现细节（使用方式不变）
|
||||||
|
|
||||||
|
### Fixes
|
||||||
|
|
||||||
|
- 修复了一些小细节问题
|
||||||
|
|
||||||
|
## 4.1.8
|
||||||
|
|
||||||
|
### Feats
|
||||||
|
|
||||||
|
- 更新 `vite` 版本至 `v4.4.9`
|
||||||
|
- 更新 `vue-hooks-plus` 版本至 `v1.8.1`
|
||||||
|
- 更新了 RayTable 的一些事件的命名
|
||||||
|
- `RayChart` 组件做了一些调整
|
||||||
|
- 支持指定 observer 监听对象，默认为 chart 组件本身
|
||||||
|
- 默认开启 autoChangeTheme 功能
|
||||||
|
- 支持配置 throttleWait 节流等待时间，默认 500ms
|
||||||
|
- 支持通过配置 `desginConfig.echartTheme` 属性指定 `echart theme`。并且只需按照约定方式注册的主题，只需要指定主题名称，即可完成 `light` `dark` 两种主题指定
|
||||||
|
- RayChartInst 新增 dispose render 方法，允许手动渲染与卸载 chart 图
|
||||||
|
- 新增 animation 属性，如果为 true 则会强制触发渲染过渡动画。该配置受 `options.animation` 属性影响，如果该配置为 false 则不会启用过渡动画
|
||||||
|
- 移除反转色功能
|
||||||
|
- 新增图标页面
|
||||||
|
- 修改国际化图标
|
||||||
|
- 剔除无用代码，性能++++
|
||||||
|
|
||||||
## 4.1.7
|
## 4.1.7
|
||||||
|
|
||||||
### Feats
|
### Feats
|
||||||
|
|||||||
@ -1,21 +0,0 @@
|
|||||||
## 常见问题
|
|
||||||
|
|
||||||
### 路由
|
|
||||||
|
|
||||||
#### 缓存失效
|
|
||||||
|
|
||||||
> 如果出现缓存配置不生效的情况可以按照如下方法进行排查
|
|
||||||
|
|
||||||
- 查看 APP_KEEP_ALIVE setupKeepAlive 属性是否配置为 true
|
|
||||||
- 查看每个组件的 `name` 是否唯一，[`KeepAlive`](https://cn.vuejs.org/guide/built-ins/keep-alive.html) 组件重度依赖组件 `name` 作为唯一标识。详情可以查看官方文档
|
|
||||||
- 查看该页面的路由配置是否正确，比如：`path` 是否按照模板约定方式进行配置
|
|
||||||
|
|
||||||
#### 自动导入失败
|
|
||||||
|
|
||||||
> 模板采用自动导入路由模块方式。如果发现路由导入有误、或者导入报错，请查看文件命名是否有误。
|
|
||||||
|
|
||||||
### 国际化
|
|
||||||
|
|
||||||
#### 国际化切换错误、警告
|
|
||||||
|
|
||||||
> 模板二次封装 [`useI18n`](https://github.com/XiaoDaiGua-Ray/ray-template/blob/main/src/locales/useI18n.ts) 方法，首选该方法作为国际化语言切换方法。
|
|
||||||
121
README-US.md
Normal file
121
README-US.md
Normal file
@ -0,0 +1,121 @@
|
|||||||
|
<div align="center">
|
||||||
|
<a href="https://github.com/XiaoDaiGua-Ray/ray-template"> <img alt="Ray Template" width="200" height="200" src="https://usc1.contabostorage.com/c2e495d7890844d392e8ec0c6e5d77eb:alist/ray/ray.svg?sign=ZklU9Bh5b6oKp1X0LOhGwkx4g5mW4wk_w9Jt5zlZ5EQ=:0"> </a> <br> <br>
|
||||||
|
<a href="https://github.com/XiaoDaiGua-Ray/ray-template/blob/main/LICENSE"><img src="https://img.shields.io/github/license/XiaoDaiGua-Ray/ray-template" alt="LICENSE"></a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div align="center">
|
||||||
|
|
||||||
|
# Ray Template
|
||||||
|
|
||||||
|
A middle and backend template based on vite4.x & ts(x) & pinia & vue3.x
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
## ✨ Feature
|
||||||
|
|
||||||
|
- **Latest Technology Stack**：Developed using front-end cutting-edge technologies such as vue3.x/vite4.x/pinia
|
||||||
|
- **TypeScript**：The language for application-level JavaScript
|
||||||
|
- **App Theme**：Configurable themes
|
||||||
|
- **Globalization**：Built-in complete internationalization solution
|
||||||
|
- **Mock Data**：Built-in Mock data scheme
|
||||||
|
- **Permissions**：Built-in complete dynamic routing permission generation solution
|
||||||
|
- **Components**：Secondary encapsulation of multiple commonly used components
|
||||||
|
- **Axios Request**：Secondary encapsulation of the axios library, supporting functions such as cancellation, anti-shake, automatic repeat cancellation, etc.
|
||||||
|
- **Page Cache**：Arbitrarily deep page cache
|
||||||
|
- **SVG**：Built-in svg icon solution
|
||||||
|
- **Standalone Data Methods Views**：Decoupled management of data, methods, and views allows for secondary development with confidence
|
||||||
|
|
||||||
|
## 🪄 Preview
|
||||||
|
|
||||||
|
- [Click to preview](https://xiaodaigua-ray.github.io/ray-template/#/)
|
||||||
|
- [Click to preview(Acceleration address)](https://ray-template.yunkuangao.com/#/)
|
||||||
|
|
||||||
|
## 🦾 Document
|
||||||
|
|
||||||
|
- [Document](https://xiaodaigua-ray.github.io/ray-template-doc/)
|
||||||
|
- [Document(Acceleration address)](https://ray-template.yunkuangao.com/ray-template-doc/)
|
||||||
|
|
||||||
|
## 🔋 Change Log
|
||||||
|
|
||||||
|
- [Change Log](https://github.com/XiaoDaiGua-Ray/xiaodaigua-ray.github.io/blob/main/CHANGELOG.md)
|
||||||
|
|
||||||
|
## 🪴 Prepare
|
||||||
|
|
||||||
|
- [Node](http://nodejs.org/) and [git](https://git-scm.com/) - Project development environment
|
||||||
|
- [Vite](https://vitejs.dev/) - Familiar with vite features
|
||||||
|
- [Vue3](https://v3.vuejs.org/) - Familiar with Vue3.x basic syntax
|
||||||
|
- [TypeScript](https://www.typescriptlang.org/) - Familiar with TypeScript basic syntax
|
||||||
|
- [Es6+](http://es6.ruanyifeng.com/) - Familiar with es6 basic syntax
|
||||||
|
- [Vue-Router-Next](https://next.router.vuejs.org/) - Familiar with the basic use of vue-router4.x
|
||||||
|
- [Naive-UI](https://www.naiveui.com) - UI basic usage
|
||||||
|
- [Mock.js](https://github.com/nuysoft/Mock) - Mockjs basic syntax
|
||||||
|
- [Pinia](https://pinia.vuejs.org/zh/introduction.html) - State manager pinia uses
|
||||||
|
- [TSX](https://github.com/vuejs/babel-plugin-jsx/blob/main/packages/babel-plugin-jsx/README-zh_CN.md) - TSX basic syntax
|
||||||
|
|
||||||
|
## 📦 Setup
|
||||||
|
|
||||||
|
### Get Project
|
||||||
|
|
||||||
|
```sh
|
||||||
|
# github
|
||||||
|
git clone https://github.com/XiaoDaiGua-Ray/ray-template.git
|
||||||
|
|
||||||
|
# If your download speed is very slow, you can switch to the proxy address below
|
||||||
|
git clone https://gh.yka.moe/https://github.com/XiaoDaiGua-Ray/ray-template.git
|
||||||
|
```
|
||||||
|
|
||||||
|
### Pull dependencies
|
||||||
|
|
||||||
|
```sh
|
||||||
|
pnpm i
|
||||||
|
```
|
||||||
|
|
||||||
|
### Startup project
|
||||||
|
|
||||||
|
```sh
|
||||||
|
pnpm dev
|
||||||
|
```
|
||||||
|
|
||||||
|
### Project packaging
|
||||||
|
|
||||||
|
```sh
|
||||||
|
pnpm build
|
||||||
|
```
|
||||||
|
|
||||||
|
### Preview project
|
||||||
|
|
||||||
|
```sh
|
||||||
|
pnpm preview
|
||||||
|
```
|
||||||
|
|
||||||
|
### Volumetric analysis
|
||||||
|
|
||||||
|
```sh
|
||||||
|
pnpm report
|
||||||
|
```
|
||||||
|
|
||||||
|
### Develop
|
||||||
|
|
||||||
|
Introduction and ease of use are the core ideas of this template. So you can safely delete all files under `views/demo` and `router/moduels/demo`, and you will have a clean project.
|
||||||
|
|
||||||
|
## 🪴 Project Activities
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### Contributor
|
||||||
|
|
||||||
|
Thanks for all their contributions 🐝!
|
||||||
|
|
||||||
|
<a href="https://github.com/XiaoDaiGua-Ray/ray-template/graphs/contributors">
|
||||||
|
<img src="https://contrib.rocks/image?repo=XiaoDaiGua-Ray/ray-template" />
|
||||||
|
</a>
|
||||||
|
|
||||||
|
## Browser Support
|
||||||
|
|
||||||
|
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari |
|
||||||
|
| :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
|
||||||
|
| not support | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
|
||||||
|
|
||||||
|
## 📄 License
|
||||||
|
|
||||||
|
[MIT License](https://github.com/XiaoDaiGua-Ray/ray-template/blob/main/LICENSE) © 2022-PRESENT [Ray](https://github.com/XiaoDaiGua-Ray)
|
||||||
185
README.md
185
README.md
@ -1,57 +1,49 @@
|
|||||||
<div align="center"> <a href="https://github.com/XiaoDaiGua-Ray/ray-template"> <img alt="Ray Template" width="200" height="200" src="https://usc1.contabostorage.com/c2e495d7890844d392e8ec0c6e5d77eb:alist/ray/ray.svg?sign=ZklU9Bh5b6oKp1X0LOhGwkx4g5mW4wk_w9Jt5zlZ5EQ=:0"> </a> <br> <br>
|
<div align="center">
|
||||||
|
<a href="https://github.com/XiaoDaiGua-Ray/ray-template"> <img alt="Ray Template" width="200" height="200" src="https://usc1.contabostorage.com/c2e495d7890844d392e8ec0c6e5d77eb:alist/ray/ray.svg?sign=ZklU9Bh5b6oKp1X0LOhGwkx4g5mW4wk_w9Jt5zlZ5EQ=:0"> </a> <br> <br>
|
||||||
<h1>Ray Template</h1>
|
<a href="https://github.com/XiaoDaiGua-Ray/ray-template/blob/main/LICENSE"><img src="https://img.shields.io/github/license/XiaoDaiGua-Ray/ray-template" alt="LICENSE"></a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
|
<div align="center">
|
||||||
|
|
||||||
[](#contributors-)
|
# Ray Template
|
||||||
|
|
||||||
<!-- ALL-CONTRIBUTORS-BADGE:END -->
|
简体中文 | [English](https://github.com/XiaoDaiGua-Ray/ray-template/blob/main/README-US.md)
|
||||||
|
|
||||||
## 前言
|
一个基于 vite4.x & ts(x) & pinia & vue3.x 的中后台模板
|
||||||
|
|
||||||
> 该项目模板采用 `vue3.x` `vite4.x` `pinia` `tsx` 进行开发。
|
</div>
|
||||||
> 使用 `naive ui` 作为组件库。
|
|
||||||
> 预设了最佳构建体验的配置与常用搬砖工具。意在提供一个简洁、快速上手的模板。
|
|
||||||
> 该模板不支持移动端设备。
|
|
||||||
|
|
||||||
## 感谢
|
## ✨ 特性
|
||||||
|
|
||||||
> 感谢 [`yun`](https://me.yka.moe/) 对于本人的支持。
|
- **最新技术栈**：使用 vue3.x/vite4.x/pinia 等前端前沿技术开发
|
||||||
|
|
||||||
## 预览地址
|
|
||||||
|
|
||||||
- [点击预览](https://xiaodaigua-ray.github.io/ray-template/#/)
|
|
||||||
- [点击预览(加速地址)](https://ray-template.yunkuangao.com/#/)
|
|
||||||
|
|
||||||
## 文档地址
|
|
||||||
|
|
||||||
- [文档](https://xiaodaigua-ray.github.io/ray-template-doc/)
|
|
||||||
- [文档(加速地址)](https://ray-template.yunkuangao.com/ray-template-doc/)
|
|
||||||
|
|
||||||
## 更新日志
|
|
||||||
|
|
||||||
- [日志](https://github.com/XiaoDaiGua-Ray/xiaodaigua-ray.github.io/blob/main/CHANGELOG.md)
|
|
||||||
|
|
||||||
## 常见问题
|
|
||||||
|
|
||||||
- [常见问题](https://github.com/XiaoDaiGua-Ray/ray-template/blob/main/COMMONPROBLEM.md)
|
|
||||||
|
|
||||||
## 特性
|
|
||||||
|
|
||||||
- **最新技术栈**：使用 Vue3.x/vite4.x 等前端前沿技术开发
|
|
||||||
- **TypeScript**：应用程序级 JavaScript 的语言
|
- **TypeScript**：应用程序级 JavaScript 的语言
|
||||||
- **主题**：可配置的主题
|
- **主题**：可配置的主题
|
||||||
- **国际化**：内置完善的国际化方案
|
- **国际化**：内置完善的国际化方案
|
||||||
- **Mock 数据**：内置 Mock 数据方案
|
- **Mock 数据**：内置 Mock 数据方案
|
||||||
- **权限**：内置完善的动态路由权限生成方案
|
- **权限**：内置完善的动态路由权限生成方案
|
||||||
- **组件**：二次封装了多个常用的组件
|
- **组件**：二次封装了多个常用的组件
|
||||||
- **Axios 请求**：二次封装 axios 库
|
- **Axios 请求**：二次封装 axios 库，支持：取消、防抖、自动重复取消等功能
|
||||||
|
- **缓存**：任意深度页面缓存
|
||||||
|
- **SVG**：内置 svg icon 解决方案
|
||||||
|
- **独立的 Data Methods Views**：解耦管理的数据、方法、视图，放心二次开发
|
||||||
|
|
||||||
## 准备
|
## 🪄 预览地址
|
||||||
|
|
||||||
- [node](http://nodejs.org/) 和 [git](https://git-scm.com/) -项目开发环境
|
- [点击预览](https://xiaodaigua-ray.github.io/ray-template/#/)
|
||||||
|
- [点击预览(加速地址)](https://ray-template.yunkuangao.com/#/)
|
||||||
|
|
||||||
|
## 🦾 文档地址
|
||||||
|
|
||||||
|
- [文档](https://xiaodaigua-ray.github.io/ray-template-doc/)
|
||||||
|
- [文档(加速地址)](https://ray-template.yunkuangao.com/ray-template-doc/)
|
||||||
|
|
||||||
|
## 🔋 更新日志
|
||||||
|
|
||||||
|
- [更新日志](https://github.com/XiaoDaiGua-Ray/xiaodaigua-ray.github.io/blob/main/CHANGELOG.md)
|
||||||
|
|
||||||
|
## 🪴 准备
|
||||||
|
|
||||||
|
- [Node](http://nodejs.org/) 和 [git](https://git-scm.com/) - 项目开发环境
|
||||||
- [Vite](https://vitejs.dev/) - 熟悉 vite 特性
|
- [Vite](https://vitejs.dev/) - 熟悉 vite 特性
|
||||||
- [Vue3](https://v3.vuejs.org/) - 熟悉 Vue 基础语法
|
- [Vue3](https://v3.vuejs.org/) - 熟悉 Vue 基础语法
|
||||||
- [TypeScript](https://www.typescriptlang.org/) - 熟悉 TypeScript 基本语法
|
- [TypeScript](https://www.typescriptlang.org/) - 熟悉 TypeScript 基本语法
|
||||||
@ -62,16 +54,9 @@
|
|||||||
- [Pinia](https://pinia.vuejs.org/zh/introduction.html) - 状态管理器 pinia 使用
|
- [Pinia](https://pinia.vuejs.org/zh/introduction.html) - 状态管理器 pinia 使用
|
||||||
- [TSX](https://github.com/vuejs/babel-plugin-jsx/blob/main/packages/babel-plugin-jsx/README-zh_CN.md) - tsx 基本语法
|
- [TSX](https://github.com/vuejs/babel-plugin-jsx/blob/main/packages/babel-plugin-jsx/README-zh_CN.md) - tsx 基本语法
|
||||||
|
|
||||||
## 未来
|
## 📦 起步
|
||||||
|
|
||||||
> 根据个人时间空余情况，会不定时对该模板进行更新和迭代。希望将该工具的功能不断补全（虽然现在已经是足够日常开发和使用），将该模板打造为一个更加健全的中后台模板。如果你有好的想法和建议，可以直接联系我或者直接提 `issues` 即可。
|
### 获取项目
|
||||||
|
|
||||||
## 提示
|
|
||||||
|
|
||||||
> 项目默认启用严格模式 `eslint`，但是由于 `vite-plugin-eslint` 插件优先级最高，所以如果出现自动导入类型错误提示，请优先解决其他问题。
|
|
||||||
> 建议开启 `vscode` 保存自动修复功能。
|
|
||||||
|
|
||||||
## 项目安装
|
|
||||||
|
|
||||||
```sh
|
```sh
|
||||||
# github
|
# github
|
||||||
@ -81,118 +66,58 @@ git clone https://github.com/XiaoDaiGua-Ray/ray-template.git
|
|||||||
git clone https://gh.yka.moe/https://github.com/XiaoDaiGua-Ray/ray-template.git
|
git clone https://gh.yka.moe/https://github.com/XiaoDaiGua-Ray/ray-template.git
|
||||||
```
|
```
|
||||||
|
|
||||||
## 拉取依赖
|
### 拉取依赖
|
||||||
|
|
||||||
```sh
|
```sh
|
||||||
# yarn
|
pnpm i
|
||||||
|
|
||||||
yarn
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
### 启动项目
|
||||||
|
|
||||||
```sh
|
```sh
|
||||||
# npm
|
pnpm dev
|
||||||
|
|
||||||
npm install
|
|
||||||
```
|
```
|
||||||
|
|
||||||
## 启动项目
|
### 项目打包
|
||||||
|
|
||||||
```sh
|
```sh
|
||||||
# yarn
|
pnpm build
|
||||||
|
|
||||||
yarn dev
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
### 预览项目
|
||||||
|
|
||||||
```sh
|
```sh
|
||||||
# npm
|
pnpm preview
|
||||||
|
|
||||||
npm run dev
|
|
||||||
```
|
```
|
||||||
|
|
||||||
## 项目打包
|
### 体积分析
|
||||||
|
|
||||||
```sh
|
```sh
|
||||||
# yarn
|
pnpm report
|
||||||
|
|
||||||
yarn build
|
|
||||||
```
|
```
|
||||||
|
|
||||||
```sh
|
### 开发
|
||||||
# npm
|
|
||||||
|
|
||||||
npm run build
|
简介、易上手是该模板的核心思路。所以你可以放心的直接删除 `views/demo` `router/moduels/demo` 下的所有文件，这样就是一个干净的项目了。
|
||||||
```
|
|
||||||
|
|
||||||
## 预览项目
|
## 🪴 项目活动
|
||||||
|
|
||||||
```sh
|
|
||||||
# yarn
|
|
||||||
|
|
||||||
yarn preview
|
### 贡献者
|
||||||
```
|
|
||||||
|
|
||||||
```sh
|
感谢他们的所做的一切贡献 🐝 ！
|
||||||
# npm
|
|
||||||
|
|
||||||
npm run preview
|
<a href="https://github.com/XiaoDaiGua-Ray/ray-template/graphs/contributors">
|
||||||
```
|
<img src="https://contrib.rocks/image?repo=XiaoDaiGua-Ray/ray-template" />
|
||||||
|
</a>
|
||||||
## 体积分析
|
|
||||||
|
|
||||||
```sh
|
|
||||||
# yarn
|
|
||||||
|
|
||||||
yarn report
|
|
||||||
```
|
|
||||||
|
|
||||||
```sh
|
|
||||||
# npm
|
|
||||||
|
|
||||||
npm run report
|
|
||||||
```
|
|
||||||
|
|
||||||
## 浏览器支持
|
## 浏览器支持
|
||||||
|
|
||||||
> 仅支持现代浏览器，不支持 `IE`
|
|
||||||
|
|
||||||
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari |
|
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>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 |
|
||||||
|
|
||||||
## 最后，希望大家搬砖愉快
|
## 📄 证书
|
||||||
|
|
||||||
## 贡献者
|
[MIT License](https://github.com/XiaoDaiGua-Ray/ray-template/blob/main/LICENSE) © 2022-PRESENT [Ray](https://github.com/XiaoDaiGua-Ray)
|
||||||
|
|
||||||
<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
|
|
||||||
<!-- prettier-ignore-start -->
|
|
||||||
<!-- markdownlint-disable -->
|
|
||||||
<table>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td align="center" valign="top" width="14.28%"><a href="https://heartofyun.com"><img src="https://avatars.githubusercontent.com/u/40163747?v=4?s=100" width="100px;" alt="Cloud"/><br /><sub><b>Cloud</b></sub></a><br /><a href="#tool-yunkuangao" title="Tools">🔧</a></td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
<!-- markdownlint-restore -->
|
|
||||||
<!-- prettier-ignore-end -->
|
|
||||||
|
|
||||||
<!-- ALL-CONTRIBUTORS-LIST:END -->
|
|
||||||
|
|
||||||
## Contributors ✨
|
|
||||||
|
|
||||||
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
|
|
||||||
|
|
||||||
<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
|
|
||||||
<!-- prettier-ignore-start -->
|
|
||||||
<!-- markdownlint-disable -->
|
|
||||||
<!-- markdownlint-restore -->
|
|
||||||
<!-- prettier-ignore-end -->
|
|
||||||
|
|
||||||
<!-- ALL-CONTRIBUTORS-LIST:END -->
|
|
||||||
|
|
||||||
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
|
|
||||||
|
|
||||||
## License
|
|
||||||
|
|
||||||
[MIT © Ray-2020](./LICENSE)
|
|
||||||
|
|||||||
51
cfg.ts
51
cfg.ts
@ -38,15 +38,12 @@
|
|||||||
|
|
||||||
import path from 'node:path'
|
import path from 'node:path'
|
||||||
|
|
||||||
import {
|
import { htmlTitlePlugin, mixinCSSPlugin } from './vite-plugins/index'
|
||||||
HTMLTitlePlugin,
|
import { APP_THEME } from './src/app-config/designConfig'
|
||||||
buildOptions,
|
import { PRE_LOADING_CONFIG, SIDE_BAR_LOGO } from './src/app-config/appConfig'
|
||||||
mixinCSSPlugin,
|
|
||||||
} from './vite-plugin/index'
|
|
||||||
import { APP_THEME } from './src/appConfig/designConfig'
|
|
||||||
import { PRE_LOADING_CONFIG, SIDE_BAR_LOGO } from './src/appConfig/appConfig'
|
|
||||||
|
|
||||||
import type { AppConfigExport } from '@/types/modules/cfg'
|
import type { AppConfigExport } from '@/types/modules/cfg'
|
||||||
|
import type { BuildOptions } from 'vite'
|
||||||
|
|
||||||
const config: AppConfigExport = {
|
const config: AppConfigExport = {
|
||||||
/** 公共基础路径配置, 如果为空则会默认以 '/' 填充 */
|
/** 公共基础路径配置, 如果为空则会默认以 '/' 填充 */
|
||||||
@ -82,7 +79,7 @@ const config: AppConfigExport = {
|
|||||||
*
|
*
|
||||||
* 浏览器标题
|
* 浏览器标题
|
||||||
*/
|
*/
|
||||||
title: HTMLTitlePlugin('Ray Template'),
|
title: htmlTitlePlugin(PRE_LOADING_CONFIG.title || 'Ray Template'),
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* 配置 HMR 特定选项(端口、主机、路径和协议)
|
* 配置 HMR 特定选项(端口、主机、路径和协议)
|
||||||
@ -109,7 +106,39 @@ const config: AppConfigExport = {
|
|||||||
*
|
*
|
||||||
* 打包相关配置
|
* 打包相关配置
|
||||||
*/
|
*/
|
||||||
buildOptions: buildOptions,
|
buildOptions: (mode: string): BuildOptions => {
|
||||||
|
const outDirMap = {
|
||||||
|
test: 'dist/test-dist',
|
||||||
|
development: 'dist/development-dist',
|
||||||
|
production: 'dist/production-dist',
|
||||||
|
report: 'dist/report-dist',
|
||||||
|
}
|
||||||
|
const dirPath = outDirMap[mode] || 'dist/test-dist'
|
||||||
|
|
||||||
|
if (mode === 'production') {
|
||||||
|
return {
|
||||||
|
outDir: dirPath,
|
||||||
|
sourcemap: false,
|
||||||
|
terserOptions: {
|
||||||
|
compress: {
|
||||||
|
drop_console: true,
|
||||||
|
drop_debugger: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
return {
|
||||||
|
outDir: dirPath,
|
||||||
|
sourcemap: true,
|
||||||
|
terserOptions: {
|
||||||
|
compress: {
|
||||||
|
drop_console: false,
|
||||||
|
drop_debugger: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* 预设别名
|
* 预设别名
|
||||||
@ -135,6 +164,10 @@ const config: AppConfigExport = {
|
|||||||
find: '@use-images',
|
find: '@use-images',
|
||||||
replacement: path.resolve(__dirname, './src/assets/images'),
|
replacement: path.resolve(__dirname, './src/assets/images'),
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
find: '@mock',
|
||||||
|
replacement: path.resolve(__dirname, './mock'),
|
||||||
|
},
|
||||||
],
|
],
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,26 +1,17 @@
|
|||||||
import { defineMock } from 'vite-plugin-mock-dev-server'
|
import { defineMock } from 'vite-plugin-mock-dev-server'
|
||||||
|
import { pagination, stringify, response, array } from '@mock/shared/utils'
|
||||||
|
import { tableMock } from '@mock/shared/database'
|
||||||
import Mock from 'mockjs'
|
import Mock from 'mockjs'
|
||||||
import { pagination, stringify, response } from '../shared/utils'
|
|
||||||
import { array } from '../shared/database'
|
|
||||||
|
|
||||||
export const getPersonList = defineMock({
|
export const getPersonList = defineMock({
|
||||||
url: '/api/list',
|
url: '/api/list',
|
||||||
method: 'GET',
|
method: 'GET',
|
||||||
delay: 500,
|
delay: 500,
|
||||||
response: (req, res) => {
|
response: (req, res) => {
|
||||||
const person = () => ({
|
|
||||||
id: Mock.Random.guid(),
|
|
||||||
address: Mock.Random.county(true),
|
|
||||||
email: Mock.Random.email(),
|
|
||||||
name: Mock.Random.cname(),
|
|
||||||
age: Mock.Random.integer(18, 60),
|
|
||||||
createDate: Mock.Random.date(),
|
|
||||||
})
|
|
||||||
|
|
||||||
const {
|
const {
|
||||||
query: { page, pageSize, email },
|
query: { page, pageSize, email },
|
||||||
} = req
|
} = req
|
||||||
let list = array(100).map(() => person())
|
let list = array(100).map(() => tableMock())
|
||||||
let length = list.length
|
let length = list.length
|
||||||
|
|
||||||
if (!page || !pageSize) {
|
if (!page || !pageSize) {
|
||||||
|
|||||||
@ -9,6 +9,22 @@
|
|||||||
* @remark 今天也是元气满满撸代码的一天
|
* @remark 今天也是元气满满撸代码的一天
|
||||||
*/
|
*/
|
||||||
|
|
||||||
export function array(length: number) {
|
import Mock from 'mockjs'
|
||||||
return new Array(length).fill(0)
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @param option 自定义配置
|
||||||
|
*
|
||||||
|
* 基础表格数据
|
||||||
|
*/
|
||||||
|
export function tableMock(option?: object) {
|
||||||
|
return {
|
||||||
|
...option,
|
||||||
|
id: Mock.Random.guid(),
|
||||||
|
address: Mock.Random.county(true),
|
||||||
|
email: Mock.Random.email(),
|
||||||
|
name: Mock.Random.cname(),
|
||||||
|
age: Mock.Random.integer(18, 60),
|
||||||
|
createDate: Mock.Random.date(),
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -11,6 +11,10 @@
|
|||||||
|
|
||||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||||
|
|
||||||
|
export function array(length: number) {
|
||||||
|
return new Array(length).fill(0)
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* @param pageCurrent 当前页码
|
* @param pageCurrent 当前页码
|
||||||
|
|||||||
11
package.json
11
package.json
@ -1,7 +1,7 @@
|
|||||||
{
|
{
|
||||||
"name": "ray-template",
|
"name": "ray-template",
|
||||||
"private": false,
|
"private": false,
|
||||||
"version": "4.1.6",
|
"version": "4.2.1",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=16.0.0",
|
"node": ">=16.0.0",
|
||||||
@ -25,6 +25,7 @@
|
|||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@vueuse/core": "^9.1.0",
|
"@vueuse/core": "^9.1.0",
|
||||||
|
"awesome-qr": "2.1.5-rc.0",
|
||||||
"axios": "^1.2.0",
|
"axios": "^1.2.0",
|
||||||
"clipboard": "^2.0.11",
|
"clipboard": "^2.0.11",
|
||||||
"crypto-js": "^4.1.1",
|
"crypto-js": "^4.1.1",
|
||||||
@ -37,11 +38,9 @@
|
|||||||
"pinia": "^2.1.4",
|
"pinia": "^2.1.4",
|
||||||
"pinia-plugin-persistedstate": "^3.1.0",
|
"pinia-plugin-persistedstate": "^3.1.0",
|
||||||
"print-js": "^1.6.0",
|
"print-js": "^1.6.0",
|
||||||
"qrcode.vue": "^3.3.4",
|
|
||||||
"sass": "^1.54.3",
|
|
||||||
"screenfull": "^6.0.2",
|
"screenfull": "^6.0.2",
|
||||||
"vue": "^3.3.4",
|
"vue": "^3.3.4",
|
||||||
"vue-hooks-plus": "1.7.6",
|
"vue-hooks-plus": "1.8.2",
|
||||||
"vue-i18n": "^9.2.2",
|
"vue-i18n": "^9.2.2",
|
||||||
"vue-router": "^4.2.4",
|
"vue-router": "^4.2.4",
|
||||||
"vuedraggable": "^4.1.0",
|
"vuedraggable": "^4.1.0",
|
||||||
@ -81,11 +80,13 @@
|
|||||||
"postcss-px-to-viewport-8-plugin": "1.2.2",
|
"postcss-px-to-viewport-8-plugin": "1.2.2",
|
||||||
"prettier": "^2.7.1",
|
"prettier": "^2.7.1",
|
||||||
"rollup-plugin-visualizer": "^5.8.3",
|
"rollup-plugin-visualizer": "^5.8.3",
|
||||||
|
"sass": "1.54.3",
|
||||||
"svg-sprite-loader": "^6.0.11",
|
"svg-sprite-loader": "^6.0.11",
|
||||||
"typescript": "^5.0.2",
|
"typescript": "^5.0.2",
|
||||||
"unplugin-auto-import": "^0.15.0",
|
"unplugin-auto-import": "^0.15.0",
|
||||||
"unplugin-vue-components": "^0.25.1",
|
"unplugin-vue-components": "^0.25.1",
|
||||||
"vite": "^4.3.9",
|
"vite": "^4.4.9",
|
||||||
|
"vite-plugin-cdn2": "0.12.4",
|
||||||
"vite-plugin-compression": "^0.5.1",
|
"vite-plugin-compression": "^0.5.1",
|
||||||
"vite-plugin-ejs": "^1.6.4",
|
"vite-plugin-ejs": "^1.6.4",
|
||||||
"vite-plugin-eslint": "1.8.1",
|
"vite-plugin-eslint": "1.8.1",
|
||||||
|
|||||||
@ -22,6 +22,8 @@ module.exports = {
|
|||||||
unitPrecision: 3,
|
unitPrecision: 3,
|
||||||
/** 指定需要转换成的视窗单位 */
|
/** 指定需要转换成的视窗单位 */
|
||||||
viewportUnit: 'rem',
|
viewportUnit: 'rem',
|
||||||
|
/** 制定字体转换单位 */
|
||||||
|
fontViewportUnit: 'rem',
|
||||||
/** 指定不转换为视窗单位的类 */
|
/** 指定不转换为视窗单位的类 */
|
||||||
selectorBlackList: ['.ignore'],
|
selectorBlackList: ['.ignore'],
|
||||||
/** 小于或等于 1px 不转换为视窗单位 */
|
/** 小于或等于 1px 不转换为视窗单位 */
|
||||||
|
|||||||
@ -22,7 +22,7 @@ import './index.scss'
|
|||||||
import { NAvatar, NSpace } from 'naive-ui'
|
import { NAvatar, NSpace } from 'naive-ui'
|
||||||
|
|
||||||
import { avatarProps, spaceProps } from 'naive-ui'
|
import { avatarProps, spaceProps } from 'naive-ui'
|
||||||
import { APP_CATCH_KEY } from '@/appConfig/appConfig'
|
import { APP_CATCH_KEY } from '@/app-config/appConfig'
|
||||||
import { getStorage } from '@/utils/cache'
|
import { getStorage } from '@/utils/cache'
|
||||||
|
|
||||||
import type { PropType } from 'vue'
|
import type { PropType } from 'vue'
|
||||||
|
|||||||
@ -27,25 +27,25 @@ const RayLink = defineComponent({
|
|||||||
key: 'ray-js-note',
|
key: 'ray-js-note',
|
||||||
src: 'https://note.youdao.com/s/ObWEe2BB',
|
src: 'https://note.youdao.com/s/ObWEe2BB',
|
||||||
tooltip: 'Ray的前端学习笔记',
|
tooltip: 'Ray的前端学习笔记',
|
||||||
icon: 'https://usc1.contabostorage.com/c2e495d7890844d392e8ec0c6e5d77eb:image/longmao.jpeg',
|
icon: 'https://usc1.contabostorage.com/c2e495d7890844d392e8ec0c6e5d77eb:image/longmao.navigator.png',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: 'ray-js-cover',
|
key: 'ray-js-cover',
|
||||||
src: 'https://note.youdao.com/s/IC8xKPdB',
|
src: 'https://note.youdao.com/s/IC8xKPdB',
|
||||||
tooltip: 'Ray的面试题总结',
|
tooltip: 'Ray的面试题总结',
|
||||||
icon: 'https://usc1.contabostorage.com/c2e495d7890844d392e8ec0c6e5d77eb:image/longmao.jpeg',
|
icon: 'https://usc1.contabostorage.com/c2e495d7890844d392e8ec0c6e5d77eb:image/longmao.navigator.png',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: 'ray-template-doc',
|
key: 'ray-template-doc',
|
||||||
src: 'https://xiaodaigua-ray.github.io/ray-template-doc/',
|
src: 'https://xiaodaigua-ray.github.io/ray-template-doc/',
|
||||||
tooltip: 'Ray Template Doc',
|
tooltip: 'Ray Template Doc',
|
||||||
icon: 'https://usc1.contabostorage.com/c2e495d7890844d392e8ec0c6e5d77eb:image/longmao.jpeg',
|
icon: 'https://usc1.contabostorage.com/c2e495d7890844d392e8ec0c6e5d77eb:image/longmao.navigator.png',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: 'ray-template-doc-out',
|
key: 'ray-template-doc-out',
|
||||||
src: 'https://ray-template.yunkuangao.com/',
|
src: 'https://ray-template.yunkuangao.com/',
|
||||||
tooltip: 'Ray Template Doc (国内地址)',
|
tooltip: 'Ray Template Doc (国内地址)',
|
||||||
icon: 'https://usc1.contabostorage.com/c2e495d7890844d392e8ec0c6e5d77eb:image/longmao.jpeg',
|
icon: 'https://usc1.contabostorage.com/c2e495d7890844d392e8ec0c6e5d77eb:image/longmao.navigator.png',
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|||||||
@ -31,9 +31,9 @@ import {
|
|||||||
import { useSetting } from '@/store'
|
import { useSetting } from '@/store'
|
||||||
import { naiveLocales } from '@/locales/helper'
|
import { naiveLocales } from '@/locales/helper'
|
||||||
|
|
||||||
const GlobalProvider = defineComponent({
|
export default defineComponent({
|
||||||
name: 'GlobalProvider',
|
name: 'GlobalProvider',
|
||||||
setup() {
|
setup(_, { expose }) {
|
||||||
const settingStore = useSetting()
|
const settingStore = useSetting()
|
||||||
|
|
||||||
const modelPrimaryColorOverride = computed(
|
const modelPrimaryColorOverride = computed(
|
||||||
@ -54,6 +54,7 @@ const GlobalProvider = defineComponent({
|
|||||||
configProviderProps: computed(() => ({
|
configProviderProps: computed(() => ({
|
||||||
theme: modelThemeValue.value,
|
theme: modelThemeValue.value,
|
||||||
})),
|
})),
|
||||||
|
notificationProviderProps: {},
|
||||||
},
|
},
|
||||||
)
|
)
|
||||||
|
|
||||||
@ -62,6 +63,8 @@ const GlobalProvider = defineComponent({
|
|||||||
window.$loadingBar = loadingBar // 注入 `loadingBar`
|
window.$loadingBar = loadingBar // 注入 `loadingBar`
|
||||||
window.$notification = notification // 注入 `notification`
|
window.$notification = notification // 注入 `notification`
|
||||||
|
|
||||||
|
expose()
|
||||||
|
|
||||||
return {
|
return {
|
||||||
modelPrimaryColorOverride,
|
modelPrimaryColorOverride,
|
||||||
modelThemeValue,
|
modelThemeValue,
|
||||||
@ -90,5 +93,3 @@ const GlobalProvider = defineComponent({
|
|||||||
)
|
)
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
export default GlobalProvider
|
|
||||||
|
|||||||
@ -19,12 +19,14 @@
|
|||||||
|
|
||||||
import { axiosCanceler } from '@/axios/helper/interceptor'
|
import { axiosCanceler } from '@/axios/helper/interceptor'
|
||||||
|
|
||||||
const AppRequestCanceler = defineComponent({
|
const AppRequestCancelerProvider = defineComponent({
|
||||||
name: 'AppRequestCanceler',
|
name: 'AppRequestCancelerProvider',
|
||||||
setup() {
|
setup(_, { expose }) {
|
||||||
onBeforeRouteUpdate(() => {
|
onBeforeRouteUpdate(() => {
|
||||||
axiosCanceler.cancelAllRequest()
|
axiosCanceler.cancelAllRequest()
|
||||||
})
|
})
|
||||||
|
|
||||||
|
expose()
|
||||||
},
|
},
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
@ -37,4 +39,4 @@ const AppRequestCanceler = defineComponent({
|
|||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
export default AppRequestCanceler
|
export default AppRequestCancelerProvider
|
||||||
@ -20,7 +20,7 @@ import type { SettingState } from '@/store/modules/setting/type'
|
|||||||
|
|
||||||
const AppStyleProvider = defineComponent({
|
const AppStyleProvider = defineComponent({
|
||||||
name: 'AppStyleProvider',
|
name: 'AppStyleProvider',
|
||||||
setup() {
|
setup(_, { expose }) {
|
||||||
const settingStore = useSetting()
|
const settingStore = useSetting()
|
||||||
|
|
||||||
const { themeValue } = storeToRefs(settingStore)
|
const { themeValue } = storeToRefs(settingStore)
|
||||||
@ -97,6 +97,8 @@ const AppStyleProvider = defineComponent({
|
|||||||
immediate: true,
|
immediate: true,
|
||||||
},
|
},
|
||||||
)
|
)
|
||||||
|
|
||||||
|
expose()
|
||||||
},
|
},
|
||||||
render() {
|
render() {
|
||||||
return <div class="app-style-provider"></div>
|
return <div class="app-style-provider"></div>
|
||||||
|
|||||||
@ -33,7 +33,11 @@ export const APP_KEEP_ALIVE: Readonly<AppKeepAlive> = {
|
|||||||
maxKeepAliveLength: 5,
|
maxKeepAliveLength: 5,
|
||||||
}
|
}
|
||||||
|
|
||||||
/** 首屏加载信息配置 */
|
/**
|
||||||
|
*
|
||||||
|
* 首屏加载信息配置
|
||||||
|
* 其中 title 属性会是默认的浏览器标题（初始化时）
|
||||||
|
*/
|
||||||
export const PRE_LOADING_CONFIG: PreloadingConfig = {
|
export const PRE_LOADING_CONFIG: PreloadingConfig = {
|
||||||
title: 'Ray Template',
|
title: 'Ray Template',
|
||||||
tagColor: '#ff6700',
|
tagColor: '#ff6700',
|
||||||
@ -60,4 +60,10 @@ export const APP_THEME: AppTheme = {
|
|||||||
* 地址: <https://www.naiveui.com/zh-CN/dark/docs/customize-theme#%E4%BD%BF%E7%94%A8-peers-%E4%B8%BB%E9%A2%98%E5%8F%98%E9%87%8F>
|
* 地址: <https://www.naiveui.com/zh-CN/dark/docs/customize-theme#%E4%BD%BF%E7%94%A8-peers-%E4%B8%BB%E9%A2%98%E5%8F%98%E9%87%8F>
|
||||||
*/
|
*/
|
||||||
APP_NAIVE_UI_THEME_OVERRIDES: {},
|
APP_NAIVE_UI_THEME_OVERRIDES: {},
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* 配置 echart 主题颜色
|
||||||
|
* 约定配置时以：主题名称为文件名，其文件夹下两个主题风格的 json 文件。并且暗色主题必须为 xxx-dark.json
|
||||||
|
*/
|
||||||
|
echartTheme: 'macarons',
|
||||||
}
|
}
|
||||||
@ -29,13 +29,16 @@ import type { AppRawRequestConfig } from '@/axios/type'
|
|||||||
|
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* 该方法有一定的局限性，仅可在 setup 环境中使用
|
* 该方法有一定的局限性，仅可在 effect 作用域中使用
|
||||||
* 如果在非 vue component 文件中使用，会抛出一些警告
|
* 如果在非 vue effect scope 中使用，会抛出一些警告
|
||||||
*
|
*
|
||||||
* 非 vue component 中使用
|
* 非 vue effect 中使用
|
||||||
* @example
|
* @example
|
||||||
*
|
*
|
||||||
|
* // 请求函数
|
||||||
* const getUser = () => request({ url: 'http://localhost:3000/user' })
|
* const getUser = () => request({ url: 'http://localhost:3000/user' })
|
||||||
|
*
|
||||||
|
* // effect 中使用
|
||||||
* const { data } = useHookPlusRequest(getUser)
|
* const { data } = useHookPlusRequest(getUser)
|
||||||
*/
|
*/
|
||||||
function useRequest<
|
function useRequest<
|
||||||
|
|||||||
@ -20,7 +20,7 @@
|
|||||||
|
|
||||||
import { useAxiosInterceptor, axiosCanceler } from '@/axios/helper/interceptor'
|
import { useAxiosInterceptor, axiosCanceler } from '@/axios/helper/interceptor'
|
||||||
import { appendRequestHeaders } from '@/axios/helper/axiosCopilot'
|
import { appendRequestHeaders } from '@/axios/helper/axiosCopilot'
|
||||||
import { APP_CATCH_KEY } from '@/appConfig/appConfig'
|
import { APP_CATCH_KEY } from '@/app-config/appConfig'
|
||||||
import { getStorage } from '@/utils/cache'
|
import { getStorage } from '@/utils/cache'
|
||||||
|
|
||||||
import type {
|
import type {
|
||||||
|
|||||||
@ -17,7 +17,7 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
import axios from 'axios'
|
import axios from 'axios'
|
||||||
import { AXIOS_CONFIG } from '@/appConfig/requestConfig'
|
import { AXIOS_CONFIG } from '@/app-config/requestConfig'
|
||||||
import { useAxiosInterceptor, axiosCanceler } from '@/axios/helper/interceptor'
|
import { useAxiosInterceptor, axiosCanceler } from '@/axios/helper/interceptor'
|
||||||
import {
|
import {
|
||||||
setupResponseInterceptor,
|
setupResponseInterceptor,
|
||||||
|
|||||||
@ -13,7 +13,7 @@ import type {
|
|||||||
ChartThemeRawArray,
|
ChartThemeRawArray,
|
||||||
ChartThemeRawModules,
|
ChartThemeRawModules,
|
||||||
LoadingOptions,
|
LoadingOptions,
|
||||||
} from '@/components/RayChart/type'
|
} from '@/components/RChart/type'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
@ -26,12 +26,12 @@ import type {
|
|||||||
* 1. 配置、选择主题
|
* 1. 配置、选择主题
|
||||||
* 2. 点击下载主题
|
* 2. 点击下载主题
|
||||||
* 3. 选择 json 类型，然后复制
|
* 3. 选择 json 类型，然后复制
|
||||||
* 4. 在 @/components/RayChart/theme 包中创建对应的 json 文件，文件名为主题名称
|
* 4. 在 @/components/RChart/theme 包中创建对应的 json 文件，文件名为主题名称
|
||||||
*/
|
*/
|
||||||
export const setupChartTheme = () => {
|
export const setupChartTheme = () => {
|
||||||
// 获取所有主题
|
// 获取所有主题
|
||||||
const themeRawModules: Record<string, ChartThemeRawModules> =
|
const themeRawModules: Record<string, ChartThemeRawModules> =
|
||||||
import.meta.glob('@/components/RayChart/theme/**/*.json', {
|
import.meta.glob('@/components/RChart/theme/**/*.json', {
|
||||||
eager: true,
|
eager: true,
|
||||||
})
|
})
|
||||||
const regx = /\/([^/]+)\.json$/
|
const regx = /\/([^/]+)\.json$/
|
||||||
@ -5,4 +5,10 @@
|
|||||||
outline: none;
|
outline: none;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
transition: width 0.35s var(--r-bezier);
|
transition: width 0.35s var(--r-bezier);
|
||||||
|
|
||||||
|
& .ray-chart__container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@ -36,30 +36,38 @@ import {
|
|||||||
PictorialBarChart,
|
PictorialBarChart,
|
||||||
} from 'echarts/charts' // 系列类型(后缀都为 `SeriesOption`)
|
} from 'echarts/charts' // 系列类型(后缀都为 `SeriesOption`)
|
||||||
import { LabelLayout, UniversalTransition } from 'echarts/features' // 标签自动布局, 全局过渡动画等特性
|
import { LabelLayout, UniversalTransition } from 'echarts/features' // 标签自动布局, 全局过渡动画等特性
|
||||||
import { CanvasRenderer } from 'echarts/renderers' // `echarts` 渲染器
|
import {
|
||||||
|
CanvasRenderer,
|
||||||
|
// SVGRenderer,
|
||||||
|
} from 'echarts/renderers' // `echarts` 渲染器
|
||||||
|
|
||||||
import { useSetting } from '@/store'
|
import { useSetting } from '@/store'
|
||||||
import { cloneDeep, throttle } from 'lodash-es'
|
import { cloneDeep, throttle } from 'lodash-es'
|
||||||
import { on, off, completeSize } from '@/utils/element'
|
import { on, off, completeSize } from '@/utils/element'
|
||||||
import { call } from '@/utils/vue/index'
|
import { call } from '@/utils/vue/index'
|
||||||
import { setupChartTheme, loadingOptions } from './helper'
|
import { setupChartTheme, loadingOptions } from './helper'
|
||||||
import { LAYOUT_CONTENT_REF } from '@/appConfig/routerConfig'
|
import { APP_THEME } from '@/app-config/designConfig'
|
||||||
|
|
||||||
import type { PropType } from 'vue'
|
import type { PropType } from 'vue'
|
||||||
import type { EChartsInstance } from '@/types/modules/component'
|
|
||||||
import type { AnyFC, MaybeArray } from '@/types/modules/utils'
|
import type { AnyFC, MaybeArray } from '@/types/modules/utils'
|
||||||
import type { DebouncedFunc } from 'lodash-es'
|
import type { DebouncedFunc } from 'lodash-es'
|
||||||
import type {
|
import type {
|
||||||
LoadingOptions,
|
LoadingOptions,
|
||||||
AutoResize,
|
AutoResize,
|
||||||
ChartTheme,
|
ChartTheme,
|
||||||
} from '@/components/RayChart/type'
|
} from '@/components/RChart/type'
|
||||||
import type { UseResizeObserverReturn } from '@vueuse/core'
|
import type {
|
||||||
|
UseResizeObserverReturn,
|
||||||
|
MaybeComputedElementRef,
|
||||||
|
MaybeElement,
|
||||||
|
} from '@vueuse/core'
|
||||||
|
import type { ECharts, EChartsCoreOption, SetOptionOpts } from 'echarts/core'
|
||||||
|
|
||||||
export type EChartsExtensionInstallRegisters = typeof CanvasRenderer
|
export type EChartsExtensionInstallRegisters = typeof CanvasRenderer
|
||||||
|
export type { RayChartInst } from './type'
|
||||||
|
|
||||||
const RayChart = defineComponent({
|
export default defineComponent({
|
||||||
name: 'RayChart',
|
name: 'RChart',
|
||||||
props: {
|
props: {
|
||||||
width: {
|
width: {
|
||||||
/**
|
/**
|
||||||
@ -116,21 +124,19 @@ const RayChart = defineComponent({
|
|||||||
type: Object as PropType<echarts.EChartsCoreOption>,
|
type: Object as PropType<echarts.EChartsCoreOption>,
|
||||||
default: () => ({}),
|
default: () => ({}),
|
||||||
},
|
},
|
||||||
success: {
|
onSuccess: {
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* 返回 chart 实例
|
* 返回 chart 实例
|
||||||
*
|
*
|
||||||
* 渲染成功回调函数
|
* 渲染成功回调函数
|
||||||
*
|
*
|
||||||
* () => EChartsInstance
|
* () => ECharts
|
||||||
*/
|
*/
|
||||||
type: [Function, Array] as PropType<
|
type: [Function, Array] as PropType<MaybeArray<(e: ECharts) => void>>,
|
||||||
MaybeArray<(e: EChartsInstance) => void>
|
|
||||||
>,
|
|
||||||
default: null,
|
default: null,
|
||||||
},
|
},
|
||||||
error: {
|
onError: {
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* 渲染失败回调函数
|
* 渲染失败回调函数
|
||||||
@ -148,13 +154,12 @@ const RayChart = defineComponent({
|
|||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* 是否自动跟随模板主题切换
|
* 是否自动跟随模板主题切换
|
||||||
*
|
|
||||||
* 如果开启此属性, 则会覆盖 `theme` 属性
|
* 如果开启此属性, 则会覆盖 `theme` 属性
|
||||||
*
|
*
|
||||||
* 注意: 这个属性重度依赖此模板, 所以默认不开启. 并且动态切换主题有一定的性能问题
|
* 注意: 这个属性重度依赖此模板
|
||||||
*/
|
*/
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false,
|
default: true,
|
||||||
},
|
},
|
||||||
use: {
|
use: {
|
||||||
/**
|
/**
|
||||||
@ -180,15 +185,53 @@ const RayChart = defineComponent({
|
|||||||
type: Object as PropType<LoadingOptions>,
|
type: Object as PropType<LoadingOptions>,
|
||||||
default: () => loadingOptions(),
|
default: () => loadingOptions(),
|
||||||
},
|
},
|
||||||
|
observer: {
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* 需要被监听尺寸的元素
|
||||||
|
* 需要开启 autoResize 才能生效
|
||||||
|
* 默认以父元素作为监听对象
|
||||||
|
*/
|
||||||
|
type: Object as PropType<MaybeComputedElementRef<MaybeElement>>,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
throttleWait: {
|
||||||
|
/** 节流等待时间 */
|
||||||
|
type: Number,
|
||||||
|
default: 500,
|
||||||
|
},
|
||||||
|
animation: {
|
||||||
|
/** 是否强制启用渲染动画 */
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
setChartOptions: {
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* 当 options 配置项更改时候，setOptions 方法配置项
|
||||||
|
*
|
||||||
|
* 默认值
|
||||||
|
* notMerge: false,
|
||||||
|
* lazyUpdate: true,
|
||||||
|
* silent: false,
|
||||||
|
* replaceMerge: [],
|
||||||
|
*
|
||||||
|
* 会自动进行合并配置项
|
||||||
|
*/
|
||||||
|
type: Object as PropType<SetOptionOpts>,
|
||||||
|
default: () => ({}),
|
||||||
|
},
|
||||||
},
|
},
|
||||||
setup(props, { expose }) {
|
setup(props, { expose }) {
|
||||||
const settingStore = useSetting()
|
const settingStore = useSetting()
|
||||||
const { themeValue } = storeToRefs(settingStore)
|
const { themeValue } = storeToRefs(settingStore)
|
||||||
const rayChartRef = ref<HTMLElement>() // `echart` 容器实例
|
const rayChartRef = ref<HTMLElement>() // `echart` 容器实例
|
||||||
const echartInstanceRef = ref<EChartsInstance>() // `echart` 拷贝实例, 解决直接使用响应式实例带来的问题
|
const rayChartWrapperRef = ref<HTMLElement>()
|
||||||
let echartInstance: EChartsInstance // `echart` 实例
|
const echartInstanceRef = ref<ECharts>() // `echart` 实例
|
||||||
let resizeThrottle: DebouncedFunc<AnyFC> // resize 防抖方法实例
|
let echartInstance: ECharts | null // `echart` 拷贝实例, 解决直接使用响应式实例带来的问题
|
||||||
let resizeOvserverReturn: UseResizeObserverReturn | undefined
|
let resizeThrottleReturn: DebouncedFunc<AnyFC> | null // resize 防抖方法实例
|
||||||
|
let resizeOvserverReturn: UseResizeObserverReturn | null
|
||||||
|
const { echartTheme } = APP_THEME
|
||||||
|
|
||||||
const cssVarsRef = computed(() => {
|
const cssVarsRef = computed(() => {
|
||||||
const cssVars = {
|
const cssVars = {
|
||||||
@ -198,9 +241,6 @@ const RayChart = defineComponent({
|
|||||||
|
|
||||||
return cssVars
|
return cssVars
|
||||||
})
|
})
|
||||||
const modelLoadingOptions = computed(() =>
|
|
||||||
loadingOptions(props.loadingOptions),
|
|
||||||
)
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
@ -237,10 +277,10 @@ const RayChart = defineComponent({
|
|||||||
echarts.use([CanvasRenderer]) // 注册渲染器
|
echarts.use([CanvasRenderer]) // 注册渲染器
|
||||||
|
|
||||||
try {
|
try {
|
||||||
echarts.use(props.use)
|
echarts.use(props.use?.filter(Boolean))
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.error(
|
console.error(
|
||||||
'Error: wrong property and method passed in extend attribute',
|
'register chart Core error: wrong property and method passed in extend attribute',
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -253,10 +293,17 @@ const RayChart = defineComponent({
|
|||||||
*
|
*
|
||||||
* 如果有需要特殊全局配置的可以在此继续写...
|
* 如果有需要特殊全局配置的可以在此继续写...
|
||||||
*/
|
*/
|
||||||
const combineChartOptions = () => {
|
const combineChartOptions = (ops: EChartsCoreOption) => {
|
||||||
let options = cloneDeep(props.options)
|
let options = cloneDeep(ops)
|
||||||
|
|
||||||
const assign = (opts: object) => Object.assign({}, options, opts)
|
const assign = (opts: object) =>
|
||||||
|
Object.assign(
|
||||||
|
{
|
||||||
|
animation: true,
|
||||||
|
},
|
||||||
|
options,
|
||||||
|
opts,
|
||||||
|
)
|
||||||
|
|
||||||
if (props.showAria) {
|
if (props.showAria) {
|
||||||
options = assign({
|
options = assign({
|
||||||
@ -277,17 +324,16 @@ const RayChart = defineComponent({
|
|||||||
* 渲染 `echart`
|
* 渲染 `echart`
|
||||||
*
|
*
|
||||||
* 缓存两个实例
|
* 缓存两个实例
|
||||||
*
|
|
||||||
* 直接使用响应式代理实例会出现诡异的问题, 例如 `legend` 点击时报错
|
* 直接使用响应式代理实例会出现诡异的问题, 例如 `legend` 点击时报错
|
||||||
*/
|
*/
|
||||||
const renderChart = (theme: ChartTheme = 'macarons') => {
|
const renderChart = (theme: ChartTheme = echartTheme) => {
|
||||||
/** 获取 dom 容器 */
|
/** 获取 dom 容器 */
|
||||||
const element = rayChartRef.value as HTMLElement
|
const element = rayChartRef.value as HTMLElement
|
||||||
/** 获取配置项 */
|
/** 获取配置项 */
|
||||||
const options = combineChartOptions()
|
const options = combineChartOptions(props.options)
|
||||||
/** 获取 dom 容器实际宽高 */
|
/** 获取 dom 容器实际宽高 */
|
||||||
const { height, width } = element.getBoundingClientRect()
|
const { height, width } = element.getBoundingClientRect()
|
||||||
const { success, error } = props
|
const { onSuccess, onError } = props
|
||||||
|
|
||||||
try {
|
try {
|
||||||
/** 注册主题 */
|
/** 注册主题 */
|
||||||
@ -305,19 +351,25 @@ const RayChart = defineComponent({
|
|||||||
echartInstanceRef.value = echartInstance
|
echartInstanceRef.value = echartInstance
|
||||||
|
|
||||||
/** 设置 options 配置项 */
|
/** 设置 options 配置项 */
|
||||||
options && echartInstance.setOption(options)
|
options && echartInstance.setOption({})
|
||||||
|
|
||||||
|
if (props.animation) {
|
||||||
|
setTimeout(() => {
|
||||||
|
options && echartInstance?.setOption(options)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
/** 渲染成功回调 */
|
/** 渲染成功回调 */
|
||||||
if (success) {
|
if (onSuccess) {
|
||||||
call(success, echartInstance)
|
call(onSuccess, echartInstance)
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
/** 渲染失败回调 */
|
/** 渲染失败回调 */
|
||||||
if (error) {
|
if (onError) {
|
||||||
call(error)
|
call(onError)
|
||||||
}
|
}
|
||||||
|
|
||||||
console.error('RayChart render error: ', e)
|
console.error('RChart render error: ', e)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -329,9 +381,9 @@ const RayChart = defineComponent({
|
|||||||
*/
|
*/
|
||||||
const renderThemeChart = (bool?: boolean) => {
|
const renderThemeChart = (bool?: boolean) => {
|
||||||
if (props.autoChangeTheme) {
|
if (props.autoChangeTheme) {
|
||||||
bool ? renderChart('macarons-dark') : renderChart()
|
bool ? renderChart(`${echartTheme}-dark`) : renderChart()
|
||||||
|
|
||||||
return void 0
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!props.theme) {
|
if (!props.theme) {
|
||||||
@ -357,10 +409,51 @@ const RayChart = defineComponent({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const mount = () => {
|
||||||
|
// 避免重复渲染
|
||||||
|
if (echartInstance?.getDom()) {
|
||||||
|
console.warn(
|
||||||
|
'RChart mount: There is a chart instance already initialized on the dom. Execution was interrupted',
|
||||||
|
)
|
||||||
|
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (props.autoChangeTheme) {
|
||||||
|
/** 注册 echarts */
|
||||||
|
renderThemeChart(themeValue.value)
|
||||||
|
} else {
|
||||||
|
props.theme ? renderChart(`${echartTheme}-dark`) : renderChart()
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 注册事件 */
|
||||||
|
if (props.autoResize) {
|
||||||
|
resizeThrottleReturn = throttle(resizeChart, props.throttleWait)
|
||||||
|
/** 监听内容区域尺寸变化更新 chart */
|
||||||
|
resizeOvserverReturn = useResizeObserver(
|
||||||
|
props.observer || rayChartWrapperRef,
|
||||||
|
resizeThrottleReturn,
|
||||||
|
)
|
||||||
|
|
||||||
|
on(window, 'resize', resizeThrottleReturn)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const unmount = () => {
|
||||||
|
/** 卸载 echarts */
|
||||||
|
destroyChart()
|
||||||
|
/** 卸载事件柄 */
|
||||||
|
resizeThrottleReturn && off(window, 'resize', resizeThrottleReturn)
|
||||||
|
/** 注销防抖 */
|
||||||
|
resizeThrottleReturn?.cancel()
|
||||||
|
/** 注销 observer 监听 */
|
||||||
|
resizeOvserverReturn?.stop?.()
|
||||||
|
}
|
||||||
|
|
||||||
/** 监听全局主题变化, 然后重新渲染对应主题 echarts */
|
/** 监听全局主题变化, 然后重新渲染对应主题 echarts */
|
||||||
watch(
|
watch(
|
||||||
() => [themeValue.value],
|
() => themeValue.value,
|
||||||
([theme]) => {
|
(theme) => {
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* Q: 为什么需要重新卸载再渲染
|
* Q: 为什么需要重新卸载再渲染
|
||||||
@ -375,19 +468,19 @@ const RayChart = defineComponent({
|
|||||||
},
|
},
|
||||||
)
|
)
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* 贴花跟随主题渲染
|
||||||
|
*
|
||||||
|
* 自动跟随模板主题或者指定主题皆可
|
||||||
|
*/
|
||||||
watch(
|
watch(
|
||||||
() => props.showAria,
|
() => props.showAria,
|
||||||
() => {
|
() => {
|
||||||
destroyChart()
|
destroyChart()
|
||||||
|
|
||||||
/**
|
|
||||||
*
|
|
||||||
* 贴花跟随主题渲染
|
|
||||||
*
|
|
||||||
* 自动跟随模板主题或者指定主题皆可
|
|
||||||
*/
|
|
||||||
if (props.autoChangeTheme || props.theme) {
|
if (props.autoChangeTheme || props.theme) {
|
||||||
themeValue.value ? renderChart('macarons-dark') : renderChart()
|
themeValue.value ? renderChart(`${echartTheme}-dark`) : renderChart()
|
||||||
} else {
|
} else {
|
||||||
renderChart()
|
renderChart()
|
||||||
}
|
}
|
||||||
@ -397,26 +490,41 @@ const RayChart = defineComponent({
|
|||||||
/** 显示/隐藏加载动画 */
|
/** 显示/隐藏加载动画 */
|
||||||
watch(
|
watch(
|
||||||
() => props.loading,
|
() => props.loading,
|
||||||
(newData) => {
|
(ndata) => {
|
||||||
newData
|
ndata
|
||||||
? echartInstance?.showLoading(modelLoadingOptions.value)
|
? echartInstance?.showLoading(props.loadingOptions)
|
||||||
: echartInstance?.hideLoading()
|
: echartInstance?.hideLoading()
|
||||||
},
|
},
|
||||||
)
|
)
|
||||||
|
|
||||||
/** 监听 options 变化 */
|
/** 监听 options 变化 */
|
||||||
if (props.watchOptions) {
|
watch(
|
||||||
watch(
|
() => props.options,
|
||||||
() => props.watchOptions,
|
(noptions) => {
|
||||||
() => {
|
if (props.watchOptions) {
|
||||||
/** 重新组合 options */
|
/** 重新组合 options */
|
||||||
const options = combineChartOptions()
|
const options = combineChartOptions(noptions)
|
||||||
|
const setOpt = Object.assign({}, props.setChartOptions, {
|
||||||
|
notMerge: false,
|
||||||
|
lazyUpdate: true,
|
||||||
|
silent: false,
|
||||||
|
replaceMerge: [],
|
||||||
|
})
|
||||||
|
|
||||||
/** 如果 options 发生变动更新 echarts */
|
/** 如果 options 发生变动更新 echarts */
|
||||||
echartInstance?.setOption(options)
|
echartInstance?.setOption(options, setOpt)
|
||||||
},
|
}
|
||||||
)
|
},
|
||||||
}
|
{
|
||||||
|
deep: true,
|
||||||
|
},
|
||||||
|
)
|
||||||
|
|
||||||
|
expose({
|
||||||
|
echart: echartInstanceRef,
|
||||||
|
dispose: unmount,
|
||||||
|
render: mount,
|
||||||
|
})
|
||||||
|
|
||||||
onBeforeMount(async () => {
|
onBeforeMount(async () => {
|
||||||
/** 注册 echarts 组件与渲染器 */
|
/** 注册 echarts 组件与渲染器 */
|
||||||
@ -425,53 +533,25 @@ const RayChart = defineComponent({
|
|||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
/** 注册 echarts */
|
mount()
|
||||||
if (props.autoChangeTheme) {
|
|
||||||
renderThemeChart(themeValue.value)
|
|
||||||
} else {
|
|
||||||
props.theme ? renderChart('macarons-dark') : renderChart()
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 注册事件 */
|
|
||||||
if (props.autoResize) {
|
|
||||||
resizeThrottle = throttle(resizeChart, 500)
|
|
||||||
|
|
||||||
on(window, 'resize', resizeThrottle)
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 监听内容区域尺寸变化更新 chart */
|
|
||||||
resizeOvserverReturn = useResizeObserver(
|
|
||||||
LAYOUT_CONTENT_REF.value as unknown as Ref<HTMLElement>,
|
|
||||||
resizeThrottle,
|
|
||||||
)
|
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
onBeforeUnmount(() => {
|
onBeforeUnmount(() => {
|
||||||
/** 卸载 echarts */
|
unmount()
|
||||||
destroyChart()
|
|
||||||
/** 卸载事件柄 */
|
|
||||||
off(window, 'resize', resizeThrottle)
|
|
||||||
/** 注销防抖 */
|
|
||||||
resizeThrottle.cancel()
|
|
||||||
resizeOvserverReturn?.stop?.()
|
|
||||||
})
|
|
||||||
|
|
||||||
expose({
|
|
||||||
echart: echartInstanceRef,
|
|
||||||
})
|
})
|
||||||
|
|
||||||
return {
|
return {
|
||||||
rayChartRef,
|
rayChartRef,
|
||||||
cssVarsRef,
|
cssVarsRef,
|
||||||
echartInstance: echartInstanceRef,
|
rayChartWrapperRef,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div class="ray-chart" style={[this.cssVarsRef]} ref="rayChartRef"></div>
|
<div class="ray-chart" style={[this.cssVarsRef]} ref="rayChartWrapperRef">
|
||||||
|
<div class="ray-chart__container" ref="rayChartRef"></div>
|
||||||
|
</div>
|
||||||
)
|
)
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
export default RayChart
|
|
||||||
@ -9,6 +9,8 @@
|
|||||||
* @remark 今天也是元气满满撸代码的一天
|
* @remark 今天也是元气满满撸代码的一天
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
import type { ECharts, EChartsCoreOption } from 'echarts/core'
|
||||||
|
|
||||||
export interface ChartThemeRawModules {
|
export interface ChartThemeRawModules {
|
||||||
default: Record<string, UnknownObjectKey>
|
default: Record<string, UnknownObjectKey>
|
||||||
}
|
}
|
||||||
@ -41,3 +43,26 @@ export type AutoResize =
|
|||||||
}
|
}
|
||||||
|
|
||||||
export type ChartTheme = 'macarons-dark' | string | object | 'macarons'
|
export type ChartTheme = 'macarons-dark' | string | object | 'macarons'
|
||||||
|
|
||||||
|
export interface RayChartInst {
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* echart 实例
|
||||||
|
* 访问当前 chart 图所有方法与属性
|
||||||
|
*
|
||||||
|
* @default undefined
|
||||||
|
*/
|
||||||
|
echart: Ref<ECharts | undefined>
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* 手动卸载当前 chart 图
|
||||||
|
* 注意：不会卸载当前组件，仅仅是卸载 chart
|
||||||
|
*/
|
||||||
|
dispose: () => void
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* 手动渲染 chart 图
|
||||||
|
* 注意：会根据当前的 options 配置项与 props 配置项重新渲染 chart
|
||||||
|
*/
|
||||||
|
render: () => void
|
||||||
|
}
|
||||||
@ -9,12 +9,22 @@
|
|||||||
* @remark 今天也是元气满满撸代码的一天
|
* @remark 今天也是元气满满撸代码的一天
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* <https://www.naiveui.com/zh-CN/dark/components/grid>
|
||||||
|
*
|
||||||
|
* 可折叠操作栏
|
||||||
|
* 可以结合表单或者表格使用，让你快捷的实现高级搜索功能
|
||||||
|
*
|
||||||
|
* 该组件完全基于 `NGrid` `NGridItem` 实现, 所以需要在使用该组件时使用 `NGridItem` 包裹元素
|
||||||
|
*/
|
||||||
|
|
||||||
import './index.scss'
|
import './index.scss'
|
||||||
|
|
||||||
import { collapseGridProps } from './props'
|
import { collapseGridProps } from './props'
|
||||||
|
|
||||||
import { NCard, NGrid, NGridItem, NSpace } from 'naive-ui'
|
import { NCard, NGrid, NGridItem, NSpace } from 'naive-ui'
|
||||||
import RayIcon from '@/components/RayIcon'
|
import RayIcon from '@/components/RIcon'
|
||||||
|
|
||||||
import { call } from '@/utils/vue/index'
|
import { call } from '@/utils/vue/index'
|
||||||
|
|
||||||
@ -76,14 +86,10 @@ const RayCollapseGrid = defineComponent({
|
|||||||
>
|
>
|
||||||
{this.$slots.default?.()}
|
{this.$slots.default?.()}
|
||||||
<NGridItem suffix class="ray-collapse-grid__suffix--btn">
|
<NGridItem suffix class="ray-collapse-grid__suffix--btn">
|
||||||
{{
|
<NSpace justify="end">
|
||||||
default: ({ overflow }: { overflow: boolean }) => (
|
{this.$slots.action?.()}
|
||||||
<NSpace justify="end">
|
{this.CollapseIcon()}
|
||||||
{this.$slots.action?.()}
|
</NSpace>
|
||||||
{overflow ? this.CollapseIcon() : ''}
|
|
||||||
</NSpace>
|
|
||||||
),
|
|
||||||
}}
|
|
||||||
</NGridItem>
|
</NGridItem>
|
||||||
</NGrid>
|
</NGrid>
|
||||||
),
|
),
|
||||||
@ -94,14 +100,3 @@ const RayCollapseGrid = defineComponent({
|
|||||||
})
|
})
|
||||||
|
|
||||||
export default RayCollapseGrid
|
export default RayCollapseGrid
|
||||||
|
|
||||||
/**
|
|
||||||
*
|
|
||||||
* <https://www.naiveui.com/zh-CN/dark/components/grid>
|
|
||||||
*
|
|
||||||
* 可折叠操作栏
|
|
||||||
*
|
|
||||||
* 可以结合表单或者表格使用
|
|
||||||
*
|
|
||||||
* 该组件完全基于 `NGrid` `NGridItem` 实现, 所以需要在使用该组件时使用 `NGridItem` 包裹元素
|
|
||||||
*/
|
|
||||||
6
src/components/RIframe/index.ts
Normal file
6
src/components/RIframe/index.ts
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
import RayIframe from './src/index'
|
||||||
|
|
||||||
|
import type { RayIframeInst } from './src/index'
|
||||||
|
|
||||||
|
export default RayIframe
|
||||||
|
export type { RayIframeInst }
|
||||||
@ -20,6 +20,10 @@ import type { PropType } from 'vue'
|
|||||||
import type { MaybeArray } from '@/types/modules/utils'
|
import type { MaybeArray } from '@/types/modules/utils'
|
||||||
import type { SpinProps } from 'naive-ui'
|
import type { SpinProps } from 'naive-ui'
|
||||||
|
|
||||||
|
export interface RayIframeInst {
|
||||||
|
iframe: Ref<HTMLIFrameElement>
|
||||||
|
}
|
||||||
|
|
||||||
const RayIframe = defineComponent({
|
const RayIframe = defineComponent({
|
||||||
name: 'RayIframe',
|
name: 'RayIframe',
|
||||||
props: {
|
props: {
|
||||||
@ -73,7 +77,7 @@ const RayIframe = defineComponent({
|
|||||||
type: String,
|
type: String,
|
||||||
default: null,
|
default: null,
|
||||||
},
|
},
|
||||||
success: {
|
onSuccess: {
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* iframe 加载成功回调
|
* iframe 加载成功回调
|
||||||
@ -84,7 +88,7 @@ const RayIframe = defineComponent({
|
|||||||
>,
|
>,
|
||||||
default: null,
|
default: null,
|
||||||
},
|
},
|
||||||
error: {
|
onError: {
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* iframe 加载失败回调
|
* iframe 加载失败回调
|
||||||
@ -119,20 +123,20 @@ const RayIframe = defineComponent({
|
|||||||
const iframeLoadSuccess = (e: Event) => {
|
const iframeLoadSuccess = (e: Event) => {
|
||||||
spinShow.value = false
|
spinShow.value = false
|
||||||
|
|
||||||
const { success } = props
|
const { onSuccess } = props
|
||||||
|
|
||||||
if (success) {
|
if (onSuccess) {
|
||||||
call(success, iframeRef.value as HTMLIFrameElement, e)
|
call(onSuccess, iframeRef.value as HTMLIFrameElement, e)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const iframeLoadError = (e: Event) => {
|
const iframeLoadError = (e: Event) => {
|
||||||
spinShow.value = false
|
spinShow.value = false
|
||||||
|
|
||||||
const { error } = props
|
const { onError } = props
|
||||||
|
|
||||||
if (error) {
|
if (onError) {
|
||||||
call(error, e)
|
call(onError, e)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
9
src/components/RQRCode/index.ts
Normal file
9
src/components/RQRCode/index.ts
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
import RayQRcode from './src/index'
|
||||||
|
|
||||||
|
export default RayQRcode
|
||||||
|
export type {
|
||||||
|
QRCodeStatus,
|
||||||
|
QRCodeLevel,
|
||||||
|
QRCodeRenderResponse,
|
||||||
|
QRCodeInst,
|
||||||
|
} from './src/type'
|
||||||
26
src/components/RQRCode/src/index.scss
Normal file
26
src/components/RQRCode/src/index.scss
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
.ray-qrcode {
|
||||||
|
position: relative;
|
||||||
|
display: inline-flex;
|
||||||
|
|
||||||
|
& .ray-qrcode__error {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
z-index: 10;
|
||||||
|
background-color: rgba(0, 0, 0, 0.7);
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
@include flexCenter;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 18px 0;
|
||||||
|
|
||||||
|
& .ray-qrcode__error-content {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
188
src/components/RQRCode/src/index.tsx
Normal file
188
src/components/RQRCode/src/index.tsx
Normal file
@ -0,0 +1,188 @@
|
|||||||
|
/**
|
||||||
|
*
|
||||||
|
* @author Ray <https://github.com/XiaoDaiGua-Ray>
|
||||||
|
*
|
||||||
|
* @date 2023-08-29
|
||||||
|
*
|
||||||
|
* @workspace ray-template
|
||||||
|
*
|
||||||
|
* @remark 今天也是元气满满撸代码的一天
|
||||||
|
*/
|
||||||
|
|
||||||
|
import './index.scss'
|
||||||
|
|
||||||
|
import { NButton, NSpin } from 'naive-ui'
|
||||||
|
import RayIcon from '@/components/RIcon/index'
|
||||||
|
|
||||||
|
import props from './props'
|
||||||
|
import { AwesomeQR } from 'awesome-qr'
|
||||||
|
import { isValueType, downloadBase64File } from '@use-utils/hook'
|
||||||
|
import { call } from '@/utils/vue/index'
|
||||||
|
|
||||||
|
import type { QRCodeRenderResponse, GIFBuffer } from './type'
|
||||||
|
|
||||||
|
const readGIFAsArrayBuffer = (url: string): Promise<GIFBuffer> => {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
const xhr = new XMLHttpRequest()
|
||||||
|
|
||||||
|
xhr.responseType = 'blob'
|
||||||
|
|
||||||
|
xhr.onload = () => {
|
||||||
|
const reader = new FileReader()
|
||||||
|
|
||||||
|
reader.onloadend = () => {
|
||||||
|
resolve(reader.result)
|
||||||
|
}
|
||||||
|
reader.onerror = (e) => {
|
||||||
|
reject(e)
|
||||||
|
}
|
||||||
|
reader.onabort = (e) => {
|
||||||
|
reject(e)
|
||||||
|
}
|
||||||
|
|
||||||
|
reader.readAsArrayBuffer(xhr.response)
|
||||||
|
}
|
||||||
|
|
||||||
|
xhr.open('GET', url)
|
||||||
|
xhr.send()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: 'RayQRcode',
|
||||||
|
props,
|
||||||
|
setup(props, ctx) {
|
||||||
|
const { expose } = ctx
|
||||||
|
|
||||||
|
const qrcodeURL = ref<QRCodeRenderResponse>()
|
||||||
|
const spinOverrides = {
|
||||||
|
opacitySpinning: '0.1',
|
||||||
|
}
|
||||||
|
let gifBuffer: GIFBuffer
|
||||||
|
|
||||||
|
const getGIFImageByURL = async () => {
|
||||||
|
const { gifBackgroundURL } = props
|
||||||
|
|
||||||
|
if (!gifBackgroundURL) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
gifBuffer = await readGIFAsArrayBuffer(gifBackgroundURL)
|
||||||
|
} catch (e) {
|
||||||
|
console.error(e)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const renderQRCode = () => {
|
||||||
|
const { gifBackground, ...ops } = props
|
||||||
|
|
||||||
|
new AwesomeQR({
|
||||||
|
...ops,
|
||||||
|
gifBackground: (gifBuffer as ArrayBuffer) ?? undefined,
|
||||||
|
})
|
||||||
|
.draw()
|
||||||
|
.then((res) => {
|
||||||
|
const { onSuccess } = props
|
||||||
|
|
||||||
|
if (onSuccess) {
|
||||||
|
call(onSuccess, res)
|
||||||
|
}
|
||||||
|
|
||||||
|
qrcodeURL.value = res
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
const { onError } = props
|
||||||
|
|
||||||
|
if (onError) {
|
||||||
|
call(onError, err)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const errorActionClick = () => {
|
||||||
|
if (ctx.slots.errorAction) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const { onReload } = props
|
||||||
|
|
||||||
|
if (onReload) {
|
||||||
|
call(onReload)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const downloadQRCode = (fileName?: string) => {
|
||||||
|
if (qrcodeURL.value && isValueType<string>(qrcodeURL.value, 'String')) {
|
||||||
|
downloadBase64File(
|
||||||
|
qrcodeURL.value,
|
||||||
|
fileName || new Date().getTime() + '.png',
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
watchEffect(() => {
|
||||||
|
if (props.watchText) {
|
||||||
|
nextTick().then(() => {
|
||||||
|
renderQRCode()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
expose({
|
||||||
|
downloadQRCode,
|
||||||
|
})
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
await getGIFImageByURL()
|
||||||
|
renderQRCode()
|
||||||
|
})
|
||||||
|
|
||||||
|
return {
|
||||||
|
qrcodeURL,
|
||||||
|
spinOverrides,
|
||||||
|
errorActionClick,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div class="ray-qrcode">
|
||||||
|
<NSpin
|
||||||
|
show={this.status === 'loading'}
|
||||||
|
themeOverrides={this.spinOverrides}
|
||||||
|
description={this.loadingDescription}
|
||||||
|
>
|
||||||
|
<img src={this.qrcodeURL as string | undefined} />
|
||||||
|
</NSpin>
|
||||||
|
{this.status === 'error' ? (
|
||||||
|
<div class="ray-qrcode__error">
|
||||||
|
<div class="ray-qrcode__error-content">
|
||||||
|
{isValueType<string>(this.errorDescription, 'String')
|
||||||
|
? this.errorDescription
|
||||||
|
: () => this.errorDescription}
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ray-qrcode__error-btn"
|
||||||
|
onClick={this.errorActionClick.bind(this)}
|
||||||
|
>
|
||||||
|
{this.$slots.errorAction ? (
|
||||||
|
this.$slots.errorAction()
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<NButton text color="#ffffff">
|
||||||
|
{{
|
||||||
|
default: () => this.errorActionDescription,
|
||||||
|
icon: () => (
|
||||||
|
<RayIcon name="reload" size="16" color="#ffffff" />
|
||||||
|
),
|
||||||
|
}}
|
||||||
|
</NButton>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
})
|
||||||
310
src/components/RQRCode/src/props.ts
Normal file
310
src/components/RQRCode/src/props.ts
Normal file
@ -0,0 +1,310 @@
|
|||||||
|
/**
|
||||||
|
*
|
||||||
|
* @author Ray <https://github.com/XiaoDaiGua-Ray>
|
||||||
|
*
|
||||||
|
* @date 2023-08-29
|
||||||
|
*
|
||||||
|
* @workspace ray-template
|
||||||
|
*
|
||||||
|
* @remark 今天也是元气满满撸代码的一天
|
||||||
|
*/
|
||||||
|
|
||||||
|
import type { QRCodeStatus, QRCodeLevel } from './type'
|
||||||
|
import type { PropType, VNode } from 'vue'
|
||||||
|
import type { MaybeArray } from '@/types/modules/utils'
|
||||||
|
import type { Options } from 'awesome-qr'
|
||||||
|
|
||||||
|
const props = {
|
||||||
|
loadingDescription: {
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* Loading status description label
|
||||||
|
*
|
||||||
|
* @default undefined
|
||||||
|
*/
|
||||||
|
type: String,
|
||||||
|
},
|
||||||
|
watchText: {
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* Atuo watch QR code text
|
||||||
|
* If update text, then re-render QR code
|
||||||
|
*
|
||||||
|
* @default true
|
||||||
|
*/
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
status: {
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* QR code status
|
||||||
|
*
|
||||||
|
* @default undefined
|
||||||
|
*/
|
||||||
|
type: String as PropType<QRCodeStatus>,
|
||||||
|
},
|
||||||
|
errorDescription: {
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* QR code error description label
|
||||||
|
*
|
||||||
|
* @default 二维码已过期
|
||||||
|
*/
|
||||||
|
type: [String, Object] as PropType<string | VNode>,
|
||||||
|
default: '二维码已过期',
|
||||||
|
},
|
||||||
|
errorActionDescription: {
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* QR code error action description label
|
||||||
|
*
|
||||||
|
* @default 重新加载
|
||||||
|
*/
|
||||||
|
type: String,
|
||||||
|
default: '重新加载',
|
||||||
|
},
|
||||||
|
text: {
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* Text to be encoded in the QR code
|
||||||
|
*/
|
||||||
|
type: String,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* Size of the QR code in pixel.
|
||||||
|
*
|
||||||
|
* @default 160
|
||||||
|
*/
|
||||||
|
type: Number,
|
||||||
|
default: 160,
|
||||||
|
},
|
||||||
|
margin: {
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* Size of margins around the QR code body in pixel.
|
||||||
|
*
|
||||||
|
* @default 12
|
||||||
|
*/
|
||||||
|
type: Number,
|
||||||
|
default: 12,
|
||||||
|
},
|
||||||
|
correctLevel: {
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* Error correction level of the QR code
|
||||||
|
* Accepts a value provided by _QRErrorCorrectLevel_
|
||||||
|
*
|
||||||
|
* @default 1
|
||||||
|
*/
|
||||||
|
type: Number as PropType<QRCodeLevel>,
|
||||||
|
default: 1,
|
||||||
|
validator: (value: unknown) => [0, 1, 2, 3].includes(value as number),
|
||||||
|
},
|
||||||
|
maskPattern: {
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* Specify the mask pattern to be used in QR code encoding
|
||||||
|
* Accepts a value provided by _QRMaskPattern_
|
||||||
|
*/
|
||||||
|
type: Number,
|
||||||
|
},
|
||||||
|
version: {
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* Specify the version to be used in QR code encoding
|
||||||
|
* Accepts an integer in range [1, 40]
|
||||||
|
*/
|
||||||
|
type: Number,
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* Options to control components in the QR code.
|
||||||
|
*
|
||||||
|
* @default {data:{scale...},...}
|
||||||
|
*/
|
||||||
|
type: Object as PropType<Options['components']>,
|
||||||
|
default: () => ({
|
||||||
|
data: {
|
||||||
|
scale: 1,
|
||||||
|
},
|
||||||
|
timing: {
|
||||||
|
scale: 1,
|
||||||
|
protectors: false,
|
||||||
|
},
|
||||||
|
alignment: {
|
||||||
|
scale: 1,
|
||||||
|
protectors: false,
|
||||||
|
},
|
||||||
|
cornerAlignment: {
|
||||||
|
scale: 1,
|
||||||
|
protectors: true,
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
colorDark: {
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* Color of the blocks on the QR code
|
||||||
|
* Accepts a CSS <color>
|
||||||
|
*
|
||||||
|
* @default #000000
|
||||||
|
*/
|
||||||
|
type: String,
|
||||||
|
default: '#000000',
|
||||||
|
},
|
||||||
|
colorLight: {
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* Color of the blocks on the QR code
|
||||||
|
* Accepts a CSS <color>
|
||||||
|
*
|
||||||
|
* @default #ffffff
|
||||||
|
*/
|
||||||
|
type: String,
|
||||||
|
default: '#ffffff',
|
||||||
|
},
|
||||||
|
autoColor: {
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* Automatically calculate the _colorLight_ value from the QR code's background
|
||||||
|
*
|
||||||
|
* @default true
|
||||||
|
*/
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
backgroundImage: {
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* Background image to be used in the QR code
|
||||||
|
* Accepts a `data:` string in web browsers or a Buffer in Node.js
|
||||||
|
*
|
||||||
|
* @default undefined
|
||||||
|
*/
|
||||||
|
type: String,
|
||||||
|
},
|
||||||
|
backgroundDimming: {
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* Color of the dimming mask above the background image
|
||||||
|
* Accepts a CSS <color>
|
||||||
|
*
|
||||||
|
* @default rgba(0, 0, 0, 0)
|
||||||
|
*/
|
||||||
|
type: String,
|
||||||
|
default: 'rgba(0, 0, 0, 0)',
|
||||||
|
},
|
||||||
|
gifBackgroundURL: {
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* GIF background image to be used in the QR code
|
||||||
|
*
|
||||||
|
* @default undefined
|
||||||
|
*/
|
||||||
|
type: String,
|
||||||
|
},
|
||||||
|
gifBackground: {
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* GIF background image to be used in the QR code
|
||||||
|
*
|
||||||
|
* @default undefined
|
||||||
|
*/
|
||||||
|
type: ArrayBuffer,
|
||||||
|
},
|
||||||
|
whiteMargin: {
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* Use a white margin instead of a transparent one which reveals the background of the QR code on margins
|
||||||
|
*
|
||||||
|
* @default true
|
||||||
|
*/
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
logoImage: {
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* Logo image to be displayed at the center of the QR code
|
||||||
|
* Accepts a `data:` string in web browsers or a Buffer in Node.js
|
||||||
|
* When set to `undefined` or `null`, the logo is disabled
|
||||||
|
*
|
||||||
|
* @default undefined
|
||||||
|
*/
|
||||||
|
type: String,
|
||||||
|
},
|
||||||
|
logoScale: {
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* Ratio of the logo size to the QR code size
|
||||||
|
*
|
||||||
|
* @default 0.4
|
||||||
|
*/
|
||||||
|
type: Number,
|
||||||
|
default: 0.4,
|
||||||
|
},
|
||||||
|
logoMargin: {
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* Size of margins around the logo image in pixels
|
||||||
|
*
|
||||||
|
* @default 6
|
||||||
|
*/
|
||||||
|
type: Number,
|
||||||
|
default: 6,
|
||||||
|
},
|
||||||
|
logoCornerRadius: {
|
||||||
|
/**
|
||||||
|
* Corner radius of the logo image in pixels.
|
||||||
|
*
|
||||||
|
* @default 8
|
||||||
|
*/
|
||||||
|
type: Number,
|
||||||
|
default: 8,
|
||||||
|
},
|
||||||
|
dotScale: {
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* Ratio of the real size to the full size of the blocks.
|
||||||
|
* This can be helpful when you want to make more parts of the background visible.
|
||||||
|
*
|
||||||
|
* @default 1
|
||||||
|
*/
|
||||||
|
type: Number,
|
||||||
|
default: 1,
|
||||||
|
},
|
||||||
|
onSuccess: {
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* When the QR code is successfully generated, this callback is called
|
||||||
|
*/
|
||||||
|
type: [Function, Array] as PropType<
|
||||||
|
MaybeArray<(dataURL: ArrayBuffer | string | undefined) => void>
|
||||||
|
>,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
onError: {
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* When the QR code generation fails, this callback is called
|
||||||
|
*/
|
||||||
|
type: [Function, Array] as PropType<MaybeArray<(e: unknown) => void>>,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
onReload: {
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* When reload button is clicked, this callback is called
|
||||||
|
* This method will not execute if the errorAction slot is used
|
||||||
|
*/
|
||||||
|
type: [Function, Array] as PropType<MaybeArray<() => void>>,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
export default props
|
||||||
28
src/components/RQRCode/src/type.ts
Normal file
28
src/components/RQRCode/src/type.ts
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
/**
|
||||||
|
*
|
||||||
|
* @author Ray <https://github.com/XiaoDaiGua-Ray>
|
||||||
|
*
|
||||||
|
* @date 2023-08-29
|
||||||
|
*
|
||||||
|
* @workspace ray-template
|
||||||
|
*
|
||||||
|
* @remark 今天也是元气满满撸代码的一天
|
||||||
|
*/
|
||||||
|
|
||||||
|
export type QRCodeStatus = 'error' | 'success' | 'loading'
|
||||||
|
|
||||||
|
export type QRCodeLevel = 0 | 1 | 2 | 3
|
||||||
|
|
||||||
|
export type QRCodeRenderResponse = string | ArrayBuffer | Buffer | undefined
|
||||||
|
|
||||||
|
export type QRCodeInst = {
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @param fileName file name
|
||||||
|
*
|
||||||
|
* 如果未设置名称，则默认以 时间戳.png 命名
|
||||||
|
*/
|
||||||
|
downloadQRCode: (fileName?: string) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
export type GIFBuffer = string | ArrayBuffer | null
|
||||||
@ -10,7 +10,7 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
import { NPopconfirm, NSpace, NButton, NPopover } from 'naive-ui'
|
import { NPopconfirm, NSpace, NButton, NPopover } from 'naive-ui'
|
||||||
import RayIcon from '@/components/RayIcon/index'
|
import RayIcon from '@/components/RIcon/index'
|
||||||
|
|
||||||
export type EmitterType = 'positive' | 'negative'
|
export type EmitterType = 'positive' | 'negative'
|
||||||
|
|
||||||
@ -12,11 +12,11 @@
|
|||||||
import './index.scss'
|
import './index.scss'
|
||||||
|
|
||||||
import { NPopover } from 'naive-ui'
|
import { NPopover } from 'naive-ui'
|
||||||
import RayIcon from '@/components/RayIcon/index'
|
import RayIcon from '@/components/RIcon/index'
|
||||||
|
|
||||||
import screenfull from 'screenfull'
|
import screenfull from 'screenfull'
|
||||||
|
|
||||||
import type { TableSettingProvider } from '@/components/RayTable/src/type'
|
import type { TableSettingProvider } from '@/components/RTable/src/type'
|
||||||
|
|
||||||
const TableScreenfull = defineComponent({
|
const TableScreenfull = defineComponent({
|
||||||
name: 'TableScreenfull',
|
name: 'TableScreenfull',
|
||||||
@ -1,4 +1,4 @@
|
|||||||
import type { ActionOptions } from '@/components/RayTable/src/type'
|
import type { ActionOptions } from '@/components/RTable/src/type'
|
||||||
|
|
||||||
export const setupSettingOptions = (options: ActionOptions[]) => {
|
export const setupSettingOptions = (options: ActionOptions[]) => {
|
||||||
const arr = options.map((curr) => {
|
const arr = options.map((curr) => {
|
||||||
@ -19,7 +19,7 @@
|
|||||||
import './index.scss'
|
import './index.scss'
|
||||||
|
|
||||||
import { NCard, NPopover, NEllipsis } from 'naive-ui'
|
import { NCard, NPopover, NEllipsis } from 'naive-ui'
|
||||||
import RayIcon from '@/components/RayIcon/index'
|
import RayIcon from '@/components/RIcon/index'
|
||||||
import VueDraggable from 'vuedraggable'
|
import VueDraggable from 'vuedraggable'
|
||||||
|
|
||||||
import { setupSettingOptions } from './hook'
|
import { setupSettingOptions } from './hook'
|
||||||
@ -30,7 +30,7 @@ import type {
|
|||||||
ActionOptions,
|
ActionOptions,
|
||||||
FixedType,
|
FixedType,
|
||||||
TableSettingFixedPopoverIcon,
|
TableSettingFixedPopoverIcon,
|
||||||
} from '@/components/RayTable/src/type'
|
} from '@/components/RTable/src/type'
|
||||||
|
|
||||||
const TableSetting = defineComponent({
|
const TableSetting = defineComponent({
|
||||||
name: 'TableSetting',
|
name: 'TableSetting',
|
||||||
@ -12,11 +12,11 @@
|
|||||||
import './index.scss'
|
import './index.scss'
|
||||||
|
|
||||||
import { NPopover, NCard } from 'naive-ui'
|
import { NPopover, NCard } from 'naive-ui'
|
||||||
import RayIcon from '@/components/RayIcon/index'
|
import RayIcon from '@/components/RIcon/index'
|
||||||
|
|
||||||
import { call } from '@/utils/vue/index'
|
import { call } from '@/utils/vue/index'
|
||||||
|
|
||||||
import type { TableSettingProvider } from '@/components/RayTable/src/type'
|
import type { TableSettingProvider } from '@/components/RTable/src/type'
|
||||||
import type { ComponentSize } from '@/types/modules/component'
|
import type { ComponentSize } from '@/types/modules/component'
|
||||||
import type { MaybeArray } from '@/types/modules/utils'
|
import type { MaybeArray } from '@/types/modules/utils'
|
||||||
|
|
||||||
@ -1,21 +1,10 @@
|
|||||||
@keyframes scaleScreenfull {
|
|
||||||
0% {
|
|
||||||
transform: scale(1);
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
transform: scale(1.3);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: scale(1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.ray-table {
|
.ray-table {
|
||||||
& .ray-table-icon {
|
& .ray-table-icon {
|
||||||
transition: transform 0.3s var(--r-bezier);
|
transition: transform 0.3s var(--r-bezier);
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
animation: scaleScreenfull 0.3s linear;
|
@include scaleAnimate();
|
||||||
|
animation: elementScale 0.3s linear;
|
||||||
animation-direction: alternate;
|
animation-direction: alternate;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -58,8 +58,7 @@ import type { ComponentSize } from '@/types/modules/component'
|
|||||||
const RayTable = defineComponent({
|
const RayTable = defineComponent({
|
||||||
name: 'RayTable',
|
name: 'RayTable',
|
||||||
props: props,
|
props: props,
|
||||||
emits: ['update:columns', 'exportSuccess', 'exportError'],
|
setup(props, { expose }) {
|
||||||
setup(props, { emit, expose }) {
|
|
||||||
const rayTableInstance = ref<DataTableInst>()
|
const rayTableInstance = ref<DataTableInst>()
|
||||||
|
|
||||||
const tableUUID = uuid(16) // 表格 id, 用于打印表格
|
const tableUUID = uuid(16) // 表格 id, 用于打印表格
|
||||||
@ -68,7 +67,15 @@ const RayTable = defineComponent({
|
|||||||
const modelColumns = computed({
|
const modelColumns = computed({
|
||||||
get: () => props.columns,
|
get: () => props.columns,
|
||||||
set: (arr) => {
|
set: (arr) => {
|
||||||
emit('update:columns', arr)
|
const { onUpdateColumns, 'onUpdate:columns': _onUpdateColumns } = props
|
||||||
|
|
||||||
|
if (onUpdateColumns) {
|
||||||
|
call(onUpdateColumns, arr)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (_onUpdateColumns) {
|
||||||
|
call(_onUpdateColumns, arr)
|
||||||
|
}
|
||||||
},
|
},
|
||||||
}) as unknown as WritableComputedRef<ActionOptions[]>
|
}) as unknown as WritableComputedRef<ActionOptions[]>
|
||||||
const menuConfig = reactive({
|
const menuConfig = reactive({
|
||||||
@ -76,7 +83,6 @@ const RayTable = defineComponent({
|
|||||||
y: 0,
|
y: 0,
|
||||||
showMenu: false,
|
showMenu: false,
|
||||||
})
|
})
|
||||||
let prevRightClickIndex = -1 // 缓存上次点击索引位置
|
|
||||||
const cssVars = computed(() => {
|
const cssVars = computed(() => {
|
||||||
const cssVar = {
|
const cssVar = {
|
||||||
'--ray-table-header-space': props.tableHeaderSpace,
|
'--ray-table-header-space': props.tableHeaderSpace,
|
||||||
@ -86,6 +92,7 @@ const RayTable = defineComponent({
|
|||||||
})
|
})
|
||||||
const tableSize = ref(props.size)
|
const tableSize = ref(props.size)
|
||||||
const tableMethods = ref<Omit<DataTableInst, 'clearFilter'>>()
|
const tableMethods = ref<Omit<DataTableInst, 'clearFilter'>>()
|
||||||
|
let prevRightClickIndex = -1 // 缓存上次点击索引位置
|
||||||
|
|
||||||
/** 注入相关属性 */
|
/** 注入相关属性 */
|
||||||
provide('tableSettingProvider', {
|
provide('tableSettingProvider', {
|
||||||
@ -111,17 +118,12 @@ const RayTable = defineComponent({
|
|||||||
key: string | number,
|
key: string | number,
|
||||||
option: DropdownOption,
|
option: DropdownOption,
|
||||||
) => {
|
) => {
|
||||||
const { onRightMenuClick, 'onUpdate:rightMenuClick': _onRightMenuClick } =
|
const { onRightMenuClick } = props
|
||||||
props
|
|
||||||
|
|
||||||
if (onRightMenuClick) {
|
if (onRightMenuClick) {
|
||||||
call(onRightMenuClick, key, prevRightClickIndex, option)
|
call(onRightMenuClick, key, prevRightClickIndex, option)
|
||||||
}
|
}
|
||||||
|
|
||||||
if (_onRightMenuClick) {
|
|
||||||
call(_onRightMenuClick, key, prevRightClickIndex, option)
|
|
||||||
}
|
|
||||||
|
|
||||||
menuConfig.showMenu = false
|
menuConfig.showMenu = false
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -136,22 +138,24 @@ const RayTable = defineComponent({
|
|||||||
const handleRowProps = (arr: ActionOptions, idx: number) => {
|
const handleRowProps = (arr: ActionOptions, idx: number) => {
|
||||||
const interceptRowProps = props.rowProps?.(arr, idx)
|
const interceptRowProps = props.rowProps?.(arr, idx)
|
||||||
|
|
||||||
|
const contextmenu = modelRightClickMenu.value.length
|
||||||
|
? (e: MouseEvent) => {
|
||||||
|
e.preventDefault()
|
||||||
|
|
||||||
|
prevRightClickIndex = idx
|
||||||
|
menuConfig.showMenu = false
|
||||||
|
|
||||||
|
nextTick().then(() => {
|
||||||
|
menuConfig.showMenu = true
|
||||||
|
menuConfig.x = e.clientX
|
||||||
|
menuConfig.y = e.clientY
|
||||||
|
})
|
||||||
|
}
|
||||||
|
: void 0
|
||||||
|
|
||||||
return {
|
return {
|
||||||
...interceptRowProps,
|
...interceptRowProps,
|
||||||
onContextmenu: (e: MouseEvent) => {
|
onContextmenu: contextmenu,
|
||||||
e.preventDefault()
|
|
||||||
|
|
||||||
prevRightClickIndex = idx
|
|
||||||
|
|
||||||
menuConfig.showMenu = false
|
|
||||||
|
|
||||||
nextTick().then(() => {
|
|
||||||
menuConfig.showMenu = true
|
|
||||||
|
|
||||||
menuConfig.x = e.clientX
|
|
||||||
menuConfig.y = e.clientY
|
|
||||||
})
|
|
||||||
},
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -164,6 +168,8 @@ const RayTable = defineComponent({
|
|||||||
* 按需导入 `xlsx` 减少体积, 不依赖传统 `file save` 插件导出方式
|
* 按需导入 `xlsx` 减少体积, 不依赖传统 `file save` 插件导出方式
|
||||||
*/
|
*/
|
||||||
const handleExportPositive = async () => {
|
const handleExportPositive = async () => {
|
||||||
|
const { onExportSuccess, onExportError } = props
|
||||||
|
|
||||||
if (props.data.length && props.columns.length) {
|
if (props.data.length && props.columns.length) {
|
||||||
try {
|
try {
|
||||||
await exportFileToXLSX(
|
await exportFileToXLSX(
|
||||||
@ -174,9 +180,9 @@ const RayTable = defineComponent({
|
|||||||
},
|
},
|
||||||
)
|
)
|
||||||
|
|
||||||
emit('exportSuccess')
|
onExportSuccess && call(onExportSuccess)
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
emit('exportError')
|
onExportError && call(onExportError)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -255,7 +261,6 @@ const RayTable = defineComponent({
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
render() {
|
render() {
|
||||||
console.log(this.action)
|
|
||||||
return (
|
return (
|
||||||
<NCard
|
<NCard
|
||||||
class="ray-table"
|
class="ray-table"
|
||||||
@ -277,21 +282,16 @@ const RayTable = defineComponent({
|
|||||||
...this.$slots,
|
...this.$slots,
|
||||||
}}
|
}}
|
||||||
</NDataTable>
|
</NDataTable>
|
||||||
{this.showMenu ? (
|
<NDropdown
|
||||||
// 右键菜单
|
show={this.showMenu}
|
||||||
<NDropdown
|
placement="bottom-start"
|
||||||
show={this.showMenu}
|
trigger="manual"
|
||||||
placement="bottom-start"
|
x={this.x}
|
||||||
trigger="manual"
|
y={this.y}
|
||||||
x={this.x}
|
options={this.modelRightClickMenu}
|
||||||
y={this.y}
|
onClickoutside={() => (this.showMenu = false)}
|
||||||
options={this.modelRightClickMenu}
|
onSelect={this.handleRightMenuSelect.bind(this)}
|
||||||
onClickoutside={() => (this.showMenu = false)}
|
/>
|
||||||
onSelect={this.handleRightMenuSelect.bind(this)}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
''
|
|
||||||
)}
|
|
||||||
</>
|
</>
|
||||||
),
|
),
|
||||||
header: () => this.title || <div style="display: none;"></div>,
|
header: () => this.title || <div style="display: none;"></div>,
|
||||||
@ -15,7 +15,7 @@ import type { PropType, VNode, VNodeChild } from 'vue'
|
|||||||
import type { DropdownMixedOption } from './type'
|
import type { DropdownMixedOption } from './type'
|
||||||
import type PrintConfiguration from 'print-js'
|
import type PrintConfiguration from 'print-js'
|
||||||
import type { MaybeArray } from '@/types/modules/utils'
|
import type { MaybeArray } from '@/types/modules/utils'
|
||||||
import type { DropdownOption } from 'naive-ui'
|
import type { DropdownOption, DataTableColumn } from 'naive-ui'
|
||||||
|
|
||||||
const rayTableProps = {
|
const rayTableProps = {
|
||||||
...dataTableProps, // 继承 `data table props`
|
...dataTableProps, // 继承 `data table props`
|
||||||
@ -39,14 +39,6 @@ const rayTableProps = {
|
|||||||
>,
|
>,
|
||||||
default: null,
|
default: null,
|
||||||
},
|
},
|
||||||
'onUpdate:rightMenuClick': {
|
|
||||||
type: [Function, Array] as PropType<
|
|
||||||
MaybeArray<
|
|
||||||
(key: string | number, index: number, option: DropdownOption) => void
|
|
||||||
>
|
|
||||||
>,
|
|
||||||
default: null,
|
|
||||||
},
|
|
||||||
title: {
|
title: {
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
@ -77,16 +69,6 @@ const rayTableProps = {
|
|||||||
type: Object as PropType<VNode>,
|
type: Object as PropType<VNode>,
|
||||||
default: () => ({}),
|
default: () => ({}),
|
||||||
},
|
},
|
||||||
showMenu: {
|
|
||||||
/**
|
|
||||||
*
|
|
||||||
* 是否展示右键菜单
|
|
||||||
*
|
|
||||||
* 默认启用
|
|
||||||
*/
|
|
||||||
type: Boolean,
|
|
||||||
default: true,
|
|
||||||
},
|
|
||||||
exportTooltip: {
|
exportTooltip: {
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
@ -225,7 +207,30 @@ const rayTableProps = {
|
|||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false,
|
default: false,
|
||||||
},
|
},
|
||||||
|
/** 导出成功 */
|
||||||
|
onExportSuccess: {
|
||||||
|
type: [Function, Array] as PropType<MaybeArray<() => void>>,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
/** 导出失败 */
|
||||||
|
onExportError: {
|
||||||
|
type: [Function, Array] as PropType<MaybeArray<() => void>>,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
onUpdateColumns: {
|
||||||
|
type: [Function, Array] as PropType<
|
||||||
|
MaybeArray<(arr: DataTableColumn[]) => void>
|
||||||
|
>,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
'onUpdate:columns': {
|
||||||
|
type: [Function, Array] as PropType<
|
||||||
|
MaybeArray<(arr: DataTableColumn[]) => void>
|
||||||
|
>,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
} as const
|
} as const
|
||||||
|
|
||||||
export default rayTableProps
|
export default rayTableProps
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -24,7 +24,7 @@
|
|||||||
</template>
|
</template>
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { useKeepAlive } from '@/store'
|
import { useKeepAlive } from '@/store'
|
||||||
import { APP_KEEP_ALIVE } from '@/appConfig/appConfig'
|
import { APP_KEEP_ALIVE } from '@/app-config/appConfig'
|
||||||
|
|
||||||
import type { PropType } from 'vue'
|
import type { PropType } from 'vue'
|
||||||
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
import RayIframe from './src/index'
|
|
||||||
|
|
||||||
export default RayIframe
|
|
||||||
@ -10,30 +10,9 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
import dayjs from 'dayjs'
|
import dayjs from 'dayjs'
|
||||||
import { DEFAULT_DAYJS_LOCAL, DAYJS_LOCAL_MAP } from '@/appConfig/localConfig'
|
import { DEFAULT_DAYJS_LOCAL } from '@/app-config/localConfig'
|
||||||
import 'dayjs/locale/zh-cn'
|
import 'dayjs/locale/zh-cn'
|
||||||
|
|
||||||
import type { DayjsLocal } from './type'
|
|
||||||
|
|
||||||
export const setupDayjs = () => {
|
export const setupDayjs = () => {
|
||||||
dayjs.locale(DEFAULT_DAYJS_LOCAL)
|
dayjs.locale(DEFAULT_DAYJS_LOCAL)
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
*
|
|
||||||
* dayjs hook
|
|
||||||
*
|
|
||||||
* 说明:
|
|
||||||
* - locale: 切换 dayjs 语言配置
|
|
||||||
*/
|
|
||||||
export const useDayjs = () => {
|
|
||||||
const locale = (key: DayjsLocal) => {
|
|
||||||
const mapkey = DAYJS_LOCAL_MAP[key]
|
|
||||||
|
|
||||||
mapkey ? dayjs.locale(mapkey) : dayjs.locale(DEFAULT_DAYJS_LOCAL)
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
locale,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
@ -11,7 +11,6 @@
|
|||||||
|
|
||||||
import { combineDirective } from './helper/combine'
|
import { combineDirective } from './helper/combine'
|
||||||
import { forIn } from 'lodash-es'
|
import { forIn } from 'lodash-es'
|
||||||
import { isValueType } from '@/utils/hook'
|
|
||||||
|
|
||||||
import type { App } from 'vue'
|
import type { App } from 'vue'
|
||||||
import type { DirectiveModules } from '@/directives/type'
|
import type { DirectiveModules } from '@/directives/type'
|
||||||
@ -33,17 +32,17 @@ export const setupDirectives = (app: App<Element>) => {
|
|||||||
// 将所有的包提取出来(./modules/[file-name]/index.ts)
|
// 将所有的包提取出来(./modules/[file-name]/index.ts)
|
||||||
const directivesModules = combineDirective(directiveRawModules)
|
const directivesModules = combineDirective(directiveRawModules)
|
||||||
// 提取文件名(./modules/copy/index.ts => copy)
|
// 提取文件名(./modules/copy/index.ts => copy)
|
||||||
const reg = /(?<=modules\/).*(?=\/index\.ts)/
|
const regexExtractDirectiveName = /(?<=modules\/).*(?=\/index\.ts)/
|
||||||
|
// 匹配合法指令名称
|
||||||
|
const regexDirectiveName = /^([^-]+-)*[^-]+$/
|
||||||
|
|
||||||
forIn(directivesModules, (value, key) => {
|
forIn(directivesModules, (value, key) => {
|
||||||
const dname = key.match(reg)?.[0]
|
const dname = key.match(regexExtractDirectiveName)?.[0]
|
||||||
|
|
||||||
if (isValueType<string>(dname, 'String')) {
|
if (typeof dname === 'string' && regexDirectiveName.test(dname)) {
|
||||||
app.directive(dname, value?.())
|
app.directive(dname, value?.())
|
||||||
} else {
|
} else {
|
||||||
throw new Error(
|
console.error(`[setupDirectives] ${dname} is not a valid directive name`)
|
||||||
'directiveName is not string, please check your directive file name',
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|||||||
@ -20,35 +20,36 @@ import type { CopyElement } from './type'
|
|||||||
import type { CustomDirectiveFC } from '@/directives/type'
|
import type { CustomDirectiveFC } from '@/directives/type'
|
||||||
|
|
||||||
const copyDirective: CustomDirectiveFC<CopyElement, string> = () => {
|
const copyDirective: CustomDirectiveFC<CopyElement, string> = () => {
|
||||||
let clipboard: ClipboardJS | null
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
mounted: (el, binding) => {
|
mounted: (el, { value }) => {
|
||||||
const value = binding.value
|
const clipboard = new ClipboardJS(el, {
|
||||||
|
|
||||||
clipboard = new ClipboardJS(el, {
|
|
||||||
text: () => String(value),
|
text: () => String(value),
|
||||||
})
|
})
|
||||||
|
|
||||||
clipboard?.on('success', () => {
|
clipboard.on('success', () => {
|
||||||
window.$message.success('复制成功')
|
window.$message.success('复制成功')
|
||||||
})
|
})
|
||||||
clipboard?.on('error', () => {
|
clipboard.on('error', () => {
|
||||||
window.$message.error('复制失败')
|
window.$message.error('复制失败')
|
||||||
})
|
})
|
||||||
},
|
|
||||||
updated: (el, binding) => {
|
|
||||||
/** 其实这块代码写的挺蠢的, 但是我目前不知道怎么去优化, 阿巴阿巴阿巴 */
|
|
||||||
const value = binding.value
|
|
||||||
|
|
||||||
clipboard = new ClipboardJS(el, {
|
el.$$clipboard = clipboard
|
||||||
text: () => String(value),
|
|
||||||
})
|
|
||||||
},
|
},
|
||||||
beforeUnmount: () => {
|
updated: (el, { value, oldValue }) => {
|
||||||
clipboard?.destroy()
|
if (value !== oldValue) {
|
||||||
|
el.$$clipboard?.destroy()
|
||||||
|
|
||||||
clipboard = null
|
el.$$clipboard = new ClipboardJS(el, {
|
||||||
|
text: () => String(value),
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
beforeUnmount: (el: CopyElement) => {
|
||||||
|
if (el.$$clipboard) {
|
||||||
|
el.$$clipboard?.destroy()
|
||||||
|
|
||||||
|
el.$$clipboard = null
|
||||||
|
}
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,3 +1,6 @@
|
|||||||
|
import type ClipboardJS from 'clipboard'
|
||||||
|
|
||||||
export interface CopyElement extends Element, UnknownObjectKey {
|
export interface CopyElement extends Element, UnknownObjectKey {
|
||||||
$value: string
|
$value: string
|
||||||
|
$$clipboard: ClipboardJS | null
|
||||||
}
|
}
|
||||||
|
|||||||
@ -17,7 +17,6 @@
|
|||||||
import { debounce } from 'lodash-es'
|
import { debounce } from 'lodash-es'
|
||||||
import { on, off } from '@use-utils/element'
|
import { on, off } from '@use-utils/element'
|
||||||
|
|
||||||
import type { Directive } from 'vue'
|
|
||||||
import type { DebounceBindingOptions } from './type'
|
import type { DebounceBindingOptions } from './type'
|
||||||
import type { AnyFC } from '@/types/modules/utils'
|
import type { AnyFC } from '@/types/modules/utils'
|
||||||
import type { DebouncedFunc } from 'lodash-es'
|
import type { DebouncedFunc } from 'lodash-es'
|
||||||
@ -30,16 +29,19 @@ const debounceDirective: CustomDirectiveFC<
|
|||||||
let debounceFunction: DebouncedFunc<AnyFC> | null
|
let debounceFunction: DebouncedFunc<AnyFC> | null
|
||||||
|
|
||||||
return {
|
return {
|
||||||
beforeMount: (el, binding) => {
|
beforeMount: (el, { value }) => {
|
||||||
const { func, trigger = 'click', wait = 500, options } = binding.value
|
const { func, trigger = 'click', wait = 500, options } = value
|
||||||
|
|
||||||
if (typeof func !== 'function') {
|
if (typeof func !== 'function') {
|
||||||
throw new Error('debounce directive value must be a function')
|
throw new TypeError('debounce directive value must be a function')
|
||||||
}
|
}
|
||||||
debounceFunction = debounce(func, wait, Object.assign({}, {}, options))
|
|
||||||
|
debounceFunction = debounce(func, wait, Object.assign({}, options))
|
||||||
|
|
||||||
on(el, trigger, debounceFunction)
|
on(el, trigger, debounceFunction)
|
||||||
},
|
},
|
||||||
beforeUnmount: (el, binding) => {
|
beforeUnmount: (el, { value }) => {
|
||||||
const { trigger = 'click' } = binding.value
|
const { trigger = 'click' } = value
|
||||||
|
|
||||||
if (debounceFunction) {
|
if (debounceFunction) {
|
||||||
debounceFunction.cancel()
|
debounceFunction.cancel()
|
||||||
|
|||||||
@ -3,7 +3,7 @@ import type { AnyFC } from '@/types/modules/utils'
|
|||||||
|
|
||||||
export interface DebounceBindingOptions {
|
export interface DebounceBindingOptions {
|
||||||
func: AnyFC
|
func: AnyFC
|
||||||
trigger: string
|
trigger?: string
|
||||||
wait: number
|
wait?: number
|
||||||
options: DebounceSettings
|
options?: DebounceSettings
|
||||||
}
|
}
|
||||||
|
|||||||
@ -16,27 +16,35 @@
|
|||||||
|
|
||||||
import { addClass, removeClass } from '@/utils/element'
|
import { addClass, removeClass } from '@/utils/element'
|
||||||
|
|
||||||
import type { Directive } from 'vue'
|
|
||||||
import type { CustomDirectiveFC } from '@/directives/type'
|
import type { CustomDirectiveFC } from '@/directives/type'
|
||||||
|
|
||||||
const updateElementDisabledType = (el: HTMLElement, value: boolean) => {
|
const updateElementDisabledType = (el: HTMLElement, value: boolean) => {
|
||||||
if (el) {
|
if (el) {
|
||||||
const classes = 'ray-template__directive--disabled'
|
const classes = 'ray-template__directive--disabled'
|
||||||
|
|
||||||
value ? addClass(el, classes) : removeClass(el, classes)
|
if (value) {
|
||||||
|
el.setAttribute('disabled', 'disabled')
|
||||||
|
|
||||||
|
addClass(el, classes)
|
||||||
|
} else {
|
||||||
|
el.removeAttribute('disabled')
|
||||||
|
|
||||||
|
removeClass(el, classes)
|
||||||
|
}
|
||||||
|
|
||||||
el?.setAttribute('disabled', value ? 'disabled' : '')
|
el?.setAttribute('disabled', value ? 'disabled' : '')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const disabledDirective: CustomDirectiveFC<HTMLElement, boolean> = () => {
|
const disabledDirective: CustomDirectiveFC<HTMLElement, boolean> = () => {
|
||||||
return {
|
return {
|
||||||
mounted: (el, binding) => {
|
mounted: (el, { value }) => {
|
||||||
const value = binding.value
|
|
||||||
|
|
||||||
updateElementDisabledType(el, value)
|
updateElementDisabledType(el, value)
|
||||||
},
|
},
|
||||||
updated: (el, binding) => {
|
updated: (el, { value, oldValue }) => {
|
||||||
const value = binding.value
|
if (value === oldValue) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
updateElementDisabledType(el, value)
|
updateElementDisabledType(el, value)
|
||||||
},
|
},
|
||||||
|
|||||||
@ -17,7 +17,6 @@
|
|||||||
import { throttle } from 'lodash-es'
|
import { throttle } from 'lodash-es'
|
||||||
import { on, off } from '@use-utils/element'
|
import { on, off } from '@use-utils/element'
|
||||||
|
|
||||||
import type { Directive } from 'vue'
|
|
||||||
import type { ThrottleBindingOptions } from './type'
|
import type { ThrottleBindingOptions } from './type'
|
||||||
import type { AnyFC } from '@/types/modules/utils'
|
import type { AnyFC } from '@/types/modules/utils'
|
||||||
import type { DebouncedFunc } from 'lodash-es'
|
import type { DebouncedFunc } from 'lodash-es'
|
||||||
@ -30,19 +29,19 @@ const throttleDirective: CustomDirectiveFC<
|
|||||||
let throttleFunction: DebouncedFunc<AnyFC> | null
|
let throttleFunction: DebouncedFunc<AnyFC> | null
|
||||||
|
|
||||||
return {
|
return {
|
||||||
beforeMount: (el, binding) => {
|
beforeMount: (el, { value }) => {
|
||||||
const { func, trigger = 'click', wait = 500, options } = binding.value
|
const { func, trigger = 'click', wait = 500, options } = value
|
||||||
|
|
||||||
if (typeof func !== 'function') {
|
if (typeof func !== 'function') {
|
||||||
throw new Error('throttle directive value must be a function')
|
throw new TypeError('throttle directive value must be a function')
|
||||||
}
|
}
|
||||||
|
|
||||||
throttleFunction = throttle(func, wait, Object.assign({}, {}, options))
|
throttleFunction = throttle(func, wait, Object.assign({}, options))
|
||||||
|
|
||||||
on(el, trigger, throttleFunction)
|
on(el, trigger, throttleFunction)
|
||||||
},
|
},
|
||||||
beforeUnmount: (el, binding) => {
|
beforeUnmount: (el, { value }) => {
|
||||||
const { trigger = 'click' } = binding.value
|
const { trigger = 'click' } = value
|
||||||
|
|
||||||
if (throttleFunction) {
|
if (throttleFunction) {
|
||||||
throttleFunction.cancel()
|
throttleFunction.cancel()
|
||||||
|
|||||||
@ -3,7 +3,7 @@ import type { AnyFC } from '@/types/modules/utils'
|
|||||||
|
|
||||||
export interface ThrottleBindingOptions {
|
export interface ThrottleBindingOptions {
|
||||||
func: AnyFC
|
func: AnyFC
|
||||||
trigger: string
|
trigger?: string
|
||||||
wait: number
|
wait?: number
|
||||||
options: ThrottleSettings
|
options?: ThrottleSettings
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,6 +1,9 @@
|
|||||||
import type { Directive } from 'vue'
|
import type { Directive } from 'vue'
|
||||||
import type { App } from 'vue'
|
import type { App } from 'vue'
|
||||||
|
|
||||||
|
export type { DebounceBindingOptions } from './modules/debounce/type'
|
||||||
|
export type { ThrottleBindingOptions } from './modules/throttle/type'
|
||||||
|
|
||||||
export type CustomDirectiveFC<T, K> = () => Directive<T, K>
|
export type CustomDirectiveFC<T, K> = () => Directive<T, K>
|
||||||
|
|
||||||
export interface DirectiveModules extends Object {
|
export interface DirectiveModules extends Object {
|
||||||
|
|||||||
18
src/hooks/variable/index.ts
Normal file
18
src/hooks/variable/index.ts
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
/**
|
||||||
|
*
|
||||||
|
* @author Ray <https://github.com/XiaoDaiGua-Ray>
|
||||||
|
*
|
||||||
|
* @date 2023-09-11
|
||||||
|
*
|
||||||
|
* @workspace ray-template
|
||||||
|
*
|
||||||
|
* @remark 今天也是元气满满撸代码的一天
|
||||||
|
*/
|
||||||
|
|
||||||
|
import {
|
||||||
|
setVariable,
|
||||||
|
getVariable,
|
||||||
|
globalVariableToRefs,
|
||||||
|
} from './useGlobalVariable'
|
||||||
|
|
||||||
|
export { setVariable, getVariable, globalVariableToRefs }
|
||||||
40
src/hooks/variable/useGlobalVariable.ts
Normal file
40
src/hooks/variable/useGlobalVariable.ts
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
/**
|
||||||
|
*
|
||||||
|
* @author Ray <https://github.com/XiaoDaiGua-Ray>
|
||||||
|
*
|
||||||
|
* @date 2023-09-11
|
||||||
|
*
|
||||||
|
* @workspace ray-template
|
||||||
|
*
|
||||||
|
* @remark 今天也是元气满满撸代码的一天
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* 存放全局临时变量，脱离 pinia 使用的变量
|
||||||
|
* 简单的全局变量，并不需要复杂的控制流程
|
||||||
|
*
|
||||||
|
* 但不建议滥用
|
||||||
|
*/
|
||||||
|
|
||||||
|
/** 全局响应式变量 */
|
||||||
|
const variableState = reactive({
|
||||||
|
globalSpinning: false,
|
||||||
|
})
|
||||||
|
|
||||||
|
type VariableStateKey = keyof typeof variableState
|
||||||
|
|
||||||
|
export function setVariable(
|
||||||
|
key: VariableStateKey,
|
||||||
|
value: (typeof variableState)[VariableStateKey],
|
||||||
|
) {
|
||||||
|
variableState[key] = value
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getVariable(key: VariableStateKey) {
|
||||||
|
return variableState[key] as (typeof variableState)[VariableStateKey]
|
||||||
|
}
|
||||||
|
|
||||||
|
export function globalVariableToRefs<K extends VariableStateKey>(key: K) {
|
||||||
|
return toRef<typeof variableState, K>(variableState, key)
|
||||||
|
}
|
||||||
16
src/hooks/web/index.ts
Normal file
16
src/hooks/web/index.ts
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
/**
|
||||||
|
*
|
||||||
|
* @author Ray <https://github.com/XiaoDaiGua-Ray>
|
||||||
|
*
|
||||||
|
* @date 2023-09-11
|
||||||
|
*
|
||||||
|
* @workspace ray-template
|
||||||
|
*
|
||||||
|
* @remark 今天也是元气满满撸代码的一天
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { useI18n, t } from './useI18n'
|
||||||
|
import { useVueRouter } from '../web/useVueRouter'
|
||||||
|
import { useDayjs } from '../web/useDayjs'
|
||||||
|
|
||||||
|
export { useI18n, useVueRouter, useDayjs, t }
|
||||||
34
src/hooks/web/useDayjs.ts
Normal file
34
src/hooks/web/useDayjs.ts
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
/**
|
||||||
|
*
|
||||||
|
* @author Ray <https://github.com/XiaoDaiGua-Ray>
|
||||||
|
*
|
||||||
|
* @date 2023-09-11
|
||||||
|
*
|
||||||
|
* @workspace ray-template
|
||||||
|
*
|
||||||
|
* @remark 今天也是元气满满撸代码的一天
|
||||||
|
*/
|
||||||
|
|
||||||
|
import dayjs from 'dayjs'
|
||||||
|
import { DEFAULT_DAYJS_LOCAL, DAYJS_LOCAL_MAP } from '@/app-config/localConfig'
|
||||||
|
|
||||||
|
import type { DayjsLocal } from '@/dayjs/type'
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* dayjs hook
|
||||||
|
*
|
||||||
|
* 说明:
|
||||||
|
* - locale: 切换 dayjs 语言配置
|
||||||
|
*/
|
||||||
|
export const useDayjs = () => {
|
||||||
|
const locale = (key: DayjsLocal) => {
|
||||||
|
const mapkey = DAYJS_LOCAL_MAP[key]
|
||||||
|
|
||||||
|
mapkey ? dayjs.locale(mapkey) : dayjs.locale(DEFAULT_DAYJS_LOCAL)
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
locale,
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,4 +1,15 @@
|
|||||||
import { i18n } from './index'
|
/**
|
||||||
|
*
|
||||||
|
* @author Ray <https://github.com/XiaoDaiGua-Ray>
|
||||||
|
*
|
||||||
|
* @date 2023-09-11
|
||||||
|
*
|
||||||
|
* @workspace ray-template
|
||||||
|
*
|
||||||
|
* @remark 今天也是元气满满撸代码的一天
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { i18n } from '@/locales/index'
|
||||||
|
|
||||||
import type { WritableComputedRef } from 'vue'
|
import type { WritableComputedRef } from 'vue'
|
||||||
|
|
||||||
@ -1,6 +1,7 @@
|
|||||||
<svg t="1669090001868" class="icon" viewBox="0 0 1024 1024" version="1.1"
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24"
|
||||||
xmlns="http://www.w3.org/2000/svg" p-id="7911" width="200" height="200">
|
>
|
||||||
|
<path d="M0 0h24v24H0z" fill="none"></path>
|
||||||
<path
|
<path
|
||||||
d="M918.954667 880.896c-0.618667-1.322667-154.688-334.378667-177.194667-382.421333-135.402667-288.917333-174.976-369.642667-196.821333-391.957334a31.829333 31.829333 0 0 0-13.013334-12.138666 32 32 0 0 0-42.944 14.293333L109.909333 865.706667a32 32 0 0 0 57.216 28.672l99.349334-198.421334h496.725333a49853.44 49853.44 0 0 1 97.536 211.605334 32.021333 32.021333 0 0 0 58.218667-26.666667zM521.002667 187.626667c39.850667 76.650667 126.698667 260.117333 212.458666 444.330666H298.517333L521.002667 187.626667z"
|
d=" M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z "
|
||||||
fill="currentColor" p-id="7912"></path>
|
></path>
|
||||||
</svg>
|
</svg>
|
||||||
|
Before Width: | Height: | Size: 722 B After Width: | Height: | Size: 477 B |
|
Before Width: | Height: | Size: 930 B After Width: | Height: | Size: 930 B |
@ -11,8 +11,8 @@
|
|||||||
|
|
||||||
import './index.scss'
|
import './index.scss'
|
||||||
|
|
||||||
import { NEllipsis } from 'naive-ui'
|
import { NEllipsis, NPopover } from 'naive-ui'
|
||||||
import RayIcon from '@/components/RayIcon/index'
|
import RayIcon from '@/components/RIcon/index'
|
||||||
|
|
||||||
const SiderBarLogo = defineComponent({
|
const SiderBarLogo = defineComponent({
|
||||||
name: 'SiderBarLogo',
|
name: 'SiderBarLogo',
|
||||||
@ -37,9 +37,14 @@ const SiderBarLogo = defineComponent({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const TemplateLogo = ({ cursor }: { cursor: string }) => (
|
||||||
|
<RayIcon name={sideBarLogo!.icon as string} size="30" cursor={cursor} />
|
||||||
|
)
|
||||||
|
|
||||||
return {
|
return {
|
||||||
sideBarLogo,
|
sideBarLogo,
|
||||||
handleSideBarLogoClick,
|
handleSideBarLogoClick,
|
||||||
|
TemplateLogo,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
render() {
|
render() {
|
||||||
@ -47,27 +52,32 @@ const SiderBarLogo = defineComponent({
|
|||||||
<div
|
<div
|
||||||
class={[
|
class={[
|
||||||
'ray-menu__logo',
|
'ray-menu__logo',
|
||||||
this.sideBarLogo?.url ? 'ray-menu__logo-url' : '',
|
this.sideBarLogo?.url ? 'ray-menu__logo-url' : null,
|
||||||
]}
|
]}
|
||||||
onClick={this.handleSideBarLogoClick.bind(this)}
|
onClick={this.handleSideBarLogoClick.bind(this)}
|
||||||
>
|
>
|
||||||
{this.sideBarLogo?.icon ? (
|
{this.sideBarLogo?.icon ? (
|
||||||
<RayIcon name={this.sideBarLogo.icon} size="30" />
|
this.collapsed ? (
|
||||||
) : (
|
<NPopover placement="right">
|
||||||
''
|
{{
|
||||||
)}
|
trigger: () => <this.TemplateLogo cursor="pointer" />,
|
||||||
|
default: () => this.sideBarLogo?.title,
|
||||||
|
}}
|
||||||
|
</NPopover>
|
||||||
|
) : (
|
||||||
|
<this.TemplateLogo cursor="pointer" />
|
||||||
|
)
|
||||||
|
) : null}
|
||||||
<h1
|
<h1
|
||||||
class={[
|
class={[
|
||||||
!this.collapsed ? 'ray-menu__logo-title--open' : '',
|
!this.collapsed ? 'ray-menu__logo-title--open' : null,
|
||||||
'ray-menu__logo-title',
|
'ray-menu__logo-title',
|
||||||
]}
|
]}
|
||||||
>
|
>
|
||||||
<NEllipsis>{this.sideBarLogo?.title}</NEllipsis>
|
<NEllipsis>{this.sideBarLogo?.title}</NEllipsis>
|
||||||
</h1>
|
</h1>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : null
|
||||||
''
|
|
||||||
)
|
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
@ -13,7 +13,7 @@ import { NMenu, NLayoutSider } from 'naive-ui'
|
|||||||
import SiderBarLogo from './components/SiderBarLogo/index'
|
import SiderBarLogo from './components/SiderBarLogo/index'
|
||||||
|
|
||||||
import { useMenu } from '@/store'
|
import { useMenu } from '@/store'
|
||||||
import { APP_MENU_CONFIG } from '@/appConfig/appConfig'
|
import { APP_MENU_CONFIG } from '@/app-config/appConfig'
|
||||||
|
|
||||||
import type { MenuInst } from 'naive-ui'
|
import type { MenuInst } from 'naive-ui'
|
||||||
import type { NaiveMenuOptions } from '@/types/modules/component'
|
import type { NaiveMenuOptions } from '@/types/modules/component'
|
||||||
|
|||||||
@ -26,13 +26,13 @@
|
|||||||
import './index.scss'
|
import './index.scss'
|
||||||
|
|
||||||
import { NScrollbar, NTag, NSpace, NLayoutHeader, NDropdown } from 'naive-ui'
|
import { NScrollbar, NTag, NSpace, NLayoutHeader, NDropdown } from 'naive-ui'
|
||||||
import RayIcon from '@/components/RayIcon/index'
|
import RayIcon from '@/components/RIcon/index'
|
||||||
|
|
||||||
import { useMenu, useSetting } from '@/store'
|
import { useMenu, useSetting } from '@/store'
|
||||||
import { uuid } from '@/utils/hook'
|
import { uuid } from '@/utils/hook'
|
||||||
import { hasClass } from '@/utils/element'
|
import { hasClass } from '@/utils/element'
|
||||||
import { redirectRouterToDashboard } from '@/router/helper/routerCopilot'
|
import { redirectRouterToDashboard } from '@/router/helper/routerCopilot'
|
||||||
import { ROOT_ROUTE } from '@/appConfig/appConfig'
|
import { ROOT_ROUTE } from '@/app-config/appConfig'
|
||||||
import { queryElements } from '@use-utils/element'
|
import { queryElements } from '@use-utils/element'
|
||||||
|
|
||||||
import type { MenuOption, ScrollbarInst } from 'naive-ui'
|
import type { MenuOption, ScrollbarInst } from 'naive-ui'
|
||||||
@ -388,7 +388,7 @@ const MenuTag = defineComponent({
|
|||||||
if (tags?.length) {
|
if (tags?.length) {
|
||||||
const [menuTag] = tags
|
const [menuTag] = tags
|
||||||
|
|
||||||
nextTick(() => {
|
nextTick().then(() => {
|
||||||
menuTag.scrollIntoView?.()
|
menuTag.scrollIntoView?.()
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|||||||
@ -12,7 +12,7 @@
|
|||||||
import './index.scss'
|
import './index.scss'
|
||||||
|
|
||||||
import { NInput, NModal, NResult, NScrollbar, NSpace } from 'naive-ui'
|
import { NInput, NModal, NResult, NScrollbar, NSpace } from 'naive-ui'
|
||||||
import RayIcon from '@/components/RayIcon/index'
|
import RayIcon from '@/components/RIcon/index'
|
||||||
|
|
||||||
import { on, off, queryElements, addClass, removeClass } from '@/utils/element'
|
import { on, off, queryElements, addClass, removeClass } from '@/utils/element'
|
||||||
import { debounce } from 'lodash-es'
|
import { debounce } from 'lodash-es'
|
||||||
|
|||||||
@ -10,10 +10,10 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
import { NSpace, NSwitch, NTooltip } from 'naive-ui'
|
import { NSpace, NSwitch, NTooltip } from 'naive-ui'
|
||||||
import RayIcon from '@/components/RayIcon'
|
import RayIcon from '@/components/RIcon'
|
||||||
|
|
||||||
import { useSetting } from '@/store'
|
import { useSetting } from '@/store'
|
||||||
import { useI18n } from '@/locales/useI18n'
|
import { useI18n } from '@/hooks/web/index'
|
||||||
|
|
||||||
const ThemeSwitch = defineComponent({
|
const ThemeSwitch = defineComponent({
|
||||||
name: 'ThemeSwitch',
|
name: 'ThemeSwitch',
|
||||||
|
|||||||
@ -13,9 +13,9 @@ import {
|
|||||||
} from 'naive-ui'
|
} from 'naive-ui'
|
||||||
import ThemeSwitch from '@/layout/components/SiderBar/components/SettingDrawer/components/ThemeSwitch/index'
|
import ThemeSwitch from '@/layout/components/SiderBar/components/SettingDrawer/components/ThemeSwitch/index'
|
||||||
|
|
||||||
import { APP_THEME } from '@/appConfig/designConfig'
|
import { APP_THEME } from '@/app-config/designConfig'
|
||||||
import { useSetting } from '@/store'
|
import { useSetting } from '@/store'
|
||||||
import { useI18n } from '@/locales/useI18n'
|
import { useI18n } from '@/hooks/web/index'
|
||||||
|
|
||||||
import type { PropType } from 'vue'
|
import type { PropType } from 'vue'
|
||||||
import type { Placement } from '@/types/modules/component'
|
import type { Placement } from '@/types/modules/component'
|
||||||
@ -48,7 +48,6 @@ const SettingDrawer = defineComponent({
|
|||||||
primaryColorOverride,
|
primaryColorOverride,
|
||||||
menuTagSwitch,
|
menuTagSwitch,
|
||||||
breadcrumbSwitch,
|
breadcrumbSwitch,
|
||||||
invertSwitch,
|
|
||||||
footerSwitch,
|
footerSwitch,
|
||||||
contentTransition,
|
contentTransition,
|
||||||
} = storeToRefs(settingStore)
|
} = storeToRefs(settingStore)
|
||||||
@ -87,7 +86,6 @@ const SettingDrawer = defineComponent({
|
|||||||
menuTagSwitch,
|
menuTagSwitch,
|
||||||
changeSwitcher,
|
changeSwitcher,
|
||||||
breadcrumbSwitch,
|
breadcrumbSwitch,
|
||||||
invertSwitch,
|
|
||||||
footerSwitch,
|
footerSwitch,
|
||||||
contentTransitionOptions,
|
contentTransitionOptions,
|
||||||
contentTransition,
|
contentTransition,
|
||||||
@ -155,14 +153,6 @@ const SettingDrawer = defineComponent({
|
|||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
</NDescriptionsItem>
|
</NDescriptionsItem>
|
||||||
<NDescriptionsItem label="反转色">
|
|
||||||
<NSwitch
|
|
||||||
v-model:value={this.invertSwitch}
|
|
||||||
onUpdateValue={(bool: boolean) =>
|
|
||||||
this.changeSwitcher(bool, 'invertSwitch')
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</NDescriptionsItem>
|
|
||||||
</NDescriptions>
|
</NDescriptions>
|
||||||
</NSpace>
|
</NSpace>
|
||||||
</NDrawerContent>
|
</NDrawerContent>
|
||||||
|
|||||||
@ -12,7 +12,7 @@
|
|||||||
import './index.scss'
|
import './index.scss'
|
||||||
|
|
||||||
import { NTooltip } from 'naive-ui'
|
import { NTooltip } from 'naive-ui'
|
||||||
import RayIcon from '@/components/RayIcon/index'
|
import RayIcon from '@/components/RIcon/index'
|
||||||
|
|
||||||
import { tooltipProps } from 'naive-ui'
|
import { tooltipProps } from 'naive-ui'
|
||||||
|
|
||||||
|
|||||||
@ -20,7 +20,7 @@
|
|||||||
import './index.scss'
|
import './index.scss'
|
||||||
|
|
||||||
import { NLayoutHeader, NSpace, NTooltip, NDropdown } from 'naive-ui'
|
import { NLayoutHeader, NSpace, NTooltip, NDropdown } from 'naive-ui'
|
||||||
import RayIcon from '@/components/RayIcon/index'
|
import RayIcon from '@/components/RIcon/index'
|
||||||
import TootipIcon from '@/layout/components/SiderBar/components/TooltipIcon/index'
|
import TootipIcon from '@/layout/components/SiderBar/components/TooltipIcon/index'
|
||||||
import SettingDrawer from './components/SettingDrawer/index'
|
import SettingDrawer from './components/SettingDrawer/index'
|
||||||
import Breadcrumb from './components/Breadcrumb/index'
|
import Breadcrumb from './components/Breadcrumb/index'
|
||||||
@ -28,10 +28,10 @@ import GlobalSeach from './components/GlobalSeach/index'
|
|||||||
import AppAvatar from '@/app-components/app/AppAvatar/index'
|
import AppAvatar from '@/app-components/app/AppAvatar/index'
|
||||||
|
|
||||||
import { useSetting } from '@/store'
|
import { useSetting } from '@/store'
|
||||||
import { LOCAL_OPTIONS } from '@/appConfig/localConfig'
|
import { LOCAL_OPTIONS } from '@/app-config/localConfig'
|
||||||
import { useAvatarOptions, avatarDropdownClick } from './hook'
|
import { useAvatarOptions, avatarDropdownClick } from './hook'
|
||||||
import screenfull from 'screenfull'
|
import screenfull from 'screenfull'
|
||||||
import { useI18n } from '@/locales/useI18n'
|
import { useI18n } from '@/hooks/web/index'
|
||||||
|
|
||||||
import type { IconEventMapOptions, IconEventMap } from './type'
|
import type { IconEventMapOptions, IconEventMap } from './type'
|
||||||
|
|
||||||
|
|||||||
@ -18,8 +18,8 @@
|
|||||||
import './index.scss'
|
import './index.scss'
|
||||||
|
|
||||||
import { NSpin } from 'naive-ui'
|
import { NSpin } from 'naive-ui'
|
||||||
import RayTransitionComponent from '@/components/RayTransitionComponent/index.vue'
|
import RTransitionComponent from '@/components/RTransitionComponent/index.vue'
|
||||||
import AppRequestCanceler from '@/app-components/provider/AppRequestCanceler/index'
|
import AppRequestCancelerProvider from '@/app-components/provider/AppRequestCancelerProvider/index'
|
||||||
|
|
||||||
import { useSetting } from '@/store'
|
import { useSetting } from '@/store'
|
||||||
|
|
||||||
@ -64,15 +64,13 @@ const ContentWrapper = defineComponent({
|
|||||||
size="large"
|
size="large"
|
||||||
themeOverrides={this.thmeOverridesSpin}
|
themeOverrides={this.thmeOverridesSpin}
|
||||||
>
|
>
|
||||||
<AppRequestCanceler />
|
<AppRequestCancelerProvider />
|
||||||
{this.reloadRouteSwitch ? (
|
{this.reloadRouteSwitch ? (
|
||||||
<RayTransitionComponent
|
<RTransitionComponent
|
||||||
class="content-wrapper"
|
class="content-wrapper"
|
||||||
transitionPropName={this.contentTransition + '-transform'}
|
transitionPropName={this.contentTransition + '-transform'}
|
||||||
/>
|
/>
|
||||||
) : (
|
) : null}
|
||||||
''
|
|
||||||
)}
|
|
||||||
</NSpin>
|
</NSpin>
|
||||||
)
|
)
|
||||||
},
|
},
|
||||||
|
|||||||
@ -19,7 +19,7 @@ import HeaderWrapper from './default/HeaderWrapper'
|
|||||||
import FeatureWrapper from './default/FeatureWrapper'
|
import FeatureWrapper from './default/FeatureWrapper'
|
||||||
|
|
||||||
import { useSetting } from '@/store'
|
import { useSetting } from '@/store'
|
||||||
import { LAYOUT_CONTENT_REF } from '@/appConfig/routerConfig'
|
import { LAYOUT_CONTENT_REF } from '@/app-config/routerConfig'
|
||||||
import { layoutHeaderCssVars } from '@/layout/layoutResize'
|
import { layoutHeaderCssVars } from '@/layout/layoutResize'
|
||||||
import useAppLockScreen from '@/app-components/app/AppLockScreen/appLockVar'
|
import useAppLockScreen from '@/app-components/app/AppLockScreen/appLockVar'
|
||||||
|
|
||||||
@ -60,9 +60,7 @@ const RLayout = defineComponent({
|
|||||||
<HeaderWrapper ref="layoutSiderBarRef" />
|
<HeaderWrapper ref="layoutSiderBarRef" />
|
||||||
{this.modelMenuTagSwitch ? (
|
{this.modelMenuTagSwitch ? (
|
||||||
<FeatureWrapper ref="layoutMenuTagRef" />
|
<FeatureWrapper ref="layoutMenuTagRef" />
|
||||||
) : (
|
) : null}
|
||||||
''
|
|
||||||
)}
|
|
||||||
<NLayoutContent
|
<NLayoutContent
|
||||||
ref="LAYOUT_CONTENT_REF"
|
ref="LAYOUT_CONTENT_REF"
|
||||||
class="r-layout-full__viewer-content"
|
class="r-layout-full__viewer-content"
|
||||||
@ -73,9 +71,7 @@ const RLayout = defineComponent({
|
|||||||
{this.footerSwitch ? <FooterWrapper ref="layoutFooterRef" /> : ''}
|
{this.footerSwitch ? <FooterWrapper ref="layoutFooterRef" /> : ''}
|
||||||
</NLayoutContent>
|
</NLayoutContent>
|
||||||
</NLayout>
|
</NLayout>
|
||||||
) : (
|
) : null
|
||||||
''
|
|
||||||
)
|
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
@ -19,8 +19,8 @@
|
|||||||
import { set } from 'lodash-es'
|
import { set } from 'lodash-es'
|
||||||
import { zhCN, dateZhCN } from 'naive-ui' // 导入 `naive ui` 中文包
|
import { zhCN, dateZhCN } from 'naive-ui' // 导入 `naive ui` 中文包
|
||||||
import { getStorage } from '@use-utils/cache'
|
import { getStorage } from '@use-utils/cache'
|
||||||
import { SYSTEM_DEFAULT_LOCAL } from '@/appConfig/localConfig'
|
import { SYSTEM_DEFAULT_LOCAL } from '@/app-config/localConfig'
|
||||||
import { APP_CATCH_KEY } from '@/appConfig/appConfig'
|
import { APP_CATCH_KEY } from '@/app-config/appConfig'
|
||||||
|
|
||||||
import type { Recordable } from '@/types/modules/helper'
|
import type { Recordable } from '@/types/modules/helper'
|
||||||
import type {
|
import type {
|
||||||
|
|||||||
@ -24,7 +24,7 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
import { createI18n } from 'vue-i18n'
|
import { createI18n } from 'vue-i18n'
|
||||||
import { LOCAL_OPTIONS } from '@/appConfig/localConfig'
|
import { LOCAL_OPTIONS } from '@/app-config/localConfig'
|
||||||
import { getAppDefaultLanguage, getAppLocalMessages } from '@/locales/helper'
|
import { getAppDefaultLanguage, getAppLocalMessages } from '@/locales/helper'
|
||||||
|
|
||||||
import type { App } from 'vue'
|
import type { App } from 'vue'
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"Register": "注册",
|
"Register": "注册",
|
||||||
"Signin": "登陆",
|
"Signin": "登录",
|
||||||
"QRCodeSignin": "扫码登陆",
|
"QRCodeSignin": "扫码登陆",
|
||||||
"NamePlaceholder": "请输入用户名",
|
"NamePlaceholder": "请输入用户名",
|
||||||
"PasswordPlaceholder": "请输入密码",
|
"PasswordPlaceholder": "请输入密码",
|
||||||
|
|||||||
@ -1,27 +0,0 @@
|
|||||||
/**
|
|
||||||
*
|
|
||||||
* @author Ray <https://github.com/XiaoDaiGua-Ray>
|
|
||||||
*
|
|
||||||
* @date 2023-03-22
|
|
||||||
*
|
|
||||||
* @workspace ray-template
|
|
||||||
*
|
|
||||||
* @remark 今天也是元气满满撸代码的一天
|
|
||||||
*/
|
|
||||||
|
|
||||||
/**
|
|
||||||
*
|
|
||||||
* onlyoffice
|
|
||||||
*
|
|
||||||
* 该功能暂未实现, 后续应该会补上
|
|
||||||
* 由于该方法需要后端进行相关配合, 因为目前还在考虑是否接上私有 onlyoffice 服务器, 所以该功能暂未实现
|
|
||||||
* 望多多理解, 理解万岁
|
|
||||||
*/
|
|
||||||
|
|
||||||
import { getAppEnvironment } from '@use-utils/hook'
|
|
||||||
import request from '@/axios/instance'
|
|
||||||
|
|
||||||
export const getOfficeDocumentApi = async (uuid: string) => {
|
|
||||||
const { VITE_APP_OFFICE_PROXY_URL } = getAppEnvironment()
|
|
||||||
const { get } = request
|
|
||||||
}
|
|
||||||
@ -5,7 +5,7 @@
|
|||||||
> router modules 包中的路由模块会与菜单一一映射，也就是说，路由模块的配置结构会影响菜单的展示。当你有子菜单需要配置时，你需要使用该组件。
|
> router modules 包中的路由模块会与菜单一一映射，也就是说，路由模块的配置结构会影响菜单的展示。当你有子菜单需要配置时，你需要使用该组件。
|
||||||
|
|
||||||
```ts
|
```ts
|
||||||
import { t } from '@/locales/useI18n'
|
import { t } from '@/hooks/web/index'
|
||||||
import { LAYOUT } from '@/router/constant/index'
|
import { LAYOUT } from '@/router/constant/index'
|
||||||
|
|
||||||
import type { AppRouteRecordRaw } from '@/router/type'
|
import type { AppRouteRecordRaw } from '@/router/type'
|
||||||
|
|||||||
@ -18,7 +18,7 @@
|
|||||||
* 如果有需要查看 router 模块的全局通用辅助方法可以查看 routerCopilot 包
|
* 如果有需要查看 router 模块的全局通用辅助方法可以查看 routerCopilot 包
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import { LAYOUT_CONTENT_REF } from '@/appConfig/routerConfig'
|
import { LAYOUT_CONTENT_REF } from '@/app-config/routerConfig'
|
||||||
|
|
||||||
import type { RouteLocationNormalized } from 'vue-router'
|
import type { RouteLocationNormalized } from 'vue-router'
|
||||||
import type { AppRouteRecordRaw, RouteModules } from '@/router/type'
|
import type { AppRouteRecordRaw, RouteModules } from '@/router/type'
|
||||||
|
|||||||
@ -21,9 +21,9 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
import { getStorage } from '@/utils/cache'
|
import { getStorage } from '@/utils/cache'
|
||||||
import { APP_CATCH_KEY, ROOT_ROUTE } from '@/appConfig/appConfig'
|
import { APP_CATCH_KEY, ROOT_ROUTE } from '@/app-config/appConfig'
|
||||||
import { redirectRouterToDashboard } from '@/router/helper/routerCopilot'
|
import { redirectRouterToDashboard } from '@/router/helper/routerCopilot'
|
||||||
import { WHITE_ROUTES } from '@/appConfig/routerConfig'
|
import { WHITE_ROUTES } from '@/app-config/routerConfig'
|
||||||
import { validRole } from '@/router/helper/routerCopilot'
|
import { validRole } from '@/router/helper/routerCopilot'
|
||||||
import { isValueType } from '@/utils/hook'
|
import { isValueType } from '@/utils/hook'
|
||||||
|
|
||||||
@ -41,7 +41,7 @@ export const permissionRouter = (router: Router) => {
|
|||||||
|
|
||||||
beforeEach((to, from, next) => {
|
beforeEach((to, from, next) => {
|
||||||
const token = getStorage<string>(APP_CATCH_KEY.token)
|
const token = getStorage<string>(APP_CATCH_KEY.token)
|
||||||
const catchRoutePath = getStorage<string>(
|
const catchRoutePath = getStorage(
|
||||||
'menuKey',
|
'menuKey',
|
||||||
'sessionStorage',
|
'sessionStorage',
|
||||||
ROOT_ROUTE.path,
|
ROOT_ROUTE.path,
|
||||||
|
|||||||
@ -10,10 +10,10 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
import { permissionRouter } from './permission'
|
import { permissionRouter } from './permission'
|
||||||
import { SETUP_ROUTER_ACTION, SUPER_ADMIN } from '@/appConfig/routerConfig'
|
import { SETUP_ROUTER_ACTION, SUPER_ADMIN } from '@/app-config/routerConfig'
|
||||||
import { useSignin } from '@/store'
|
import { useSignin } from '@/store'
|
||||||
import { useVueRouter } from '@/router/helper/useVueRouter'
|
import { useVueRouter } from '@/hooks/web/index'
|
||||||
import { ROOT_ROUTE } from '@/appConfig/appConfig'
|
import { ROOT_ROUTE } from '@/app-config/appConfig'
|
||||||
import { setStorage } from '@/utils/cache'
|
import { setStorage } from '@/utils/cache'
|
||||||
import { getAppEnvironment } from '@/utils/hook'
|
import { getAppEnvironment } from '@/utils/hook'
|
||||||
|
|
||||||
|
|||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user