From 3fb016513bcd310b005ed62aeaea0adca0e4bfa8 Mon Sep 17 00:00:00 2001 From: XiaoDaiGua-Ray <443547225@qq.com> Date: Tue, 10 Oct 2023 15:05:48 +0800 Subject: [PATCH] v4.2.2 --- .eslintrc.cjs | 1 + CHANGELOG.md | 47 ++- README-US.md => README-ZH.md | 96 ++--- README.md | 96 ++--- package.json | 2 +- .../app/AppLockScreen/appLockVar.ts | 2 + .../app/AppLockScreen/index.tsx | 2 +- src/app-config/appConfig.ts | 2 +- src/components/RChart/index.tsx | 91 +++-- src/components/RCollapseGrid/index.ts | 4 +- src/components/RCollapseGrid/src/index.tsx | 10 +- src/components/RIcon/index.tsx | 6 +- src/components/RIframe/index.ts | 10 +- src/components/RIframe/src/index.tsx | 101 +----- src/components/RIframe/src/props.ts | 102 ++++++ src/components/RIframe/src/type.ts | 14 + src/components/RQRCode/src/index.tsx | 10 +- src/components/RTable/index.ts | 8 +- src/components/RTable/src/Table.tsx | 184 ++++++++++ src/components/RTable/src/components/C.tsx | 244 +++++++++++++ .../RTable/src/components/Print.tsx | 66 ++++ .../RTable/src/components/Screenfull.tsx | 64 ++++ src/components/RTable/src/components/Size.tsx | 89 +++++ .../src/components/TableAction/index.tsx | 132 ------- .../src/components/TableScreenfull/index.scss | 0 .../src/components/TableScreenfull/index.tsx | 67 ---- .../src/components/TableSetting/hook.ts | 19 - .../src/components/TableSetting/index.scss | 70 ---- .../src/components/TableSetting/index.tsx | 233 ------------ .../src/components/TableSize/index.scss | 47 --- .../RTable/src/components/TableSize/index.tsx | 139 ------- src/components/RTable/src/config.ts | 14 + src/components/RTable/src/index.scss | 36 +- src/components/RTable/src/index.tsx | 340 ------------------ src/components/RTable/src/props.ts | 242 +++---------- src/components/RTable/src/type.ts | 84 ++--- src/components/RTransitionComponent/index.vue | 2 +- src/directives/helper/combine.ts | 2 +- src/directives/index.ts | 2 +- src/directives/type.ts | 4 +- src/icons/A_README.md | 4 +- src/icons/row_end.svg | 9 + src/icons/row_head.svg | 9 + .../Menu/components/SiderBarLogo/index.tsx | 4 +- src/layout/components/MenuTag/index.tsx | 20 +- .../SiderBar/components/GlobalSeach/index.tsx | 10 +- .../components/ThemeSwitch/index.tsx | 6 +- .../SiderBar/components/TooltipIcon/index.tsx | 4 +- src/layout/components/SiderBar/index.tsx | 6 +- src/layout/layoutResize.ts | 2 + src/locales/helper.ts | 2 +- src/router/README.md | 2 +- src/store/modules/menu/helper.ts | 4 +- src/types/modules/element.ts | 8 + src/types/modules/utils.ts | 6 +- src/types/modules/vue.ts | 14 + src/utils/hook.ts | 51 ++- src/utils/vue/index.ts | 1 + src/utils/vue/unrefElement.ts | 25 ++ src/views/dashboard/index.tsx | 6 +- src/views/demo/mock-demo/index.tsx | 19 +- .../router-demo/router-demo-home/index.tsx | 8 +- src/views/demo/svg-icons/index.tsx | 6 +- src/views/demo/table/index.tsx | 49 ++- .../login/components/SSOSignin/index.tsx | 4 +- src/views/login/index.tsx | 8 +- unplugin/.eslintrc-auto-import.json | 211 +---------- unplugin/auto-imports.d.ts | 209 ----------- vite.pliugin.config.ts | 6 +- 69 files changed, 1300 insertions(+), 2097 deletions(-) rename README-US.md => README-ZH.md (61%) create mode 100644 src/components/RIframe/src/props.ts create mode 100644 src/components/RIframe/src/type.ts create mode 100644 src/components/RTable/src/Table.tsx create mode 100644 src/components/RTable/src/components/C.tsx create mode 100644 src/components/RTable/src/components/Print.tsx create mode 100644 src/components/RTable/src/components/Screenfull.tsx create mode 100644 src/components/RTable/src/components/Size.tsx delete mode 100644 src/components/RTable/src/components/TableAction/index.tsx delete mode 100644 src/components/RTable/src/components/TableScreenfull/index.scss delete mode 100644 src/components/RTable/src/components/TableScreenfull/index.tsx delete mode 100644 src/components/RTable/src/components/TableSetting/hook.ts delete mode 100644 src/components/RTable/src/components/TableSetting/index.scss delete mode 100644 src/components/RTable/src/components/TableSetting/index.tsx delete mode 100644 src/components/RTable/src/components/TableSize/index.scss delete mode 100644 src/components/RTable/src/components/TableSize/index.tsx create mode 100644 src/components/RTable/src/config.ts delete mode 100644 src/components/RTable/src/index.tsx create mode 100644 src/icons/row_end.svg create mode 100644 src/icons/row_head.svg create mode 100644 src/types/modules/element.ts create mode 100644 src/types/modules/vue.ts create mode 100644 src/utils/vue/unrefElement.ts diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 5a8d10e1..c711e9dc 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -35,6 +35,7 @@ module.exports = { defineOptions: 'readonly', }, rules: { + 'no-undefined': ['error'], 'linebreak-style': ['error', 'unix'], '@typescript-eslint/no-explicit-any': [ 'error', diff --git a/CHANGELOG.md b/CHANGELOG.md index 988b6a33..7773b01a 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/README-US.md b/README-ZH.md similarity index 61% rename from README-US.md rename to README-ZH.md index 997c5a71..fd83355e 100644 --- a/README-US.md +++ b/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 的中后台模板 -## ✨ Feature +## ✨ 特性 -- **Latest Technology Stack**：Developed using front-end cutting-edge technologies such as vue3.x/vite4.x/pinia -- **TypeScript**：The language for application-level JavaScript -- **App Theme**：Configurable themes -- **Globalization**：Built-in complete internationalization solution -- **Mock Data**：Built-in Mock data scheme -- **Permissions**：Built-in complete dynamic routing permission generation solution -- **Components**：Secondary encapsulation of multiple commonly used components -- **Axios Request**：Secondary encapsulation of the axios library, supporting functions such as cancellation, anti-shake, automatic repeat cancellation, etc. -- **Page Cache**：Arbitrarily deep page cache -- **SVG**：Built-in svg icon solution -- **Standalone Data Methods Views**：Decoupled management of data, methods, and views allows for secondary development with confidence +- **最新技术栈**：使用 vue3.x/vite4.x/pinia 等前端前沿技术开发 +- **TypeScript**：应用程序级 JavaScript 的语言 +- **主题**：可配置的主题 +- **国际化**：内置完善的国际化方案 +- **Mock 数据**：内置 Mock 数据方案 +- **权限**：内置完善的动态路由权限生成方案 +- **组件**：二次封装了多个常用的组件 +- **Axios 请求**：二次封装 axios 库，支持：取消、防抖、自动重复取消等功能 +- **缓存**：任意深度页面缓存 +- **SVG**：内置 svg icon 解决方案 +- **独立的 Data Methods Views**：解耦管理的数据、方法、视图，放心二次开发 -## 🪄 Preview +## 🪄 预览地址 -- [Click to preview](https://xiaodaigua-ray.github.io/ray-template/#/) -- [Click to preview(Acceleration address)](https://ray-template.yunkuangao.com/#/) +- [点击预览](https://xiaodaigua-ray.github.io/ray-template/#/) +- [点击预览(加速地址)](https://ray-template.yunkuangao.com/#/) -## 🦾 Document +## 🦾 文档地址 -- [Document](https://xiaodaigua-ray.github.io/ray-template-doc/) -- [Document(Acceleration address)](https://ray-template.yunkuangao.com/ray-template-doc/) +- [文档](https://xiaodaigua-ray.github.io/ray-template-doc/) +- [文档(加速地址)](https://ray-template.yunkuangao.com/ray-template-doc/) -## 🔋 Change Log +## 🔋 更新日志 -- [Change Log](https://github.com/XiaoDaiGua-Ray/xiaodaigua-ray.github.io/blob/main/CHANGELOG.md) +- [更新日志](https://github.com/XiaoDaiGua-Ray/xiaodaigua-ray.github.io/blob/main/CHANGELOG.md) -## 🪴 Prepare +## 🪴 准备 -- [Node](http://nodejs.org/) and [git](https://git-scm.com/) - Project development environment -- [Vite](https://vitejs.dev/) - Familiar with vite features -- [Vue3](https://v3.vuejs.org/) - Familiar with Vue3.x basic syntax -- [TypeScript](https://www.typescriptlang.org/) - Familiar with TypeScript basic syntax -- [Es6+](http://es6.ruanyifeng.com/) - Familiar with es6 basic syntax -- [Vue-Router-Next](https://next.router.vuejs.org/) - Familiar with the basic use of vue-router4.x -- [Naive-UI](https://www.naiveui.com) - UI basic usage -- [Mock.js](https://github.com/nuysoft/Mock) - Mockjs basic syntax -- [Pinia](https://pinia.vuejs.org/zh/introduction.html) - State manager pinia uses -- [TSX](https://github.com/vuejs/babel-plugin-jsx/blob/main/packages/babel-plugin-jsx/README-zh_CN.md) - TSX basic syntax +- [Node](http://nodejs.org/) 和 [git](https://git-scm.com/) - 项目开发环境 +- [Vite](https://vitejs.dev/) - 熟悉 vite 特性 +- [Vue3](https://v3.vuejs.org/) - 熟悉 Vue 基础语法 +- [TypeScript](https://www.typescriptlang.org/) - 熟悉 TypeScript 基本语法 +- [Es6+](http://es6.ruanyifeng.com/) - 熟悉 es6 基本语法 +- [Vue-Router-Next](https://next.router.vuejs.org/) - 熟悉 vue-router4.x 基本使用 +- [Naive-UI](https://www.naiveui.com) - ui 基本使用 +- [Mock.js](https://github.com/nuysoft/Mock) - mockjs 基本语法 +- [Pinia](https://pinia.vuejs.org/zh/introduction.html) - 状态管理器 pinia 使用 +- [TSX](https://github.com/vuejs/babel-plugin-jsx/blob/main/packages/babel-plugin-jsx/README-zh_CN.md) - tsx 基本语法 -## 📦 Setup +## 📦 起步 -### Get Project +### 获取项目 ```sh # github git clone https://github.com/XiaoDaiGua-Ray/ray-template.git -# If your download speed is very slow, you can switch to the proxy address below +# 如果你的下载速度很慢，可以切换到下面的代理地址 git clone https://gh.yka.moe/https://github.com/XiaoDaiGua-Ray/ray-template.git ``` -### Pull dependencies +### 拉取依赖 ```sh pnpm i ``` -### Startup project +### 启动项目 ```sh pnpm dev ``` -### Project packaging +### 项目打包 ```sh pnpm build ``` -### Preview project +### 预览项目 ```sh pnpm preview ``` -### Volumetric analysis +### 体积分析 ```sh pnpm report ``` -### Develop +### 开发 -Introduction and ease of use are the core ideas of this template. So you can safely delete all files under `views/demo` and `router/moduels/demo`, and you will have a clean project. +简介、易上手是该模板的核心思路。所以你可以放心的直接删除 `views/demo` `router/moduels/demo` 下的所有文件，这样就是一个干净的项目了。 -## 🪴 Project Activities +## 🪴 项目活动 ![Alt](https://repobeats.axiom.co/api/embed/fab6071297ab281913a42f07a2779b488cfd62b8.svg 'Repobeats analytics image') -### Contributor +### 贡献者 -Thanks for all their contributions 🐝! +感谢他们的所做的一切贡献 🐝 ！ -## Browser Support +## 浏览器支持 | [ Edge](http://godban.github.io/browsers-support-badges/)
IE | [ Edge](http://godban.github.io/browsers-support-badges/)
Edge | [Firefox](http://godban.github.io/browsers-support-badges/)
Firefox | [Chrome](http://godban.github.io/browsers-support-badges/)
Chrome | [Safari](http://godban.github.io/browsers-support-badges/)
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) diff --git a/README.md b/README.md index c0702f8f..8be2fc95 100644 --- a/README.md +++ b/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 -## ✨ 特性 +## ✨ Feature -- **最新技术栈**：使用 vue3.x/vite4.x/pinia 等前端前沿技术开发 -- **TypeScript**：应用程序级 JavaScript 的语言 -- **主题**：可配置的主题 -- **国际化**：内置完善的国际化方案 -- **Mock 数据**：内置 Mock 数据方案 -- **权限**：内置完善的动态路由权限生成方案 -- **组件**：二次封装了多个常用的组件 -- **Axios 请求**：二次封装 axios 库，支持：取消、防抖、自动重复取消等功能 -- **缓存**：任意深度页面缓存 -- **SVG**：内置 svg icon 解决方案 -- **独立的 Data Methods Views**：解耦管理的数据、方法、视图，放心二次开发 +- **Latest Technology Stack**：Developed using front-end cutting-edge technologies such as vue3.x/vite4.x/pinia +- **TypeScript**：The language for application-level JavaScript +- **App Theme**：Configurable themes +- **Globalization**：Built-in complete internationalization solution +- **Mock Data**：Built-in Mock data scheme +- **Permissions**：Built-in complete dynamic routing permission generation solution +- **Components**：Secondary encapsulation of multiple commonly used components +- **Axios Request**：Secondary encapsulation of the axios library, supporting functions such as cancellation, anti-shake, automatic repeat cancellation, etc. +- **Page Cache**：Arbitrarily deep page cache +- **SVG**：Built-in svg icon solution +- **Standalone Data Methods Views**：Decoupled management of data, methods, and views allows for secondary development with confidence -## 🪄 预览地址 +## 🪄 Preview -- [点击预览](https://xiaodaigua-ray.github.io/ray-template/#/) -- [点击预览(加速地址)](https://ray-template.yunkuangao.com/#/) +- [Click to preview](https://xiaodaigua-ray.github.io/ray-template/#/) +- [Click to preview(Acceleration address)](https://ray-template.yunkuangao.com/#/) -## 🦾 文档地址 +## 🦾 Document -- [文档](https://xiaodaigua-ray.github.io/ray-template-doc/) -- [文档(加速地址)](https://ray-template.yunkuangao.com/ray-template-doc/) +- [Document](https://xiaodaigua-ray.github.io/ray-template-doc/) +- [Document(Acceleration address)](https://ray-template.yunkuangao.com/ray-template-doc/) -## 🔋 更新日志 +## 🔋 Change Log -- [更新日志](https://github.com/XiaoDaiGua-Ray/xiaodaigua-ray.github.io/blob/main/CHANGELOG.md) +- [Change Log](https://github.com/XiaoDaiGua-Ray/xiaodaigua-ray.github.io/blob/main/CHANGELOG.md) -## 🪴 准备 +## 🪴 Prepare -- [Node](http://nodejs.org/) 和 [git](https://git-scm.com/) - 项目开发环境 -- [Vite](https://vitejs.dev/) - 熟悉 vite 特性 -- [Vue3](https://v3.vuejs.org/) - 熟悉 Vue 基础语法 -- [TypeScript](https://www.typescriptlang.org/) - 熟悉 TypeScript 基本语法 -- [Es6+](http://es6.ruanyifeng.com/) - 熟悉 es6 基本语法 -- [Vue-Router-Next](https://next.router.vuejs.org/) - 熟悉 vue-router4.x 基本使用 -- [Naive-UI](https://www.naiveui.com) - ui 基本使用 -- [Mock.js](https://github.com/nuysoft/Mock) - mockjs 基本语法 -- [Pinia](https://pinia.vuejs.org/zh/introduction.html) - 状态管理器 pinia 使用 -- [TSX](https://github.com/vuejs/babel-plugin-jsx/blob/main/packages/babel-plugin-jsx/README-zh_CN.md) - tsx 基本语法 +- [Node](http://nodejs.org/) and [git](https://git-scm.com/) - Project development environment +- [Vite](https://vitejs.dev/) - Familiar with vite features +- [Vue3](https://v3.vuejs.org/) - Familiar with Vue3.x basic syntax +- [TypeScript](https://www.typescriptlang.org/) - Familiar with TypeScript basic syntax +- [Es6+](http://es6.ruanyifeng.com/) - Familiar with es6 basic syntax +- [Vue-Router-Next](https://next.router.vuejs.org/) - Familiar with the basic use of vue-router4.x +- [Naive-UI](https://www.naiveui.com) - UI basic usage +- [Mock.js](https://github.com/nuysoft/Mock) - Mockjs basic syntax +- [Pinia](https://pinia.vuejs.org/zh/introduction.html) - State manager pinia uses +- [TSX](https://github.com/vuejs/babel-plugin-jsx/blob/main/packages/babel-plugin-jsx/README-zh_CN.md) - TSX basic syntax -## 📦 起步 +## 📦 Setup -### 获取项目 +### Get Project ```sh # github git clone https://github.com/XiaoDaiGua-Ray/ray-template.git -# 如果你的下载速度很慢，可以切换到下面的代理地址 +# If your download speed is very slow, you can switch to the proxy address below git clone https://gh.yka.moe/https://github.com/XiaoDaiGua-Ray/ray-template.git ``` -### 拉取依赖 +### Pull dependencies ```sh pnpm i ``` -### 启动项目 +### Startup project ```sh pnpm dev ``` -### 项目打包 +### Project packaging ```sh pnpm build ``` -### 预览项目 +### Preview project ```sh pnpm preview ``` -### 体积分析 +### Volumetric analysis ```sh pnpm report ``` -### 开发 +### Develop -简介、易上手是该模板的核心思路。所以你可以放心的直接删除 `views/demo` `router/moduels/demo` 下的所有文件，这样就是一个干净的项目了。 +Introduction and ease of use are the core ideas of this template. So you can safely delete all files under `views/demo` and `router/moduels/demo`, and you will have a clean project. -## 🪴 项目活动 +## 🪴 Project Activities ![Alt](https://repobeats.axiom.co/api/embed/fab6071297ab281913a42f07a2779b488cfd62b8.svg 'Repobeats analytics image') -### 贡献者 +### Contributor -感谢他们的所做的一切贡献 🐝 ！ +Thanks for all their contributions 🐝! -## 浏览器支持 +## Browser Support | [ Edge](http://godban.github.io/browsers-support-badges/)
IE | [ Edge](http://godban.github.io/browsers-support-badges/)
Edge | [Firefox](http://godban.github.io/browsers-support-badges/)
Firefox | [Chrome](http://godban.github.io/browsers-support-badges/)
Chrome | [Safari](http://godban.github.io/browsers-support-badges/)
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) diff --git a/package.json b/package.json index 643bd8be..9320f204 100644 --- a/package.json +++ b/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", diff --git a/src/app-components/app/AppLockScreen/appLockVar.ts b/src/app-components/app/AppLockScreen/appLockVar.ts index eb145d25..8d5825e1 100644 --- a/src/app-components/app/AppLockScreen/appLockVar.ts +++ b/src/app-components/app/AppLockScreen/appLockVar.ts @@ -16,6 +16,8 @@ * 可以根据后台接口进行替换该变量, 只要是一个响应式的变量值即可 */ +import { useStorage } from '@vueuse/core' + const appLockScreen = useStorage('isAppLockScreen', false, sessionStorage, { mergeDefaults: true, }) diff --git a/src/app-components/app/AppLockScreen/index.tsx b/src/app-components/app/AppLockScreen/index.tsx index 364cd076..0a2ea818 100644 --- a/src/app-components/app/AppLockScreen/index.tsx +++ b/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="锁定屏幕" >
diff --git a/src/app-config/appConfig.ts b/src/app-config/appConfig.ts index 8889df7e..cfaf41b1 100644 --- a/src/app-config/appConfig.ts +++ b/src/app-config/appConfig.ts @@ -58,7 +58,7 @@ export const ROOT_ROUTE: Readonly = { /** * - * icon: LOGO 图标, 依赖 `RayIcon` 实现(如果为空则不会渲染图标) + * icon: LOGO 图标, 依赖 `RIcon` 实现(如果为空则不会渲染图标) * title: LOGO 标题 * url: 点击跳转地址, 如果不配置该属性, 则不会触发跳转 * jumpType: 跳转类型(station: 项目内跳转, outsideStation: 新页面打开) diff --git a/src/components/RChart/index.tsx b/src/components/RChart/index.tsx index 50fbd7de..0be9c03d 100644 --- a/src/components/RChart/index.tsx +++ b/src/components/RChart/index.tsx @@ -36,10 +36,7 @@ import { PictorialBarChart, } from 'echarts/charts' // 系列类型(后缀都为 `SeriesOption`) import { LabelLayout, UniversalTransition } from 'echarts/features' // 标签自动布局, 全局过渡动画等特性 -import { - CanvasRenderer, - // SVGRenderer, -} from 'echarts/renderers' // `echarts` 渲染器 +import { CanvasRenderer } from 'echarts/renderers' // `echarts` 渲染器 import { useSetting } from '@/store' import { cloneDeep, throttle } from 'lodash-es' @@ -47,8 +44,9 @@ import { on, off, completeSize } from '@/utils/element' import { call } from '@/utils/vue/index' import { setupChartTheme, loadingOptions } from './helper' import { APP_THEME } from '@/app-config/designConfig' +import { useResizeObserver } from '@vueuse/core' -import type { PropType } from 'vue' +import type { PropType, WatchStopHandle } from 'vue' import type { AnyFC, MaybeArray } from '@/types/modules/utils' import type { DebouncedFunc } from 'lodash-es' import type { @@ -228,10 +226,10 @@ export default defineComponent({ const rayChartRef = ref() // `echart` 容器实例 const rayChartWrapperRef = ref() const echartInstanceRef = ref() // `echart` 实例 - let echartInstance: ECharts | null // `echart` 拷贝实例, 解决直接使用响应式实例带来的问题 let resizeThrottleReturn: DebouncedFunc | null // resize 防抖方法实例 let resizeOvserverReturn: UseResizeObserverReturn | null const { echartTheme } = APP_THEME + let watchOptionsReturn: WatchStopHandle | null const cssVarsRef = computed(() => { const cssVars = { @@ -294,7 +292,7 @@ export default defineComponent({ * 如果有需要特殊全局配置的可以在此继续写... */ const combineChartOptions = (ops: EChartsCoreOption) => { - let options = cloneDeep(ops) + let options = cloneDeep(unref(ops)) const assign = (opts: object) => Object.assign( @@ -342,26 +340,25 @@ export default defineComponent({ }) /** 注册 chart */ - echartInstance = echarts.init(element, theme, { + echartInstanceRef.value = echarts.init(element, theme, { /** 如果款度为 0, 则以 200px 填充 */ width: width === 0 ? 200 : void 0, /** 如果高度为 0, 则以 200px 填充 */ height: height === 0 ? 200 : void 0, }) - echartInstanceRef.value = echartInstance /** 设置 options 配置项 */ - options && echartInstance.setOption({}) + echartInstanceRef.value.setOption({}) if (props.animation) { setTimeout(() => { - options && echartInstance?.setOption(options) + options && echartInstanceRef.value?.setOption(options) }) } /** 渲染成功回调 */ if (onSuccess) { - call(onSuccess, echartInstance) + call(onSuccess, echartInstanceRef.value) } } catch (e) { /** 渲染失败回调 */ @@ -396,22 +393,22 @@ export default defineComponent({ * 销毁 `chart` 实例, 释放资源 */ const destroyChart = () => { - if (echartInstance) { - echartInstance.clear() - echartInstance.dispose() + if (echartInstanceRef.value) { + echartInstanceRef.value.clear() + echartInstanceRef.value.dispose() } } /** 重置 echarts 尺寸 */ const resizeChart = () => { - if (echartInstance) { - echartInstance.resize() + if (echartInstanceRef.value) { + echartInstanceRef.value.resize() } } const mount = () => { // 避免重复渲染 - if (echartInstance?.getDom()) { + if (echartInstanceRef.value?.getDom()) { console.warn( 'RChart mount: There is a chart instance already initialized on the dom. Execution was interrupted', ) @@ -487,38 +484,33 @@ export default defineComponent({ }, ) - /** 显示/隐藏加载动画 */ - watch( - () => props.loading, - (ndata) => { - ndata - ? echartInstance?.showLoading(props.loadingOptions) - : echartInstance?.hideLoading() - }, - ) + watchEffect(() => { + /** 监听 options 变化 */ + if (props.watchOptions) { + watchOptionsReturn = watch( + () => props.options, + (noptions) => { + /** 重新组合 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 变化 */ - watch( - () => props.options, - (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, - }, - ) + props.loading + ? echartInstanceRef.value?.showLoading(props.loadingOptions) + : echartInstanceRef.value?.hideLoading() + }) expose({ echart: echartInstanceRef, @@ -539,6 +531,7 @@ export default defineComponent({ onBeforeUnmount(() => { unmount() + watchOptionsReturn?.() }) return { diff --git a/src/components/RCollapseGrid/index.ts b/src/components/RCollapseGrid/index.ts index bbe54ee2..ecd88924 100644 --- a/src/components/RCollapseGrid/index.ts +++ b/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 diff --git a/src/components/RCollapseGrid/src/index.tsx b/src/components/RCollapseGrid/src/index.tsx index d6eaa430..fa36ce4e 100644 --- a/src/components/RCollapseGrid/src/index.tsx +++ b/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({ - name: 'RayCollapseGrid', +const RCollapseGrid = defineComponent({ + name: 'RCollapseGrid', props: collapseGridProps, setup(props) { const modelCollapsed = ref(!props.open) @@ -55,7 +55,7 @@ const RayCollapseGrid = defineComponent({ ? props.collapseToggleText[0] : props.collapseToggleText[1]} - -} - -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 void>>, - default: null, - }, - customSpinProps: { - type: Object as PropType, - default: () => ({}), - }, - lazy: { - /** 是否延迟加载 iframe */ - type: Boolean, - default: true, - }, - }, +const RIframe = defineComponent({ + name: 'RIframe', + props, setup(props, { expose }) { const cssVars = computed(() => { const cssVar = { @@ -177,7 +90,7 @@ const RayIframe = defineComponent({ ...this.$slots, default: () => ( + /> ), }} @@ -195,4 +108,4 @@ const RayIframe = defineComponent({ }, }) -export default RayIframe +export default RIframe diff --git a/src/components/RIframe/src/props.ts b/src/components/RIframe/src/props.ts new file mode 100644 index 00000000..d5b0d5d9 --- /dev/null +++ b/src/components/RIframe/src/props.ts @@ -0,0 +1,102 @@ +/** + * + * @author 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 void>>, + default: null, + }, + customSpinProps: { + type: Object as PropType, + default: () => ({}), + }, + lazy: { + /** 是否延迟加载 iframe */ + type: Boolean, + default: true, + }, + wrapperClass: { + type: String, + default: null, + }, +} + +export default props diff --git a/src/components/RIframe/src/type.ts b/src/components/RIframe/src/type.ts new file mode 100644 index 00000000..4c215a82 --- /dev/null +++ b/src/components/RIframe/src/type.ts @@ -0,0 +1,14 @@ +/** + * + * @author Ray + * + * @date 2023-10-03 + * + * @workspace ray-template + * + * @remark 今天也是元气满满撸代码的一天 + */ + +export interface RIframeInst { + iframe: Ref +} diff --git a/src/components/RQRCode/src/index.tsx b/src/components/RQRCode/src/index.tsx index ce3d3245..7f92132b 100644 --- a/src/components/RQRCode/src/index.tsx +++ b/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(qrcodeURL.value, 'String')) { - downloadBase64File( + downloadAnyFile( qrcodeURL.value, fileName || new Date().getTime() + '.png', ) @@ -173,7 +173,7 @@ export default defineComponent({ {{ default: () => this.errorActionDescription, icon: () => ( - + ), }} diff --git a/src/components/RTable/index.ts b/src/components/RTable/index.ts index 2b2b1819..49ec1744 100644 --- a/src/components/RTable/index.ts +++ b/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 type { RayTableInst } from './src/type' +export default RTable +export { props } +export type { TableInst } from './src/type' diff --git a/src/components/RTable/src/Table.tsx b/src/components/RTable/src/Table.tsx new file mode 100644 index 00000000..daf61cc2 --- /dev/null +++ b/src/components/RTable/src/Table.tsx @@ -0,0 +1,184 @@ +/** + * + * @author 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(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, 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 ( + + {{ + default: () => ( + <> + + {{ + ...this.$slots, + }} + + {!this.disabledContextMenu ? ( + + (this.contextMenuReactive.showContextMenu = false) + } + onSelect={this.contextMenuSelect.bind(this)} + /> + ) : null} + + ), + header: () => this.title ||
, + 'header-extra': () => ( + + + + + + + ), + footer: () => this.$slots.tableFooter?.(), + }} + + ) + }, +}) diff --git a/src/components/RTable/src/components/C.tsx b/src/components/RTable/src/components/C.tsx new file mode 100644 index 00000000..77fc0949 --- /dev/null +++ b/src/components/RTable/src/components/C.tsx @@ -0,0 +1,244 @@ +/** + * + * @author 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 ( + + {{ + trigger: () => ( + + ), + default: () => title, + }} + + ) +} + +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 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: () => ( + + + + + ), + } + }) + }, + // 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 ( + + {{ + trigger: () => ( + + ), + default: () => ( + + ), + }} + + ) + }, +}) diff --git a/src/components/RTable/src/components/Print.tsx b/src/components/RTable/src/components/Print.tsx new file mode 100644 index 00000000..aad04d38 --- /dev/null +++ b/src/components/RTable/src/components/Print.tsx @@ -0,0 +1,66 @@ +/** + * + * @author 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', + {} 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 ( + + {{ + trigger: () => ( + + ), + default: () => '打印表格', + }} + + ) + }, +}) diff --git a/src/components/RTable/src/components/Screenfull.tsx b/src/components/RTable/src/components/Screenfull.tsx new file mode 100644 index 00000000..0f0612ad --- /dev/null +++ b/src/components/RTable/src/components/Screenfull.tsx @@ -0,0 +1,64 @@ +/** + * + * @author 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', + {} 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 ( + + {{ + trigger: () => ( + + ), + default: () => + this.currentTableIsFullscreen ? '取消全屏' : '全屏表格', + }} + + ) + }, +}) diff --git a/src/components/RTable/src/components/Size.tsx b/src/components/RTable/src/components/Size.tsx new file mode 100644 index 00000000..3ac4b274 --- /dev/null +++ b/src/components/RTable/src/components/Size.tsx @@ -0,0 +1,89 @@ +/** + * + * @author 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 ( + + + {{ + trigger: () => ( + + ), + default: () => '密度', + }} + + + ) + }, +}) diff --git a/src/components/RTable/src/components/TableAction/index.tsx b/src/components/RTable/src/components/TableAction/index.tsx deleted file mode 100644 index 564f04ae..00000000 --- a/src/components/RTable/src/components/TableAction/index.tsx +++ /dev/null @@ -1,132 +0,0 @@ -/** - * - * @author 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 ( - - {{ - trigger: () => ( - - {{ - trigger: () => ( - - ), - default: () => this.tooltip, - action: () => ( - - - {this.negativeText} - - - {this.positiveText} - - - ), - }} - - ), - default: () => this.popoverContent, - }} - - ) - }, -}) - -export default TableAction diff --git a/src/components/RTable/src/components/TableScreenfull/index.scss b/src/components/RTable/src/components/TableScreenfull/index.scss deleted file mode 100644 index e69de29b..00000000 diff --git a/src/components/RTable/src/components/TableScreenfull/index.tsx b/src/components/RTable/src/components/TableScreenfull/index.tsx deleted file mode 100644 index eb449a51..00000000 --- a/src/components/RTable/src/components/TableScreenfull/index.tsx +++ /dev/null @@ -1,67 +0,0 @@ -/** - * - * @author 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 ( - - {{ - trigger: () => ( - - ), - default: () => '全屏表格', - }} - - ) - }, -}) - -export default TableScreenfull diff --git a/src/components/RTable/src/components/TableSetting/hook.ts b/src/components/RTable/src/components/TableSetting/hook.ts deleted file mode 100644 index 59d19d73..00000000 --- a/src/components/RTable/src/components/TableSetting/hook.ts +++ /dev/null @@ -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 -} diff --git a/src/components/RTable/src/components/TableSetting/index.scss b/src/components/RTable/src/components/TableSetting/index.scss deleted file mode 100644 index 3bae6b52..00000000 --- a/src/components/RTable/src/components/TableSetting/index.scss +++ /dev/null @@ -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; - } - } -} diff --git a/src/components/RTable/src/components/TableSetting/index.tsx b/src/components/RTable/src/components/TableSetting/index.tsx deleted file mode 100644 index f48e4816..00000000 --- a/src/components/RTable/src/components/TableSetting/index.tsx +++ /dev/null @@ -1,233 +0,0 @@ -/** - * - * @author 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 ( - - {{ - trigger: () => ( - - ), - default: () => tooltip, - }} - - ) - } - - /** - * - * @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 ( - - {{ - trigger: () => ( - - ), - default: () => ( - - {{ - default: () => ( - - {{ - item: ({ - element, - index, - }: { - element: ActionOptions - index: number - }) => ( -
- - - {element.title} - - {this.FixedPopoverIcon({ - element: element, - name: 'left_arrow', - tooltip: '左固定', - fn: this.handleFixedClick, - index, - fixed: 'left', - key: 'leftFixedActivated', - })} - - {{ - trigger: () => ( - - ), - default: () => '修改列宽', - }} - - {this.FixedPopoverIcon({ - element: element, - name: 'right_arrow', - tooltip: '右固定', - fn: this.handleFixedClick, - index, - fixed: 'right', - key: 'rightFixedActivated', - })} -
- ), - }} - - ), - }} - - ), - }} - - ) - }, -}) - -export default TableSetting diff --git a/src/components/RTable/src/components/TableSize/index.scss b/src/components/RTable/src/components/TableSize/index.scss deleted file mode 100644 index 4fcbd871..00000000 --- a/src/components/RTable/src/components/TableSize/index.scss +++ /dev/null @@ -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); - } - } - } -} diff --git a/src/components/RTable/src/components/TableSize/index.tsx b/src/components/RTable/src/components/TableSize/index.tsx deleted file mode 100644 index cef8e91b..00000000 --- a/src/components/RTable/src/components/TableSize/index.tsx +++ /dev/null @@ -1,139 +0,0 @@ -/** - * - * @author 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 ( - - {{ - trigger: () => ( - - {{ - trigger: () => ( - - ), - default: () => '表格密度', - }} - - ), - default: () => ( - -
-
- {this.sizeOptions.map((curr) => ( -
-
{curr.label}
-
- ))} -
-
- - ), - }} - - ) - }, -}) - -export default TableSize diff --git a/src/components/RTable/src/config.ts b/src/components/RTable/src/config.ts new file mode 100644 index 00000000..778717c2 --- /dev/null +++ b/src/components/RTable/src/config.ts @@ -0,0 +1,14 @@ +/** + * + * @author Ray + * + * @date 2023-10-04 + * + * @workspace ray-template + * + * @remark 今天也是元气满满撸代码的一天 + */ + +export default { + tableIconSize: '18', +} diff --git a/src/components/RTable/src/index.scss b/src/components/RTable/src/index.scss index 06a30254..7a7b031c 100644 --- a/src/components/RTable/src/index.scss +++ b/src/components/RTable/src/index.scss @@ -1,28 +1,14 @@ -.ray-table { - & .ray-table-icon { - transition: transform 0.3s var(--r-bezier); +.r-table__c-tree.n-tree .n-tree-node-switcher.n-tree-node-switcher--hide { + visibility: visible; +} - &:hover { - @include scaleAnimate(); - animation: elementScale 0.3s linear; - animation-direction: alternate; - } - } - - & .ray-table__setting, - & .ray-table-icon { - cursor: pointer; - outline: none; - border: none; - } - - & .n-card-header .n-card-header__main { - padding-right: var(--ray-table-header-space); - } - - & .ray-table-header-extra__space { - display: flex; - gap: 0 12px; - align-items: center; +.r-table__c-tree.n-tree .ray-icon { + &.r-table__c-fixed--active { + color: var(--ray-theme-primary-color); } } + +.r-table__setting:hover { + transform: rotate(180deg); + transition: transform 0.3s var(--r-bezier); +} diff --git a/src/components/RTable/src/index.tsx b/src/components/RTable/src/index.tsx deleted file mode 100644 index bc3de22c..00000000 --- a/src/components/RTable/src/index.tsx +++ /dev/null @@ -1,340 +0,0 @@ -/** - * - * @author Ray - * - * @date 2022-12-08 - * - * @workspace ray-template - * - * @remark 今天也是元气满满撸代码的一天 - */ - -/** - * - * - * - * 完全继承 `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() - - 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 - 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>() - 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 ( - - {{ - default: () => ( - <> - - {{ - ...this.$slots, - }} - - (this.showMenu = false)} - onSelect={this.handleRightMenuSelect.bind(this)} - /> - - ), - header: () => this.title ||
, - 'header-extra': () => - this.action ? ( -
- {/* 打印输出操作 */} - - {/* 输出为Excel表格 */} - - {/* 表格尺寸调整 */} - - {/* 全屏表格 */} - - {/* 表格列操作 */} - -
- ) : ( - '' - ), - footer: () => this.$slots.tableFooter?.(), - }} - - ) - }, -}) - -export default RayTable diff --git a/src/components/RTable/src/props.ts b/src/components/RTable/src/props.ts index 4e41f180..987ee4ac 100644 --- a/src/components/RTable/src/props.ts +++ b/src/components/RTable/src/props.ts @@ -2,7 +2,7 @@ * * @author Ray * - * @date 2022-12-08 + * @date 2023-10-04 * * @workspace ray-template * @@ -12,208 +12,81 @@ import { dataTableProps } from 'naive-ui' import type { PropType, VNode, VNodeChild } from 'vue' -import type { DropdownMixedOption } from './type' -import type PrintConfiguration from 'print-js' import type { MaybeArray } from '@/types/modules/utils' import type { DropdownOption, DataTableColumn } from 'naive-ui' +import type { DownloadTableOptions, PrintTableOptions } from './type' -const rayTableProps = { - ...dataTableProps, // 继承 `data table props` - rightClickOptions: { - /** - * - * 表格右键菜单, 基于 `NDropdown` 实现 - * - * 如果菜单内容长度为 `0` 则不会渲染 - * - * 只需要传入对应的菜单配置项, 即可自动开启右键菜单功能 - */ - type: Array as PropType, - default: () => [], - }, - onRightMenuClick: { - type: [Function, Array] as PropType< - MaybeArray< - (key: string | number, index: number, option: DropdownOption) => void - > - >, - default: null, - }, +const props = { + ...dataTableProps, title: { /** * * 表格标题 - * - * 可以自定义渲染 + * 支持自定义渲染 */ - type: [String, Object] as PropType, + type: [String, Number, Object] as PropType, default: null, }, - action: { - /** - * - * 是否开启操作栏 - * - * 默认开启 - */ - type: Boolean, - default: true, + toolOptions: { + /** 自定义传递工具栏拓展 */ + type: Array as PropType<(VNode | (() => VNode))[]>, }, - actionExtra: { + contextMenuOptions: { /** * - * 自定义拓展操作栏 - * - * 暂时不开放 + * 右键菜单配置项 + * 基于 `NDropdown` 实现 */ - type: Object as PropType, - default: () => ({}), + type: Array as PropType, }, - exportTooltip: { + disabledContextMenu: { /** * - * 导出表格提示 - */ - type: String, - default: '是否导出为Excel表格?', - }, - exportType: { - /** - * - * 导出类型 - * - * 默认为 `xlsx` - * - * 暂时只支持导出为 `xlsx` - */ - type: String, - default: 'xlsx', - }, - exportPositiveText: { - /** - * - * 导出确认按钮文字 - * - * 默认为 `确认` - */ - type: String, - default: '确认', - }, - exportNegativeText: { - /** - * - * 导出取消按钮文字 - * - * 默认为 `取消` - */ - type: String, - default: '取消', - }, - exportFilename: { - /** - * - * 导出表格名称 - */ - type: String, - default: '', - }, - printPositiveText: { - /** - * - * 打印确认按钮文字 - * - * 默认为 `确认` - */ - type: String, - default: '确认', - }, - printNegativeText: { - /** - * - * 打印取消按钮文字 - * - * 默认为 `取消` - */ - type: String, - default: '取消', - }, - printTooltip: { - /** - * - * 打印表格提示 - */ - type: String, - default: '是否打印该表格?', - }, - printType: { - /** - * - * 打印输出类型: 'pdf' | 'html' | 'image' | 'json' - * - * 默认为 `html` - */ - type: String as PropType, - default: 'html', - }, - printOptions: { - /** - * - * `print-js` 打印配置项 - * - * 会自动过滤: `printable`, 'type' - */ - type: Object as PropType< - Omit - >, - default: () => ({}), - }, - printIcon: { - /** - * - * 打印按钮自定义图标名称 - * - * 需要结合 `RayIcon` 组件使用 - * - * 如果需要自定义图标, 则需要在 `src/icons` 中添加后使用 - */ - type: String, - default: 'print', - }, - exportExcelIcon: { - /** - * - * 导出为表格按钮自定义图标名称 - * - * 需要结合 `RayIcon` 组件使用 - * - * 如果需要自定义图标, 则需要在 `src/icons` 中添加后使用 - */ - type: String, - default: 'export_excel', - }, - tableHeaderSpace: { - /** - * - * 表格头部操作栏, 主要操作栏与额外操作栏之间间隔 - */ - type: String, - default: '10px', - }, - bordered: { - /** - * - * 表格边框 + * 是否禁用右键菜单 + * 如果设置为 false 则不会唤起右键菜单 */ type: Boolean, default: false, }, - /** 导出成功 */ - onExportSuccess: { + onContextMenuClick: { + /** 右键菜单点击 */ + type: [Function, Array] as PropType< + MaybeArray<(key: string | number, option: DropdownOption) => void> + >, + default: null, + }, + downloadTableOptions: { + /** + * + * 配置下载表格内容为 excel 的配置项 + */ + type: Object as PropType, + default: () => ({}), + }, + wrapperBordered: { + /** + * + * 表格容器边框 + * 与表格边框为两个不同配置项 + */ + type: Boolean, + default: false, + }, + printTableOptions: { + /** + * + * 配置打印表格配置项 + */ + type: Object as PropType, + default: () => ({}), + }, + onDownloadSuccess: { + /** 导出表格成功回调 */ type: [Function, Array] as PropType void>>, default: null, }, - /** 导出失败 */ - onExportError: { + onDownloadError: { + /** 导出表格失败回调 */ type: [Function, Array] as PropType void>>, default: null, }, @@ -229,13 +102,6 @@ const rayTableProps = { >, default: null, }, -} as const +} -export default rayTableProps - -/** - * - * `Ray Table Props` - * - * 继承 `Naive UI Data Table` - */ +export default props diff --git a/src/components/RTable/src/type.ts b/src/components/RTable/src/type.ts index 65dd12d3..5580f301 100644 --- a/src/components/RTable/src/type.ts +++ b/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 { ComponentSize } from '@/types/modules/component' +import type { VNode, VNodeChild } from 'vue' +import type PrintConfiguration from 'print-js' +import type { Recordable } from '@/types/modules/helper' -export interface ActionOptions extends DataTableBaseColumn { - leftFixedActivated?: boolean // 向左固定 - rightFixedActivated?: boolean // 向右固定 - resizeColumnActivated?: boolean // 拖拽表格列 -} - -export type FixedType = 'left' | 'right' | undefined - -export interface TableSettingFixedPopoverIcon { - element: ActionOptions - name: string - tooltip: string - fn: Function - index: number - fixed: FixedType - key: 'leftFixedActivated' | 'rightFixedActivated' -} +export type TableActionIcon = string | (() => VNode) export type DropdownMixedOption = | DropdownOption @@ -33,46 +19,28 @@ export type DropdownMixedOption = | DropdownDividerOption | DropdownRenderOption -export type SettingOptions = WritableComputedRef - -export type RightClickMenu = ComputedRef - -export interface TableSettingProvider { - modelRightClickMenu: RightClickMenu - modelColumns: SettingOptions - size: ComponentSize - rayTableUUID: string +export interface DownloadTableOptions { + fileName?: string + // icon?: TableActionIcon } -export interface ExportExcelProvider { - exportTooltip: string - exportType: string - exportPositiveText: string - exportNegativeText: string - exportFilename: string +export interface PrintTableOptions { + // icon?: TableActionIcon + printOptions?: Omit + type?: PrintConfiguration.PrintTypes } -export type ColumnKey = string | number - -declare type VNodeChildAtom = - | VNode - | string - | number - | boolean - | null - | undefined - | void - -export declare type VNodeArrayChildren = Array< - VNodeArrayChildren | VNodeChildAtom -> - -export declare type VNodeChild = VNodeChildAtom | VNodeArrayChildren - -export declare type TableColumnTitle = - | string - | ((column: DataTableBaseColumn) => VNodeChild) - -export declare type RayTableInst = { - tableMethods: Omit +export interface TableProvider { + uuidWrapper: string + uuidTable: string } + +export interface C extends DataTableBaseColumn { + leftFixedActivated?: boolean + rightFixedActivated?: boolean + resizable?: boolean +} + +export type OverridesTableColumn = C | DataTableColumn + +export interface TableInst extends Omit {} diff --git a/src/components/RTransitionComponent/index.vue b/src/components/RTransitionComponent/index.vue index 93a7edc4..24941a4f 100644 --- a/src/components/RTransitionComponent/index.vue +++ b/src/components/RTransitionComponent/index.vue @@ -34,7 +34,7 @@ import type { PropType } from 'vue' * 常用方法即是声明该组件的 name inheritAttrs 等属性 */ defineOptions({ - name: 'TransitionComponent', + name: 'RTransitionComponent', }) defineProps({ diff --git a/src/directives/helper/combine.ts b/src/directives/helper/combine.ts index d0f60f49..9600bb96 100644 --- a/src/directives/helper/combine.ts +++ b/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>) diff --git a/src/directives/index.ts b/src/directives/index.ts index 6fc8e1ba..e419739f 100644 --- a/src/directives/index.ts +++ b/src/directives/index.ts @@ -40,7 +40,7 @@ export const setupDirectives = (app: App) => { 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`) } diff --git a/src/directives/type.ts b/src/directives/type.ts index 1cfa0563..acaa6d07 100644 --- a/src/directives/type.ts +++ b/src/directives/type.ts @@ -6,8 +6,8 @@ export type { ThrottleBindingOptions } from './modules/throttle/type' export type CustomDirectiveFC = () => Directive -export interface DirectiveModules extends Object { - default: CustomDirectiveFC +export interface DirectiveModules extends Object { + default: CustomDirectiveFC } export type AppType = App diff --git a/src/icons/A_README.md b/src/icons/A_README.md index 5ffe5148..b2d36d77 100644 --- a/src/icons/A_README.md +++ b/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` 作为图标使用 diff --git a/src/icons/row_end.svg b/src/icons/row_end.svg new file mode 100644 index 00000000..14b913c4 --- /dev/null +++ b/src/icons/row_end.svg @@ -0,0 +1,9 @@ + + + + \ No newline at end of file diff --git a/src/icons/row_head.svg b/src/icons/row_head.svg new file mode 100644 index 00000000..962e93dc --- /dev/null +++ b/src/icons/row_head.svg @@ -0,0 +1,9 @@ + + + + \ No newline at end of file diff --git a/src/layout/components/Menu/components/SiderBarLogo/index.tsx b/src/layout/components/Menu/components/SiderBarLogo/index.tsx index a26d525d..725a29a5 100644 --- a/src/layout/components/Menu/components/SiderBarLogo/index.tsx +++ b/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 }) => ( - + ) return { diff --git a/src/layout/components/MenuTag/index.tsx b/src/layout/components/MenuTag/index.tsx index 87794234..df39dddf 100644 --- a/src/layout/components/MenuTag/index.tsx +++ b/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} > -
- - + return } else if (typeof icon === 'function') { return () => icon } else { - return + return } } @@ -277,7 +277,7 @@ const GlobalSeach = defineComponent({ onInput={this.handleSearchMenuOptions.bind(this)} > {{ - prefix: () => , + prefix: () => , }}
@@ -324,7 +324,7 @@ const GlobalSeach = defineComponent({ {curr.plain ? ( {curr.icon} ) : ( - + )}
{curr.label}
diff --git a/src/layout/components/SiderBar/components/SettingDrawer/components/ThemeSwitch/index.tsx b/src/layout/components/SiderBar/components/SettingDrawer/components/ThemeSwitch/index.tsx index 31316c85..e25b3822 100644 --- a/src/layout/components/SiderBar/components/SettingDrawer/components/ThemeSwitch/index.tsx +++ b/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', }, diff --git a/src/layout/components/SiderBar/components/TooltipIcon/index.tsx b/src/layout/components/SiderBar/components/TooltipIcon/index.tsx index c340c5ed..aa8bc882 100644 --- a/src/layout/components/SiderBar/components/TooltipIcon/index.tsx +++ b/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({ {{ trigger: () => ( - {{ trigger: () => ( - - { 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 = {} diff --git a/src/router/README.md b/src/router/README.md index e023bff5..6de1dea3 100644 --- a/src/router/README.md +++ b/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: 是否显示 diff --git a/src/store/modules/menu/helper.ts b/src/store/modules/menu/helper.ts index 966404bc..252f5b58 100644 --- a/src/store/modules/menu/helper.ts +++ b/src/store/modules/menu/helper.ts @@ -12,7 +12,7 @@ /** 本方法感谢 的支持 */ 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, diff --git a/src/types/modules/element.ts b/src/types/modules/element.ts new file mode 100644 index 00000000..b7cd1b0c --- /dev/null +++ b/src/types/modules/element.ts @@ -0,0 +1,8 @@ +import type { VueInstance } from './vue' + +export type MaybeElement = + | HTMLElement + | SVGElement + | VueInstance + | undefined + | null diff --git a/src/types/modules/utils.ts b/src/types/modules/utils.ts index 95c06d50..adffec41 100644 --- a/src/types/modules/utils.ts +++ b/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 AnyVoidFunc = (...args: any[]) => void +export type AnyFC

= (...args: P[]) => R export type PartialCSSStyleDeclaration = Partial< Record @@ -56,3 +54,5 @@ export type PartialCSSStyleDeclaration = Partial< export type ElementSelector = string | `attr:${string}` export type MaybeArray = T | T[] + +export type DownloadAnyFileDataType = Blob | File | string | ArrayBuffer diff --git a/src/types/modules/vue.ts b/src/types/modules/vue.ts new file mode 100644 index 00000000..f17ebd32 --- /dev/null +++ b/src/types/modules/vue.ts @@ -0,0 +1,14 @@ +import type { ComponentPublicInstance, MaybeRef } from 'vue' +import type { MaybeElement } from './element' + +export type MaybeElementRef = MaybeRef + +export type VueInstance = ComponentPublicInstance + +export type MaybeRefOrGetter = MaybeRef | (() => T) + +export type MaybeComputedElementRef = + MaybeRefOrGetter + +export type UnRefElementReturn = + T extends VueInstance ? Exclude : T | undefined diff --git a/src/utils/hook.ts b/src/utils/hook.ts index f330c5ef..6d416bdc 100644 --- a/src/utils/hook.ts +++ b/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 => { + return new Promise((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() + }) +} diff --git a/src/utils/vue/index.ts b/src/utils/vue/index.ts index c31e40a5..d51a6714 100644 --- a/src/utils/vue/index.ts +++ b/src/utils/vue/index.ts @@ -1 +1,2 @@ export { call } from './call' +export { unrefElement } from './unrefElement' diff --git a/src/utils/vue/unrefElement.ts b/src/utils/vue/unrefElement.ts new file mode 100644 index 00000000..78583201 --- /dev/null +++ b/src/utils/vue/unrefElement.ts @@ -0,0 +1,25 @@ +/** + * + * @author 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( + elRef: MaybeComputedElementRef, +): UnRefElementReturn { + const plain = toValue(elRef) + + return (plain as VueInstance)?.$el ?? plain +} diff --git a/src/views/dashboard/index.tsx b/src/views/dashboard/index.tsx index a426e71e..100db244 100644 --- a/src/views/dashboard/index.tsx +++ b/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: () => ( - + 努力搬砖、努力摸鱼, 建设美丽家园 ), @@ -91,7 +91,7 @@ const Dashboard = defineComponent({ {{ header: () => h( - RayIcon, + RIcon, { name: 'ray', size: '64', diff --git a/src/views/demo/mock-demo/index.tsx b/src/views/demo/mock-demo/index.tsx index 3751b313..1b6cbb76 100644 --- a/src/views/demo/mock-demo/index.tsx +++ b/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 RayCollapseGrid from '@/components/RCollapseGrid/index' +import RTable from '@/components/RTable/index' +import RCollapseGrid from '@/components/RCollapseGrid/index' import { useHookPlusRequest } from '@/axios/index' import { getPersonList } from '@/axios/api/demo/mock/person' @@ -49,7 +49,7 @@ const MockDemo = defineComponent({ console.log(data) }, }) - const columns = [ + const columns = ref([ { title: 'id', key: 'id', @@ -111,7 +111,7 @@ const MockDemo = defineComponent({ ) }, }, - ] + ]) const condition = reactive({ email: null, }) @@ -157,13 +157,13 @@ const MockDemo = defineComponent({

- RayTable + RTable 组件有一个比较值得注意的地方就是，该组件会自动的按照数据量计算分页条数。所以你在异步获取数据的时候，一定要手动设置 remote 属性为 true，并且设置 itemCount 或者 pageCount。

- + {{ default: () => ( <> @@ -178,16 +178,15 @@ const MockDemo = defineComponent({ ), }} - + - ) diff --git a/src/views/demo/router-demo/router-demo-home/index.tsx b/src/views/demo/router-demo/router-demo-home/index.tsx index 9b9ef7bb..8c743912 100644 --- a/src/views/demo/router-demo/router-demo-home/index.tsx +++ b/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 = [ + const columns: Ref> = 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 ( - + ) }, diff --git a/src/views/demo/svg-icons/index.tsx b/src/views/demo/svg-icons/index.tsx index 1c0e8441..6b0347e7 100644 --- a/src/views/demo/svg-icons/index.tsx +++ b/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) => (
`} + v-copy={``} > {{ trigger: () => ( - + ), default: () => curr, }} diff --git a/src/views/demo/table/index.tsx b/src/views/demo/table/index.tsx index 77d4355d..4759813c 100644 --- a/src/views/demo/table/index.tsx +++ b/src/views/demo/table/index.tsx @@ -24,11 +24,11 @@ import { NLi, NSpace, } from 'naive-ui' -import RayTable from '@/components/RTable/index' -import RayCollapseGrid from '@/components/RCollapseGrid/index' +import RCollapseGrid from '@/components/RCollapseGrid/index' +import RTable from '@/components/RTable/index' import type { DataTableColumns } from 'naive-ui' -import type { RayTableInst } from '@/components/RTable/index' +import type { TableInst } from '@/components/RTable/index' type RowData = { key: number @@ -41,7 +41,7 @@ type RowData = { const TableView = defineComponent({ name: 'TableView', setup() { - const tableRef = ref() + const tableRef = ref() const baseColumns = [ { @@ -142,16 +142,10 @@ const TableView = defineComponent({ tableLoading: false, }) - const handleMenuSelect = (key: string | number, idx: number) => { - if (key === 'delete') { - tableData.value.splice(idx, 1) - } + const handleMenuSelect = (key: string | number) => { + window.$message.info(`${key}`) } - onMounted(() => { - console.log(tableRef.value?.tableMethods) - }) - return { ...toRefs(state), tableData, @@ -190,13 +184,13 @@ const TableView = defineComponent({ 点击打印按钮即可打印该表格 右键菜单 全屏表格 - window.$message.info( - `我是 RayCollapseGrid 组件${value ? '收起' : '展开'}的回调函数`, + `我是 RCollapseGrid 组件${value ? '收起' : '展开'}的回调函数`, ) } > @@ -227,8 +221,29 @@ const TableView = defineComponent({ ), }} - - + + 标题插槽: + (this.tableLoading = value)} + > + + } + data={this.tableData} + v-model:columns={this.actionColumns} + pagination={{ + pageSize: 10, + }} + contextMenuOptions={this.tableMenuOptions} + loading={this.tableLoading} + onContextMenuClick={this.handleMenuSelect.bind(this)} + > + {/* '表格的底部内容区域插槽，有时候你可能会用上', }} - + */}
) }, diff --git a/src/views/login/components/SSOSignin/index.tsx b/src/views/login/components/SSOSignin/index.tsx index 10b1bb01..315ea45f 100644 --- a/src/views/login/components/SSOSignin/index.tsx +++ b/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({ {{ trigger: () => ( -