mirror of
https://github.com/XiaoDaiGua-Ray/ray-template.git
synced 2025-04-05 19:42:07 +08:00
v4.2.2
This commit is contained in:
XiaoDaiGua-Ray
parent
43be9bc3f2
commit
3fb016513b
@ -35,6 +35,7 @@ module.exports = {
|
||||
defineOptions: 'readonly',
|
||||
},
|
||||
rules: {
|
||||
'no-undefined': ['error'],
|
||||
'linebreak-style': ['error', 'unix'],
|
||||
'@typescript-eslint/no-explicit-any': [
|
||||
'error',
|
||||
|
||||
47
CHANGELOG.md
47
CHANGELOG.md
@ -1,5 +1,32 @@
|
||||
# CHANGE LOG
|
||||
|
||||
## 4.2.2
|
||||
|
||||
重构了 RTable 组件。优化表格渲染逻辑，解决旧组件重复渲染问题。并且允许自定义拓展工具栏。
|
||||
|
||||
为了项目未来的可维护性，将 hook 库自动导入方法移除。应该尽量避免滥用 `auto import`，否则项目规模庞大后，带来的项目可维护性是一个负担。
|
||||
|
||||
新增了一个新的 `eslint` 规则，并且约定变量初始化的时不明确具体值时，尽量使用 `null` 或者 `void 0` 的方式进行赋值。而不是直接使用 `undefined` 直接赋值。
|
||||
|
||||
### Feats
|
||||
|
||||
- 优化 `RChart` 组件
|
||||
- 设置 `README.md` 默认为英文
|
||||
- 优化了一些错误类型的提示，现在报错信息会更加的详细、准确
|
||||
- 实现了新的文件下载函数 `downloadAnyFile`，支持 `blod, file, base64, arrayBuffer`
|
||||
- 更新 `naive-ui` 版本至 `2.35.0`
|
||||
- 新增了一些工具类型与工具方法
|
||||
- 新增规则 `no-undefined`，[点击查看](https://eslint.org/docs/latest/rules/no-undefined#rule-details) 具体规则
|
||||
|
||||
```ts
|
||||
// 错误示例
|
||||
const demo = undefined
|
||||
|
||||
// 正确示例
|
||||
const demo = void 0
|
||||
const demo2 = null
|
||||
```
|
||||
|
||||
## 4.2.1
|
||||
|
||||
经过综合考虑，还是给模板增加 `cdn` 的配置。基于 `vite-plugin-cdn2` 插件实现。
|
||||
@ -52,7 +79,7 @@
|
||||
- 更新 `vite` 版本至 `v4.4.9`
|
||||
- 更新 `vue-hooks-plus` 版本至 `v1.8.1`
|
||||
- 更新了 RayTable 的一些事件的命名
|
||||
- `RayChart` 组件做了一些调整
|
||||
- `RChart` 组件做了一些调整
|
||||
- 支持指定 observer 监听对象，默认为 chart 组件本身
|
||||
- 默认开启 autoChangeTheme 功能
|
||||
- 支持配置 throttleWait 节流等待时间，默认 500ms
|
||||
@ -73,7 +100,7 @@
|
||||
|
||||
### Fixes
|
||||
|
||||
- 修复 RayCollapseGrid 组件显示问题，现在如果未存在溢出情况，不会显示 展开/收起 按钮
|
||||
- 修复 RCollapseGrid 组件显示问题，现在如果未存在溢出情况，不会显示 展开/收起 按钮
|
||||
|
||||
## 4.1.6
|
||||
|
||||
@ -86,7 +113,7 @@
|
||||
|
||||
### Fixes
|
||||
|
||||
- 修复 RayChart 组件不能根据内容区域尺寸变化更新 chart 图
|
||||
- 修复 RChart 组件不能根据内容区域尺寸变化更新 chart 图
|
||||
|
||||
## 4.1.5
|
||||
|
||||
@ -95,7 +122,7 @@
|
||||
- 修复 windows 平台下构建失败问题
|
||||
- 修复换行符导致构建失败问题
|
||||
- 修复特定 node pnpm 版本构建栈溢出问题
|
||||
- 修复 `RayCollapseGrid` 组件 open 属性歧义问题
|
||||
- 修复 `RCollapseGrid` 组件 open 属性歧义问题
|
||||
|
||||
## 4.1.4
|
||||
|
||||
@ -149,7 +176,7 @@ request({
|
||||
- `localConfig` 新增配置类型保护
|
||||
- 将原 `AppComponent` 组件包移动至 `app-components` 包中，并且按照其功能拆分为 `sys` `provider`
|
||||
- 现在将异步注册 `vue-router`
|
||||
- `RayChart` 组件新增 `macarons` 主题。现在支持便捷的自定义主题，在[主题编辑器](https://echarts.apache.org/zh/theme-builder.html)编辑主题后，下载主题（json）放置于对应主题包中即可被自动注册
|
||||
- `RChart` 组件新增 `macarons` 主题。现在支持便捷的自定义主题，在[主题编辑器](https://echarts.apache.org/zh/theme-builder.html)编辑主题后，下载主题（json）放置于对应主题包中即可被自动注册
|
||||
- 兼容 `yarn` `npm` 包管理器的 `manualChunks` 配置
|
||||
|
||||
## 4.1.2
|
||||
@ -175,7 +202,7 @@ request({
|
||||
### Feats
|
||||
|
||||
- 升级 vue 版本为 v3.3.4。并且配套升级了模板的一些插件
|
||||
- RayTransitionComponent 组件加入 Suspense 组件的支持（试验性加入，可能会移除）
|
||||
- RTransitionComponent 组件加入 Suspense 组件的支持（试验性加入，可能会移除）
|
||||
- 更新部分组件的事件触发方式，类似 onUpdateValue、onupdate:value 方法改为 props 定义而非 emit（受控、非受控）
|
||||
- 更新路由切换动画的透明度，视觉效果更友好
|
||||
- App.tsx 组件内部逻辑抽离为 AppStyleProvider。将一些组件存放位置放在 AppComponents 文件包中
|
||||
@ -317,7 +344,7 @@ run('some value')
|
||||
|
||||
### Feats
|
||||
|
||||
- Router Meta 属性支持自定义图标，不再局限于 RayIcon，支持自定义图标
|
||||
- Router Meta 属性支持自定义图标，不再局限于 RIcon，支持自定义图标
|
||||
- 更改部分组件默认值，默认值统一为 `null`
|
||||
- 调整 validRole 方法逻辑，将该方法以前逻辑拆分为 validRole 与 validMenuItemShow 两个方法
|
||||
- 新增使用手册
|
||||
@ -405,7 +432,7 @@ useAppTheme key 类型: 'dark' | 'light'
|
||||
### 补充
|
||||
|
||||
- 锁屏功能的设计并不理想，后期会进行破坏性更新。锁屏触发条件与管理方式目前并不理想，管理有点混乱
|
||||
- 后期会考虑补充 keepAlive 功能。目前没有实现是因为该功能实现的话，需要将所有路由提升为顶层路由（这是 KeepAlive 组件限制），目前并未实现该功能。后期会在权衡后增加该功能，实现时会在 RayTransitionComponent 进行拓展补充
|
||||
- 后期会考虑补充 keepAlive 功能。目前没有实现是因为该功能实现的话，需要将所有路由提升为顶层路由（这是 KeepAlive 组件限制），目前并未实现该功能。后期会在权衡后增加该功能，实现时会在 RTransitionComponent 进行拓展补充
|
||||
|
||||
## 3.2.2
|
||||
|
||||
@ -468,7 +495,7 @@ useAppTheme key 类型: 'dark' | 'light'
|
||||
- 现在可以直接配置首屏加载动画一些信息(cfg.ts)
|
||||
- 新增对于 ejs 支持
|
||||
- 补充一些细节注释
|
||||
- 新增 RayChart 组件 loading、loadingOptions 属性配置
|
||||
- 新增 RChart 组件 loading、loadingOptions 属性配置
|
||||
- 新增反转色模式
|
||||
- 修改 Menu 菜单过滤逻辑，现在如果权限不匹配或者设置了 hidden 属性，则会被过滤掉
|
||||
|
||||
@ -523,7 +550,7 @@ useAppTheme key 类型: 'dark' | 'light'
|
||||
### Feats
|
||||
|
||||
- 修改 demo 页面展示
|
||||
- 修改 RayCollapseGrid、RayTable 组件为默认不展示 border
|
||||
- 修改 RCollapseGrid、RayTable 组件为默认不展示 border
|
||||
|
||||
## 3.1.1
|
||||
|
||||
|
||||
@ -7,115 +7,117 @@
|
||||
|
||||
# Ray Template
|
||||
|
||||
A middle and backend template based on vite4.x & ts(x) & pinia & vue3.x
|
||||
简体中文 | [English](https://github.com/XiaoDaiGua-Ray/ray-template/blob/main/README.md)
|
||||
|
||||
一个基于 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
|
||||
- **最新技术栈**：使用 vue3.x/vite4.x/pinia 等前端前沿技术开发
|
||||
- **TypeScript**：应用程序级 JavaScript 的语言
|
||||
- **主题**：可配置的主题
|
||||
- **国际化**：内置完善的国际化方案
|
||||
- **Mock 数据**：内置 Mock 数据方案
|
||||
- **权限**：内置完善的动态路由权限生成方案
|
||||
- **组件**：二次封装了多个常用的组件
|
||||
- **Axios 请求**：二次封装 axios 库，支持：取消、防抖、自动重复取消等功能
|
||||
- **缓存**：任意深度页面缓存
|
||||
- **SVG**：内置 svg icon 解决方案
|
||||
- **独立的 Data Methods Views**：解耦管理的数据、方法、视图，放心二次开发
|
||||
|
||||
## 🪄 Preview
|
||||
## 🪄 预览地址
|
||||
|
||||
- [Click to preview](https://xiaodaigua-ray.github.io/ray-template/#/)
|
||||
- [Click to preview(Acceleration address)](https://ray-template.yunkuangao.com/#/)
|
||||
- [点击预览](https://xiaodaigua-ray.github.io/ray-template/#/)
|
||||
- [点击预览(加速地址)](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/)
|
||||
- [文档](https://xiaodaigua-ray.github.io/ray-template-doc/)
|
||||
- [文档(加速地址)](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)
|
||||
- [更新日志](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
|
||||
- [Node](http://nodejs.org/) 和 [git](https://git-scm.com/) - 项目开发环境
|
||||
- [Vite](https://vitejs.dev/) - 熟悉 vite 特性
|
||||
- [Vue3](https://v3.vuejs.org/) - 熟悉 Vue 基础语法
|
||||
- [TypeScript](https://www.typescriptlang.org/) - 熟悉 TypeScript 基本语法
|
||||
- [Es6+](http://es6.ruanyifeng.com/) - 熟悉 es6 基本语法
|
||||
- [Vue-Router-Next](https://next.router.vuejs.org/) - 熟悉 vue-router4.x 基本使用
|
||||
- [Naive-UI](https://www.naiveui.com) - ui 基本使用
|
||||
- [Mock.js](https://github.com/nuysoft/Mock) - mockjs 基本语法
|
||||
- [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 基本语法
|
||||
|
||||
## 📦 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.
|
||||
简介、易上手是该模板的核心思路。所以你可以放心的直接删除 `views/demo` `router/moduels/demo` 下的所有文件，这样就是一个干净的项目了。
|
||||
|
||||
## 🪴 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)
|
||||
96
README.md
96
README.md
@ -7,117 +7,117 @@
|
||||
|
||||
# Ray Template
|
||||
|
||||
简体中文 | [English](https://github.com/XiaoDaiGua-Ray/ray-template/blob/main/README-US.md)
|
||||
English | [简体中文](https://github.com/XiaoDaiGua-Ray/ray-template/blob/main/README-ZH.md)
|
||||
|
||||
一个基于 vite4.x & ts(x) & pinia & vue3.x 的中后台模板
|
||||
A middle and backend template based on vite4.x & ts(x) & pinia & vue3.x
|
||||
|
||||
</div>
|
||||
|
||||
## ✨ 特性
|
||||
## ✨ Feature
|
||||
|
||||
- **最新技术栈**：使用 vue3.x/vite4.x/pinia 等前端前沿技术开发
|
||||
- **TypeScript**：应用程序级 JavaScript 的语言
|
||||
- **主题**：可配置的主题
|
||||
- **国际化**：内置完善的国际化方案
|
||||
- **Mock 数据**：内置 Mock 数据方案
|
||||
- **权限**：内置完善的动态路由权限生成方案
|
||||
- **组件**：二次封装了多个常用的组件
|
||||
- **Axios 请求**：二次封装 axios 库，支持：取消、防抖、自动重复取消等功能
|
||||
- **缓存**：任意深度页面缓存
|
||||
- **SVG**：内置 svg icon 解决方案
|
||||
- **独立的 Data Methods Views**：解耦管理的数据、方法、视图，放心二次开发
|
||||
- **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
|
||||
|
||||
- [点击预览](https://xiaodaigua-ray.github.io/ray-template/#/)
|
||||
- [点击预览(加速地址)](https://ray-template.yunkuangao.com/#/)
|
||||
- [Click to preview](https://xiaodaigua-ray.github.io/ray-template/#/)
|
||||
- [Click to preview(Acceleration address)](https://ray-template.yunkuangao.com/#/)
|
||||
|
||||
## 🦾 文档地址
|
||||
## 🦾 Document
|
||||
|
||||
- [文档](https://xiaodaigua-ray.github.io/ray-template-doc/)
|
||||
- [文档(加速地址)](https://ray-template.yunkuangao.com/ray-template-doc/)
|
||||
- [Document](https://xiaodaigua-ray.github.io/ray-template-doc/)
|
||||
- [Document(Acceleration address)](https://ray-template.yunkuangao.com/ray-template-doc/)
|
||||
|
||||
## 🔋 更新日志
|
||||
## 🔋 Change Log
|
||||
|
||||
- [更新日志](https://github.com/XiaoDaiGua-Ray/xiaodaigua-ray.github.io/blob/main/CHANGELOG.md)
|
||||
- [Change Log](https://github.com/XiaoDaiGua-Ray/xiaodaigua-ray.github.io/blob/main/CHANGELOG.md)
|
||||
|
||||
## 🪴 准备
|
||||
## 🪴 Prepare
|
||||
|
||||
- [Node](http://nodejs.org/) 和 [git](https://git-scm.com/) - 项目开发环境
|
||||
- [Vite](https://vitejs.dev/) - 熟悉 vite 特性
|
||||
- [Vue3](https://v3.vuejs.org/) - 熟悉 Vue 基础语法
|
||||
- [TypeScript](https://www.typescriptlang.org/) - 熟悉 TypeScript 基本语法
|
||||
- [Es6+](http://es6.ruanyifeng.com/) - 熟悉 es6 基本语法
|
||||
- [Vue-Router-Next](https://next.router.vuejs.org/) - 熟悉 vue-router4.x 基本使用
|
||||
- [Naive-UI](https://www.naiveui.com) - ui 基本使用
|
||||
- [Mock.js](https://github.com/nuysoft/Mock) - mockjs 基本语法
|
||||
- [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 基本语法
|
||||
- [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
|
||||
|
||||
简介、易上手是该模板的核心思路。所以你可以放心的直接删除 `views/demo` `router/moduels/demo` 下的所有文件，这样就是一个干净的项目了。
|
||||
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)
|
||||
|
||||
@ -34,7 +34,7 @@
|
||||
"echarts": "^5.4.0",
|
||||
"lodash-es": "^4.17.21",
|
||||
"mockjs": "1.1.0",
|
||||
"naive-ui": "^2.34.4",
|
||||
"naive-ui": "^2.35.0",
|
||||
"pinia": "^2.1.4",
|
||||
"pinia-plugin-persistedstate": "^3.1.0",
|
||||
"print-js": "^1.6.0",
|
||||
|
||||
@ -16,6 +16,8 @@
|
||||
* 可以根据后台接口进行替换该变量, 只要是一个响应式的变量值即可
|
||||
*/
|
||||
|
||||
import { useStorage } from '@vueuse/core'
|
||||
|
||||
const appLockScreen = useStorage('isAppLockScreen', false, sessionStorage, {
|
||||
mergeDefaults: true,
|
||||
})
|
||||
|
||||
@ -45,7 +45,7 @@ const AppLockScreen = defineComponent({
|
||||
show
|
||||
maskClosable={false}
|
||||
closeOnEsc={false}
|
||||
preset={!this.getLockAppScreen() ? 'dialog' : undefined}
|
||||
preset={!this.getLockAppScreen() ? 'dialog' : void 0}
|
||||
title="锁定屏幕"
|
||||
>
|
||||
<div class="app-lock-screen__content">
|
||||
|
||||
@ -58,7 +58,7 @@ export const ROOT_ROUTE: Readonly<RootRoute> = {
|
||||
|
||||
/**
|
||||
*
|
||||
* icon: LOGO 图标, 依赖 `RayIcon` 实现(如果为空则不会渲染图标)
|
||||
* icon: LOGO 图标, 依赖 `RIcon` 实现(如果为空则不会渲染图标)
|
||||
* title: LOGO 标题
|
||||
* url: 点击跳转地址, 如果不配置该属性, 则不会触发跳转
|
||||
* jumpType: 跳转类型(station: 项目内跳转, outsideStation: 新页面打开)
|
||||
|
||||
@ -36,10 +36,7 @@ import {
|
||||
PictorialBarChart,
|
||||
} from 'echarts/charts' // 系列类型(后缀都为 `SeriesOption`)
|
||||
import { LabelLayout, UniversalTransition } from 'echarts/features' // 标签自动布局, 全局过渡动画等特性
|
||||
import {
|
||||
CanvasRenderer,
|
||||
// SVGRenderer,
|
||||
} from 'echarts/renderers' // `echarts` 渲染器
|
||||
import { CanvasRenderer } from 'echarts/renderers' // `echarts` 渲染器
|
||||
|
||||
import { useSetting } from '@/store'
|
||||
import { cloneDeep, throttle } from 'lodash-es'
|
||||
@ -47,8 +44,9 @@ import { on, off, completeSize } from '@/utils/element'
|
||||
import { call } from '@/utils/vue/index'
|
||||
import { setupChartTheme, loadingOptions } from './helper'
|
||||
import { APP_THEME } from '@/app-config/designConfig'
|
||||
import { useResizeObserver } from '@vueuse/core'
|
||||
|
||||
import type { PropType } from 'vue'
|
||||
import type { PropType, WatchStopHandle } from 'vue'
|
||||
import type { AnyFC, MaybeArray } from '@/types/modules/utils'
|
||||
import type { DebouncedFunc } from 'lodash-es'
|
||||
import type {
|
||||
@ -228,10 +226,10 @@ export default defineComponent({
|
||||
const rayChartRef = ref<HTMLElement>() // `echart` 容器实例
|
||||
const rayChartWrapperRef = ref<HTMLElement>()
|
||||
const echartInstanceRef = ref<ECharts>() // `echart` 实例
|
||||
let echartInstance: ECharts | null // `echart` 拷贝实例, 解决直接使用响应式实例带来的问题
|
||||
let resizeThrottleReturn: DebouncedFunc<AnyFC> | null // resize 防抖方法实例
|
||||
let resizeOvserverReturn: UseResizeObserverReturn | null
|
||||
const { echartTheme } = APP_THEME
|
||||
let watchOptionsReturn: WatchStopHandle | null
|
||||
|
||||
const cssVarsRef = computed(() => {
|
||||
const cssVars = {
|
||||
@ -294,7 +292,7 @@ export default defineComponent({
|
||||
* 如果有需要特殊全局配置的可以在此继续写...
|
||||
*/
|
||||
const combineChartOptions = (ops: EChartsCoreOption) => {
|
||||
let options = cloneDeep(ops)
|
||||
let options = cloneDeep(unref(ops))
|
||||
|
||||
const assign = (opts: object) =>
|
||||
Object.assign(
|
||||
@ -342,26 +340,25 @@ export default defineComponent({
|
||||
})
|
||||
|
||||
/** 注册 chart */
|
||||
echartInstance = echarts.init(element, theme, {
|
||||
echartInstanceRef.value = echarts.init(element, theme, {
|
||||
/** 如果款度为 0, 则以 200px 填充 */
|
||||
width: width === 0 ? 200 : void 0,
|
||||
/** 如果高度为 0, 则以 200px 填充 */
|
||||
height: height === 0 ? 200 : void 0,
|
||||
})
|
||||
echartInstanceRef.value = echartInstance
|
||||
|
||||
/** 设置 options 配置项 */
|
||||
options && echartInstance.setOption({})
|
||||
echartInstanceRef.value.setOption({})
|
||||
|
||||
if (props.animation) {
|
||||
setTimeout(() => {
|
||||
options && echartInstance?.setOption(options)
|
||||
options && echartInstanceRef.value?.setOption(options)
|
||||
})
|
||||
}
|
||||
|
||||
/** 渲染成功回调 */
|
||||
if (onSuccess) {
|
||||
call(onSuccess, echartInstance)
|
||||
call(onSuccess, echartInstanceRef.value)
|
||||
}
|
||||
} catch (e) {
|
||||
/** 渲染失败回调 */
|
||||
@ -396,22 +393,22 @@ export default defineComponent({
|
||||
* 销毁 `chart` 实例, 释放资源
|
||||
*/
|
||||
const destroyChart = () => {
|
||||
if (echartInstance) {
|
||||
echartInstance.clear()
|
||||
echartInstance.dispose()
|
||||
if (echartInstanceRef.value) {
|
||||
echartInstanceRef.value.clear()
|
||||
echartInstanceRef.value.dispose()
|
||||
}
|
||||
}
|
||||
|
||||
/** 重置 echarts 尺寸 */
|
||||
const resizeChart = () => {
|
||||
if (echartInstance) {
|
||||
echartInstance.resize()
|
||||
if (echartInstanceRef.value) {
|
||||
echartInstanceRef.value.resize()
|
||||
}
|
||||
}
|
||||
|
||||
const mount = () => {
|
||||
// 避免重复渲染
|
||||
if (echartInstance?.getDom()) {
|
||||
if (echartInstanceRef.value?.getDom()) {
|
||||
console.warn(
|
||||
'RChart mount: There is a chart instance already initialized on the dom. Execution was interrupted',
|
||||
)
|
||||
@ -487,21 +484,12 @@ export default defineComponent({
|
||||
},
|
||||
)
|
||||
|
||||
/** 显示/隐藏加载动画 */
|
||||
watch(
|
||||
() => props.loading,
|
||||
(ndata) => {
|
||||
ndata
|
||||
? echartInstance?.showLoading(props.loadingOptions)
|
||||
: echartInstance?.hideLoading()
|
||||
},
|
||||
)
|
||||
|
||||
watchEffect(() => {
|
||||
/** 监听 options 变化 */
|
||||
watch(
|
||||
if (props.watchOptions) {
|
||||
watchOptionsReturn = watch(
|
||||
() => props.options,
|
||||
(noptions) => {
|
||||
if (props.watchOptions) {
|
||||
/** 重新组合 options */
|
||||
const options = combineChartOptions(noptions)
|
||||
const setOpt = Object.assign({}, props.setChartOptions, {
|
||||
@ -510,15 +498,19 @@ export default defineComponent({
|
||||
silent: false,
|
||||
replaceMerge: [],
|
||||
})
|
||||
|
||||
/** 如果 options 发生变动更新 echarts */
|
||||
echartInstance?.setOption(options, setOpt)
|
||||
}
|
||||
echartInstanceRef.value?.setOption(options, setOpt)
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
},
|
||||
)
|
||||
}
|
||||
|
||||
props.loading
|
||||
? echartInstanceRef.value?.showLoading(props.loadingOptions)
|
||||
: echartInstanceRef.value?.hideLoading()
|
||||
})
|
||||
|
||||
expose({
|
||||
echart: echartInstanceRef,
|
||||
@ -539,6 +531,7 @@ export default defineComponent({
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
unmount()
|
||||
watchOptionsReturn?.()
|
||||
})
|
||||
|
||||
return {
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
import RayCollapseGrid from './src/index'
|
||||
import RCollapseGrid from './src/index'
|
||||
|
||||
export default RayCollapseGrid
|
||||
export default RCollapseGrid
|
||||
|
||||
@ -24,12 +24,12 @@ import './index.scss'
|
||||
import { collapseGridProps } from './props'
|
||||
|
||||
import { NCard, NGrid, NGridItem, NSpace } from 'naive-ui'
|
||||
import RayIcon from '@/components/RIcon'
|
||||
import RIcon from '@/components/RIcon'
|
||||
|
||||
import { call } from '@/utils/vue/index'
|
||||
|
||||
const RayCollapseGrid = defineComponent({
|
||||
name: 'RayCollapseGrid',
|
||||
const RCollapseGrid = defineComponent({
|
||||
name: 'RCollapseGrid',
|
||||
props: collapseGridProps,
|
||||
setup(props) {
|
||||
const modelCollapsed = ref(!props.open)
|
||||
@ -55,7 +55,7 @@ const RayCollapseGrid = defineComponent({
|
||||
? props.collapseToggleText[0]
|
||||
: props.collapseToggleText[1]}
|
||||
</span>
|
||||
<RayIcon
|
||||
<RIcon
|
||||
customClassName={`collapse-icon--arrow ${
|
||||
modelCollapsed.value ? '' : 'collapse-icon--arrow__expanded'
|
||||
}`}
|
||||
@ -99,4 +99,4 @@ const RayCollapseGrid = defineComponent({
|
||||
},
|
||||
})
|
||||
|
||||
export default RayCollapseGrid
|
||||
export default RCollapseGrid
|
||||
|
||||
@ -17,8 +17,8 @@ import { completeSize } from '@/utils/element'
|
||||
import type { PropType } from 'vue'
|
||||
import type { MaybeArray } from '@/types/modules/utils'
|
||||
|
||||
const RayIcon = defineComponent({
|
||||
name: 'RayIcon',
|
||||
const RIcon = defineComponent({
|
||||
name: 'RIcon',
|
||||
props: {
|
||||
color: {
|
||||
type: String,
|
||||
@ -114,4 +114,4 @@ const RayIcon = defineComponent({
|
||||
},
|
||||
})
|
||||
|
||||
export default RayIcon
|
||||
export default RIcon
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
import RayIframe from './src/index'
|
||||
import RIframe from './src/index'
|
||||
import props from './src/props'
|
||||
|
||||
import type { RayIframeInst } from './src/index'
|
||||
import type { RIframeInst } from './src/type'
|
||||
|
||||
export default RayIframe
|
||||
export type { RayIframeInst }
|
||||
export default RIframe
|
||||
export { props }
|
||||
export type { RIframeInst }
|
||||
|
||||
@ -15,98 +15,11 @@ import { NSpin } from 'naive-ui'
|
||||
|
||||
import { completeSize, on, off } from '@use-utils/element'
|
||||
import { call } from '@/utils/vue/index'
|
||||
import props from './props'
|
||||
|
||||
import type { PropType } from 'vue'
|
||||
import type { MaybeArray } from '@/types/modules/utils'
|
||||
import type { SpinProps } from 'naive-ui'
|
||||
|
||||
export interface RayIframeInst {
|
||||
iframe: Ref<HTMLIFrameElement>
|
||||
}
|
||||
|
||||
const RayIframe = defineComponent({
|
||||
name: 'RayIframe',
|
||||
props: {
|
||||
src: {
|
||||
/** iframe url */
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
iframeWrapperClass: {
|
||||
/** 自定义类名 */
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
frameborder: {
|
||||
/** 边框尺寸, 0 则不显示 */
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
width: {
|
||||
/** iframe 宽度 */
|
||||
type: [String, Number],
|
||||
default: '100%',
|
||||
},
|
||||
height: {
|
||||
/** iframe 高度 */
|
||||
type: [String, Number],
|
||||
default: '100%',
|
||||
},
|
||||
allow: {
|
||||
/**
|
||||
*
|
||||
* iframe 特征策略
|
||||
*
|
||||
* ```
|
||||
* 全屏激活: allow = 'fullscreen'
|
||||
* 允许跨域: allow = 'payment'
|
||||
* ```
|
||||
*
|
||||
* 但是该配置属性受到浏览器安全策略影响, 使用前请仔细阅读文档
|
||||
*/
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
name: {
|
||||
/** iframe 定位嵌入的浏览上下文的名称 */
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
title: {
|
||||
/** 标识 iframe 的主要内容 */
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
onSuccess: {
|
||||
/**
|
||||
*
|
||||
* iframe 加载成功回调
|
||||
* 返回值: iframe 对象, Event
|
||||
*/
|
||||
type: [Function, Array] as PropType<
|
||||
MaybeArray<(el: HTMLIFrameElement, e: Event) => void>
|
||||
>,
|
||||
default: null,
|
||||
},
|
||||
onError: {
|
||||
/**
|
||||
*
|
||||
* iframe 加载失败回调
|
||||
* 返回值: iframe 对象, Event
|
||||
*/
|
||||
type: [Function, Array] as PropType<MaybeArray<(e: Event) => void>>,
|
||||
default: null,
|
||||
},
|
||||
customSpinProps: {
|
||||
type: Object as PropType<SpinProps>,
|
||||
default: () => ({}),
|
||||
},
|
||||
lazy: {
|
||||
/** 是否延迟加载 iframe */
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
const RIframe = defineComponent({
|
||||
name: 'RIframe',
|
||||
props,
|
||||
setup(props, { expose }) {
|
||||
const cssVars = computed(() => {
|
||||
const cssVar = {
|
||||
@ -177,7 +90,7 @@ const RayIframe = defineComponent({
|
||||
...this.$slots,
|
||||
default: () => (
|
||||
<iframe
|
||||
class="ray-iframe__container"
|
||||
class={['ray-iframe__container', this.wrapperClass]}
|
||||
ref="iframeRef"
|
||||
src={this.src}
|
||||
allow={this.allow}
|
||||
@ -186,7 +99,7 @@ const RayIframe = defineComponent({
|
||||
{...{
|
||||
loading: this.lazy ? 'lazy' : null,
|
||||
}}
|
||||
></iframe>
|
||||
/>
|
||||
),
|
||||
}}
|
||||
</NSpin>
|
||||
@ -195,4 +108,4 @@ const RayIframe = defineComponent({
|
||||
},
|
||||
})
|
||||
|
||||
export default RayIframe
|
||||
export default RIframe
|
||||
|
||||
102
src/components/RIframe/src/props.ts
Normal file
102
src/components/RIframe/src/props.ts
Normal file
@ -0,0 +1,102 @@
|
||||
/**
|
||||
*
|
||||
* @author Ray <https://github.com/XiaoDaiGua-Ray>
|
||||
*
|
||||
* @date 2023-10-03
|
||||
*
|
||||
* @workspace ray-template
|
||||
*
|
||||
* @remark 今天也是元气满满撸代码的一天
|
||||
*/
|
||||
|
||||
import type { PropType } from 'vue'
|
||||
import type { MaybeArray } from '@/types/modules/utils'
|
||||
import type { SpinProps } from 'naive-ui'
|
||||
|
||||
const props = {
|
||||
src: {
|
||||
/** iframe url */
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
iframeWrapperClass: {
|
||||
/** 自定义类名 */
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
frameborder: {
|
||||
/** 边框尺寸, 0 则不显示 */
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
width: {
|
||||
/** iframe 宽度 */
|
||||
type: [String, Number],
|
||||
default: '100%',
|
||||
},
|
||||
height: {
|
||||
/** iframe 高度 */
|
||||
type: [String, Number],
|
||||
default: '100%',
|
||||
},
|
||||
allow: {
|
||||
/**
|
||||
*
|
||||
* iframe 特征策略
|
||||
*
|
||||
* ```
|
||||
* 全屏激活: allow = 'fullscreen'
|
||||
* 允许跨域: allow = 'payment'
|
||||
* ```
|
||||
*
|
||||
* 但是该配置属性受到浏览器安全策略影响, 使用前请仔细阅读文档
|
||||
*/
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
name: {
|
||||
/** iframe 定位嵌入的浏览上下文的名称 */
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
title: {
|
||||
/** 标识 iframe 的主要内容 */
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
onSuccess: {
|
||||
/**
|
||||
*
|
||||
* iframe 加载成功回调
|
||||
* 返回值: iframe 对象, Event
|
||||
*/
|
||||
type: [Function, Array] as PropType<
|
||||
MaybeArray<(el: HTMLIFrameElement, e: Event) => void>
|
||||
>,
|
||||
default: null,
|
||||
},
|
||||
onError: {
|
||||
/**
|
||||
*
|
||||
* iframe 加载失败回调
|
||||
* 返回值: iframe 对象, Event
|
||||
*/
|
||||
type: [Function, Array] as PropType<MaybeArray<(e: Event) => void>>,
|
||||
default: null,
|
||||
},
|
||||
customSpinProps: {
|
||||
type: Object as PropType<SpinProps>,
|
||||
default: () => ({}),
|
||||
},
|
||||
lazy: {
|
||||
/** 是否延迟加载 iframe */
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
wrapperClass: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
}
|
||||
|
||||
export default props
|
||||
14
src/components/RIframe/src/type.ts
Normal file
14
src/components/RIframe/src/type.ts
Normal file
@ -0,0 +1,14 @@
|
||||
/**
|
||||
*
|
||||
* @author Ray <https://github.com/XiaoDaiGua-Ray>
|
||||
*
|
||||
* @date 2023-10-03
|
||||
*
|
||||
* @workspace ray-template
|
||||
*
|
||||
* @remark 今天也是元气满满撸代码的一天
|
||||
*/
|
||||
|
||||
export interface RIframeInst {
|
||||
iframe: Ref<HTMLIFrameElement>
|
||||
}
|
||||
@ -12,11 +12,11 @@
|
||||
import './index.scss'
|
||||
|
||||
import { NButton, NSpin } from 'naive-ui'
|
||||
import RayIcon from '@/components/RIcon/index'
|
||||
import RIcon from '@/components/RIcon/index'
|
||||
|
||||
import props from './props'
|
||||
import { AwesomeQR } from 'awesome-qr'
|
||||
import { isValueType, downloadBase64File } from '@use-utils/hook'
|
||||
import { isValueType, downloadAnyFile } from '@use-utils/hook'
|
||||
import { call } from '@/utils/vue/index'
|
||||
|
||||
import type { QRCodeRenderResponse, GIFBuffer } from './type'
|
||||
@ -79,7 +79,7 @@ export default defineComponent({
|
||||
|
||||
new AwesomeQR({
|
||||
...ops,
|
||||
gifBackground: (gifBuffer as ArrayBuffer) ?? undefined,
|
||||
gifBackground: (gifBuffer as ArrayBuffer) ?? void 0,
|
||||
})
|
||||
.draw()
|
||||
.then((res) => {
|
||||
@ -114,7 +114,7 @@ export default defineComponent({
|
||||
|
||||
const downloadQRCode = (fileName?: string) => {
|
||||
if (qrcodeURL.value && isValueType<string>(qrcodeURL.value, 'String')) {
|
||||
downloadBase64File(
|
||||
downloadAnyFile(
|
||||
qrcodeURL.value,
|
||||
fileName || new Date().getTime() + '.png',
|
||||
)
|
||||
@ -173,7 +173,7 @@ export default defineComponent({
|
||||
{{
|
||||
default: () => this.errorActionDescription,
|
||||
icon: () => (
|
||||
<RayIcon name="reload" size="16" color="#ffffff" />
|
||||
<RIcon name="reload" size="16" color="#ffffff" />
|
||||
),
|
||||
}}
|
||||
</NButton>
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
import RayTable from './src/index'
|
||||
import RTable from './src/Table'
|
||||
import props from './src/props'
|
||||
|
||||
export default RayTable
|
||||
export type { RayTableInst } from './src/type'
|
||||
export default RTable
|
||||
export { props }
|
||||
export type { TableInst } from './src/type'
|
||||
|
||||
184
src/components/RTable/src/Table.tsx
Normal file
184
src/components/RTable/src/Table.tsx
Normal file
@ -0,0 +1,184 @@
|
||||
/**
|
||||
*
|
||||
* @author Ray <https://github.com/XiaoDaiGua-Ray>
|
||||
*
|
||||
* @date 2023-10-04
|
||||
*
|
||||
* @workspace ray-template
|
||||
*
|
||||
* @remark 今天也是元气满满撸代码的一天
|
||||
*/
|
||||
|
||||
import './index.scss'
|
||||
|
||||
import { NCard, NDataTable, NDropdown, NSpace } from 'naive-ui'
|
||||
import Size from './components/Size'
|
||||
import Screenfull from './components/Screenfull'
|
||||
import C from './components/C'
|
||||
import Print from './components/Print'
|
||||
|
||||
import props from './props'
|
||||
import { call } from '@/utils/vue/index'
|
||||
import { uuid } from '@use-utils/hook'
|
||||
|
||||
import type { DropdownOption, DataTableInst } from 'naive-ui'
|
||||
import type { ComponentSize } from '@/types/modules/component'
|
||||
import type { C as CType } from './type'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'RTable',
|
||||
props,
|
||||
setup(props, ctx) {
|
||||
const { expose } = ctx
|
||||
|
||||
const rTableInstance = ref<DataTableInst | null>(null)
|
||||
|
||||
const uuidWrapper = uuid(16)
|
||||
const uuidTable = uuid(16)
|
||||
const contextMenuReactive = reactive({
|
||||
x: 0,
|
||||
y: 0,
|
||||
showContextMenu: false,
|
||||
})
|
||||
const privateReactive = reactive({
|
||||
size: props.size,
|
||||
})
|
||||
|
||||
/**
|
||||
*
|
||||
* @param key key
|
||||
* @param option context menu select option
|
||||
*/
|
||||
const contextMenuSelect = (
|
||||
key: number | string,
|
||||
option: DropdownOption,
|
||||
) => {
|
||||
const { onContextMenuClick } = props
|
||||
|
||||
if (onContextMenuClick) {
|
||||
call(onContextMenuClick, key, option)
|
||||
}
|
||||
|
||||
contextMenuReactive.showContextMenu = false
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* 合并 RTable 的所有 rowProps
|
||||
* 如果开启了右键菜单功能，自动会拦截右键事件
|
||||
*/
|
||||
const combineRowProps = (arr: Record<string, unknown>, idx: number) => {
|
||||
const interceptRowProps = props.rowProps?.(arr, idx)
|
||||
|
||||
return {
|
||||
...interceptRowProps,
|
||||
onContextmenu: props.disabledContextMenu
|
||||
? void 0
|
||||
: (e: MouseEvent) => {
|
||||
e.preventDefault()
|
||||
|
||||
contextMenuReactive.showContextMenu = false
|
||||
|
||||
nextTick().then(() => {
|
||||
contextMenuReactive.showContextMenu = true
|
||||
contextMenuReactive.x = e.clientX
|
||||
contextMenuReactive.y = e.clientY
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
const changeTableSize = (size: ComponentSize) => {
|
||||
privateReactive.size = size
|
||||
}
|
||||
|
||||
const updateTableColumn = (options: CType[]) => {
|
||||
const { onUpdateColumns, 'onUpdate:columns': $onUpdateColumns } = props
|
||||
|
||||
if (onUpdateColumns) {
|
||||
call(onUpdateColumns, options)
|
||||
}
|
||||
if ($onUpdateColumns) {
|
||||
call($onUpdateColumns, options)
|
||||
}
|
||||
}
|
||||
|
||||
provide('tableProvider', {
|
||||
uuidTable,
|
||||
uuidWrapper,
|
||||
})
|
||||
expose({
|
||||
rTableInstance,
|
||||
})
|
||||
|
||||
return {
|
||||
uuidWrapper,
|
||||
uuidTable,
|
||||
contextMenuReactive,
|
||||
rTableInstance,
|
||||
combineRowProps,
|
||||
contextMenuSelect,
|
||||
changeTableSize,
|
||||
privateReactive,
|
||||
updateTableColumn,
|
||||
}
|
||||
},
|
||||
render() {
|
||||
return (
|
||||
<NCard
|
||||
class="ray-table"
|
||||
bordered={this.wrapperBordered}
|
||||
{...{ id: this.uuidWrapper }}
|
||||
>
|
||||
{{
|
||||
default: () => (
|
||||
<>
|
||||
<NDataTable
|
||||
ref="rTableInstance"
|
||||
{...{ id: this.uuidTable }}
|
||||
{...this.$props}
|
||||
{...this.$attrs}
|
||||
rowProps={this.combineRowProps.bind(this)}
|
||||
size={this.privateReactive.size}
|
||||
>
|
||||
{{
|
||||
...this.$slots,
|
||||
}}
|
||||
</NDataTable>
|
||||
{!this.disabledContextMenu ? (
|
||||
<NDropdown
|
||||
show={this.contextMenuReactive.showContextMenu}
|
||||
placement="bottom-start"
|
||||
trigger="manual"
|
||||
x={this.contextMenuReactive.x}
|
||||
y={this.contextMenuReactive.y}
|
||||
options={this.contextMenuOptions}
|
||||
onClickoutside={() =>
|
||||
(this.contextMenuReactive.showContextMenu = false)
|
||||
}
|
||||
onSelect={this.contextMenuSelect.bind(this)}
|
||||
/>
|
||||
) : null}
|
||||
</>
|
||||
),
|
||||
header: () => this.title || <div style="display: none;"></div>,
|
||||
'header-extra': () => (
|
||||
<NSpace wrapItem={false} align="center">
|
||||
<Print {...this.$props} />
|
||||
<Size
|
||||
{...this.$props}
|
||||
onChangeSize={this.changeTableSize.bind(this)}
|
||||
/>
|
||||
<Screenfull />
|
||||
<C
|
||||
{...this.$props}
|
||||
onUpdateColumn={this.updateTableColumn.bind(this)}
|
||||
/>
|
||||
</NSpace>
|
||||
),
|
||||
footer: () => this.$slots.tableFooter?.(),
|
||||
}}
|
||||
</NCard>
|
||||
)
|
||||
},
|
||||
})
|
||||
244
src/components/RTable/src/components/C.tsx
Normal file
244
src/components/RTable/src/components/C.tsx
Normal file
@ -0,0 +1,244 @@
|
||||
/**
|
||||
*
|
||||
* @author Ray <https://github.com/XiaoDaiGua-Ray>
|
||||
*
|
||||
* @date 2023-10-04
|
||||
*
|
||||
* @workspace ray-template
|
||||
*
|
||||
* @remark 今天也是元气满满撸代码的一天
|
||||
*/
|
||||
|
||||
/**
|
||||
*
|
||||
* TODO:
|
||||
* - 使用 computed 获取数据时，将数据转换为 NTree 格式，并且补充固定列操作栏按钮与初始化样式
|
||||
* - 使用 computed 收集固定列、拖拽列后的数据
|
||||
* - 点击固定列按钮后，激活样式
|
||||
* - Table 父组件通知更新 columns，使用 v-model:columns 方式绑定时，即可实现拖拽、动态展示列、固定列操作
|
||||
*/
|
||||
|
||||
import { NPopover, NSpace, NTree } from 'naive-ui'
|
||||
import RIcon from '@/components/RIcon/index'
|
||||
|
||||
import config from '../config'
|
||||
import props from '../props'
|
||||
import { h } from 'vue'
|
||||
import { call } from '@/utils/vue/index'
|
||||
|
||||
import type { TreeOption, TreeDropInfo } from 'naive-ui'
|
||||
import type { C } from '../type'
|
||||
import type { AnyFC } from '@/types/modules/utils'
|
||||
import type { MaybeArray } from '@/types/modules/utils'
|
||||
|
||||
type FixedClick = (type: 'left' | 'right', option: C, index: number) => void
|
||||
|
||||
const renderSwitcherIcon = () =>
|
||||
h(RIcon, {
|
||||
name: 'draggable',
|
||||
size: config.tableIconSize,
|
||||
})
|
||||
|
||||
const RowIconRender = ({
|
||||
icon,
|
||||
title,
|
||||
onClick,
|
||||
customClassName,
|
||||
}: {
|
||||
icon: string
|
||||
title: string
|
||||
onClick?: AnyFC
|
||||
customClassName?: string
|
||||
}) => {
|
||||
return (
|
||||
<NPopover>
|
||||
{{
|
||||
trigger: () => (
|
||||
<RIcon
|
||||
name={icon}
|
||||
size={config.tableIconSize}
|
||||
cursor="pointer"
|
||||
customClassName={customClassName}
|
||||
onClick={onClick?.bind(null)}
|
||||
/>
|
||||
),
|
||||
default: () => title,
|
||||
}}
|
||||
</NPopover>
|
||||
)
|
||||
}
|
||||
|
||||
const findSiblingsAndIndex = (
|
||||
node: TreeOption,
|
||||
nodes?: TreeOption[],
|
||||
): [TreeOption[], number] | [null, null] => {
|
||||
if (!nodes) {
|
||||
return [null, null]
|
||||
}
|
||||
|
||||
for (let i = 0; i < nodes.length; ++i) {
|
||||
const siblingNode = nodes[i]
|
||||
|
||||
if (siblingNode.key === node.key) {
|
||||
return [nodes, i]
|
||||
}
|
||||
|
||||
const [siblings, index] = findSiblingsAndIndex(node, siblingNode.children)
|
||||
|
||||
if (siblings && index !== null) {
|
||||
return [siblings, index]
|
||||
}
|
||||
}
|
||||
|
||||
return [null, null]
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'TableC',
|
||||
props: {
|
||||
...props,
|
||||
onUpdateColumn: {
|
||||
type: [Function, Array] as PropType<MaybeArray<(option: C[]) => void>>,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
/** 深拷贝 columns 避免修改源数据 */
|
||||
const treeDataSource = computed({
|
||||
get: () => {
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
return props.columns.map((curr: any, idx) => {
|
||||
const {
|
||||
key,
|
||||
title,
|
||||
children,
|
||||
fixed,
|
||||
resizable: $resizable,
|
||||
...args
|
||||
} = curr
|
||||
const isLeftFixedActivated = fixed && fixed === 'left'
|
||||
const isRightFixedActivated = fixed && fixed === 'right'
|
||||
const isResizable = !!$resizable
|
||||
const attr = {
|
||||
...args,
|
||||
title,
|
||||
key,
|
||||
fixed,
|
||||
isLeftFixedActivated,
|
||||
isRightFixedActivated,
|
||||
}
|
||||
|
||||
return {
|
||||
...attr,
|
||||
suffix: () => (
|
||||
<NSpace wrapItem={false} style="padding-left: 24px;">
|
||||
<RowIconRender
|
||||
icon="row_head"
|
||||
title="固定在列首"
|
||||
customClassName={
|
||||
isLeftFixedActivated ? 'r-table__c-fixed--active' : ''
|
||||
}
|
||||
onClick={fixedClick.bind(this, 'left', attr, idx)}
|
||||
/>
|
||||
<RowIconRender
|
||||
icon="row_end"
|
||||
title="固定在列尾"
|
||||
customClassName={
|
||||
isRightFixedActivated ? 'r-table__c-fixed--active' : ''
|
||||
}
|
||||
onClick={fixedClick.bind(this, 'right', attr, idx)}
|
||||
/>
|
||||
</NSpace>
|
||||
),
|
||||
}
|
||||
})
|
||||
},
|
||||
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
||||
set: () => {},
|
||||
})
|
||||
|
||||
const event = (options: C[]) => {
|
||||
const { onUpdateColumn } = props
|
||||
|
||||
if (onUpdateColumn) {
|
||||
call(onUpdateColumn, options)
|
||||
}
|
||||
}
|
||||
|
||||
const fixedClick: FixedClick = (type, option, index) => {
|
||||
const key = `${type}FixedActivated`
|
||||
|
||||
if (key === 'leftFixedActivated') {
|
||||
option['rightFixedActivated'] = false
|
||||
} else if (key === 'rightFixedActivated') {
|
||||
option['leftFixedActivated'] = false
|
||||
}
|
||||
|
||||
option[key] = !option[key]
|
||||
option[key] ? (option['fixed'] = type) : (option['fixed'] = void 0)
|
||||
treeDataSource.value[index] = option
|
||||
|
||||
event(treeDataSource.value)
|
||||
}
|
||||
|
||||
const treeDrop = ({ node, dragNode, dropPosition }: TreeDropInfo) => {
|
||||
const [dragNodeSiblings, dragNodeIndex] = findSiblingsAndIndex(
|
||||
dragNode,
|
||||
treeDataSource.value,
|
||||
)
|
||||
|
||||
if (dragNodeSiblings === null || dragNodeIndex === null) {
|
||||
return
|
||||
}
|
||||
|
||||
dragNodeSiblings.splice(dragNodeIndex, 1)
|
||||
|
||||
const [nodeSiblings, nodeIndex] = findSiblingsAndIndex(
|
||||
node,
|
||||
treeDataSource.value,
|
||||
)
|
||||
|
||||
if (nodeSiblings === null || nodeIndex === null) {
|
||||
return
|
||||
}
|
||||
|
||||
dropPosition === 'before'
|
||||
? nodeSiblings.splice(nodeIndex, 0, dragNode)
|
||||
: nodeSiblings.splice(nodeIndex + 1, 0, dragNode)
|
||||
|
||||
event(nodeSiblings as C[])
|
||||
}
|
||||
|
||||
return {
|
||||
treeDataSource,
|
||||
treeDrop,
|
||||
}
|
||||
},
|
||||
render() {
|
||||
return (
|
||||
<NPopover displayDirective="show" trigger="click">
|
||||
{{
|
||||
trigger: () => (
|
||||
<RIcon
|
||||
name="setting"
|
||||
size={config.tableIconSize}
|
||||
cursor="pointer"
|
||||
customClassName="r-table__setting"
|
||||
/>
|
||||
),
|
||||
default: () => (
|
||||
<NTree
|
||||
class="r-table__c-tree"
|
||||
data={this.treeDataSource as TreeOption[]}
|
||||
blockLine
|
||||
draggable
|
||||
labelField="title"
|
||||
renderSwitcherIcon={renderSwitcherIcon.bind(this)}
|
||||
onDrop={this.treeDrop.bind(this)}
|
||||
/>
|
||||
),
|
||||
}}
|
||||
</NPopover>
|
||||
)
|
||||
},
|
||||
})
|
||||
66
src/components/RTable/src/components/Print.tsx
Normal file
66
src/components/RTable/src/components/Print.tsx
Normal file
@ -0,0 +1,66 @@
|
||||
/**
|
||||
*
|
||||
* @author Ray <https://github.com/XiaoDaiGua-Ray>
|
||||
*
|
||||
* @date 2023-10-05
|
||||
*
|
||||
* @workspace ray-template
|
||||
*
|
||||
* @remark 今天也是元气满满撸代码的一天
|
||||
*/
|
||||
|
||||
import { NPopover } from 'naive-ui'
|
||||
import RIcon from '@/components/RIcon/index'
|
||||
|
||||
import config from '../config'
|
||||
import props from '../props'
|
||||
import print from 'print-js'
|
||||
|
||||
import type { TableProvider } from '../type'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'PrintTable',
|
||||
props,
|
||||
setup(props) {
|
||||
const { uuidTable } = inject<TableProvider>(
|
||||
'tableProvider',
|
||||
{} as TableProvider,
|
||||
)
|
||||
|
||||
const printTableClick = () => {
|
||||
const { printTableOptions } = props
|
||||
const { type = 'html', printOptions = {} } = printTableOptions ?? {}
|
||||
|
||||
const options = Object.assign(printOptions, {
|
||||
printable: uuidTable,
|
||||
type: type,
|
||||
documentTitle: printOptions.documentTitle
|
||||
? printOptions.documentTitle
|
||||
: '表格',
|
||||
})
|
||||
|
||||
print(options)
|
||||
}
|
||||
|
||||
return {
|
||||
printTableClick,
|
||||
}
|
||||
},
|
||||
render() {
|
||||
return (
|
||||
<NPopover>
|
||||
{{
|
||||
trigger: () => (
|
||||
<RIcon
|
||||
name="print"
|
||||
size={config.tableIconSize}
|
||||
cursor="pointer"
|
||||
onClick={this.printTableClick.bind(this)}
|
||||
/>
|
||||
),
|
||||
default: () => '打印表格',
|
||||
}}
|
||||
</NPopover>
|
||||
)
|
||||
},
|
||||
})
|
||||
64
src/components/RTable/src/components/Screenfull.tsx
Normal file
64
src/components/RTable/src/components/Screenfull.tsx
Normal file
@ -0,0 +1,64 @@
|
||||
/**
|
||||
*
|
||||
* @author Ray <https://github.com/XiaoDaiGua-Ray>
|
||||
*
|
||||
* @date 2023-10-04
|
||||
*
|
||||
* @workspace ray-template
|
||||
*
|
||||
* @remark 今天也是元气满满撸代码的一天
|
||||
*/
|
||||
|
||||
import { NPopover } from 'naive-ui'
|
||||
import RIcon from '@/components/RIcon/index'
|
||||
|
||||
import screenfull from 'screenfull'
|
||||
import config from '../config'
|
||||
|
||||
import type { TableProvider } from '../type'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'TableScreenfull',
|
||||
setup() {
|
||||
const { uuidWrapper } = inject<TableProvider>(
|
||||
'tableProvider',
|
||||
{} as TableProvider,
|
||||
)
|
||||
const currentTableIsFullscreen = ref(screenfull.isFullscreen) // 缓存当前是否处于全屏状态
|
||||
|
||||
const fullscreenTableClick = () => {
|
||||
const el = document.getElementById(uuidWrapper)
|
||||
|
||||
currentTableIsFullscreen.value = !currentTableIsFullscreen.value
|
||||
|
||||
if (el && screenfull.isEnabled && currentTableIsFullscreen.value) {
|
||||
screenfull.request(el)
|
||||
} else {
|
||||
screenfull.exit()
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
fullscreenTableClick,
|
||||
currentTableIsFullscreen,
|
||||
}
|
||||
},
|
||||
render() {
|
||||
return (
|
||||
<NPopover>
|
||||
{{
|
||||
trigger: () => (
|
||||
<RIcon
|
||||
name="fullscreen"
|
||||
size={config.tableIconSize}
|
||||
cursor="pointer"
|
||||
onClick={this.fullscreenTableClick.bind(this)}
|
||||
/>
|
||||
),
|
||||
default: () =>
|
||||
this.currentTableIsFullscreen ? '取消全屏' : '全屏表格',
|
||||
}}
|
||||
</NPopover>
|
||||
)
|
||||
},
|
||||
})
|
||||
89
src/components/RTable/src/components/Size.tsx
Normal file
89
src/components/RTable/src/components/Size.tsx
Normal file
@ -0,0 +1,89 @@
|
||||
/**
|
||||
*
|
||||
* @author Ray <https://github.com/XiaoDaiGua-Ray>
|
||||
*
|
||||
* @date 2023-10-04
|
||||
*
|
||||
* @workspace ray-template
|
||||
*
|
||||
* @remark 今天也是元气满满撸代码的一天
|
||||
*/
|
||||
|
||||
import { NPopover, NCard, NPopselect } from 'naive-ui'
|
||||
import RIcon from '@/components/RIcon/index'
|
||||
|
||||
import { call } from '@/utils/vue/index'
|
||||
import props from '../props'
|
||||
import config from '../config'
|
||||
|
||||
import type { ComponentSize } from '@/types/modules/component'
|
||||
import type { MaybeArray } from '@/types/modules/utils'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'TableSizeSelect',
|
||||
props: {
|
||||
onChangeSize: {
|
||||
type: [Function, Array] as PropType<
|
||||
MaybeArray<(size: ComponentSize) => void>
|
||||
>,
|
||||
default: null,
|
||||
},
|
||||
...props,
|
||||
},
|
||||
setup(props) {
|
||||
const popoverShow = ref(false)
|
||||
const size = ref(props.size)
|
||||
const sizeOptions = [
|
||||
{
|
||||
label: '默认',
|
||||
value: 'medium',
|
||||
},
|
||||
{
|
||||
label: '紧凑',
|
||||
value: 'small',
|
||||
},
|
||||
{
|
||||
label: '宽松',
|
||||
value: 'large',
|
||||
},
|
||||
]
|
||||
|
||||
const updatePopselectValue = (value: string | number) => {
|
||||
const { onChangeSize } = props
|
||||
|
||||
if (onChangeSize) {
|
||||
call(onChangeSize, value as ComponentSize)
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
size,
|
||||
sizeOptions,
|
||||
popoverShow,
|
||||
updatePopselectValue,
|
||||
}
|
||||
},
|
||||
render() {
|
||||
return (
|
||||
<NPopselect
|
||||
v-model:value={this.size}
|
||||
options={this.sizeOptions}
|
||||
trigger="click"
|
||||
onUpdateValue={this.updatePopselectValue.bind(this)}
|
||||
>
|
||||
<NPopover>
|
||||
{{
|
||||
trigger: () => (
|
||||
<RIcon
|
||||
name="adjustment"
|
||||
size={config.tableIconSize}
|
||||
cursor="pointer"
|
||||
/>
|
||||
),
|
||||
default: () => '密度',
|
||||
}}
|
||||
</NPopover>
|
||||
</NPopselect>
|
||||
)
|
||||
},
|
||||
})
|
||||
@ -1,132 +0,0 @@
|
||||
/**
|
||||
*
|
||||
* @author Ray <https://github.com/XiaoDaiGua-Ray>
|
||||
*
|
||||
* @date 2022-12-22
|
||||
*
|
||||
* @workspace ray-template
|
||||
*
|
||||
* @remark 今天也是元气满满撸代码的一天
|
||||
*/
|
||||
|
||||
import { NPopconfirm, NSpace, NButton, NPopover } from 'naive-ui'
|
||||
import RayIcon from '@/components/RIcon/index'
|
||||
|
||||
export type EmitterType = 'positive' | 'negative'
|
||||
|
||||
const TableAction = defineComponent({
|
||||
name: 'TableAction',
|
||||
props: {
|
||||
tooltip: {
|
||||
/**
|
||||
*
|
||||
* 提示内容
|
||||
*/
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
negativeText: {
|
||||
/**
|
||||
*
|
||||
* 取消提示按钮文本内容
|
||||
*
|
||||
* 默认 `取消`
|
||||
*/
|
||||
type: String,
|
||||
default: '取消',
|
||||
},
|
||||
positiveText: {
|
||||
/**
|
||||
*
|
||||
* 确认提示按钮文本内容
|
||||
*
|
||||
* 默认 `确认`
|
||||
*/
|
||||
type: String,
|
||||
default: '确认',
|
||||
},
|
||||
icon: {
|
||||
/**
|
||||
*
|
||||
* 图标
|
||||
*
|
||||
* 必须为 `icons` 中已包含的
|
||||
*/
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
iconSize: {
|
||||
/**
|
||||
*
|
||||
* 图标尺寸
|
||||
*
|
||||
* 默认为 `18px`
|
||||
*/
|
||||
type: Number,
|
||||
default: 18,
|
||||
},
|
||||
popoverContent: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
emits: ['positive', 'negative'],
|
||||
setup(_, { emit }) {
|
||||
const showPopoconfirm = ref(false)
|
||||
|
||||
const handleEmit = (type: EmitterType) => {
|
||||
type === 'positive' ? emit('positive') : emit('negative')
|
||||
|
||||
showPopoconfirm.value = false
|
||||
}
|
||||
|
||||
return {
|
||||
handleEmit,
|
||||
showPopoconfirm,
|
||||
}
|
||||
},
|
||||
render() {
|
||||
return (
|
||||
<NPopover>
|
||||
{{
|
||||
trigger: () => (
|
||||
<NPopconfirm v-model:show={this.showPopoconfirm} showArrow={true}>
|
||||
{{
|
||||
trigger: () => (
|
||||
<RayIcon
|
||||
name={this.icon}
|
||||
size={this.iconSize}
|
||||
customClassName="ray-table-icon"
|
||||
/>
|
||||
),
|
||||
default: () => this.tooltip,
|
||||
action: () => (
|
||||
<NSpace>
|
||||
<NButton
|
||||
size="small"
|
||||
ghost
|
||||
onClick={this.handleEmit.bind(this, 'negative')}
|
||||
>
|
||||
{this.negativeText}
|
||||
</NButton>
|
||||
<NButton
|
||||
size="small"
|
||||
ghost
|
||||
type="info"
|
||||
onClick={this.handleEmit.bind(this, 'positive')}
|
||||
>
|
||||
{this.positiveText}
|
||||
</NButton>
|
||||
</NSpace>
|
||||
),
|
||||
}}
|
||||
</NPopconfirm>
|
||||
),
|
||||
default: () => this.popoverContent,
|
||||
}}
|
||||
</NPopover>
|
||||
)
|
||||
},
|
||||
})
|
||||
|
||||
export default TableAction
|
||||
@ -1,67 +0,0 @@
|
||||
/**
|
||||
*
|
||||
* @author Ray <https://github.com/XiaoDaiGua-Ray>
|
||||
*
|
||||
* @date 2023-03-11
|
||||
*
|
||||
* @workspace ray-template
|
||||
*
|
||||
* @remark 今天也是元气满满撸代码的一天
|
||||
*/
|
||||
|
||||
import './index.scss'
|
||||
|
||||
import { NPopover } from 'naive-ui'
|
||||
import RayIcon from '@/components/RIcon/index'
|
||||
|
||||
import screenfull from 'screenfull'
|
||||
|
||||
import type { TableSettingProvider } from '@/components/RTable/src/type'
|
||||
|
||||
const TableScreenfull = defineComponent({
|
||||
name: 'TableScreenfull',
|
||||
setup() {
|
||||
const tableSettingProvider = inject(
|
||||
'tableSettingProvider',
|
||||
{} as TableSettingProvider,
|
||||
)
|
||||
|
||||
const rayTableUUID = computed(() => tableSettingProvider.rayTableUUID)
|
||||
let currentTableIsFullscreen = screenfull.isFullscreen // 缓存当前是否处于全屏状态
|
||||
|
||||
const handleScreenfull = () => {
|
||||
const el = document.getElementById(rayTableUUID.value)
|
||||
|
||||
currentTableIsFullscreen = !currentTableIsFullscreen
|
||||
|
||||
if (el && screenfull.isEnabled && currentTableIsFullscreen) {
|
||||
screenfull.request(el)
|
||||
} else {
|
||||
screenfull.exit()
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
handleScreenfull,
|
||||
}
|
||||
},
|
||||
render() {
|
||||
return (
|
||||
<NPopover>
|
||||
{{
|
||||
trigger: () => (
|
||||
<RayIcon
|
||||
name="fullscreen"
|
||||
size="18"
|
||||
customClassName="ray-table-icon tay-table-icon__screenfull"
|
||||
onClick={this.handleScreenfull.bind(this)}
|
||||
/>
|
||||
),
|
||||
default: () => '全屏表格',
|
||||
}}
|
||||
</NPopover>
|
||||
)
|
||||
},
|
||||
})
|
||||
|
||||
export default TableScreenfull
|
||||
@ -1,19 +0,0 @@
|
||||
import type { ActionOptions } from '@/components/RTable/src/type'
|
||||
|
||||
export const setupSettingOptions = (options: ActionOptions[]) => {
|
||||
const arr = options.map((curr) => {
|
||||
if (curr.fixed) {
|
||||
curr.fixed === 'right'
|
||||
? (curr.rightFixedActivated = true)
|
||||
: (curr.leftFixedActivated = true)
|
||||
}
|
||||
|
||||
if (curr.resizable) {
|
||||
curr.resizeColumnActivated = true
|
||||
}
|
||||
|
||||
return curr
|
||||
})
|
||||
|
||||
return arr
|
||||
}
|
||||
@ -1,70 +0,0 @@
|
||||
.ray-table__setting:hover {
|
||||
transform: rotate(180deg);
|
||||
transition: transform 0.3s var(--r-bezier);
|
||||
}
|
||||
|
||||
.table-setting__card {
|
||||
padding: 12px 8px;
|
||||
|
||||
& .n-card__content {
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ray-table__setting-option--draggable {
|
||||
display: grid;
|
||||
grid-row-gap: 10px;
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
|
||||
& .draggable-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
padding: 8px 10px;
|
||||
border-radius: 2px;
|
||||
transition: background-color 0.3s var(--r-bezier);
|
||||
|
||||
&.draggable-item--dark {
|
||||
&:hover {
|
||||
background-color: var(--ray-theme-primary-fade-color);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--ray-theme-primary-fade-color);
|
||||
|
||||
& .draggable-item__d--icon {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
& .draggable-item__d--icon {
|
||||
transition: opacity 0.3s var(--r-bezier), transform 0.3s var(--r-bezier);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
& .draggable-item__d--icon,
|
||||
& .draggable-item__icon {
|
||||
padding: 5px;
|
||||
outline: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
& .draggable-item__icon {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
& .draggable-item__icon {
|
||||
&.draggable-item__icon--actived {
|
||||
color: var(--ray-theme-primary-color);
|
||||
}
|
||||
}
|
||||
|
||||
& .n-ellipsis {
|
||||
max-width: 80px;
|
||||
min-width: 80px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,233 +0,0 @@
|
||||
/**
|
||||
*
|
||||
* @author Ray <https://github.com/XiaoDaiGua-Ray>
|
||||
*
|
||||
* @date 2022-12-08
|
||||
*
|
||||
* @workspace ray-template
|
||||
*
|
||||
* @remark 今天也是元气满满撸代码的一天
|
||||
*/
|
||||
|
||||
/**
|
||||
*
|
||||
* 依赖 table columns 属性操作
|
||||
*
|
||||
* 支持拖拽修改列顺序、动态修改列宽度、固定(锁列)
|
||||
*/
|
||||
|
||||
import './index.scss'
|
||||
|
||||
import { NCard, NPopover, NEllipsis } from 'naive-ui'
|
||||
import RayIcon from '@/components/RIcon/index'
|
||||
import VueDraggable from 'vuedraggable'
|
||||
|
||||
import { setupSettingOptions } from './hook'
|
||||
import { useSetting } from '@/store'
|
||||
|
||||
import type {
|
||||
TableSettingProvider,
|
||||
ActionOptions,
|
||||
FixedType,
|
||||
TableSettingFixedPopoverIcon,
|
||||
} from '@/components/RTable/src/type'
|
||||
|
||||
const TableSetting = defineComponent({
|
||||
name: 'TableSetting',
|
||||
emits: ['columnsUpdate'],
|
||||
setup(_, { emit }) {
|
||||
const tableSettingProvider = inject(
|
||||
'tableSettingProvider',
|
||||
{} as TableSettingProvider,
|
||||
)
|
||||
const settingStore = useSetting()
|
||||
|
||||
const settingOptions = ref(
|
||||
setupSettingOptions(tableSettingProvider.modelColumns.value),
|
||||
) // 表格表头
|
||||
const disableDraggable = ref(true) // 拖拽开关(暂时弃用)
|
||||
const { themeValue } = storeToRefs(settingStore)
|
||||
|
||||
/** 拖拽结束后 */
|
||||
const handleDraggableEnd = () => {
|
||||
emit('columnsUpdate', settingOptions.value)
|
||||
}
|
||||
|
||||
const FixedPopoverIcon = (options: TableSettingFixedPopoverIcon) => {
|
||||
const { element, name, tooltip, fn, index, fixed, key } = options
|
||||
|
||||
return (
|
||||
<NPopover>
|
||||
{{
|
||||
trigger: () => (
|
||||
<RayIcon
|
||||
customClassName={`draggable-item__icon ray-table-icon ${
|
||||
element[key] ? 'draggable-item__icon--actived' : ''
|
||||
}`}
|
||||
name={name}
|
||||
size="18"
|
||||
onClick={fn.bind(this, fixed, index)}
|
||||
/>
|
||||
),
|
||||
default: () => tooltip,
|
||||
}}
|
||||
</NPopover>
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param type 列所需固定方向
|
||||
* @param idx 当前操作栏索引位置
|
||||
*
|
||||
* @remark 操作栏锁定列, 不能同时存在两种状态(互斥)
|
||||
*/
|
||||
const handleFixedClick = (type: FixedType, idx: number) => {
|
||||
const key = `${type}FixedActivated`
|
||||
const value = settingOptions.value[idx]
|
||||
|
||||
if (key === 'leftFixedActivated') {
|
||||
value['rightFixedActivated'] = false
|
||||
} else if (key === 'rightFixedActivated') {
|
||||
value['leftFixedActivated'] = false
|
||||
}
|
||||
|
||||
value[key] = !value[key]
|
||||
|
||||
if (value[key]) {
|
||||
value.fixed = type
|
||||
} else {
|
||||
value.fixed = undefined
|
||||
}
|
||||
|
||||
settingOptions.value[idx] = value
|
||||
|
||||
emit('columnsUpdate', settingOptions.value)
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param idx 索引
|
||||
*
|
||||
* @remark 动态设置列宽度, 如果表格并未出现横向滚动条则不会启用拖拽修改列按钮
|
||||
*/
|
||||
const handleResizeColumnClick = (idx: number) => {
|
||||
const value = settingOptions.value[idx]
|
||||
|
||||
value['resizeColumnActivated'] = !value['resizeColumnActivated']
|
||||
value['resizable'] = value['resizeColumnActivated']
|
||||
|
||||
settingOptions.value[idx] = value
|
||||
|
||||
emit('columnsUpdate', settingOptions.value)
|
||||
}
|
||||
|
||||
return {
|
||||
settingOptions,
|
||||
handleDraggableEnd,
|
||||
handleFixedClick,
|
||||
disableDraggable,
|
||||
FixedPopoverIcon,
|
||||
handleResizeColumnClick,
|
||||
themeValue,
|
||||
}
|
||||
},
|
||||
render() {
|
||||
return (
|
||||
<NPopover trigger="click" placement="bottom" showArrow={false} raw>
|
||||
{{
|
||||
trigger: () => (
|
||||
<RayIcon
|
||||
customClassName="ray-table__setting"
|
||||
name="setting"
|
||||
size="18"
|
||||
/>
|
||||
),
|
||||
default: () => (
|
||||
<NCard bordered={false} class="table-setting__card">
|
||||
{{
|
||||
default: () => (
|
||||
<VueDraggable
|
||||
class={['ray-table__setting-option--draggable']}
|
||||
v-model={this.settingOptions}
|
||||
itemKey="key"
|
||||
{...{
|
||||
disabled: !this.disableDraggable,
|
||||
onEnd: this.handleDraggableEnd.bind(this),
|
||||
}}
|
||||
>
|
||||
{{
|
||||
item: ({
|
||||
element,
|
||||
index,
|
||||
}: {
|
||||
element: ActionOptions
|
||||
index: number
|
||||
}) => (
|
||||
<div
|
||||
class={[
|
||||
'draggable-item',
|
||||
this.themeValue ? 'draggable-item--dark' : '',
|
||||
]}
|
||||
>
|
||||
<RayIcon
|
||||
customClassName={`draggable-item__d--icon`}
|
||||
name="draggable"
|
||||
size="18"
|
||||
/>
|
||||
<NEllipsis>
|
||||
<span>{element.title}</span>
|
||||
</NEllipsis>
|
||||
{this.FixedPopoverIcon({
|
||||
element: element,
|
||||
name: 'left_arrow',
|
||||
tooltip: '左固定',
|
||||
fn: this.handleFixedClick,
|
||||
index,
|
||||
fixed: 'left',
|
||||
key: 'leftFixedActivated',
|
||||
})}
|
||||
<NPopover>
|
||||
{{
|
||||
trigger: () => (
|
||||
<RayIcon
|
||||
customClassName={`draggable-item__icon ${
|
||||
element['resizeColumnActivated']
|
||||
? 'draggable-item__icon--actived'
|
||||
: ''
|
||||
}`}
|
||||
name="resize_h"
|
||||
size="18"
|
||||
onClick={this.handleResizeColumnClick.bind(
|
||||
this,
|
||||
index,
|
||||
)}
|
||||
/>
|
||||
),
|
||||
default: () => '修改列宽',
|
||||
}}
|
||||
</NPopover>
|
||||
{this.FixedPopoverIcon({
|
||||
element: element,
|
||||
name: 'right_arrow',
|
||||
tooltip: '右固定',
|
||||
fn: this.handleFixedClick,
|
||||
index,
|
||||
fixed: 'right',
|
||||
key: 'rightFixedActivated',
|
||||
})}
|
||||
</div>
|
||||
),
|
||||
}}
|
||||
</VueDraggable>
|
||||
),
|
||||
}}
|
||||
</NCard>
|
||||
),
|
||||
}}
|
||||
</NPopover>
|
||||
)
|
||||
},
|
||||
})
|
||||
|
||||
export default TableSetting
|
||||
@ -1,47 +0,0 @@
|
||||
.ray-table__table-size {
|
||||
padding: 0 !important;
|
||||
|
||||
& .n-card__content {
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
|
||||
& .table-size__dropdown {
|
||||
box-sizing: border-box;
|
||||
padding: 4px 0;
|
||||
background-color: transparent;
|
||||
|
||||
& .table-size__dropdown-wrapper {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
& .dropdown-item {
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
padding: 0 16px;
|
||||
transition: background-color 0.3s var(--r-bezier), color 0.3s var(--r-bezier);
|
||||
|
||||
&.dropdown-item--active,
|
||||
&:hover {
|
||||
background-color: var(--ray-theme-primary-fade-color);
|
||||
color: var(--ray-theme-primary-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ray-table__table-size--dark {
|
||||
@include useAppTheme("dark") {
|
||||
& .table-size__dropdown-wrapper {
|
||||
& .dropdown-item:hover {
|
||||
background-color: var(--ray-theme-primary-fade-color);
|
||||
color: var(--ray-theme-primary-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,139 +0,0 @@
|
||||
/**
|
||||
*
|
||||
* @author Ray <https://github.com/XiaoDaiGua-Ray>
|
||||
*
|
||||
* @date 2023-03-10
|
||||
*
|
||||
* @workspace ray-template
|
||||
*
|
||||
* @remark 今天也是元气满满撸代码的一天
|
||||
*/
|
||||
|
||||
import './index.scss'
|
||||
|
||||
import { NPopover, NCard } from 'naive-ui'
|
||||
import RayIcon from '@/components/RIcon/index'
|
||||
|
||||
import { call } from '@/utils/vue/index'
|
||||
|
||||
import type { TableSettingProvider } from '@/components/RTable/src/type'
|
||||
import type { ComponentSize } from '@/types/modules/component'
|
||||
import type { MaybeArray } from '@/types/modules/utils'
|
||||
|
||||
const TableSize = defineComponent({
|
||||
name: 'TableSize',
|
||||
props: {
|
||||
onChangeSize: {
|
||||
type: [Function, Array] as PropType<
|
||||
MaybeArray<(size: ComponentSize) => void>
|
||||
>,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
emits: ['changeSize'],
|
||||
setup(props) {
|
||||
const tableSettingProvider = inject(
|
||||
'tableSettingProvider',
|
||||
{} as TableSettingProvider,
|
||||
)
|
||||
|
||||
const popoverShow = ref(false)
|
||||
const size = computed({
|
||||
get: () => tableSettingProvider.size,
|
||||
set: (val) => {
|
||||
const { onChangeSize } = props
|
||||
|
||||
if (onChangeSize) {
|
||||
call(onChangeSize, val)
|
||||
}
|
||||
},
|
||||
})
|
||||
const sizeOptions = ref([
|
||||
{
|
||||
label: '默认',
|
||||
key: 'medium',
|
||||
},
|
||||
{
|
||||
label: '紧凑',
|
||||
key: 'small',
|
||||
},
|
||||
{
|
||||
label: '宽松',
|
||||
key: 'large',
|
||||
},
|
||||
])
|
||||
|
||||
const handleDropdownClick = (key: ComponentSize) => {
|
||||
sizeOptions.value.forEach((curr) => {
|
||||
if (curr.key === key) {
|
||||
size.value = key
|
||||
|
||||
popoverShow.value = false
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return {
|
||||
size,
|
||||
sizeOptions,
|
||||
handleDropdownClick,
|
||||
popoverShow,
|
||||
}
|
||||
},
|
||||
render() {
|
||||
return (
|
||||
<NPopover
|
||||
v-model:show={this.popoverShow}
|
||||
trigger="click"
|
||||
placement="bottom"
|
||||
showArrow={false}
|
||||
raw
|
||||
>
|
||||
{{
|
||||
trigger: () => (
|
||||
<NPopover>
|
||||
{{
|
||||
trigger: () => (
|
||||
<RayIcon
|
||||
name="adjustment"
|
||||
size="18"
|
||||
customClassName="ray-table-icon"
|
||||
/>
|
||||
),
|
||||
default: () => '表格密度',
|
||||
}}
|
||||
</NPopover>
|
||||
),
|
||||
default: () => (
|
||||
<NCard
|
||||
bordered={false}
|
||||
class="ray-table__table-size ray-table__table-size--dark ray-table__table-size--light"
|
||||
>
|
||||
<div class="table-size__dropdown">
|
||||
<div class="table-size__dropdown-wrapper">
|
||||
{this.sizeOptions.map((curr) => (
|
||||
<div
|
||||
class={[
|
||||
'dropdown-item',
|
||||
curr.key === this.size ? 'dropdown-item--active' : '',
|
||||
]}
|
||||
key={curr.key}
|
||||
onClick={this.handleDropdownClick.bind(
|
||||
this,
|
||||
curr.key as ComponentSize,
|
||||
)}
|
||||
>
|
||||
<div class="drop-item__label">{curr.label}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</NCard>
|
||||
),
|
||||
}}
|
||||
</NPopover>
|
||||
)
|
||||
},
|
||||
})
|
||||
|
||||
export default TableSize
|
||||
14
src/components/RTable/src/config.ts
Normal file
14
src/components/RTable/src/config.ts
Normal file
@ -0,0 +1,14 @@
|
||||
/**
|
||||
*
|
||||
* @author Ray <https://github.com/XiaoDaiGua-Ray>
|
||||
*
|
||||
* @date 2023-10-04
|
||||
*
|
||||
* @workspace ray-template
|
||||
*
|
||||
* @remark 今天也是元气满满撸代码的一天
|
||||
*/
|
||||
|
||||
export default {
|
||||
tableIconSize: '18',
|
||||
}
|
||||
@ -1,28 +1,14 @@
|
||||
.ray-table {
|
||||
& .ray-table-icon {
|
||||
.r-table__c-tree.n-tree .n-tree-node-switcher.n-tree-node-switcher--hide {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.r-table__c-tree.n-tree .ray-icon {
|
||||
&.r-table__c-fixed--active {
|
||||
color: var(--ray-theme-primary-color);
|
||||
}
|
||||
}
|
||||
|
||||
.r-table__setting:hover {
|
||||
transform: rotate(180deg);
|
||||
transition: transform 0.3s var(--r-bezier);
|
||||
|
||||
&:hover {
|
||||
@include scaleAnimate();
|
||||
animation: elementScale 0.3s linear;
|
||||
animation-direction: alternate;
|
||||
}
|
||||
}
|
||||
|
||||
& .ray-table__setting,
|
||||
& .ray-table-icon {
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
& .n-card-header .n-card-header__main {
|
||||
padding-right: var(--ray-table-header-space);
|
||||
}
|
||||
|
||||
& .ray-table-header-extra__space {
|
||||
display: flex;
|
||||
gap: 0 12px;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,340 +0,0 @@
|
||||
/**
|
||||
*
|
||||
* @author Ray <https://github.com/XiaoDaiGua-Ray>
|
||||
*
|
||||
* @date 2022-12-08
|
||||
*
|
||||
* @workspace ray-template
|
||||
*
|
||||
* @remark 今天也是元气满满撸代码的一天
|
||||
*/
|
||||
|
||||
/**
|
||||
*
|
||||
* <https://www.naiveui.com/zh-CN/dark/components/data-table>
|
||||
*
|
||||
* 完全继承 `NDataTable`, 该组件继承 `NDataTable Props` 属性和方法
|
||||
*
|
||||
* 实现: 抬头, 操作栏, 右键菜单功能拓展, 输出 `excel`, 表格尺寸调整
|
||||
*
|
||||
* 右键菜单功能, 需要同时启用 `showMenu` 与配置菜单选项才能正常使用
|
||||
*
|
||||
* 可以通过设置 `action` 为 `false` 隐藏操作栏
|
||||
*
|
||||
* 具体拓展 `props` 方法, 可以查看 `props.ts` 中相关注释与代码
|
||||
*
|
||||
* 基于 `xlsx.js` 实现输出 `excel`
|
||||
*/
|
||||
|
||||
/**
|
||||
*
|
||||
* 为什么有些拓展功能是写在该组件内, 有些则是完全抽离出去呢...
|
||||
* 好问题, 因为我一开始没想到而且我又想偷懒
|
||||
*
|
||||
* 凑合凑合看吧, 等我啥时候有空再抽离出去
|
||||
*/
|
||||
|
||||
import './index.scss'
|
||||
|
||||
import { NDataTable, NCard, NDropdown } from 'naive-ui'
|
||||
import TableSetting from './components/TableSetting/index'
|
||||
import TableAction from './components/TableAction/index'
|
||||
import TableSize from './components/TableSize/index'
|
||||
import TableScreenfull from './components/TableScreenfull/index'
|
||||
|
||||
import props from './props'
|
||||
import print from 'print-js'
|
||||
import { uuid } from '@use-utils/hook'
|
||||
import { exportFileToXLSX } from '@use-utils/xlsx'
|
||||
import { call } from '@/utils/vue/index'
|
||||
|
||||
import type { ActionOptions } from './type'
|
||||
import type { WritableComputedRef } from 'vue'
|
||||
import type { DropdownOption } from 'naive-ui'
|
||||
import type { ExportExcelHeader } from '@use-utils/xlsx'
|
||||
import type { DataTableInst } from 'naive-ui'
|
||||
import type { ComponentSize } from '@/types/modules/component'
|
||||
|
||||
const RayTable = defineComponent({
|
||||
name: 'RayTable',
|
||||
props: props,
|
||||
setup(props, { expose }) {
|
||||
const rayTableInstance = ref<DataTableInst>()
|
||||
|
||||
const tableUUID = uuid(16) // 表格 id, 用于打印表格
|
||||
const rayTableUUID = uuid(16) // RayTable id, 用于全屏表格
|
||||
const modelRightClickMenu = computed(() => props.rightClickOptions)
|
||||
const modelColumns = computed({
|
||||
get: () => props.columns,
|
||||
set: (arr) => {
|
||||
const { onUpdateColumns, 'onUpdate:columns': _onUpdateColumns } = props
|
||||
|
||||
if (onUpdateColumns) {
|
||||
call(onUpdateColumns, arr)
|
||||
}
|
||||
|
||||
if (_onUpdateColumns) {
|
||||
call(_onUpdateColumns, arr)
|
||||
}
|
||||
},
|
||||
}) as unknown as WritableComputedRef<ActionOptions[]>
|
||||
const menuConfig = reactive({
|
||||
x: 0,
|
||||
y: 0,
|
||||
showMenu: false,
|
||||
})
|
||||
const cssVars = computed(() => {
|
||||
const cssVar = {
|
||||
'--ray-table-header-space': props.tableHeaderSpace,
|
||||
}
|
||||
|
||||
return cssVar
|
||||
})
|
||||
const tableSize = ref(props.size)
|
||||
const tableMethods = ref<Omit<DataTableInst, 'clearFilter'>>()
|
||||
let prevRightClickIndex = -1 // 缓存上次点击索引位置
|
||||
|
||||
/** 注入相关属性 */
|
||||
provide('tableSettingProvider', {
|
||||
modelRightClickMenu,
|
||||
modelColumns,
|
||||
size: tableSize,
|
||||
rayTableUUID,
|
||||
})
|
||||
|
||||
/** 拖拽更新后的表格列 */
|
||||
const handleColumnsUpdate = (arr: ActionOptions[]) => {
|
||||
modelColumns.value = arr
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param key 右键菜单当前选择 `key`
|
||||
* @param option 右键菜单当前 `item`
|
||||
*
|
||||
* @remark (key: string | number, index: number,option: DropdownOption) => void
|
||||
*/
|
||||
const handleRightMenuSelect = (
|
||||
key: string | number,
|
||||
option: DropdownOption,
|
||||
) => {
|
||||
const { onRightMenuClick } = props
|
||||
|
||||
if (onRightMenuClick) {
|
||||
call(onRightMenuClick, key, prevRightClickIndex, option)
|
||||
}
|
||||
|
||||
menuConfig.showMenu = false
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param arr 表格当前行
|
||||
* @param idx 表格当前索引位置
|
||||
* @returns 自定义属性集
|
||||
*
|
||||
* @remark 集成右键菜单属性, 会自动拦截右键方法, 会自动合并自定义行属性
|
||||
*/
|
||||
const handleRowProps = (arr: ActionOptions, idx: number) => {
|
||||
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 {
|
||||
...interceptRowProps,
|
||||
onContextmenu: contextmenu,
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* 导出表格数据为 `excel`
|
||||
*
|
||||
* 基于 `xlsx`
|
||||
*
|
||||
* 按需导入 `xlsx` 减少体积, 不依赖传统 `file save` 插件导出方式
|
||||
*/
|
||||
const handleExportPositive = async () => {
|
||||
const { onExportSuccess, onExportError } = props
|
||||
|
||||
if (props.data.length && props.columns.length) {
|
||||
try {
|
||||
await exportFileToXLSX(
|
||||
props.data,
|
||||
props.columns as ExportExcelHeader[],
|
||||
{
|
||||
filename: props.exportFilename,
|
||||
},
|
||||
)
|
||||
|
||||
onExportSuccess && call(onExportSuccess)
|
||||
} catch (e) {
|
||||
onExportError && call(onExportError)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* 打印输出表格内容
|
||||
*
|
||||
* 默认配置按照 `print-js` 配置
|
||||
*
|
||||
* 会自动合并自定义配置项
|
||||
*
|
||||
* 受到 `print-js` 限制有些样式是无法打印输出的
|
||||
*/
|
||||
const handlePrintPositive = () => {
|
||||
const options = Object.assign({}, props.printOptions, {
|
||||
printable: tableUUID,
|
||||
type: props.printType,
|
||||
documentTitle: props.printOptions.documentTitle
|
||||
? props.printOptions.documentTitle
|
||||
: '表格',
|
||||
})
|
||||
|
||||
print(options)
|
||||
}
|
||||
|
||||
/** 更新后的表格尺寸 */
|
||||
const handleChangeTableSize = (size: ComponentSize) => {
|
||||
tableSize.value = size
|
||||
}
|
||||
|
||||
const registerRayTableMethods = (ins: DataTableInst) => {
|
||||
const {
|
||||
clearFilters,
|
||||
clearSorter,
|
||||
filters,
|
||||
page,
|
||||
scrollTo,
|
||||
sort,
|
||||
filter,
|
||||
} = ins
|
||||
|
||||
tableMethods.value = {
|
||||
clearFilters,
|
||||
clearSorter,
|
||||
filters,
|
||||
page,
|
||||
scrollTo,
|
||||
sort,
|
||||
filter,
|
||||
}
|
||||
}
|
||||
|
||||
expose({
|
||||
tableMethods: computed(() => tableMethods.value),
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
registerRayTableMethods(rayTableInstance.value as DataTableInst)
|
||||
})
|
||||
|
||||
return {
|
||||
tableUUID,
|
||||
rayTableUUID,
|
||||
handleColumnsUpdate,
|
||||
...toRefs(menuConfig),
|
||||
handleRowProps,
|
||||
handleRightMenuSelect,
|
||||
handleExportPositive,
|
||||
handlePrintPositive,
|
||||
cssVars,
|
||||
handleChangeTableSize,
|
||||
tableSize,
|
||||
rayTableInstance,
|
||||
modelRightClickMenu,
|
||||
}
|
||||
},
|
||||
render() {
|
||||
return (
|
||||
<NCard
|
||||
class="ray-table"
|
||||
bordered={this.bordered}
|
||||
style={[this.cssVars]}
|
||||
{...{ id: this.rayTableUUID }}
|
||||
>
|
||||
{{
|
||||
default: () => (
|
||||
<>
|
||||
<NDataTable
|
||||
ref="rayTableInstance"
|
||||
{...{ id: this.tableUUID }}
|
||||
{...this.$props}
|
||||
rowProps={this.handleRowProps.bind(this)}
|
||||
size={this.tableSize}
|
||||
>
|
||||
{{
|
||||
...this.$slots,
|
||||
}}
|
||||
</NDataTable>
|
||||
<NDropdown
|
||||
show={this.showMenu}
|
||||
placement="bottom-start"
|
||||
trigger="manual"
|
||||
x={this.x}
|
||||
y={this.y}
|
||||
options={this.modelRightClickMenu}
|
||||
onClickoutside={() => (this.showMenu = false)}
|
||||
onSelect={this.handleRightMenuSelect.bind(this)}
|
||||
/>
|
||||
</>
|
||||
),
|
||||
header: () => this.title || <div style="display: none;"></div>,
|
||||
'header-extra': () =>
|
||||
this.action ? (
|
||||
<div class="ray-table-header-extra__space">
|
||||
{/* 打印输出操作 */}
|
||||
<TableAction
|
||||
icon={this.printIcon}
|
||||
tooltip={this.printTooltip}
|
||||
popoverContent="打印表格"
|
||||
positiveText={this.printPositiveText}
|
||||
negativeText={this.printNegativeText}
|
||||
onPositive={this.handlePrintPositive.bind(this)}
|
||||
/>
|
||||
{/* 输出为Excel表格 */}
|
||||
<TableAction
|
||||
icon={this.exportExcelIcon}
|
||||
tooltip={this.exportTooltip}
|
||||
popoverContent="导出表格"
|
||||
positiveText={this.exportPositiveText}
|
||||
negativeText={this.exportNegativeText}
|
||||
onPositive={this.handleExportPositive.bind(this)}
|
||||
/>
|
||||
{/* 表格尺寸调整 */}
|
||||
<TableSize
|
||||
onChangeSize={this.handleChangeTableSize.bind(this)}
|
||||
/>
|
||||
{/* 全屏表格 */}
|
||||
<TableScreenfull />
|
||||
{/* 表格列操作 */}
|
||||
<TableSetting
|
||||
onColumnsUpdate={this.handleColumnsUpdate.bind(this)}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
''
|
||||
),
|
||||
footer: () => this.$slots.tableFooter?.(),
|
||||
}}
|
||||
</NCard>
|
||||
)
|
||||
},
|
||||
})
|
||||
|
||||
export default RayTable
|
||||
@ -2,7 +2,7 @@
|
||||
*
|
||||
* @author Ray <https://github.com/XiaoDaiGua-Ray>
|
||||
*
|
||||
* @date 2022-12-08
|
||||
* @date 2023-10-04
|
||||
*
|
||||
* @workspace ray-template
|
||||
*
|
||||
@ -12,208 +12,81 @@
|
||||
import { dataTableProps } from 'naive-ui'
|
||||
|
||||
import type { PropType, VNode, VNodeChild } from 'vue'
|
||||
import type { DropdownMixedOption } from './type'
|
||||
import type PrintConfiguration from 'print-js'
|
||||
import type { MaybeArray } from '@/types/modules/utils'
|
||||
import type { DropdownOption, DataTableColumn } from 'naive-ui'
|
||||
import type { DownloadTableOptions, PrintTableOptions } from './type'
|
||||
|
||||
const rayTableProps = {
|
||||
...dataTableProps, // 继承 `data table props`
|
||||
rightClickOptions: {
|
||||
/**
|
||||
*
|
||||
* 表格右键菜单, 基于 `NDropdown` 实现
|
||||
*
|
||||
* 如果菜单内容长度为 `0` 则不会渲染
|
||||
*
|
||||
* 只需要传入对应的菜单配置项, 即可自动开启右键菜单功能
|
||||
*/
|
||||
type: Array as PropType<DropdownMixedOption[]>,
|
||||
default: () => [],
|
||||
},
|
||||
onRightMenuClick: {
|
||||
type: [Function, Array] as PropType<
|
||||
MaybeArray<
|
||||
(key: string | number, index: number, option: DropdownOption) => void
|
||||
>
|
||||
>,
|
||||
default: null,
|
||||
},
|
||||
const props = {
|
||||
...dataTableProps,
|
||||
title: {
|
||||
/**
|
||||
*
|
||||
* 表格标题
|
||||
*
|
||||
* 可以自定义渲染
|
||||
* 支持自定义渲染
|
||||
*/
|
||||
type: [String, Object] as PropType<VNodeChild | string>,
|
||||
type: [String, Number, Object] as PropType<VNode | string | number>,
|
||||
default: null,
|
||||
},
|
||||
action: {
|
||||
/**
|
||||
*
|
||||
* 是否开启操作栏
|
||||
*
|
||||
* 默认开启
|
||||
*/
|
||||
type: Boolean,
|
||||
default: true,
|
||||
toolOptions: {
|
||||
/** 自定义传递工具栏拓展 */
|
||||
type: Array as PropType<(VNode | (() => VNode))[]>,
|
||||
},
|
||||
actionExtra: {
|
||||
contextMenuOptions: {
|
||||
/**
|
||||
*
|
||||
* 自定义拓展操作栏
|
||||
*
|
||||
* 暂时不开放
|
||||
* 右键菜单配置项
|
||||
* 基于 `NDropdown` 实现
|
||||
*/
|
||||
type: Object as PropType<VNode>,
|
||||
default: () => ({}),
|
||||
type: Array as PropType<DropdownOption[]>,
|
||||
},
|
||||
exportTooltip: {
|
||||
disabledContextMenu: {
|
||||
/**
|
||||
*
|
||||
* 导出表格提示
|
||||
*/
|
||||
type: String,
|
||||
default: '是否导出为Excel表格?',
|
||||
},
|
||||
exportType: {
|
||||
/**
|
||||
*
|
||||
* 导出类型
|
||||
*
|
||||
* 默认为 `xlsx`
|
||||
*
|
||||
* 暂时只支持导出为 `xlsx`
|
||||
*/
|
||||
type: String,
|
||||
default: 'xlsx',
|
||||
},
|
||||
exportPositiveText: {
|
||||
/**
|
||||
*
|
||||
* 导出确认按钮文字
|
||||
*
|
||||
* 默认为 `确认`
|
||||
*/
|
||||
type: String,
|
||||
default: '确认',
|
||||
},
|
||||
exportNegativeText: {
|
||||
/**
|
||||
*
|
||||
* 导出取消按钮文字
|
||||
*
|
||||
* 默认为 `取消`
|
||||
*/
|
||||
type: String,
|
||||
default: '取消',
|
||||
},
|
||||
exportFilename: {
|
||||
/**
|
||||
*
|
||||
* 导出表格名称
|
||||
*/
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
printPositiveText: {
|
||||
/**
|
||||
*
|
||||
* 打印确认按钮文字
|
||||
*
|
||||
* 默认为 `确认`
|
||||
*/
|
||||
type: String,
|
||||
default: '确认',
|
||||
},
|
||||
printNegativeText: {
|
||||
/**
|
||||
*
|
||||
* 打印取消按钮文字
|
||||
*
|
||||
* 默认为 `取消`
|
||||
*/
|
||||
type: String,
|
||||
default: '取消',
|
||||
},
|
||||
printTooltip: {
|
||||
/**
|
||||
*
|
||||
* 打印表格提示
|
||||
*/
|
||||
type: String,
|
||||
default: '是否打印该表格?',
|
||||
},
|
||||
printType: {
|
||||
/**
|
||||
*
|
||||
* 打印输出类型: 'pdf' | 'html' | 'image' | 'json'
|
||||
*
|
||||
* 默认为 `html`
|
||||
*/
|
||||
type: String as PropType<PrintConfiguration.PrintTypes>,
|
||||
default: 'html',
|
||||
},
|
||||
printOptions: {
|
||||
/**
|
||||
*
|
||||
* `print-js` 打印配置项
|
||||
*
|
||||
* 会自动过滤: `printable`, 'type'
|
||||
*/
|
||||
type: Object as PropType<
|
||||
Omit<PrintConfiguration.Configuration, 'printable' | 'type'>
|
||||
>,
|
||||
default: () => ({}),
|
||||
},
|
||||
printIcon: {
|
||||
/**
|
||||
*
|
||||
* 打印按钮自定义图标名称
|
||||
*
|
||||
* 需要结合 `RayIcon` 组件使用
|
||||
*
|
||||
* 如果需要自定义图标, 则需要在 `src/icons` 中添加后使用
|
||||
*/
|
||||
type: String,
|
||||
default: 'print',
|
||||
},
|
||||
exportExcelIcon: {
|
||||
/**
|
||||
*
|
||||
* 导出为表格按钮自定义图标名称
|
||||
*
|
||||
* 需要结合 `RayIcon` 组件使用
|
||||
*
|
||||
* 如果需要自定义图标, 则需要在 `src/icons` 中添加后使用
|
||||
*/
|
||||
type: String,
|
||||
default: 'export_excel',
|
||||
},
|
||||
tableHeaderSpace: {
|
||||
/**
|
||||
*
|
||||
* 表格头部操作栏, 主要操作栏与额外操作栏之间间隔
|
||||
*/
|
||||
type: String,
|
||||
default: '10px',
|
||||
},
|
||||
bordered: {
|
||||
/**
|
||||
*
|
||||
* 表格边框
|
||||
* 是否禁用右键菜单
|
||||
* 如果设置为 false 则不会唤起右键菜单
|
||||
*/
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
/** 导出成功 */
|
||||
onExportSuccess: {
|
||||
onContextMenuClick: {
|
||||
/** 右键菜单点击 */
|
||||
type: [Function, Array] as PropType<
|
||||
MaybeArray<(key: string | number, option: DropdownOption) => void>
|
||||
>,
|
||||
default: null,
|
||||
},
|
||||
downloadTableOptions: {
|
||||
/**
|
||||
*
|
||||
* 配置下载表格内容为 excel 的配置项
|
||||
*/
|
||||
type: Object as PropType<DownloadTableOptions>,
|
||||
default: () => ({}),
|
||||
},
|
||||
wrapperBordered: {
|
||||
/**
|
||||
*
|
||||
* 表格容器边框
|
||||
* 与表格边框为两个不同配置项
|
||||
*/
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
printTableOptions: {
|
||||
/**
|
||||
*
|
||||
* 配置打印表格配置项
|
||||
*/
|
||||
type: Object as PropType<PrintTableOptions>,
|
||||
default: () => ({}),
|
||||
},
|
||||
onDownloadSuccess: {
|
||||
/** 导出表格成功回调 */
|
||||
type: [Function, Array] as PropType<MaybeArray<() => void>>,
|
||||
default: null,
|
||||
},
|
||||
/** 导出失败 */
|
||||
onExportError: {
|
||||
onDownloadError: {
|
||||
/** 导出表格失败回调 */
|
||||
type: [Function, Array] as PropType<MaybeArray<() => void>>,
|
||||
default: null,
|
||||
},
|
||||
@ -229,13 +102,6 @@ const rayTableProps = {
|
||||
>,
|
||||
default: null,
|
||||
},
|
||||
} as const
|
||||
}
|
||||
|
||||
export default rayTableProps
|
||||
|
||||
/**
|
||||
*
|
||||
* `Ray Table Props`
|
||||
*
|
||||
* 继承 `Naive UI Data Table` <https://www.naiveui.com/zh-CN/dark/components/data-table>
|
||||
*/
|
||||
export default props
|
||||
|
||||
@ -3,29 +3,15 @@ import type {
|
||||
DropdownGroupOption,
|
||||
DropdownDividerOption,
|
||||
DropdownRenderOption,
|
||||
DataTableBaseColumn,
|
||||
DataTableInst,
|
||||
DataTableColumn,
|
||||
DataTableBaseColumn,
|
||||
} from 'naive-ui'
|
||||
import type { ComputedRef, WritableComputedRef, VNode } from 'vue'
|
||||
import type { ComponentSize } from '@/types/modules/component'
|
||||
import type { VNode, VNodeChild } from 'vue'
|
||||
import type PrintConfiguration from 'print-js'
|
||||
import type { Recordable } from '@/types/modules/helper'
|
||||
|
||||
export interface ActionOptions extends DataTableBaseColumn {
|
||||
leftFixedActivated?: boolean // 向左固定
|
||||
rightFixedActivated?: boolean // 向右固定
|
||||
resizeColumnActivated?: boolean // 拖拽表格列
|
||||
}
|
||||
|
||||
export type FixedType = 'left' | 'right' | undefined
|
||||
|
||||
export interface TableSettingFixedPopoverIcon {
|
||||
element: ActionOptions
|
||||
name: string
|
||||
tooltip: string
|
||||
fn: Function
|
||||
index: number
|
||||
fixed: FixedType
|
||||
key: 'leftFixedActivated' | 'rightFixedActivated'
|
||||
}
|
||||
export type TableActionIcon = string | (() => VNode)
|
||||
|
||||
export type DropdownMixedOption =
|
||||
| DropdownOption
|
||||
@ -33,46 +19,28 @@ export type DropdownMixedOption =
|
||||
| DropdownDividerOption
|
||||
| DropdownRenderOption
|
||||
|
||||
export type SettingOptions = WritableComputedRef<ActionOptions[]>
|
||||
|
||||
export type RightClickMenu = ComputedRef<DropdownMixedOption[]>
|
||||
|
||||
export interface TableSettingProvider {
|
||||
modelRightClickMenu: RightClickMenu
|
||||
modelColumns: SettingOptions
|
||||
size: ComponentSize
|
||||
rayTableUUID: string
|
||||
export interface DownloadTableOptions {
|
||||
fileName?: string
|
||||
// icon?: TableActionIcon
|
||||
}
|
||||
|
||||
export interface ExportExcelProvider {
|
||||
exportTooltip: string
|
||||
exportType: string
|
||||
exportPositiveText: string
|
||||
exportNegativeText: string
|
||||
exportFilename: string
|
||||
export interface PrintTableOptions {
|
||||
// icon?: TableActionIcon
|
||||
printOptions?: Omit<PrintConfiguration.Configuration, 'printable' | 'type'>
|
||||
type?: PrintConfiguration.PrintTypes
|
||||
}
|
||||
|
||||
export type ColumnKey = string | number
|
||||
|
||||
declare type VNodeChildAtom =
|
||||
| VNode
|
||||
| string
|
||||
| number
|
||||
| boolean
|
||||
| null
|
||||
| undefined
|
||||
| void
|
||||
|
||||
export declare type VNodeArrayChildren = Array<
|
||||
VNodeArrayChildren | VNodeChildAtom
|
||||
>
|
||||
|
||||
export declare type VNodeChild = VNodeChildAtom | VNodeArrayChildren
|
||||
|
||||
export declare type TableColumnTitle =
|
||||
| string
|
||||
| ((column: DataTableBaseColumn) => VNodeChild)
|
||||
|
||||
export declare type RayTableInst = {
|
||||
tableMethods: Omit<DataTableInst, 'clearFilter'>
|
||||
export interface TableProvider {
|
||||
uuidWrapper: string
|
||||
uuidTable: string
|
||||
}
|
||||
|
||||
export interface C extends DataTableBaseColumn {
|
||||
leftFixedActivated?: boolean
|
||||
rightFixedActivated?: boolean
|
||||
resizable?: boolean
|
||||
}
|
||||
|
||||
export type OverridesTableColumn<T = Recordable> = C | DataTableColumn<T>
|
||||
|
||||
export interface TableInst extends Omit<DataTableInst, 'clearFilter'> {}
|
||||
|
||||
@ -34,7 +34,7 @@ import type { PropType } from 'vue'
|
||||
* 常用方法即是声明该组件的 name inheritAttrs 等属性
|
||||
*/
|
||||
defineOptions({
|
||||
name: 'TransitionComponent',
|
||||
name: 'RTransitionComponent',
|
||||
})
|
||||
|
||||
defineProps({
|
||||
|
||||
@ -25,7 +25,7 @@ export const combineDirective = <
|
||||
|
||||
return pre
|
||||
} else {
|
||||
throw new Error('directiveModules[curr] is not function')
|
||||
throw new TypeError(`directiveModules: ${curr} is not function`)
|
||||
}
|
||||
}, {} as Record<K, CustomDirectiveFC<unknown, unknown>>)
|
||||
|
||||
|
||||
@ -40,7 +40,7 @@ export const setupDirectives = (app: App<Element>) => {
|
||||
const dname = key.match(regexExtractDirectiveName)?.[0]
|
||||
|
||||
if (typeof dname === 'string' && regexDirectiveName.test(dname)) {
|
||||
app.directive(dname, value?.())
|
||||
app.directive(dname, value())
|
||||
} else {
|
||||
console.error(`[setupDirectives] ${dname} is not a valid directive name`)
|
||||
}
|
||||
|
||||
@ -6,8 +6,8 @@ export type { ThrottleBindingOptions } from './modules/throttle/type'
|
||||
|
||||
export type CustomDirectiveFC<T, K> = () => Directive<T, K>
|
||||
|
||||
export interface DirectiveModules extends Object {
|
||||
default: CustomDirectiveFC<unknown, unknown>
|
||||
export interface DirectiveModules<T = unknown, K = unknown> extends Object {
|
||||
default: CustomDirectiveFC<T, K>
|
||||
}
|
||||
|
||||
export type AppType = App<Element>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
## 说明
|
||||
|
||||
该文件包属于全局 `svg icon`，配合 `RayIcon` 组件使用。
|
||||
该文件包属于全局 `svg icon`，配合 `RIcon` 组件使用。
|
||||
|
||||
## TIP
|
||||
|
||||
@ -14,4 +14,4 @@
|
||||
|
||||
- 导入 `svg` 图标
|
||||
- 命名（`命名必须全局唯一，并且尽量避免使用特殊符号`）
|
||||
- 导入 `RayIcon` 组件，配置 `name` 属性即可将 `svg` 作为图标使用
|
||||
- 导入 `RIcon` 组件，配置 `name` 属性即可将 `svg` 作为图标使用
|
||||
|
||||
9
src/icons/row_end.svg
Normal file
9
src/icons/row_end.svg
Normal file
@ -0,0 +1,9 @@
|
||||
<svg t="1696505506763" class="icon" viewBox="0 0 1024 1024" version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg" p-id="5217" width="64" height="64">
|
||||
<path
|
||||
d="M872.192 840.533333H150.016a38.741333 38.741333 0 1 0 0 77.653334h722.176a38.741333 38.741333 0 1 0 0-77.653334zM511.402667 84.906667a38.741333 38.741333 0 0 0-38.826667 38.826666v556.117334a38.741333 38.741333 0 1 0 77.653333 0V123.733333a38.741333 38.741333 0 0 0-38.826666-38.826666z"
|
||||
fill="currentColor" p-id="5218"></path>
|
||||
<path
|
||||
d="M700.16 468.394667a37.888 37.888 0 0 0-27.477333 11.349333l-161.28 161.28-161.28-161.28a39.253333 39.253333 0 0 0-54.954667 0 39.253333 39.253333 0 0 0 0 54.954667l188.757333 188.757333a39.253333 39.253333 0 0 0 54.954667 0l188.757333-188.757333a39.253333 39.253333 0 0 0 0-54.954667 40.533333 40.533333 0 0 0-27.477333-11.349333z"
|
||||
fill="currentColor" p-id="5219"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 891 B |
9
src/icons/row_head.svg
Normal file
9
src/icons/row_head.svg
Normal file
@ -0,0 +1,9 @@
|
||||
<svg t="1696505610024" class="icon" viewBox="0 0 1024 1024" version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg" p-id="10345" width="64" height="64">
|
||||
<path
|
||||
d="M872.192 183.466667H150.016a38.741333 38.741333 0 1 1 0-77.653334h722.176a38.741333 38.741333 0 1 1 0 77.653334z m-360.789333 755.626666a38.741333 38.741333 0 0 1-38.826667-38.826666V344.149333a38.741333 38.741333 0 1 1 77.653333 0v556.117334a38.741333 38.741333 0 0 1-38.826666 38.826666z"
|
||||
fill="currentColor" p-id="10346"></path>
|
||||
<path
|
||||
d="M700.16 555.605333a37.888 37.888 0 0 1-27.477333-11.349333l-161.28-161.28-161.28 161.28a39.253333 39.253333 0 0 1-54.954667 0 39.253333 39.253333 0 0 1 0-54.954667l188.757333-188.757333a39.253333 39.253333 0 0 1 54.954667 0l188.757333 188.757333a39.253333 39.253333 0 0 1 0 54.954667 40.533333 40.533333 0 0 1-27.477333 11.349333z"
|
||||
fill="currentColor" p-id="10347"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 897 B |
@ -12,7 +12,7 @@
|
||||
import './index.scss'
|
||||
|
||||
import { NEllipsis, NPopover } from 'naive-ui'
|
||||
import RayIcon from '@/components/RIcon/index'
|
||||
import RIcon from '@/components/RIcon/index'
|
||||
|
||||
const SiderBarLogo = defineComponent({
|
||||
name: 'SiderBarLogo',
|
||||
@ -38,7 +38,7 @@ const SiderBarLogo = defineComponent({
|
||||
}
|
||||
|
||||
const TemplateLogo = ({ cursor }: { cursor: string }) => (
|
||||
<RayIcon name={sideBarLogo!.icon as string} size="30" cursor={cursor} />
|
||||
<RIcon name={sideBarLogo!.icon as string} size="30" cursor={cursor} />
|
||||
)
|
||||
|
||||
return {
|
||||
|
||||
@ -26,7 +26,7 @@
|
||||
import './index.scss'
|
||||
|
||||
import { NScrollbar, NTag, NSpace, NLayoutHeader, NDropdown } from 'naive-ui'
|
||||
import RayIcon from '@/components/RIcon/index'
|
||||
import RIcon from '@/components/RIcon/index'
|
||||
|
||||
import { useMenu, useSetting } from '@/store'
|
||||
import { uuid } from '@/utils/hook'
|
||||
@ -83,7 +83,7 @@ const MenuTag = defineComponent({
|
||||
key: 'reloadCurrentPage',
|
||||
icon: () =>
|
||||
h(
|
||||
RayIcon,
|
||||
RIcon,
|
||||
{
|
||||
size: 16,
|
||||
name: 'reload',
|
||||
@ -96,7 +96,7 @@ const MenuTag = defineComponent({
|
||||
key: 'closeOther',
|
||||
icon: () =>
|
||||
h(
|
||||
RayIcon,
|
||||
RIcon,
|
||||
{
|
||||
size: 16,
|
||||
name: 'other',
|
||||
@ -109,7 +109,7 @@ const MenuTag = defineComponent({
|
||||
key: 'closeRight',
|
||||
icon: () =>
|
||||
h(
|
||||
RayIcon,
|
||||
RIcon,
|
||||
{
|
||||
size: 16,
|
||||
name: 'right_arrow',
|
||||
@ -122,7 +122,7 @@ const MenuTag = defineComponent({
|
||||
key: 'closeLeft',
|
||||
icon: () =>
|
||||
h(
|
||||
RayIcon,
|
||||
RIcon,
|
||||
{
|
||||
size: 16,
|
||||
name: 'left_arrow',
|
||||
@ -139,7 +139,7 @@ const MenuTag = defineComponent({
|
||||
key: 'closeAll',
|
||||
icon: () =>
|
||||
h(
|
||||
RayIcon,
|
||||
RIcon,
|
||||
{
|
||||
size: 16,
|
||||
name: 'close',
|
||||
@ -265,7 +265,7 @@ const MenuTag = defineComponent({
|
||||
return findElement
|
||||
}
|
||||
|
||||
return undefined
|
||||
return
|
||||
}
|
||||
|
||||
const handleScrollX = (type: 'left' | 'right') => {
|
||||
@ -474,7 +474,7 @@ const MenuTag = defineComponent({
|
||||
inline
|
||||
wrapItem={false}
|
||||
>
|
||||
<RayIcon
|
||||
<RIcon
|
||||
name="expanded"
|
||||
width="20"
|
||||
height="28"
|
||||
@ -518,7 +518,7 @@ const MenuTag = defineComponent({
|
||||
</NSpace>
|
||||
</NScrollbar>
|
||||
<div class="menu-tag__right-wrapper">
|
||||
<RayIcon
|
||||
<RIcon
|
||||
name="expanded"
|
||||
width="20"
|
||||
height="28"
|
||||
@ -530,7 +530,7 @@ const MenuTag = defineComponent({
|
||||
trigger="click"
|
||||
onSelect={this.actionDropdownSelect.bind(this)}
|
||||
>
|
||||
<RayIcon
|
||||
<RIcon
|
||||
name="more"
|
||||
width="20"
|
||||
height="28"
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
import './index.scss'
|
||||
|
||||
import { NInput, NModal, NResult, NScrollbar, NSpace } from 'naive-ui'
|
||||
import RayIcon from '@/components/RIcon/index'
|
||||
import RIcon from '@/components/RIcon/index'
|
||||
|
||||
import { on, off, queryElements, addClass, removeClass } from '@/utils/element'
|
||||
import { debounce } from 'lodash-es'
|
||||
@ -182,11 +182,11 @@ const GlobalSeach = defineComponent({
|
||||
const { icon } = meta
|
||||
|
||||
if (typeof icon === 'string') {
|
||||
return <RayIcon name={icon} size="24" />
|
||||
return <RIcon name={icon} size="24" />
|
||||
} else if (typeof icon === 'function') {
|
||||
return () => icon
|
||||
} else {
|
||||
return <RayIcon name="table" size="24" />
|
||||
return <RIcon name="table" size="24" />
|
||||
}
|
||||
}
|
||||
|
||||
@ -277,7 +277,7 @@ const GlobalSeach = defineComponent({
|
||||
onInput={this.handleSearchMenuOptions.bind(this)}
|
||||
>
|
||||
{{
|
||||
prefix: () => <RayIcon name="search" size="24" />,
|
||||
prefix: () => <RIcon name="search" size="24" />,
|
||||
}}
|
||||
</NInput>
|
||||
</div>
|
||||
@ -324,7 +324,7 @@ const GlobalSeach = defineComponent({
|
||||
{curr.plain ? (
|
||||
<span>{curr.icon}</span>
|
||||
) : (
|
||||
<RayIcon name={curr.icon} size="18" />
|
||||
<RIcon name={curr.icon} size="18" />
|
||||
)}
|
||||
</div>
|
||||
<div class="item-laebl">{curr.label}</div>
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
*/
|
||||
|
||||
import { NSpace, NSwitch, NTooltip } from 'naive-ui'
|
||||
import RayIcon from '@/components/RIcon'
|
||||
import RIcon from '@/components/RIcon'
|
||||
|
||||
import { useSetting } from '@/store'
|
||||
import { useI18n } from '@/hooks/web/index'
|
||||
@ -58,7 +58,7 @@ const ThemeSwitch = defineComponent({
|
||||
{{
|
||||
'checked-icon': () =>
|
||||
h(
|
||||
RayIcon,
|
||||
RIcon,
|
||||
{
|
||||
name: 'dark',
|
||||
},
|
||||
@ -66,7 +66,7 @@ const ThemeSwitch = defineComponent({
|
||||
),
|
||||
'unchecked-icon': () =>
|
||||
h(
|
||||
RayIcon,
|
||||
RIcon,
|
||||
{
|
||||
name: 'light',
|
||||
},
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
import './index.scss'
|
||||
|
||||
import { NTooltip } from 'naive-ui'
|
||||
import RayIcon from '@/components/RIcon/index'
|
||||
import RIcon from '@/components/RIcon/index'
|
||||
|
||||
import { tooltipProps } from 'naive-ui'
|
||||
|
||||
@ -47,7 +47,7 @@ const TooltipIcon = defineComponent({
|
||||
<NTooltip {...this.$props}>
|
||||
{{
|
||||
trigger: () => (
|
||||
<RayIcon
|
||||
<RIcon
|
||||
name={this.iconName}
|
||||
size="18"
|
||||
customClassName={`tooltip-text__icon ${this.customClassName}`}
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
import './index.scss'
|
||||
|
||||
import { NLayoutHeader, NSpace, NTooltip, NDropdown } from 'naive-ui'
|
||||
import RayIcon from '@/components/RIcon/index'
|
||||
import RIcon from '@/components/RIcon/index'
|
||||
import TootipIcon from '@/layout/components/SiderBar/components/TooltipIcon/index'
|
||||
import SettingDrawer from './components/SettingDrawer/index'
|
||||
import Breadcrumb from './components/Breadcrumb/index'
|
||||
@ -169,7 +169,7 @@ const SiderBar = defineComponent({
|
||||
<NTooltip>
|
||||
{{
|
||||
trigger: () => (
|
||||
<RayIcon
|
||||
<RIcon
|
||||
customClassName={`${
|
||||
isRef(curr.iconClass)
|
||||
? curr.iconClass.value
|
||||
@ -208,7 +208,7 @@ const SiderBar = defineComponent({
|
||||
}
|
||||
trigger="click"
|
||||
>
|
||||
<RayIcon
|
||||
<RIcon
|
||||
customClassName="layout-header__method--icon"
|
||||
name="language"
|
||||
size="18"
|
||||
|
||||
@ -9,6 +9,8 @@
|
||||
* @remark 今天也是元气满满撸代码的一天
|
||||
*/
|
||||
|
||||
import { useElementBounding } from '@vueuse/core'
|
||||
|
||||
import type { Ref } from 'vue'
|
||||
|
||||
/**
|
||||
|
||||
@ -39,7 +39,7 @@ import type {
|
||||
*/
|
||||
export const combineI18nMessages = (langs: I18nModules, prefix: string) => {
|
||||
if (typeof prefix !== 'string' || !prefix.trim()) {
|
||||
throw new Error('Expected prefix to be a non-empty string')
|
||||
throw new TypeError('Expected prefix to be a non-empty string')
|
||||
}
|
||||
|
||||
const langsGather: Record<string, Recordable> = {}
|
||||
|
||||
@ -63,7 +63,7 @@ interface RouteMeta {
|
||||
```
|
||||
order: 菜单顺序，值越大越靠后。仅对顶层有效，子菜单该值无效
|
||||
i18nKey: i18n 国际化 key, 会优先使用该字段
|
||||
icon: icon 图标， 用于 Menu 菜单(依赖 RayIcon 组件实现)
|
||||
icon: icon 图标， 用于 Menu 菜单(依赖 RIcon 组件实现)
|
||||
windowOpen: 超链接打开（新开窗口打开）
|
||||
role: 权限表
|
||||
hidden: 是否显示
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
/** 本方法感谢 <https://yunkuangao.me/> 的支持 */
|
||||
|
||||
import { APP_MENU_CONFIG, ROOT_ROUTE } from '@/app-config/appConfig'
|
||||
import RayIcon from '@/components/RIcon/index'
|
||||
import RIcon from '@/components/RIcon/index'
|
||||
import { isValueType } from '@/utils/hook'
|
||||
import { getStorage, setStorage } from '@/utils/cache'
|
||||
|
||||
@ -160,7 +160,7 @@ export const hasMenuIcon = (option: AppMenuOption) => {
|
||||
}
|
||||
|
||||
const icon = h(
|
||||
RayIcon,
|
||||
RIcon,
|
||||
{
|
||||
name: meta!.icon as string,
|
||||
size: APP_MENU_CONFIG.MENU_COLLAPSED_ICON_SIZE,
|
||||
|
||||
8
src/types/modules/element.ts
Normal file
8
src/types/modules/element.ts
Normal file
@ -0,0 +1,8 @@
|
||||
import type { VueInstance } from './vue'
|
||||
|
||||
export type MaybeElement =
|
||||
| HTMLElement
|
||||
| SVGElement
|
||||
| VueInstance
|
||||
| undefined
|
||||
| null
|
||||
@ -45,9 +45,7 @@ export type WordArray = CryptoJS.lib.WordArray
|
||||
|
||||
export type CipherParams = CryptoJS.lib.CipherParams
|
||||
|
||||
export type AnyFC = (...args: any[]) => any
|
||||
|
||||
export type AnyVoidFunc = (...args: any[]) => void
|
||||
export type AnyFC<P = any, R = any> = (...args: P[]) => R
|
||||
|
||||
export type PartialCSSStyleDeclaration = Partial<
|
||||
Record<keyof CSSStyleDeclaration, string>
|
||||
@ -56,3 +54,5 @@ export type PartialCSSStyleDeclaration = Partial<
|
||||
export type ElementSelector = string | `attr:${string}`
|
||||
|
||||
export type MaybeArray<T> = T | T[]
|
||||
|
||||
export type DownloadAnyFileDataType = Blob | File | string | ArrayBuffer
|
||||
|
||||
14
src/types/modules/vue.ts
Normal file
14
src/types/modules/vue.ts
Normal file
@ -0,0 +1,14 @@
|
||||
import type { ComponentPublicInstance, MaybeRef } from 'vue'
|
||||
import type { MaybeElement } from './element'
|
||||
|
||||
export type MaybeElementRef<T extends MaybeElement = MaybeElement> = MaybeRef<T>
|
||||
|
||||
export type VueInstance = ComponentPublicInstance
|
||||
|
||||
export type MaybeRefOrGetter<T> = MaybeRef<T> | (() => T)
|
||||
|
||||
export type MaybeComputedElementRef<T extends MaybeElement = MaybeElement> =
|
||||
MaybeRefOrGetter<T>
|
||||
|
||||
export type UnRefElementReturn<T extends MaybeElement = MaybeElement> =
|
||||
T extends VueInstance ? Exclude<MaybeElement, VueInstance> : T | undefined
|
||||
@ -1,4 +1,7 @@
|
||||
import type { ValidteValueType } from '@/types/modules/utils'
|
||||
import type {
|
||||
ValidteValueType,
|
||||
DownloadAnyFileDataType,
|
||||
} from '@/types/modules/utils'
|
||||
|
||||
/**
|
||||
*
|
||||
@ -95,3 +98,49 @@ export const uuid = (length = 16, radix = 62) => {
|
||||
// 将数组中的字符连接起来，返回最终的字符串
|
||||
return arr.join('')
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param data base64, Blob, ArrayBuffer type
|
||||
* @param fileName file name
|
||||
*
|
||||
* @remark 支持下载任意类型的文件，包括 base64, Blob, ArrayBuffer
|
||||
*/
|
||||
export const downloadAnyFile = (
|
||||
data: DownloadAnyFileDataType,
|
||||
fileName: string,
|
||||
): Promise<void> => {
|
||||
return new Promise<void>((resolve, reject) => {
|
||||
let blobData!: Blob
|
||||
|
||||
if (typeof data === 'string') {
|
||||
// 处理 Base64 数据
|
||||
downloadBase64File(data, fileName)
|
||||
resolve()
|
||||
} else if (data instanceof ArrayBuffer) {
|
||||
// 处理 ArrayBuffer 数据
|
||||
blobData = new Blob([new Uint8Array(data)], {
|
||||
type: 'application/octet-stream',
|
||||
})
|
||||
} else {
|
||||
// 处理 Blob 和 File 数据
|
||||
blobData = data
|
||||
}
|
||||
|
||||
const url = URL.createObjectURL(blobData)
|
||||
const link = document.createElement('a')
|
||||
|
||||
link.href = url
|
||||
link.download = fileName
|
||||
link.style.display = 'none'
|
||||
|
||||
document.body.appendChild(link)
|
||||
|
||||
link.click()
|
||||
|
||||
document.body.removeChild(link)
|
||||
|
||||
URL.revokeObjectURL(url)
|
||||
resolve()
|
||||
})
|
||||
}
|
||||
|
||||
@ -1 +1,2 @@
|
||||
export { call } from './call'
|
||||
export { unrefElement } from './unrefElement'
|
||||
|
||||
25
src/utils/vue/unrefElement.ts
Normal file
25
src/utils/vue/unrefElement.ts
Normal file
@ -0,0 +1,25 @@
|
||||
/**
|
||||
*
|
||||
* @author Ray <https://github.com/XiaoDaiGua-Ray>
|
||||
*
|
||||
* @date 2023-10-03
|
||||
*
|
||||
* @workspace ray-template
|
||||
*
|
||||
* @remark 今天也是元气满满撸代码的一天
|
||||
*/
|
||||
|
||||
import type {
|
||||
MaybeComputedElementRef,
|
||||
UnRefElementReturn,
|
||||
VueInstance,
|
||||
} from '@/types/modules/vue'
|
||||
import type { MaybeElement } from '@/types/modules/element'
|
||||
|
||||
export function unrefElement<T extends MaybeElement>(
|
||||
elRef: MaybeComputedElementRef<T>,
|
||||
): UnRefElementReturn<T> {
|
||||
const plain = toValue(elRef)
|
||||
|
||||
return (plain as VueInstance)?.$el ?? plain
|
||||
}
|
||||
@ -9,7 +9,7 @@ import {
|
||||
NP,
|
||||
NH6,
|
||||
} from 'naive-ui'
|
||||
import RayIcon from '@/components/RIcon/index'
|
||||
import RIcon from '@/components/RIcon/index'
|
||||
import RayLink from '@/app-components/app/RayLink/index'
|
||||
|
||||
const Dashboard = defineComponent({
|
||||
@ -37,7 +37,7 @@ const Dashboard = defineComponent({
|
||||
label: '个人',
|
||||
des: () => (
|
||||
<NSpace align="center">
|
||||
<RayIcon name="ray" size="22" />
|
||||
<RIcon name="ray" size="22" />
|
||||
努力搬砖、努力摸鱼, 建设美丽家园
|
||||
</NSpace>
|
||||
),
|
||||
@ -91,7 +91,7 @@ const Dashboard = defineComponent({
|
||||
{{
|
||||
header: () =>
|
||||
h(
|
||||
RayIcon,
|
||||
RIcon,
|
||||
{
|
||||
name: 'ray',
|
||||
size: '64',
|
||||
|
||||
@ -10,8 +10,8 @@
|
||||
*/
|
||||
|
||||
import { NSpace, NCard, NButton, NFormItemGi, NInput, NForm } from 'naive-ui'
|
||||
import RayTable from '@/components/RTable/index'
|
||||
import RayCollapseGrid from '@/components/RCollapseGrid/index'
|
||||
import RTable from '@/components/RTable/index'
|
||||
import RCollapseGrid from '@/components/RCollapseGrid/index'
|
||||
|
||||
import { useHookPlusRequest } from '@/axios/index'
|
||||
import { getPersonList } from '@/axios/api/demo/mock/person'
|
||||
@ -49,7 +49,7 @@ const MockDemo = defineComponent({
|
||||
console.log(data)
|
||||
},
|
||||
})
|
||||
const columns = [
|
||||
const columns = ref([
|
||||
{
|
||||
title: 'id',
|
||||
key: 'id',
|
||||
@ -111,7 +111,7 @@ const MockDemo = defineComponent({
|
||||
)
|
||||
},
|
||||
},
|
||||
]
|
||||
])
|
||||
const condition = reactive({
|
||||
email: null,
|
||||
})
|
||||
@ -157,13 +157,13 @@ const MockDemo = defineComponent({
|
||||
</NCard>
|
||||
<NCard title="提示">
|
||||
<h2>
|
||||
RayTable
|
||||
RTable
|
||||
组件有一个比较值得注意的地方就是，该组件会自动的按照数据量计算分页条数。所以你在异步获取数据的时候，一定要手动设置
|
||||
remote 属性为 true，并且设置 itemCount 或者 pageCount。
|
||||
</h2>
|
||||
</NCard>
|
||||
<NForm labelPlacement="left">
|
||||
<RayCollapseGrid bordered={false} cols={3}>
|
||||
<RCollapseGrid bordered={false} cols={3}>
|
||||
{{
|
||||
default: () => (
|
||||
<>
|
||||
@ -178,16 +178,15 @@ const MockDemo = defineComponent({
|
||||
</NButton>
|
||||
),
|
||||
}}
|
||||
</RayCollapseGrid>
|
||||
</RCollapseGrid>
|
||||
</NForm>
|
||||
<RayTable
|
||||
<RTable
|
||||
title="分页表格"
|
||||
data={this.personData?.data}
|
||||
loading={this.personLoading}
|
||||
columns={this.columns}
|
||||
v-model:columns={this.columns}
|
||||
pagination={this.paginationRef}
|
||||
remote
|
||||
action
|
||||
/>
|
||||
</NSpace>
|
||||
)
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
*/
|
||||
|
||||
import { NSpace, NDataTable, NButton } from 'naive-ui'
|
||||
import RayTable from '@/components/RTable/index'
|
||||
import RTable from '@/components/RTable/index'
|
||||
|
||||
import type { DataTableColumns } from 'naive-ui'
|
||||
|
||||
@ -26,7 +26,7 @@ const RouterDemoHome = defineComponent({
|
||||
setup() {
|
||||
const router = useRouter()
|
||||
|
||||
const columns: DataTableColumns<RowData> = [
|
||||
const columns: Ref<DataTableColumns<RowData>> = ref([
|
||||
{
|
||||
title: '姓名',
|
||||
key: 'name',
|
||||
@ -61,7 +61,7 @@ const RouterDemoHome = defineComponent({
|
||||
)
|
||||
},
|
||||
},
|
||||
]
|
||||
])
|
||||
const dataSource: RowData[] = []
|
||||
|
||||
for (let i = 0; i < 10; i++) {
|
||||
@ -81,7 +81,7 @@ const RouterDemoHome = defineComponent({
|
||||
render() {
|
||||
return (
|
||||
<NSpace wrapItem={false}>
|
||||
<RayTable columns={this.columns} data={this.dataSource} />
|
||||
<RTable v-model:columns={this.columns} data={this.dataSource} />
|
||||
</NSpace>
|
||||
)
|
||||
},
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
import './index.scss'
|
||||
|
||||
import { NSpace, NCard, NPopover } from 'naive-ui'
|
||||
import RayIcon from '@/components/RIcon/index'
|
||||
import RIcon from '@/components/RIcon/index'
|
||||
|
||||
const PreviewSVGIcons = defineComponent({
|
||||
name: 'PreviewSVGIcons',
|
||||
@ -42,12 +42,12 @@ const PreviewSVGIcons = defineComponent({
|
||||
{this.icons.map((curr) => (
|
||||
<div
|
||||
class="pre-view-icons__card"
|
||||
v-copy={`<RayIcon name="${curr}" size="56" />`}
|
||||
v-copy={`<RIcon name="${curr}" size="56" />`}
|
||||
>
|
||||
<NPopover>
|
||||
{{
|
||||
trigger: () => (
|
||||
<RayIcon name={curr} size="56" cursor="pointer" />
|
||||
<RIcon name={curr} size="56" cursor="pointer" />
|
||||
),
|
||||
default: () => curr,
|
||||
}}
|
||||
|
||||
@ -24,11 +24,11 @@ import {
|
||||
NLi,
|
||||
NSpace,
|
||||
} from 'naive-ui'
|
||||
import RayTable from '@/components/RTable/index'
|
||||
import RayCollapseGrid from '@/components/RCollapseGrid/index'
|
||||
import RCollapseGrid from '@/components/RCollapseGrid/index'
|
||||
import RTable from '@/components/RTable/index'
|
||||
|
||||
import type { DataTableColumns } from 'naive-ui'
|
||||
import type { RayTableInst } from '@/components/RTable/index'
|
||||
import type { TableInst } from '@/components/RTable/index'
|
||||
|
||||
type RowData = {
|
||||
key: number
|
||||
@ -41,7 +41,7 @@ type RowData = {
|
||||
const TableView = defineComponent({
|
||||
name: 'TableView',
|
||||
setup() {
|
||||
const tableRef = ref<RayTableInst>()
|
||||
const tableRef = ref<TableInst>()
|
||||
|
||||
const baseColumns = [
|
||||
{
|
||||
@ -142,15 +142,9 @@ const TableView = defineComponent({
|
||||
tableLoading: false,
|
||||
})
|
||||
|
||||
const handleMenuSelect = (key: string | number, idx: number) => {
|
||||
if (key === 'delete') {
|
||||
tableData.value.splice(idx, 1)
|
||||
const handleMenuSelect = (key: string | number) => {
|
||||
window.$message.info(`${key}`)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
console.log(tableRef.value?.tableMethods)
|
||||
})
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
@ -190,13 +184,13 @@ const TableView = defineComponent({
|
||||
<NP>点击打印按钮即可打印该表格</NP>
|
||||
<NP>右键菜单</NP>
|
||||
<NP>全屏表格</NP>
|
||||
<RayCollapseGrid
|
||||
<RCollapseGrid
|
||||
bordered={false}
|
||||
collapsedRows={this.gridCollapsedRows}
|
||||
cols={this.gridItemCount}
|
||||
onUpdateValue={(value: boolean) =>
|
||||
window.$message.info(
|
||||
`我是 RayCollapseGrid 组件${value ? '收起' : '展开'}的回调函数`,
|
||||
`我是 RCollapseGrid 组件${value ? '收起' : '展开'}的回调函数`,
|
||||
)
|
||||
}
|
||||
>
|
||||
@ -227,8 +221,29 @@ const TableView = defineComponent({
|
||||
</>
|
||||
),
|
||||
}}
|
||||
</RayCollapseGrid>
|
||||
<RayTable
|
||||
</RCollapseGrid>
|
||||
<RTable
|
||||
style="margin-top: 18px"
|
||||
ref="tableRef"
|
||||
scrollX={2000}
|
||||
title={
|
||||
<NSpace align="center">
|
||||
<span>标题插槽:</span>
|
||||
<NSwitch
|
||||
onUpdateValue={(value: boolean) => (this.tableLoading = value)}
|
||||
></NSwitch>
|
||||
</NSpace>
|
||||
}
|
||||
data={this.tableData}
|
||||
v-model:columns={this.actionColumns}
|
||||
pagination={{
|
||||
pageSize: 10,
|
||||
}}
|
||||
contextMenuOptions={this.tableMenuOptions}
|
||||
loading={this.tableLoading}
|
||||
onContextMenuClick={this.handleMenuSelect.bind(this)}
|
||||
></RTable>
|
||||
{/* <RayTable
|
||||
style="margin-top: 18px"
|
||||
ref="tableRef"
|
||||
scrollX={2000}
|
||||
@ -252,7 +267,7 @@ const TableView = defineComponent({
|
||||
{{
|
||||
tableFooter: () => '表格的底部内容区域插槽，有时候你可能会用上',
|
||||
}}
|
||||
</RayTable>
|
||||
</RayTable> */}
|
||||
</div>
|
||||
)
|
||||
},
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
import './index.scss'
|
||||
|
||||
import { NSpace, NPopover } from 'naive-ui'
|
||||
import RayIcon from '@/components/RIcon/index'
|
||||
import RIcon from '@/components/RIcon/index'
|
||||
|
||||
interface SSOSigninOptions {
|
||||
icon: string
|
||||
@ -64,7 +64,7 @@ const SSOSignin = defineComponent({
|
||||
<NPopover>
|
||||
{{
|
||||
trigger: () => (
|
||||
<RayIcon
|
||||
<RIcon
|
||||
name={curr.icon}
|
||||
size="24"
|
||||
cursor="pointer"
|
||||
|
||||
@ -15,7 +15,7 @@ import Signin from './components/Signin/index'
|
||||
import Register from './components/Register/index'
|
||||
import QRCodeSignin from './components/QRCodeSignin/index'
|
||||
import SSOSignin from './components/SSOSignin/index'
|
||||
import RayIcon from '@/components/RIcon'
|
||||
import RIcon from '@/components/RIcon'
|
||||
import RayLink from '@/app-components/app/RayLink/index'
|
||||
import ThemeSwitch from '@/layout/components/SiderBar/components/SettingDrawer/components/ThemeSwitch/index'
|
||||
|
||||
@ -67,7 +67,7 @@ const Login = defineComponent({
|
||||
>
|
||||
<div class={['login-wrapper__content']}>
|
||||
<NSpace align="center" class="login-title__wrapper">
|
||||
<RayIcon name="ray" size="48" />
|
||||
<RIcon name="ray" size="48" />
|
||||
<NGradientText class="login-title" type="info" size={28}>
|
||||
Ray Template
|
||||
</NGradientText>
|
||||
@ -84,7 +84,7 @@ const Login = defineComponent({
|
||||
options={LOCAL_OPTIONS}
|
||||
onSelect={(key) => this.updateLocale(key)}
|
||||
>
|
||||
<RayIcon
|
||||
<RIcon
|
||||
customClassName="login-icon"
|
||||
name="language"
|
||||
size="18"
|
||||
@ -102,7 +102,7 @@ const Login = defineComponent({
|
||||
class="login__left-wrapper"
|
||||
>
|
||||
<NSpace align="center" vertical>
|
||||
<RayIcon name="login_bg" width="368" height="368" />
|
||||
<RIcon name="login_bg" width="368" height="368" />
|
||||
<NGradientText class="login-title" type="info" size={36}>
|
||||
开箱即用的中后台管理系统
|
||||
</NGradientText>
|
||||
|
||||
@ -10,44 +10,23 @@
|
||||
"VNode": true,
|
||||
"WritableComputedRef": true,
|
||||
"acceptHMRUpdate": true,
|
||||
"asyncComputed": true,
|
||||
"autoResetRef": true,
|
||||
"computed": true,
|
||||
"computedAsync": true,
|
||||
"computedEager": true,
|
||||
"computedInject": true,
|
||||
"computedWithControl": true,
|
||||
"controlledComputed": true,
|
||||
"controlledRef": true,
|
||||
"createApp": true,
|
||||
"createEventHook": true,
|
||||
"createGlobalState": true,
|
||||
"createInjectionState": true,
|
||||
"createPinia": true,
|
||||
"createReactiveFn": true,
|
||||
"createSharedComposable": true,
|
||||
"createUnrefFn": true,
|
||||
"customRef": true,
|
||||
"debouncedRef": true,
|
||||
"debouncedWatch": true,
|
||||
"defineAsyncComponent": true,
|
||||
"defineComponent": true,
|
||||
"defineStore": true,
|
||||
"eagerComputed": true,
|
||||
"effectScope": true,
|
||||
"extendRef": true,
|
||||
"getActivePinia": true,
|
||||
"getCurrentInstance": true,
|
||||
"getCurrentScope": true,
|
||||
"h": true,
|
||||
"ignorableWatch": true,
|
||||
"inject": true,
|
||||
"isDefined": true,
|
||||
"isProxy": true,
|
||||
"isReactive": true,
|
||||
"isReadonly": true,
|
||||
"isRef": true,
|
||||
"makeDestructurable": true,
|
||||
"mapActions": true,
|
||||
"mapGetters": true,
|
||||
"mapState": true,
|
||||
@ -61,235 +40,47 @@
|
||||
"onBeforeRouteUpdate": true,
|
||||
"onBeforeUnmount": true,
|
||||
"onBeforeUpdate": true,
|
||||
"onClickOutside": true,
|
||||
"onDeactivated": true,
|
||||
"onErrorCaptured": true,
|
||||
"onKeyStroke": true,
|
||||
"onLongPress": true,
|
||||
"onMounted": true,
|
||||
"onRenderTracked": true,
|
||||
"onRenderTriggered": true,
|
||||
"onScopeDispose": true,
|
||||
"onServerPrefetch": true,
|
||||
"onStartTyping": true,
|
||||
"onUnmounted": true,
|
||||
"onUpdated": true,
|
||||
"pausableWatch": true,
|
||||
"provide": true,
|
||||
"reactify": true,
|
||||
"reactifyObject": true,
|
||||
"reactive": true,
|
||||
"reactiveComputed": true,
|
||||
"reactiveOmit": true,
|
||||
"reactivePick": true,
|
||||
"readonly": true,
|
||||
"ref": true,
|
||||
"refAutoReset": true,
|
||||
"refDebounced": true,
|
||||
"refDefault": true,
|
||||
"refThrottled": true,
|
||||
"refWithControl": true,
|
||||
"resolveComponent": true,
|
||||
"resolveRef": true,
|
||||
"resolveUnref": true,
|
||||
"setActivePinia": true,
|
||||
"setMapStoreSuffix": true,
|
||||
"shallowReactive": true,
|
||||
"shallowReadonly": true,
|
||||
"shallowRef": true,
|
||||
"storeToRefs": true,
|
||||
"syncRef": true,
|
||||
"syncRefs": true,
|
||||
"templateRef": true,
|
||||
"throttledRef": true,
|
||||
"throttledWatch": true,
|
||||
"toRaw": true,
|
||||
"toReactive": true,
|
||||
"toRef": true,
|
||||
"toRefs": true,
|
||||
"toValue": true,
|
||||
"triggerRef": true,
|
||||
"tryOnBeforeMount": true,
|
||||
"tryOnBeforeUnmount": true,
|
||||
"tryOnMounted": true,
|
||||
"tryOnScopeDispose": true,
|
||||
"tryOnUnmounted": true,
|
||||
"unref": true,
|
||||
"unrefElement": true,
|
||||
"until": true,
|
||||
"useActiveElement": true,
|
||||
"useArrayEvery": true,
|
||||
"useArrayFilter": true,
|
||||
"useArrayFind": true,
|
||||
"useArrayFindIndex": true,
|
||||
"useArrayFindLast": true,
|
||||
"useArrayJoin": true,
|
||||
"useArrayMap": true,
|
||||
"useArrayReduce": true,
|
||||
"useArraySome": true,
|
||||
"useArrayUnique": true,
|
||||
"useAsyncQueue": true,
|
||||
"useAsyncState": true,
|
||||
"useAttrs": true,
|
||||
"useBase64": true,
|
||||
"useBattery": true,
|
||||
"useBluetooth": true,
|
||||
"useBreakpoints": true,
|
||||
"useBroadcastChannel": true,
|
||||
"useBrowserLocation": true,
|
||||
"useCached": true,
|
||||
"useClipboard": true,
|
||||
"useCloned": true,
|
||||
"useColorMode": true,
|
||||
"useConfirmDialog": true,
|
||||
"useCounter": true,
|
||||
"useCssModule": true,
|
||||
"useCssVar": true,
|
||||
"useCssVars": true,
|
||||
"useCurrentElement": true,
|
||||
"useCycleList": true,
|
||||
"useDark": true,
|
||||
"useDateFormat": true,
|
||||
"useDebounce": true,
|
||||
"useDebounceFn": true,
|
||||
"useDebouncedRefHistory": true,
|
||||
"useDeviceMotion": true,
|
||||
"useDeviceOrientation": true,
|
||||
"useDevicePixelRatio": true,
|
||||
"useDevicesList": true,
|
||||
"useDialog": true,
|
||||
"useDisplayMedia": true,
|
||||
"useDocumentVisibility": true,
|
||||
"useDraggable": true,
|
||||
"useDropZone": true,
|
||||
"useElementBounding": true,
|
||||
"useElementByPoint": true,
|
||||
"useElementHover": true,
|
||||
"useElementSize": true,
|
||||
"useElementVisibility": true,
|
||||
"useEventBus": true,
|
||||
"useEventListener": true,
|
||||
"useEventSource": true,
|
||||
"useEyeDropper": true,
|
||||
"useFavicon": true,
|
||||
"useFetch": true,
|
||||
"useFileDialog": true,
|
||||
"useFileSystemAccess": true,
|
||||
"useFocus": true,
|
||||
"useFocusWithin": true,
|
||||
"useFps": true,
|
||||
"useFullscreen": true,
|
||||
"useGamepad": true,
|
||||
"useGeolocation": true,
|
||||
"useI18n": true,
|
||||
"useIdle": true,
|
||||
"useImage": true,
|
||||
"useInfiniteScroll": true,
|
||||
"useIntersectionObserver": true,
|
||||
"useInterval": true,
|
||||
"useIntervalFn": true,
|
||||
"useKeyModifier": true,
|
||||
"useLastChanged": true,
|
||||
"useLink": true,
|
||||
"useLoadingBar": true,
|
||||
"useLocalStorage": true,
|
||||
"useMagicKeys": true,
|
||||
"useManualRefHistory": true,
|
||||
"useMediaControls": true,
|
||||
"useMediaQuery": true,
|
||||
"useMemoize": true,
|
||||
"useMemory": true,
|
||||
"useMessage": true,
|
||||
"useMounted": true,
|
||||
"useMouse": true,
|
||||
"useMouseInElement": true,
|
||||
"useMousePressed": true,
|
||||
"useMutationObserver": true,
|
||||
"useNavigatorLanguage": true,
|
||||
"useNetwork": true,
|
||||
"useNotification": true,
|
||||
"useNow": true,
|
||||
"useObjectUrl": true,
|
||||
"useOffsetPagination": true,
|
||||
"useOnline": true,
|
||||
"usePageLeave": true,
|
||||
"useParallax": true,
|
||||
"usePermission": true,
|
||||
"usePointer": true,
|
||||
"usePointerLock": true,
|
||||
"usePointerSwipe": true,
|
||||
"usePreferredColorScheme": true,
|
||||
"usePreferredContrast": true,
|
||||
"usePreferredDark": true,
|
||||
"usePreferredLanguages": true,
|
||||
"usePreferredReducedMotion": true,
|
||||
"usePrevious": true,
|
||||
"useRafFn": true,
|
||||
"useRefHistory": true,
|
||||
"useResizeObserver": true,
|
||||
"useRoute": true,
|
||||
"useRouter": true,
|
||||
"useScreenOrientation": true,
|
||||
"useScreenSafeArea": true,
|
||||
"useScriptTag": true,
|
||||
"useScroll": true,
|
||||
"useScrollLock": true,
|
||||
"useSessionStorage": true,
|
||||
"useShare": true,
|
||||
"useSlots": true,
|
||||
"useSorted": true,
|
||||
"useSpeechRecognition": true,
|
||||
"useSpeechSynthesis": true,
|
||||
"useStepper": true,
|
||||
"useStorage": true,
|
||||
"useStorageAsync": true,
|
||||
"useStyleTag": true,
|
||||
"useSupported": true,
|
||||
"useSwipe": true,
|
||||
"useTemplateRefsList": true,
|
||||
"useTextDirection": true,
|
||||
"useTextSelection": true,
|
||||
"useTextareaAutosize": true,
|
||||
"useThrottle": true,
|
||||
"useThrottleFn": true,
|
||||
"useThrottledRefHistory": true,
|
||||
"useTimeAgo": true,
|
||||
"useTimeout": true,
|
||||
"useTimeoutFn": true,
|
||||
"useTimeoutPoll": true,
|
||||
"useTimestamp": true,
|
||||
"useTitle": true,
|
||||
"useToNumber": true,
|
||||
"useToString": true,
|
||||
"useToggle": true,
|
||||
"useTransition": true,
|
||||
"useUrlSearchParams": true,
|
||||
"useUserMedia": true,
|
||||
"useVModel": true,
|
||||
"useVModels": true,
|
||||
"useVibrate": true,
|
||||
"useVirtualList": true,
|
||||
"useWakeLock": true,
|
||||
"useWebNotification": true,
|
||||
"useWebSocket": true,
|
||||
"useWebWorker": true,
|
||||
"useWebWorkerFn": true,
|
||||
"useWindowFocus": true,
|
||||
"useWindowScroll": true,
|
||||
"useWindowSize": true,
|
||||
"watch": true,
|
||||
"watchArray": true,
|
||||
"watchAtMost": true,
|
||||
"watchDebounced": true,
|
||||
"watchEffect": true,
|
||||
"watchIgnorable": true,
|
||||
"watchOnce": true,
|
||||
"watchPausable": true,
|
||||
"watchPostEffect": true,
|
||||
"watchSyncEffect": true,
|
||||
"watchThrottled": true,
|
||||
"watchTriggerable": true,
|
||||
"watchWithFilter": true,
|
||||
"whenever": true
|
||||
"watchSyncEffect": true
|
||||
}
|
||||
}
|
||||
209
unplugin/auto-imports.d.ts
vendored
209
unplugin/auto-imports.d.ts
vendored
@ -6,44 +6,23 @@ export {}
|
||||
declare global {
|
||||
const EffectScope: typeof import('vue')['EffectScope']
|
||||
const acceptHMRUpdate: typeof import('pinia')['acceptHMRUpdate']
|
||||
const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
|
||||
const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
|
||||
const computed: typeof import('vue')['computed']
|
||||
const computedAsync: typeof import('@vueuse/core')['computedAsync']
|
||||
const computedEager: typeof import('@vueuse/core')['computedEager']
|
||||
const computedInject: typeof import('@vueuse/core')['computedInject']
|
||||
const computedWithControl: typeof import('@vueuse/core')['computedWithControl']
|
||||
const controlledComputed: typeof import('@vueuse/core')['controlledComputed']
|
||||
const controlledRef: typeof import('@vueuse/core')['controlledRef']
|
||||
const createApp: typeof import('vue')['createApp']
|
||||
const createEventHook: typeof import('@vueuse/core')['createEventHook']
|
||||
const createGlobalState: typeof import('@vueuse/core')['createGlobalState']
|
||||
const createInjectionState: typeof import('@vueuse/core')['createInjectionState']
|
||||
const createPinia: typeof import('pinia')['createPinia']
|
||||
const createReactiveFn: typeof import('@vueuse/core')['createReactiveFn']
|
||||
const createSharedComposable: typeof import('@vueuse/core')['createSharedComposable']
|
||||
const createUnrefFn: typeof import('@vueuse/core')['createUnrefFn']
|
||||
const customRef: typeof import('vue')['customRef']
|
||||
const debouncedRef: typeof import('@vueuse/core')['debouncedRef']
|
||||
const debouncedWatch: typeof import('@vueuse/core')['debouncedWatch']
|
||||
const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
|
||||
const defineComponent: typeof import('vue')['defineComponent']
|
||||
const defineStore: typeof import('pinia')['defineStore']
|
||||
const eagerComputed: typeof import('@vueuse/core')['eagerComputed']
|
||||
const effectScope: typeof import('vue')['effectScope']
|
||||
const extendRef: typeof import('@vueuse/core')['extendRef']
|
||||
const getActivePinia: typeof import('pinia')['getActivePinia']
|
||||
const getCurrentInstance: typeof import('vue')['getCurrentInstance']
|
||||
const getCurrentScope: typeof import('vue')['getCurrentScope']
|
||||
const h: typeof import('vue')['h']
|
||||
const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
|
||||
const inject: typeof import('vue')['inject']
|
||||
const isDefined: typeof import('@vueuse/core')['isDefined']
|
||||
const isProxy: typeof import('vue')['isProxy']
|
||||
const isReactive: typeof import('vue')['isReactive']
|
||||
const isReadonly: typeof import('vue')['isReadonly']
|
||||
const isRef: typeof import('vue')['isRef']
|
||||
const makeDestructurable: typeof import('@vueuse/core')['makeDestructurable']
|
||||
const mapActions: typeof import('pinia')['mapActions']
|
||||
const mapGetters: typeof import('pinia')['mapGetters']
|
||||
const mapState: typeof import('pinia')['mapState']
|
||||
@ -57,236 +36,48 @@ declare global {
|
||||
const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
|
||||
const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
|
||||
const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
|
||||
const onClickOutside: typeof import('@vueuse/core')['onClickOutside']
|
||||
const onDeactivated: typeof import('vue')['onDeactivated']
|
||||
const onErrorCaptured: typeof import('vue')['onErrorCaptured']
|
||||
const onKeyStroke: typeof import('@vueuse/core')['onKeyStroke']
|
||||
const onLongPress: typeof import('@vueuse/core')['onLongPress']
|
||||
const onMounted: typeof import('vue')['onMounted']
|
||||
const onRenderTracked: typeof import('vue')['onRenderTracked']
|
||||
const onRenderTriggered: typeof import('vue')['onRenderTriggered']
|
||||
const onScopeDispose: typeof import('vue')['onScopeDispose']
|
||||
const onServerPrefetch: typeof import('vue')['onServerPrefetch']
|
||||
const onStartTyping: typeof import('@vueuse/core')['onStartTyping']
|
||||
const onUnmounted: typeof import('vue')['onUnmounted']
|
||||
const onUpdated: typeof import('vue')['onUpdated']
|
||||
const pausableWatch: typeof import('@vueuse/core')['pausableWatch']
|
||||
const provide: typeof import('vue')['provide']
|
||||
const reactify: typeof import('@vueuse/core')['reactify']
|
||||
const reactifyObject: typeof import('@vueuse/core')['reactifyObject']
|
||||
const reactive: typeof import('vue')['reactive']
|
||||
const reactiveComputed: typeof import('@vueuse/core')['reactiveComputed']
|
||||
const reactiveOmit: typeof import('@vueuse/core')['reactiveOmit']
|
||||
const reactivePick: typeof import('@vueuse/core')['reactivePick']
|
||||
const readonly: typeof import('vue')['readonly']
|
||||
const ref: typeof import('vue')['ref']
|
||||
const refAutoReset: typeof import('@vueuse/core')['refAutoReset']
|
||||
const refDebounced: typeof import('@vueuse/core')['refDebounced']
|
||||
const refDefault: typeof import('@vueuse/core')['refDefault']
|
||||
const refThrottled: typeof import('@vueuse/core')['refThrottled']
|
||||
const refWithControl: typeof import('@vueuse/core')['refWithControl']
|
||||
const resolveComponent: typeof import('vue')['resolveComponent']
|
||||
const resolveRef: typeof import('@vueuse/core')['resolveRef']
|
||||
const resolveUnref: typeof import('@vueuse/core')['resolveUnref']
|
||||
const setActivePinia: typeof import('pinia')['setActivePinia']
|
||||
const setMapStoreSuffix: typeof import('pinia')['setMapStoreSuffix']
|
||||
const shallowReactive: typeof import('vue')['shallowReactive']
|
||||
const shallowReadonly: typeof import('vue')['shallowReadonly']
|
||||
const shallowRef: typeof import('vue')['shallowRef']
|
||||
const storeToRefs: typeof import('pinia')['storeToRefs']
|
||||
const syncRef: typeof import('@vueuse/core')['syncRef']
|
||||
const syncRefs: typeof import('@vueuse/core')['syncRefs']
|
||||
const templateRef: typeof import('@vueuse/core')['templateRef']
|
||||
const throttledRef: typeof import('@vueuse/core')['throttledRef']
|
||||
const throttledWatch: typeof import('@vueuse/core')['throttledWatch']
|
||||
const toRaw: typeof import('vue')['toRaw']
|
||||
const toReactive: typeof import('@vueuse/core')['toReactive']
|
||||
const toRef: typeof import('vue')['toRef']
|
||||
const toRefs: typeof import('vue')['toRefs']
|
||||
const toValue: typeof import('vue')['toValue']
|
||||
const triggerRef: typeof import('vue')['triggerRef']
|
||||
const tryOnBeforeMount: typeof import('@vueuse/core')['tryOnBeforeMount']
|
||||
const tryOnBeforeUnmount: typeof import('@vueuse/core')['tryOnBeforeUnmount']
|
||||
const tryOnMounted: typeof import('@vueuse/core')['tryOnMounted']
|
||||
const tryOnScopeDispose: typeof import('@vueuse/core')['tryOnScopeDispose']
|
||||
const tryOnUnmounted: typeof import('@vueuse/core')['tryOnUnmounted']
|
||||
const unref: typeof import('vue')['unref']
|
||||
const unrefElement: typeof import('@vueuse/core')['unrefElement']
|
||||
const until: typeof import('@vueuse/core')['until']
|
||||
const useActiveElement: typeof import('@vueuse/core')['useActiveElement']
|
||||
const useArrayEvery: typeof import('@vueuse/core')['useArrayEvery']
|
||||
const useArrayFilter: typeof import('@vueuse/core')['useArrayFilter']
|
||||
const useArrayFind: typeof import('@vueuse/core')['useArrayFind']
|
||||
const useArrayFindIndex: typeof import('@vueuse/core')['useArrayFindIndex']
|
||||
const useArrayFindLast: typeof import('@vueuse/core')['useArrayFindLast']
|
||||
const useArrayJoin: typeof import('@vueuse/core')['useArrayJoin']
|
||||
const useArrayMap: typeof import('@vueuse/core')['useArrayMap']
|
||||
const useArrayReduce: typeof import('@vueuse/core')['useArrayReduce']
|
||||
const useArraySome: typeof import('@vueuse/core')['useArraySome']
|
||||
const useArrayUnique: typeof import('@vueuse/core')['useArrayUnique']
|
||||
const useAsyncQueue: typeof import('@vueuse/core')['useAsyncQueue']
|
||||
const useAsyncState: typeof import('@vueuse/core')['useAsyncState']
|
||||
const useAttrs: typeof import('vue')['useAttrs']
|
||||
const useBase64: typeof import('@vueuse/core')['useBase64']
|
||||
const useBattery: typeof import('@vueuse/core')['useBattery']
|
||||
const useBluetooth: typeof import('@vueuse/core')['useBluetooth']
|
||||
const useBreakpoints: typeof import('@vueuse/core')['useBreakpoints']
|
||||
const useBroadcastChannel: typeof import('@vueuse/core')['useBroadcastChannel']
|
||||
const useBrowserLocation: typeof import('@vueuse/core')['useBrowserLocation']
|
||||
const useCached: typeof import('@vueuse/core')['useCached']
|
||||
const useClipboard: typeof import('@vueuse/core')['useClipboard']
|
||||
const useCloned: typeof import('@vueuse/core')['useCloned']
|
||||
const useColorMode: typeof import('@vueuse/core')['useColorMode']
|
||||
const useConfirmDialog: typeof import('@vueuse/core')['useConfirmDialog']
|
||||
const useCounter: typeof import('@vueuse/core')['useCounter']
|
||||
const useCssModule: typeof import('vue')['useCssModule']
|
||||
const useCssVar: typeof import('@vueuse/core')['useCssVar']
|
||||
const useCssVars: typeof import('vue')['useCssVars']
|
||||
const useCurrentElement: typeof import('@vueuse/core')['useCurrentElement']
|
||||
const useCycleList: typeof import('@vueuse/core')['useCycleList']
|
||||
const useDark: typeof import('@vueuse/core')['useDark']
|
||||
const useDateFormat: typeof import('@vueuse/core')['useDateFormat']
|
||||
const useDebounce: typeof import('@vueuse/core')['useDebounce']
|
||||
const useDebounceFn: typeof import('@vueuse/core')['useDebounceFn']
|
||||
const useDebouncedRefHistory: typeof import('@vueuse/core')['useDebouncedRefHistory']
|
||||
const useDeviceMotion: typeof import('@vueuse/core')['useDeviceMotion']
|
||||
const useDeviceOrientation: typeof import('@vueuse/core')['useDeviceOrientation']
|
||||
const useDevicePixelRatio: typeof import('@vueuse/core')['useDevicePixelRatio']
|
||||
const useDevicesList: typeof import('@vueuse/core')['useDevicesList']
|
||||
const useDialog: typeof import('naive-ui')['useDialog']
|
||||
const useDisplayMedia: typeof import('@vueuse/core')['useDisplayMedia']
|
||||
const useDocumentVisibility: typeof import('@vueuse/core')['useDocumentVisibility']
|
||||
const useDraggable: typeof import('@vueuse/core')['useDraggable']
|
||||
const useDropZone: typeof import('@vueuse/core')['useDropZone']
|
||||
const useElementBounding: typeof import('@vueuse/core')['useElementBounding']
|
||||
const useElementByPoint: typeof import('@vueuse/core')['useElementByPoint']
|
||||
const useElementHover: typeof import('@vueuse/core')['useElementHover']
|
||||
const useElementSize: typeof import('@vueuse/core')['useElementSize']
|
||||
const useElementVisibility: typeof import('@vueuse/core')['useElementVisibility']
|
||||
const useEventBus: typeof import('@vueuse/core')['useEventBus']
|
||||
const useEventListener: typeof import('@vueuse/core')['useEventListener']
|
||||
const useEventSource: typeof import('@vueuse/core')['useEventSource']
|
||||
const useEyeDropper: typeof import('@vueuse/core')['useEyeDropper']
|
||||
const useFavicon: typeof import('@vueuse/core')['useFavicon']
|
||||
const useFetch: typeof import('@vueuse/core')['useFetch']
|
||||
const useFileDialog: typeof import('@vueuse/core')['useFileDialog']
|
||||
const useFileSystemAccess: typeof import('@vueuse/core')['useFileSystemAccess']
|
||||
const useFocus: typeof import('@vueuse/core')['useFocus']
|
||||
const useFocusWithin: typeof import('@vueuse/core')['useFocusWithin']
|
||||
const useFps: typeof import('@vueuse/core')['useFps']
|
||||
const useFullscreen: typeof import('@vueuse/core')['useFullscreen']
|
||||
const useGamepad: typeof import('@vueuse/core')['useGamepad']
|
||||
const useGeolocation: typeof import('@vueuse/core')['useGeolocation']
|
||||
const useI18n: typeof import('vue-i18n')['useI18n']
|
||||
const useIdle: typeof import('@vueuse/core')['useIdle']
|
||||
const useImage: typeof import('@vueuse/core')['useImage']
|
||||
const useInfiniteScroll: typeof import('@vueuse/core')['useInfiniteScroll']
|
||||
const useIntersectionObserver: typeof import('@vueuse/core')['useIntersectionObserver']
|
||||
const useInterval: typeof import('@vueuse/core')['useInterval']
|
||||
const useIntervalFn: typeof import('@vueuse/core')['useIntervalFn']
|
||||
const useKeyModifier: typeof import('@vueuse/core')['useKeyModifier']
|
||||
const useLastChanged: typeof import('@vueuse/core')['useLastChanged']
|
||||
const useLink: typeof import('vue-router')['useLink']
|
||||
const useLoadingBar: typeof import('naive-ui')['useLoadingBar']
|
||||
const useLocalStorage: typeof import('@vueuse/core')['useLocalStorage']
|
||||
const useMagicKeys: typeof import('@vueuse/core')['useMagicKeys']
|
||||
const useManualRefHistory: typeof import('@vueuse/core')['useManualRefHistory']
|
||||
const useMediaControls: typeof import('@vueuse/core')['useMediaControls']
|
||||
const useMediaQuery: typeof import('@vueuse/core')['useMediaQuery']
|
||||
const useMemoize: typeof import('@vueuse/core')['useMemoize']
|
||||
const useMemory: typeof import('@vueuse/core')['useMemory']
|
||||
const useMessage: typeof import('naive-ui')['useMessage']
|
||||
const useMounted: typeof import('@vueuse/core')['useMounted']
|
||||
const useMouse: typeof import('@vueuse/core')['useMouse']
|
||||
const useMouseInElement: typeof import('@vueuse/core')['useMouseInElement']
|
||||
const useMousePressed: typeof import('@vueuse/core')['useMousePressed']
|
||||
const useMutationObserver: typeof import('@vueuse/core')['useMutationObserver']
|
||||
const useNavigatorLanguage: typeof import('@vueuse/core')['useNavigatorLanguage']
|
||||
const useNetwork: typeof import('@vueuse/core')['useNetwork']
|
||||
const useNotification: typeof import('naive-ui')['useNotification']
|
||||
const useNow: typeof import('@vueuse/core')['useNow']
|
||||
const useObjectUrl: typeof import('@vueuse/core')['useObjectUrl']
|
||||
const useOffsetPagination: typeof import('@vueuse/core')['useOffsetPagination']
|
||||
const useOnline: typeof import('@vueuse/core')['useOnline']
|
||||
const usePageLeave: typeof import('@vueuse/core')['usePageLeave']
|
||||
const useParallax: typeof import('@vueuse/core')['useParallax']
|
||||
const usePermission: typeof import('@vueuse/core')['usePermission']
|
||||
const usePointer: typeof import('@vueuse/core')['usePointer']
|
||||
const usePointerLock: typeof import('@vueuse/core')['usePointerLock']
|
||||
const usePointerSwipe: typeof import('@vueuse/core')['usePointerSwipe']
|
||||
const usePreferredColorScheme: typeof import('@vueuse/core')['usePreferredColorScheme']
|
||||
const usePreferredContrast: typeof import('@vueuse/core')['usePreferredContrast']
|
||||
const usePreferredDark: typeof import('@vueuse/core')['usePreferredDark']
|
||||
const usePreferredLanguages: typeof import('@vueuse/core')['usePreferredLanguages']
|
||||
const usePreferredReducedMotion: typeof import('@vueuse/core')['usePreferredReducedMotion']
|
||||
const usePrevious: typeof import('@vueuse/core')['usePrevious']
|
||||
const useRafFn: typeof import('@vueuse/core')['useRafFn']
|
||||
const useRefHistory: typeof import('@vueuse/core')['useRefHistory']
|
||||
const useResizeObserver: typeof import('@vueuse/core')['useResizeObserver']
|
||||
const useRoute: typeof import('vue-router')['useRoute']
|
||||
const useRouter: typeof import('vue-router')['useRouter']
|
||||
const useScreenOrientation: typeof import('@vueuse/core')['useScreenOrientation']
|
||||
const useScreenSafeArea: typeof import('@vueuse/core')['useScreenSafeArea']
|
||||
const useScriptTag: typeof import('@vueuse/core')['useScriptTag']
|
||||
const useScroll: typeof import('@vueuse/core')['useScroll']
|
||||
const useScrollLock: typeof import('@vueuse/core')['useScrollLock']
|
||||
const useSessionStorage: typeof import('@vueuse/core')['useSessionStorage']
|
||||
const useShare: typeof import('@vueuse/core')['useShare']
|
||||
const useSlots: typeof import('vue')['useSlots']
|
||||
const useSorted: typeof import('@vueuse/core')['useSorted']
|
||||
const useSpeechRecognition: typeof import('@vueuse/core')['useSpeechRecognition']
|
||||
const useSpeechSynthesis: typeof import('@vueuse/core')['useSpeechSynthesis']
|
||||
const useStepper: typeof import('@vueuse/core')['useStepper']
|
||||
const useStorage: typeof import('@vueuse/core')['useStorage']
|
||||
const useStorageAsync: typeof import('@vueuse/core')['useStorageAsync']
|
||||
const useStyleTag: typeof import('@vueuse/core')['useStyleTag']
|
||||
const useSupported: typeof import('@vueuse/core')['useSupported']
|
||||
const useSwipe: typeof import('@vueuse/core')['useSwipe']
|
||||
const useTemplateRefsList: typeof import('@vueuse/core')['useTemplateRefsList']
|
||||
const useTextDirection: typeof import('@vueuse/core')['useTextDirection']
|
||||
const useTextSelection: typeof import('@vueuse/core')['useTextSelection']
|
||||
const useTextareaAutosize: typeof import('@vueuse/core')['useTextareaAutosize']
|
||||
const useThrottle: typeof import('@vueuse/core')['useThrottle']
|
||||
const useThrottleFn: typeof import('@vueuse/core')['useThrottleFn']
|
||||
const useThrottledRefHistory: typeof import('@vueuse/core')['useThrottledRefHistory']
|
||||
const useTimeAgo: typeof import('@vueuse/core')['useTimeAgo']
|
||||
const useTimeout: typeof import('@vueuse/core')['useTimeout']
|
||||
const useTimeoutFn: typeof import('@vueuse/core')['useTimeoutFn']
|
||||
const useTimeoutPoll: typeof import('@vueuse/core')['useTimeoutPoll']
|
||||
const useTimestamp: typeof import('@vueuse/core')['useTimestamp']
|
||||
const useTitle: typeof import('@vueuse/core')['useTitle']
|
||||
const useToNumber: typeof import('@vueuse/core')['useToNumber']
|
||||
const useToString: typeof import('@vueuse/core')['useToString']
|
||||
const useToggle: typeof import('@vueuse/core')['useToggle']
|
||||
const useTransition: typeof import('@vueuse/core')['useTransition']
|
||||
const useUrlSearchParams: typeof import('@vueuse/core')['useUrlSearchParams']
|
||||
const useUserMedia: typeof import('@vueuse/core')['useUserMedia']
|
||||
const useVModel: typeof import('@vueuse/core')['useVModel']
|
||||
const useVModels: typeof import('@vueuse/core')['useVModels']
|
||||
const useVibrate: typeof import('@vueuse/core')['useVibrate']
|
||||
const useVirtualList: typeof import('@vueuse/core')['useVirtualList']
|
||||
const useWakeLock: typeof import('@vueuse/core')['useWakeLock']
|
||||
const useWebNotification: typeof import('@vueuse/core')['useWebNotification']
|
||||
const useWebSocket: typeof import('@vueuse/core')['useWebSocket']
|
||||
const useWebWorker: typeof import('@vueuse/core')['useWebWorker']
|
||||
const useWebWorkerFn: typeof import('@vueuse/core')['useWebWorkerFn']
|
||||
const useWindowFocus: typeof import('@vueuse/core')['useWindowFocus']
|
||||
const useWindowScroll: typeof import('@vueuse/core')['useWindowScroll']
|
||||
const useWindowSize: typeof import('@vueuse/core')['useWindowSize']
|
||||
const watch: typeof import('vue')['watch']
|
||||
const watchArray: typeof import('@vueuse/core')['watchArray']
|
||||
const watchAtMost: typeof import('@vueuse/core')['watchAtMost']
|
||||
const watchDebounced: typeof import('@vueuse/core')['watchDebounced']
|
||||
const watchEffect: typeof import('vue')['watchEffect']
|
||||
const watchIgnorable: typeof import('@vueuse/core')['watchIgnorable']
|
||||
const watchOnce: typeof import('@vueuse/core')['watchOnce']
|
||||
const watchPausable: typeof import('@vueuse/core')['watchPausable']
|
||||
const watchPostEffect: typeof import('vue')['watchPostEffect']
|
||||
const watchSyncEffect: typeof import('vue')['watchSyncEffect']
|
||||
const watchThrottled: typeof import('@vueuse/core')['watchThrottled']
|
||||
const watchTriggerable: typeof import('@vueuse/core')['watchTriggerable']
|
||||
const watchWithFilter: typeof import('@vueuse/core')['watchWithFilter']
|
||||
const whenever: typeof import('@vueuse/core')['whenever']
|
||||
}
|
||||
// for type re-export
|
||||
declare global {
|
||||
|
||||
@ -29,7 +29,6 @@ import unpluginViteComponents from 'unplugin-vue-components/vite'
|
||||
import { cdn as viteCDNPlugin } from 'vite-plugin-cdn2'
|
||||
|
||||
import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'
|
||||
import { VueHooksPlusResolver } from '@vue-hooks-plus/resolvers'
|
||||
|
||||
import config from './cfg'
|
||||
|
||||
@ -59,7 +58,6 @@ export default function (mode: string): PluginOption[] {
|
||||
'vue',
|
||||
'vue-router',
|
||||
'pinia',
|
||||
'@vueuse/core',
|
||||
'vue-i18n',
|
||||
{
|
||||
'naive-ui': [
|
||||
@ -70,11 +68,11 @@ export default function (mode: string): PluginOption[] {
|
||||
],
|
||||
},
|
||||
],
|
||||
resolvers: [NaiveUiResolver(), VueHooksPlusResolver()],
|
||||
resolvers: [NaiveUiResolver()],
|
||||
}),
|
||||
unpluginViteComponents({
|
||||
dts: './unplugin/components.d.ts',
|
||||
resolvers: [NaiveUiResolver(), VueHooksPlusResolver()],
|
||||
resolvers: [NaiveUiResolver()],
|
||||
types: [
|
||||
{
|
||||
from: 'vue-router',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user