v4.2.2

.eslintrc.cjs

@@ -35,6 +35,7 @@ module.exports = {
     defineOptions: 'readonly',
   },
   rules: {
+    'no-undefined': ['error'],
     'linebreak-style': ['error', 'unix'],
     '@typescript-eslint/no-explicit-any': [
       'error',

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
 

README-ZH.md

@@ -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
+- **最新技术栈**：使用 vue3.x/vite4.x/pinia 等前端前沿技术开发
-- **TypeScript**：The language for application-level JavaScript
+- **TypeScript**：应用程序级 JavaScript 的语言
-- **App Theme**：Configurable themes
+- **主题**：可配置的主题
-- **Globalization**：Built-in complete internationalization solution
+- **国际化**：内置完善的国际化方案
-- **Mock Data**：Built-in Mock data scheme
+- **Mock 数据**：内置 Mock 数据方案
-- **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.
+- **Axios 请求**：二次封装 axios 库，支持：取消、防抖、自动重复取消等功能
-- **Page Cache**：Arbitrarily deep page cache
+- **缓存**：任意深度页面缓存
-- **SVG**：Built-in svg icon solution
+- **SVG**：内置 svg icon 解决方案
-- **Standalone Data Methods Views**：Decoupled management of data, methods, and views allows for secondary development with confidence
+- **独立的 Data Methods Views**：解耦管理的数据、方法、视图，放心二次开发
 
-## 🪄 Preview
+## 🪄 预览地址
 
-- [Click to preview](https://xiaodaigua-ray.github.io/ray-template/#/)
+- [点击预览](https://xiaodaigua-ray.github.io/ray-template/#/)
-- [Click to preview(Acceleration address)](https://ray-template.yunkuangao.com/#/)
+- [点击预览(加速地址)](https://ray-template.yunkuangao.com/#/)
 
-## 🦾 Document
+## 🦾 文档地址
 
-- [Document](https://xiaodaigua-ray.github.io/ray-template-doc/)
+- [文档](https://xiaodaigua-ray.github.io/ray-template-doc/)
-- [Document(Acceleration address)](https://ray-template.yunkuangao.com/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
+- [Node](http://nodejs.org/) 和 [git](https://git-scm.com/) - 项目开发环境
-- [Vite](https://vitejs.dev/) - Familiar with vite features
+- [Vite](https://vitejs.dev/) - 熟悉 vite 特性
-- [Vue3](https://v3.vuejs.org/) - Familiar with Vue3.x basic syntax
+- [Vue3](https://v3.vuejs.org/) - 熟悉 Vue 基础语法
-- [TypeScript](https://www.typescriptlang.org/) - Familiar with TypeScript basic syntax
+- [TypeScript](https://www.typescriptlang.org/) - 熟悉 TypeScript 基本语法
-- [Es6+](http://es6.ruanyifeng.com/) - Familiar with es6 basic syntax
+- [Es6+](http://es6.ruanyifeng.com/) - 熟悉 es6 基本语法
-- [Vue-Router-Next](https://next.router.vuejs.org/) - Familiar with the basic use of vue-router4.x
+- [Vue-Router-Next](https://next.router.vuejs.org/) - 熟悉 vue-router4.x 基本使用
-- [Naive-UI](https://www.naiveui.com) - UI basic usage
+- [Naive-UI](https://www.naiveui.com) - ui 基本使用
-- [Mock.js](https://github.com/nuysoft/Mock) - Mockjs basic syntax
+- [Mock.js](https://github.com/nuysoft/Mock) - mockjs 基本语法
-- [Pinia](https://pinia.vuejs.org/zh/introduction.html) - State manager pinia uses
+- [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 basic syntax
+- [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
+## 🪴 项目活动
 
 ![Alt](https://repobeats.axiom.co/api/embed/fab6071297ab281913a42f07a2779b488cfd62b8.svg 'Repobeats analytics image')
 
-### 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)

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 等前端前沿技术开发
+- **Latest Technology Stack**：Developed using front-end cutting-edge technologies such as vue3.x/vite4.x/pinia
-- **TypeScript**：应用程序级 JavaScript 的语言
+- **TypeScript**：The language for application-level JavaScript
-- **主题**：可配置的主题
+- **App Theme**：Configurable themes
-- **国际化**：内置完善的国际化方案
+- **Globalization**：Built-in complete internationalization solution
-- **Mock 数据**：内置 Mock 数据方案
+- **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 请求**：二次封装 axios 库，支持：取消、防抖、自动重复取消等功能
+- **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**：内置 svg icon 解决方案
+- **SVG**：Built-in svg icon solution
-- **独立的 Data Methods Views**：解耦管理的数据、方法、视图，放心二次开发
+- **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/#/)
+- [Click to preview](https://xiaodaigua-ray.github.io/ray-template/#/)
-- [点击预览(加速地址)](https://ray-template.yunkuangao.com/#/)
+- [Click to preview(Acceleration address)](https://ray-template.yunkuangao.com/#/)
 
-## 🦾 文档地址
+## 🦾 Document
 
-- [文档](https://xiaodaigua-ray.github.io/ray-template-doc/)
+- [Document](https://xiaodaigua-ray.github.io/ray-template-doc/)
-- [文档(加速地址)](https://ray-template.yunkuangao.com/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/) - 项目开发环境
+- [Node](http://nodejs.org/) and [git](https://git-scm.com/) - Project development environment
-- [Vite](https://vitejs.dev/) - 熟悉 vite 特性
+- [Vite](https://vitejs.dev/) - Familiar with vite features
-- [Vue3](https://v3.vuejs.org/) - 熟悉 Vue 基础语法
+- [Vue3](https://v3.vuejs.org/) - Familiar with Vue3.x basic syntax
-- [TypeScript](https://www.typescriptlang.org/) - 熟悉 TypeScript 基本语法
+- [TypeScript](https://www.typescriptlang.org/) - Familiar with TypeScript basic syntax
-- [Es6+](http://es6.ruanyifeng.com/) - 熟悉 es6 基本语法
+- [Es6+](http://es6.ruanyifeng.com/) - Familiar with es6 basic syntax
-- [Vue-Router-Next](https://next.router.vuejs.org/) - 熟悉 vue-router4.x 基本使用
+- [Vue-Router-Next](https://next.router.vuejs.org/) - Familiar with the basic use of vue-router4.x
-- [Naive-UI](https://www.naiveui.com) - ui 基本使用
+- [Naive-UI](https://www.naiveui.com) - UI basic usage
-- [Mock.js](https://github.com/nuysoft/Mock) - mockjs 基本语法
+- [Mock.js](https://github.com/nuysoft/Mock) - Mockjs basic syntax
-- [Pinia](https://pinia.vuejs.org/zh/introduction.html) - 状态管理器 pinia 使用
+- [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 基本语法
+- [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
 
 ![Alt](https://repobeats.axiom.co/api/embed/fab6071297ab281913a42f07a2779b488cfd62b8.svg 'Repobeats analytics image')
 
-### 贡献者
+### 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)

package.json

@@ -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",

src/app-components/app/AppLockScreen/appLockVar.ts

@@ -16,6 +16,8 @@
  * 可以根据后台接口进行替换该变量, 只要是一个响应式的变量值即可
  */
 
+import { useStorage } from '@vueuse/core'
+
 const appLockScreen = useStorage('isAppLockScreen', false, sessionStorage, {
   mergeDefaults: true,
 })

src/app-components/app/AppLockScreen/index.tsx

@@ -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">

src/app-config/appConfig.ts

@@ -58,7 +58,7 @@ export const ROOT_ROUTE: Readonly<RootRoute> = {
 
 /**
  *
- * icon: LOGO 图标, 依赖 `RayIcon` 实现(如果为空则不会渲染图标)
+ * icon: LOGO 图标, 依赖 `RIcon` 实现(如果为空则不会渲染图标)
  * title: LOGO 标题
  * url: 点击跳转地址, 如果不配置该属性, 则不会触发跳转
  * jumpType: 跳转类型(station: 项目内跳转, outsideStation: 新页面打开)

src/components/RChart/index.tsx

@@ -36,10 +36,7 @@ import {
   PictorialBarChart,
 } from 'echarts/charts' // 系列类型(后缀都为 `SeriesOption`)
 import { LabelLayout, UniversalTransition } from 'echarts/features' // 标签自动布局, 全局过渡动画等特性
-import {
+import { CanvasRenderer } from 'echarts/renderers' // `echarts` 渲染器
-  CanvasRenderer,
-  // SVGRenderer,
-} 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) {
+      if (echartInstanceRef.value) {
-        echartInstance.clear()
+        echartInstanceRef.value.clear()
-        echartInstance.dispose()
+        echartInstanceRef.value.dispose()
       }
     }
 
     /** 重置 echarts 尺寸 */
     const resizeChart = () => {
-      if (echartInstance) {
+      if (echartInstanceRef.value) {
-        echartInstance.resize()
+        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,38 +484,33 @@ export default defineComponent({
       },
     )
 
-    /** 显示/隐藏加载动画 */
+    watchEffect(() => {
-    watch(
+      /** 监听 options 变化 */
-      () => props.loading,
+      if (props.watchOptions) {
-      (ndata) => {
+        watchOptionsReturn = watch(
-        ndata
+          () => props.options,
-          ? echartInstance?.showLoading(props.loadingOptions)
+          (noptions) => {
-          : echartInstance?.hideLoading()
+            /** 重新组合 options */
-      },
+            const options = combineChartOptions(noptions)
-    )
+            const setOpt = Object.assign({}, props.setChartOptions, {
+              notMerge: false,
+              lazyUpdate: true,
+              silent: false,
+              replaceMerge: [],
+            })
+            /** 如果 options 发生变动更新 echarts */
+            echartInstanceRef.value?.setOption(options, setOpt)
+          },
+          {
+            deep: true,
+          },
+        )
+      }
 
-    /** 监听 options 变化 */
+      props.loading
-    watch(
+        ? echartInstanceRef.value?.showLoading(props.loadingOptions)
-      () => props.options,
+        : echartInstanceRef.value?.hideLoading()
-      (noptions) => {
+    })
-        if (props.watchOptions) {
-          /** 重新组合 options */
-          const options = combineChartOptions(noptions)
-          const setOpt = Object.assign({}, props.setChartOptions, {
-            notMerge: false,
-            lazyUpdate: true,
-            silent: false,
-            replaceMerge: [],
-          })
-
-          /** 如果 options 发生变动更新 echarts */
-          echartInstance?.setOption(options, setOpt)
-        }
-      },
-      {
-        deep: true,
-      },
-    )
 
     expose({
       echart: echartInstanceRef,
@@ -539,6 +531,7 @@ export default defineComponent({
 
     onBeforeUnmount(() => {
       unmount()
+      watchOptionsReturn?.()
     })
 
     return {

src/components/RCollapseGrid/index.ts

@@ -1,3 +1,3 @@
-import RayCollapseGrid from './src/index'
+import RCollapseGrid from './src/index'
 
-export default RayCollapseGrid
+export default RCollapseGrid

src/components/RCollapseGrid/src/index.tsx

@@ -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({
+const RCollapseGrid = defineComponent({
-  name: 'RayCollapseGrid',
+  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

src/components/RIcon/index.tsx

@@ -17,8 +17,8 @@ import { completeSize } from '@/utils/element'
 import type { PropType } from 'vue'
 import type { MaybeArray } from '@/types/modules/utils'
 
-const RayIcon = defineComponent({
+const RIcon = defineComponent({
-  name: 'RayIcon',
+  name: 'RIcon',
   props: {
     color: {
       type: String,
@@ -114,4 +114,4 @@ const RayIcon = defineComponent({
   },
 })
 
-export default RayIcon
+export default RIcon

src/components/RIframe/index.ts

@@ -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 default RIframe
-export type { RayIframeInst }
+export { props }
+export type { RIframeInst }

src/components/RIframe/src/index.tsx

@@ -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'
+const RIframe = defineComponent({
-import type { MaybeArray } from '@/types/modules/utils'
+  name: 'RIframe',
-import type { SpinProps } from 'naive-ui'
+  props,
-
-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,
-    },
-  },
   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

src/components/RIframe/src/props.ts

@@ -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

src/components/RIframe/src/type.ts

@@ -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>
+}

src/components/RQRCode/src/index.tsx

@@ -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>

src/components/RTable/index.ts

@@ -1,4 +1,6 @@
-import RayTable from './src/index'
+import RTable from './src/Table'
+import props from './src/props'
 
-export default RayTable
+export default RTable
-export type { RayTableInst } from './src/type'
+export { props }
+export type { TableInst } from './src/type'

src/components/RTable/src/Table.tsx

@@ -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>
+    )
+  },
+})

src/components/RTable/src/components/C.tsx

@@ -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>
+    )
+  },
+})

src/components/RTable/src/components/Print.tsx

@@ -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>
+    )
+  },
+})

src/components/RTable/src/components/Screenfull.tsx

@@ -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>
+    )
+  },
+})

src/components/RTable/src/components/Size.tsx

@@ -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>
+    )
+  },
+})

src/components/RTable/src/components/TableAction/index.tsx

@@ -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

src/components/RTable/src/components/TableScreenfull/index.tsx

@@ -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

src/components/RTable/src/components/TableSetting/hook.ts

@@ -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
-}

src/components/RTable/src/components/TableSetting/index.scss

@@ -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;
-    }
-  }
-}

src/components/RTable/src/components/TableSetting/index.tsx

@@ -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

src/components/RTable/src/components/TableSize/index.scss

@@ -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);
-      }
-    }
-  }
-}

src/components/RTable/src/components/TableSize/index.tsx

@@ -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

src/components/RTable/src/config.ts

@@ -0,0 +1,14 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-10-04
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+export default {
+  tableIconSize: '18',
+}

src/components/RTable/src/index.scss

@@ -1,28 +1,14 @@
-.ray-table {
+.r-table__c-tree.n-tree .n-tree-node-switcher.n-tree-node-switcher--hide {
-  & .ray-table-icon {
+  visibility: visible;
-    transition: transform 0.3s var(--r-bezier);
+}
 
-    &:hover {
+.r-table__c-tree.n-tree .ray-icon {
-      @include scaleAnimate();
+  &.r-table__c-fixed--active {
-      animation: elementScale 0.3s linear;
+    color: var(--ray-theme-primary-color);
-      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;
   }
 }
+
+.r-table__setting:hover {
+  transform: rotate(180deg);
+  transition: transform 0.3s var(--r-bezier);
+}

src/components/RTable/src/index.tsx

@@ -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

src/components/RTable/src/props.ts

@@ -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 = {
+const props = {
-  ...dataTableProps, // 继承 `data table props`
+  ...dataTableProps,
-  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,
-  },
   title: {
     /**
      *
      * 表格标题
-     *
+     * 支持自定义渲染
-     * 可以自定义渲染
      */
-    type: [String, Object] as PropType<VNodeChild | string>,
+    type: [String, Number, Object] as PropType<VNode | string | number>,
     default: null,
   },
-  action: {
+  toolOptions: {
-    /**
+    /** 自定义传递工具栏拓展 */
-     *
+    type: Array as PropType<(VNode | (() => VNode))[]>,
-     * 是否开启操作栏
-     *
-     * 默认开启
-     */
-    type: Boolean,
-    default: true,
   },
-  actionExtra: {
+  contextMenuOptions: {
     /**
      *
-     * 自定义拓展操作栏
+     * 右键菜单配置项
-     *
+     * 基于 `NDropdown` 实现
-     * 暂时不开放
      */
-    type: Object as PropType<VNode>,
+    type: Array as PropType<DropdownOption[]>,
-    default: () => ({}),
   },
-  exportTooltip: {
+  disabledContextMenu: {
     /**
      *
-     * 导出表格提示
+     * 是否禁用右键菜单
-     */
+     * 如果设置为 false 则不会唤起右键菜单
-    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: {
-    /**
-     *
-     * 表格边框
      */
     type: Boolean,
     default: false,
   },
-  /** 导出成功 */
+  onContextMenuClick: {
-  onExportSuccess: {
+    /** 右键菜单点击 */
+    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,
   },
-  /** 导出失败 */
+  onDownloadError: {
-  onExportError: {
+    /** 导出表格失败回调 */
     type: [Function, Array] as PropType<MaybeArray<() => void>>,
     default: null,
   },
@@ -229,13 +102,6 @@ const rayTableProps = {
     >,
     default: null,
   },
-} as const
+}
 
-export default rayTableProps
+export default props
-
-/**
- *
- * `Ray Table Props`
- *
- * 继承 `Naive UI Data Table` <https://www.naiveui.com/zh-CN/dark/components/data-table>
- */

src/components/RTable/src/type.ts

@@ -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 { VNode, VNodeChild } from 'vue'
-import type { ComponentSize } from '@/types/modules/component'
+import type PrintConfiguration from 'print-js'
+import type { Recordable } from '@/types/modules/helper'
 
-export interface ActionOptions extends DataTableBaseColumn {
+export type TableActionIcon = string | (() => VNode)
-  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 DropdownMixedOption =
   | DropdownOption
@@ -33,46 +19,28 @@ export type DropdownMixedOption =
   | DropdownDividerOption
   | DropdownRenderOption
 
-export type SettingOptions = WritableComputedRef<ActionOptions[]>
+export interface DownloadTableOptions {
-
+  fileName?: string
-export type RightClickMenu = ComputedRef<DropdownMixedOption[]>
+  // icon?: TableActionIcon
-
-export interface TableSettingProvider {
-  modelRightClickMenu: RightClickMenu
-  modelColumns: SettingOptions
-  size: ComponentSize
-  rayTableUUID: string
 }
 
-export interface ExportExcelProvider {
+export interface PrintTableOptions {
-  exportTooltip: string
+  // icon?: TableActionIcon
-  exportType: string
+  printOptions?: Omit<PrintConfiguration.Configuration, 'printable' | 'type'>
-  exportPositiveText: string
+  type?: PrintConfiguration.PrintTypes
-  exportNegativeText: string
-  exportFilename: string
 }
 
-export type ColumnKey = string | number
+export interface TableProvider {
-
+  uuidWrapper: string
-declare type VNodeChildAtom =
+  uuidTable: string
-  | 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 C extends DataTableBaseColumn {
+  leftFixedActivated?: boolean
+  rightFixedActivated?: boolean
+  resizable?: boolean
+}
+
+export type OverridesTableColumn<T = Recordable> = C | DataTableColumn<T>
+
+export interface TableInst extends Omit<DataTableInst, 'clearFilter'> {}

src/components/RTransitionComponent/index.vue

@@ -34,7 +34,7 @@ import type { PropType } from 'vue'
  * 常用方法即是声明该组件的 name inheritAttrs 等属性
  */
 defineOptions({
-  name: 'TransitionComponent',
+  name: 'RTransitionComponent',
 })
 
 defineProps({

src/directives/helper/combine.ts

@@ -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>>)
 

src/directives/index.ts

@@ -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`)
     }

src/directives/type.ts

@@ -6,8 +6,8 @@ export type { ThrottleBindingOptions } from './modules/throttle/type'
 
 export type CustomDirectiveFC<T, K> = () => Directive<T, K>
 
-export interface DirectiveModules extends Object {
+export interface DirectiveModules<T = unknown, K = unknown> extends Object {
-  default: CustomDirectiveFC<unknown, unknown>
+  default: CustomDirectiveFC<T, K>
 }
 
 export type AppType = App<Element>

src/icons/A_README.md

@@ -1,6 +1,6 @@
 ## 说明
 
-该文件包属于全局 `svg icon`，配合 `RayIcon` 组件使用。
+该文件包属于全局 `svg icon`，配合 `RIcon` 组件使用。
 
 ## TIP
 
@@ -14,4 +14,4 @@
 
 - 导入 `svg` 图标
 - 命名（`命名必须全局唯一，并且尽量避免使用特殊符号`）
-- 导入 `RayIcon` 组件，配置 `name` 属性即可将 `svg` 作为图标使用
+- 导入 `RIcon` 组件，配置 `name` 属性即可将 `svg` 作为图标使用

src/icons/row_end.svg

@@ -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>

src/icons/row_head.svg

@@ -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>

src/layout/components/Menu/components/SiderBarLogo/index.tsx

@@ -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 {

src/layout/components/MenuTag/index.tsx

@@ -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"

src/layout/components/SiderBar/components/GlobalSeach/index.tsx

@@ -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>

src/layout/components/SiderBar/components/SettingDrawer/components/ThemeSwitch/index.tsx

@@ -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',
                       },

src/layout/components/SiderBar/components/TooltipIcon/index.tsx

@@ -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}`}

src/layout/components/SiderBar/index.tsx

@@ -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"

src/layout/layoutResize.ts

@@ -9,6 +9,8 @@
  * @remark 今天也是元气满满撸代码的一天
  */
 
+import { useElementBounding } from '@vueuse/core'
+
 import type { Ref } from 'vue'
 
 /**

src/locales/helper.ts

@@ -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> = {}

src/router/README.md

@@ -63,7 +63,7 @@ interface RouteMeta {
 ```
 order: 菜单顺序，值越大越靠后。仅对顶层有效，子菜单该值无效
 i18nKey: i18n 国际化 key, 会优先使用该字段
-icon: icon 图标， 用于 Menu 菜单(依赖 RayIcon 组件实现)
+icon: icon 图标， 用于 Menu 菜单(依赖 RIcon 组件实现)
 windowOpen: 超链接打开（新开窗口打开）
 role: 权限表
 hidden: 是否显示

src/store/modules/menu/helper.ts

@@ -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,

src/types/modules/element.ts

@@ -0,0 +1,8 @@
+import type { VueInstance } from './vue'
+
+export type MaybeElement =
+  | HTMLElement
+  | SVGElement
+  | VueInstance
+  | undefined
+  | null

src/types/modules/utils.ts

@@ -45,9 +45,7 @@ export type WordArray = CryptoJS.lib.WordArray
 
 export type CipherParams = CryptoJS.lib.CipherParams
 
-export type AnyFC = (...args: any[]) => any
+export type AnyFC<P = any, R = any> = (...args: P[]) => R
-
-export type AnyVoidFunc = (...args: any[]) => void
 
 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

src/types/modules/vue.ts

@@ -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

src/utils/hook.ts

@@ -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()
+  })
+}

src/utils/vue/index.ts

@@ -1 +1,2 @@
 export { call } from './call'
+export { unrefElement } from './unrefElement'

src/utils/vue/unrefElement.ts

@@ -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
+}

src/views/dashboard/index.tsx

@@ -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',

src/views/demo/mock-demo/index.tsx

@@ -10,8 +10,8 @@
  */
 
 import { NSpace, NCard, NButton, NFormItemGi, NInput, NForm } from 'naive-ui'
-import RayTable from '@/components/RTable/index'
+import RTable from '@/components/RTable/index'
-import RayCollapseGrid from '@/components/RCollapseGrid/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>
     )

src/views/demo/router-demo/router-demo-home/index.tsx

@@ -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>
     )
   },

src/views/demo/svg-icons/index.tsx

@@ -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,
                     }}

src/views/demo/table/index.tsx

@@ -24,11 +24,11 @@ import {
   NLi,
   NSpace,
 } from 'naive-ui'
-import RayTable from '@/components/RTable/index'
+import RCollapseGrid from '@/components/RCollapseGrid/index'
-import RayCollapseGrid 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,16 +142,10 @@ const TableView = defineComponent({
       tableLoading: false,
     })
 
-    const handleMenuSelect = (key: string | number, idx: number) => {
+    const handleMenuSelect = (key: string | number) => {
-      if (key === 'delete') {
+      window.$message.info(`${key}`)
-        tableData.value.splice(idx, 1)
-      }
     }
 
-    onMounted(() => {
-      console.log(tableRef.value?.tableMethods)
-    })
-
     return {
       ...toRefs(state),
       tableData,
@@ -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>
+        </RCollapseGrid>
-        <RayTable
+        <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>
     )
   },

src/views/login/components/SSOSignin/index.tsx

@@ -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"

src/views/login/index.tsx

@@ -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>

unplugin/.eslintrc-auto-import.json

@@ -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,
+    "watchSyncEffect": true
-    "watchThrottled": true,
-    "watchTriggerable": true,
-    "watchWithFilter": true,
-    "whenever": true
   }
 }

unplugin/auto-imports.d.ts

@@ -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 {

vite.pliugin.config.ts

@@ -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',