From 9e3f199d21fabaf0c262203c2c1ed370bbd502f3 Mon Sep 17 00:00:00 2001 From: XiaoDaiGua-Ray <443547225@qq.com> Date: Sun, 22 Oct 2023 00:11:20 +0800 Subject: [PATCH] version: v4.2.5 --- .eslintignore | 2 +- CHANGELOG.md | 16 +++++++++ index.html | 3 +- package.json | 4 +-- src/App.tsx | 7 ++-- .../provider/AppWatermarkProvider/index.tsx | 31 +++++++++++++++++ src/app-config/appConfig.ts | 16 +++++++++ src/app-config/designConfig.ts | 7 ++-- src/components/RChart/helper.ts | 4 +-- src/components/RChart/index.tsx | 5 +-- src/components/RCollapseGrid/index.ts | 2 ++ src/components/RCollapseGrid/src/index.tsx | 5 ++- src/components/RCollapseGrid/src/props.ts | 13 ++------ src/components/RMoreDropdown/index.ts | 5 +++ src/components/RMoreDropdown/src/index.tsx | 33 +++++++++++++++++++ src/components/RMoreDropdown/src/props.ts | 22 +++++++++++++ src/components/RTable/src/Table.tsx | 13 +++----- src/echart-themes/README.md | 10 ++++++ .../macarons/macarons-dark.json | 0 .../macarons/macarons.json | 0 src/layout/components/Menu/index.tsx | 1 + src/layout/components/MenuTag/index.tsx | 10 +++--- .../components/SettingDrawer/index.tsx | 10 ++++++ src/layout/components/SiderBar/index.tsx | 2 +- src/layout/index.tsx | 6 ++-- src/store/modules/setting/index.ts | 1 + src/store/modules/setting/type.ts | 1 + src/styles/naive.scss | 5 +++ src/views/demo/table/index.tsx | 29 +++++++++++----- vite.pliugin.config.ts | 2 ++ 30 files changed, 209 insertions(+), 56 deletions(-) create mode 100644 src/app-components/provider/AppWatermarkProvider/index.tsx create mode 100644 src/components/RMoreDropdown/index.ts create mode 100644 src/components/RMoreDropdown/src/index.tsx create mode 100644 src/components/RMoreDropdown/src/props.ts create mode 100644 src/echart-themes/README.md rename src/{components/RChart/theme => echart-themes}/macarons/macarons-dark.json (100%) rename src/{components/RChart/theme => echart-themes}/macarons/macarons.json (100%) diff --git a/.eslintignore b/.eslintignore index 74e0c783..a0b7dd4d 100644 --- a/.eslintignore +++ b/.eslintignore @@ -13,6 +13,6 @@ visualizer.html .env.* src/locales/lang .depcheckrc -src/components/RChart/theme +src/echart-themes/**/*.json *.md src/icons/*.svg \ No newline at end of file diff --git a/CHANGELOG.md b/CHANGELOG.md index 96202187..efb66837 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,21 @@ # CHANGE LOG +## 4.2.5 + +### Feats + +- 同步更新 vue 版本至 v3.3.6 +- RChart 组件相关改动 + - RChart 主题配置提取至 src/echart-themes 包中管理。添加方式和规则不变 + - 调整 RChart setupChartTheme 运行时机，现在不会重复运行该方法获取主题 +- 新增 AppWatermarkProvider 组件与 appConifg APP_WATERMARK_CONFIG 相关配置项 +- 新增 AppMenu 激活、hover 样式 +- 新增 RMoreDropdown 组件，基于 NDropDown，默认以 `...` 展示下拉，允许自定义图标 + +### Fixes + +- 紧急修复构建 cdn vue-demi 依赖丢失问题 + ## 4.2.4 ### Feats diff --git a/index.html b/index.html index b5fa5c4e..bfe8e1c1 100644 --- a/index.html +++ b/index.html @@ -41,8 +41,9 @@ #pre-loading-animation .pre-loading-animation__wrapper .pre-loading-animation__wrapper-title { - font-size: 30px; + font-size: 32px; padding-bottom: 48px; + font-weight: 500; } .pre-loading-animation__wrapper-loading { diff --git a/package.json b/package.json index 50add615..cf23a26e 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "ray-template", "private": false, - "version": "4.2.4", + "version": "4.2.5", "type": "module", "engines": { "node": ">=16.0.0", @@ -38,7 +38,7 @@ "pinia": "^2.1.4", "pinia-plugin-persistedstate": "^3.1.0", "print-js": "^1.6.0", - "vue": "^3.3.4", + "vue": "^3.3.6", "vue-hooks-plus": "1.8.5", "vue-i18n": "^9.2.2", "vue-router": "^4.2.4", diff --git a/src/App.tsx b/src/App.tsx index 6e9f5d60..ee1b0962 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -2,16 +2,17 @@ import { RouterView } from 'vue-router' import AppNaiveGlobalProvider from '@/app-components/provider/AppNaiveGlobalProvider/index' import AppStyleProvider from '@/app-components/provider/AppStyleProvider/index' import AppLockScreen from '@/app-components/app/AppLockScreen/index' +import AppWatermarkProvider from '@/app-components/provider/AppWatermarkProvider/index' import AppGlobalSpin from '@/spin/index' -const App = defineComponent({ +export default defineComponent({ name: 'App', render() { return ( - + {{ default: () => , @@ -22,5 +23,3 @@ const App = defineComponent({ ) }, }) - -export default App diff --git a/src/app-components/provider/AppWatermarkProvider/index.tsx b/src/app-components/provider/AppWatermarkProvider/index.tsx new file mode 100644 index 00000000..5ac67557 --- /dev/null +++ b/src/app-components/provider/AppWatermarkProvider/index.tsx @@ -0,0 +1,31 @@ +/** + * + * @author Ray + * + * @date 2023-10-21 + * + * @workspace ray-template + * + * @remark 今天也是元气满满撸代码的一天 + */ + +import { NWatermark } from 'naive-ui' + +import { APP_WATERMARK_CONFIG } from '@/app-config/appConfig' +import { useSetting } from '@/store' + +export default defineComponent({ + name: 'AppWatermarkProvider', + setup() { + const { watermarkSwitch } = storeToRefs(useSetting()) + + return { + watermarkSwitch, + } + }, + render() { + return this.watermarkSwitch ? ( + + ) : null + }, +}) diff --git a/src/app-config/appConfig.ts b/src/app-config/appConfig.ts index cfaf41b1..1e0cac46 100644 --- a/src/app-config/appConfig.ts +++ b/src/app-config/appConfig.ts @@ -108,3 +108,19 @@ export const APP_CATCH_KEY = { localeLanguage: 'localeLanguage', token: 'token', } as const + +/** + * + * 系统水印配置 + * 具体配置信息查看官网: https://www.naiveui.com/zh-CN/dark/components/watermark#API + */ +export const APP_WATERMARK_CONFIG = { + content: 'Tring be better~', + fontSize: 16, + lineHeight: 16, + width: 384, + height: 384, + xOffset: 12, + yOffset: 60, + rotate: -15, +} as const diff --git a/src/app-config/designConfig.ts b/src/app-config/designConfig.ts index f07b04bb..85676825 100644 --- a/src/app-config/designConfig.ts +++ b/src/app-config/designConfig.ts @@ -45,6 +45,10 @@ export const APP_THEME: AppTheme = { * - APP_PRIMARY_COLOR common 配置优先级大于该配置 * * 如果需要定制化整体组件样式, 配置示例 + * 具体自行查看官网, 还有模式更佳丰富的 peers 主题变量配置 + * 地址: + * + * @example * ``` * const themeOverrides: GlobalThemeOverrides = { * common: { @@ -55,9 +59,6 @@ export const APP_THEME: AppTheme = { * }, * } * ``` - * - * 具体自行查看官网, 还有模式更佳丰富的 peers 主题变量配置 - * 地址: */ APP_NAIVE_UI_THEME_OVERRIDES: {}, /** diff --git a/src/components/RChart/helper.ts b/src/components/RChart/helper.ts index 8b012084..afc6437e 100644 --- a/src/components/RChart/helper.ts +++ b/src/components/RChart/helper.ts @@ -26,12 +26,12 @@ import type { * 1. 配置、选择主题 * 2. 点击下载主题 * 3. 选择 json 类型，然后复制 - * 4. 在 @/components/RChart/theme 包中创建对应的 json 文件，文件名为主题名称 + * 4. 在 @/echart-themes 包中创建对应的 json 文件，文件名为主题名称 */ export const setupChartTheme = () => { // 获取所有主题 const themeRawModules: Record = - import.meta.glob('@/components/RChart/theme/**/*.json', { + import.meta.glob('@/echart-themes/**/*.json', { eager: true, }) const regx = /\/([^/]+)\.json$/ diff --git a/src/components/RChart/index.tsx b/src/components/RChart/index.tsx index 366775cc..610ec779 100644 --- a/src/components/RChart/index.tsx +++ b/src/components/RChart/index.tsx @@ -52,7 +52,7 @@ import type { AnyFC } from '@/types/modules/utils' import type { DebouncedFunc } from 'lodash-es' import type { ChartTheme } from '@/components/RChart/type' import type { UseResizeObserverReturn } from '@vueuse/core' -import type { ECharts, EChartsCoreOption, SetOptionOpts } from 'echarts/core' +import type { ECharts, EChartsCoreOption } from 'echarts/core' export type { RayChartInst, EChartsExtensionInstallRegisters } from './type' @@ -62,6 +62,7 @@ const defaultChartOptions = { silent: false, replaceMerge: [], } +const echartThemes = setupChartTheme() export default defineComponent({ name: 'RChart', @@ -181,7 +182,7 @@ export default defineComponent({ try { /** 注册主题 */ - setupChartTheme().forEach((curr) => { + echartThemes.forEach((curr) => { echarts.registerTheme(curr.name, curr.theme) }) diff --git a/src/components/RCollapseGrid/index.ts b/src/components/RCollapseGrid/index.ts index ecd88924..3827b893 100644 --- a/src/components/RCollapseGrid/index.ts +++ b/src/components/RCollapseGrid/index.ts @@ -1,3 +1,5 @@ import RCollapseGrid from './src/index' +import props from './src/props' export default RCollapseGrid +export { props } diff --git a/src/components/RCollapseGrid/src/index.tsx b/src/components/RCollapseGrid/src/index.tsx index fa36ce4e..cc0ffb66 100644 --- a/src/components/RCollapseGrid/src/index.tsx +++ b/src/components/RCollapseGrid/src/index.tsx @@ -21,16 +21,15 @@ import './index.scss' -import { collapseGridProps } from './props' - import { NCard, NGrid, NGridItem, NSpace } from 'naive-ui' import RIcon from '@/components/RIcon' import { call } from '@/utils/vue/index' +import props from './props' const RCollapseGrid = defineComponent({ name: 'RCollapseGrid', - props: collapseGridProps, + props, setup(props) { const modelCollapsed = ref(!props.open) diff --git a/src/components/RCollapseGrid/src/props.ts b/src/components/RCollapseGrid/src/props.ts index ba3dfc37..c9e97dda 100644 --- a/src/components/RCollapseGrid/src/props.ts +++ b/src/components/RCollapseGrid/src/props.ts @@ -4,7 +4,7 @@ import type { PropType } from 'vue' import type { CollapseToggleText } from './type' import type { AnyFC, MaybeArray } from '@/types/modules/utils' -export const collapseGridProps = { +const props = { open: { /** * @@ -50,13 +50,4 @@ export const collapseGridProps = { ...gridProps, } as const -/** - * - * 基于 `NGird` 实现 - * - * 继承该组件所有属性和方法, - * - * `xGap` 默认 `12` - * - * `yGap` 默认 `18` - */ +export default props diff --git a/src/components/RMoreDropdown/index.ts b/src/components/RMoreDropdown/index.ts new file mode 100644 index 00000000..d7c8a501 --- /dev/null +++ b/src/components/RMoreDropdown/index.ts @@ -0,0 +1,5 @@ +import RMoreDropdown from './src/index' +import props from './src/props' + +export default RMoreDropdown +export { props } diff --git a/src/components/RMoreDropdown/src/index.tsx b/src/components/RMoreDropdown/src/index.tsx new file mode 100644 index 00000000..312168a9 --- /dev/null +++ b/src/components/RMoreDropdown/src/index.tsx @@ -0,0 +1,33 @@ +/** + * + * @author Ray + * + * @date 2023-10-21 + * + * @workspace ray-template + * + * @remark 今天也是元气满满撸代码的一天 + */ + +import { NDropdown } from 'naive-ui' +import RIcon from '@/components/RIcon/index' + +import props from './props' + +export default defineComponent({ + name: 'RMoreDropdown', + props, + render() { + const { iconSize } = this + + return ( + + {this.$slots.default ? ( + this.$slots.default() + ) : ( + + )} + + ) + }, +}) diff --git a/src/components/RMoreDropdown/src/props.ts b/src/components/RMoreDropdown/src/props.ts new file mode 100644 index 00000000..b22a6ac6 --- /dev/null +++ b/src/components/RMoreDropdown/src/props.ts @@ -0,0 +1,22 @@ +/** + * + * @author Ray + * + * @date 2023-10-21 + * + * @workspace ray-template + * + * @remark 今天也是元气满满撸代码的一天 + */ + +import { dropdownProps } from 'naive-ui' + +const props = { + ...dropdownProps, + iconSize: { + type: Number, + default: 14, + }, +} + +export default props diff --git a/src/components/RTable/src/Table.tsx b/src/components/RTable/src/Table.tsx index 4ccd12c0..e4d169af 100644 --- a/src/components/RTable/src/Table.tsx +++ b/src/components/RTable/src/Table.tsx @@ -21,13 +21,8 @@ import props from './props' import { call } from '@/utils/vue/index' import { uuid } from '@use-utils/hook' import config from './config' -import { throttle } from 'lodash-es' -import type { - DropdownOption, - DataTableInst, - DataTableCreateRowProps, -} from 'naive-ui' +import type { DropdownOption, DataTableInst } from 'naive-ui' import type { ComponentSize } from '@/types/modules/component' import type { C as CType } from './type' @@ -113,9 +108,9 @@ export default defineComponent({ const renderToolOptions = () => { const { toolOptions } = props - return toolOptions?.map((curr) => - typeof curr === 'function' ? curr() : curr, - ) + return toolOptions + ?.filter(() => Boolean) + .map((curr) => (typeof curr === 'function' ? curr() : curr)) } const tool = (p: typeof props) => { diff --git a/src/echart-themes/README.md b/src/echart-themes/README.md new file mode 100644 index 00000000..29b455c3 --- /dev/null +++ b/src/echart-themes/README.md @@ -0,0 +1,10 @@ +## Echart Theme 编辑器 + +官网地址: https://echarts.apache.org/zh/theme-builder.html + +## 流程 + +1. 配置、选择主题 +2. 点击下载主题 +3. 选择 json 类型，然后复制 +4. 在 @/echart-themes 包中创建对应的 json 文件，文件名为主题名称 diff --git a/src/components/RChart/theme/macarons/macarons-dark.json b/src/echart-themes/macarons/macarons-dark.json similarity index 100% rename from src/components/RChart/theme/macarons/macarons-dark.json rename to src/echart-themes/macarons/macarons-dark.json diff --git a/src/components/RChart/theme/macarons/macarons.json b/src/echart-themes/macarons/macarons.json similarity index 100% rename from src/components/RChart/theme/macarons/macarons.json rename to src/echart-themes/macarons/macarons.json diff --git a/src/layout/components/Menu/index.tsx b/src/layout/components/Menu/index.tsx index 3d842e2f..d68c5815 100644 --- a/src/layout/components/Menu/index.tsx +++ b/src/layout/components/Menu/index.tsx @@ -71,6 +71,7 @@ const LayoutMenu = defineComponent({ (null) @@ -525,10 +526,11 @@ const MenuTag = defineComponent({ customClassName="menu-tag__right-arrow" onClick={this.handleScrollX.bind(this, 'right')} /> - - + @@ -545,5 +547,3 @@ const MenuTag = defineComponent({ ) }, }) - -export default MenuTag diff --git a/src/layout/components/SiderBar/components/SettingDrawer/index.tsx b/src/layout/components/SiderBar/components/SettingDrawer/index.tsx index 725f5b07..f68bef75 100644 --- a/src/layout/components/SiderBar/components/SettingDrawer/index.tsx +++ b/src/layout/components/SiderBar/components/SettingDrawer/index.tsx @@ -50,6 +50,7 @@ const SettingDrawer = defineComponent({ breadcrumbSwitch, footerSwitch, contentTransition, + watermarkSwitch, } = storeToRefs(settingStore) const modelShow = computed({ @@ -90,6 +91,7 @@ const SettingDrawer = defineComponent({ contentTransitionOptions, contentTransition, updateContentTransition, + watermarkSwitch, } }, render() { @@ -145,6 +147,14 @@ const SettingDrawer = defineComponent({ } /> + + + this.changeSwitcher(bool, 'watermarkSwitch') + } + /> + ))} - {this.breadcrumbSwitch ? : ''} + {this.breadcrumbSwitch ? : null} () @@ -68,11 +68,9 @@ const RLayout = defineComponent({ > - {this.footerSwitch ? : ''} + {this.footerSwitch ? : null} ) : null }, }) - -export default RLayout diff --git a/src/store/modules/setting/index.ts b/src/store/modules/setting/index.ts index 7e820252..c8842cae 100644 --- a/src/store/modules/setting/index.ts +++ b/src/store/modules/setting/index.ts @@ -38,6 +38,7 @@ export const useSetting = defineStore( lockScreenInputSwitch: false, // 锁屏输入状态开关(预留该字段是为了方便拓展用, 但是舍弃了该字段, 改为使用 useAppLockScreen 方法) footerSwitch: true, // 底部区域开关 contentTransition: 'scale', // 切换过渡效果 + watermarkSwitch: false, // 水印开关, }) /** 更新过渡效果 */ diff --git a/src/store/modules/setting/type.ts b/src/store/modules/setting/type.ts index 0ec6b67a..f328855e 100644 --- a/src/store/modules/setting/type.ts +++ b/src/store/modules/setting/type.ts @@ -12,6 +12,7 @@ export interface SettingState { localeLanguage: string lockScreenSwitch: boolean lockScreenInputSwitch: boolean + watermarkSwitch: boolean footerSwitch: boolean contentTransition: string } diff --git a/src/styles/naive.scss b/src/styles/naive.scss index e3fcfd72..ccdf0d30 100644 --- a/src/styles/naive.scss +++ b/src/styles/naive.scss @@ -3,3 +3,8 @@ width: 100%; height: 100%; } + +.r-menu--app:not(.n-menu--collapsed) .n-menu-item-content.n-menu-item-content--selected:before, +.r-menu--app:not(.n-menu--collapsed) .n-menu-item-content:hover:before { + border-left: 4px solid var(--ray-theme-primary-color); +} diff --git a/src/views/demo/table/index.tsx b/src/views/demo/table/index.tsx index 8d86e782..cc30f7c2 100644 --- a/src/views/demo/table/index.tsx +++ b/src/views/demo/table/index.tsx @@ -24,6 +24,7 @@ import { import RCollapseGrid from '@/components/RCollapseGrid/index' import RTable from '@/components/RTable/index' import RIcon from '@/components/RIcon/index' +import RMoreDropdown from '@/components/RMoreDropdown/index' import type { DataTableColumns } from 'naive-ui' import type { TableInst } from '@/components/RTable/index' @@ -83,14 +84,26 @@ const TableView = defineComponent({ { title: 'Action', key: 'actions', - render: (row: RowData) => - h( - NButton, - { - size: 'small', - }, - { default: () => 'Send Email' }, - ), + render: (row: RowData) => ( + + 查看 + { + window.$message.info(`当前选择: ${key}`) + }} + /> + + ), }, ] const actionColumns = ref>( diff --git a/vite.pliugin.config.ts b/vite.pliugin.config.ts index 2beab4df..60a30cfa 100644 --- a/vite.pliugin.config.ts +++ b/vite.pliugin.config.ts @@ -163,6 +163,7 @@ export default function (mode: string): PluginOption[] { viteCDNPlugin({ modules: [ 'vue', + 'vue-demi', 'pinia', 'naive-ui', 'vue-router', @@ -172,6 +173,7 @@ export default function (mode: string): PluginOption[] { 'vuedraggable', 'xlsx', 'axios', + 'screenfull', 'print-js', 'clipboard', 'lodash-es',