version: v4.2.5

.eslintignore

@@ -13,6 +13,6 @@ visualizer.html
 .env.*
 src/locales/lang
 .depcheckrc
-src/components/RChart/theme
+src/echart-themes/**/*.json
 *.md
 src/icons/*.svg

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

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 {

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

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 (
       <AppNaiveGlobalProvider>
         <AppLockScreen />
         <AppStyleProvider />
-
+        <AppWatermarkProvider />
         <AppGlobalSpin>
           {{
             default: () => <RouterView />,
@@ -22,5 +23,3 @@ const App = defineComponent({
     )
   },
 })
-
-export default App

src/app-components/provider/AppWatermarkProvider/index.tsx

@@ -0,0 +1,31 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-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 ? (
+      <NWatermark cross fullscreen {...APP_WATERMARK_CONFIG} />
+    ) : null
+  },
+})

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

src/app-config/designConfig.ts

@@ -45,6 +45,10 @@ export const APP_THEME: AppTheme = {
    *   - APP_PRIMARY_COLOR common 配置优先级大于该配置
    *
    * 如果需要定制化整体组件样式, 配置示例
+   * 具体自行查看官网, 还有模式更佳丰富的 peers 主题变量配置
+   * 地址: <https://www.naiveui.com/zh-CN/dark/docs/customize-theme#%E4%BD%BF%E7%94%A8-peers-%E4%B8%BB%E9%A2%98%E5%8F%98%E9%87%8F>
+   *
+   * @example
    * ```
    * const themeOverrides: GlobalThemeOverrides = {
    *   common: {
@@ -55,9 +59,6 @@ export const APP_THEME: AppTheme = {
    *   },
    * }
    * ```
-   *
-   * 具体自行查看官网, 还有模式更佳丰富的 peers 主题变量配置
-   * 地址: <https://www.naiveui.com/zh-CN/dark/docs/customize-theme#%E4%BD%BF%E7%94%A8-peers-%E4%B8%BB%E9%A2%98%E5%8F%98%E9%87%8F>
    */
   APP_NAIVE_UI_THEME_OVERRIDES: {},
   /**

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<string, ChartThemeRawModules> =
-    import.meta.glob('@/components/RChart/theme/**/*.json', {
+    import.meta.glob('@/echart-themes/**/*.json', {
       eager: true,
     })
   const regx = /\/([^/]+)\.json$/

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

src/components/RCollapseGrid/index.ts

@@ -1,3 +1,5 @@
 import RCollapseGrid from './src/index'
+import props from './src/props'
 
 export default RCollapseGrid
+export { props }

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)
 

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` 实现
- *
- * 继承该组件所有属性和方法, <https://www.naiveui.com/zh-CN/dark/components/grid>
- *
- * `xGap` 默认 `12`
- *
- * `yGap` 默认 `18`
- */
+export default props

src/components/RMoreDropdown/index.ts

@@ -0,0 +1,5 @@
+import RMoreDropdown from './src/index'
+import props from './src/props'
+
+export default RMoreDropdown
+export { props }

src/components/RMoreDropdown/src/index.tsx

@@ -0,0 +1,33 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-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 (
+      <NDropdown {...this.$props} {...this.$attrs}>
+        {this.$slots.default ? (
+          this.$slots.default()
+        ) : (
+          <RIcon name="more" size={iconSize} />
+        )}
+      </NDropdown>
+    )
+  },
+})

src/components/RMoreDropdown/src/props.ts

@@ -0,0 +1,22 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-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

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) => {

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 文件，文件名为主题名称

src/layout/components/Menu/index.tsx

@@ -71,6 +71,7 @@ const LayoutMenu = defineComponent({
         <SiderBarLogo collapsed={this.modelCollapsed} />
         <NMenu
           ref="menuRef"
+          class="r-menu--app"
           v-model:value={this.modelMenuKey}
           options={this.modelMenuOptions as NaiveMenuOptions[]}
           indent={APP_MENU_CONFIG.MENU_COLLAPSED_INDENT}

src/layout/components/MenuTag/index.tsx

@@ -27,6 +27,7 @@ import './index.scss'
 
 import { NScrollbar, NTag, NSpace, NLayoutHeader, NDropdown } from 'naive-ui'
 import RIcon from '@/components/RIcon/index'
+import RMoreDropdown from '@/components/RMoreDropdown/index'
 
 import { useMenu, useSetting } from '@/store'
 import { uuid } from '@/utils/hook'
@@ -38,7 +39,7 @@ import { queryElements } from '@use-utils/element'
 import type { MenuOption, ScrollbarInst } from 'naive-ui'
 import type { MenuTagOptions, AppMenuOption } from '@/types/modules/app'
 
-const MenuTag = defineComponent({
+export default defineComponent({
   name: 'MenuTag',
   setup(_, { expose }) {
     const scrollRef = ref<ScrollbarInst | null>(null)
@@ -525,10 +526,11 @@ const MenuTag = defineComponent({
                 customClassName="menu-tag__right-arrow"
                 onClick={this.handleScrollX.bind(this, 'right')}
               />
-              <NDropdown
+              <RMoreDropdown
                 options={this.moreOptions}
                 trigger="click"
                 onSelect={this.actionDropdownSelect.bind(this)}
+                iconSize={20}
               >
                 <RIcon
                   name="more"
@@ -537,7 +539,7 @@ const MenuTag = defineComponent({
                   customClassName="menu-tag__right-setting"
                   onClick={this.setCurrentContentmenuIndex.bind(this)}
                 />
-              </NDropdown>
+              </RMoreDropdown>
             </div>
           </NSpace>
         </div>
@@ -545,5 +547,3 @@ const MenuTag = defineComponent({
     )
   },
 })
-
-export default MenuTag

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({
                   }
                 />
               </NDescriptionsItem>
+              <NDescriptionsItem label="水印">
+                <NSwitch
+                  v-model:value={this.watermarkSwitch}
+                  onUpdateValue={(bool: boolean) =>
+                    this.changeSwitcher(bool, 'watermarkSwitch')
+                  }
+                />
+              </NDescriptionsItem>
               <NDescriptionsItem label="版权信息">
                 <NSwitch
                   v-model:value={this.footerSwitch}

src/layout/components/SiderBar/index.tsx

@@ -177,7 +177,7 @@ const SiderBar = defineComponent({
                 }}
               </NTooltip>
             ))}
-            {this.breadcrumbSwitch ? <Breadcrumb /> : ''}
+            {this.breadcrumbSwitch ? <Breadcrumb /> : null}
           </NSpace>
           <NSpace
             align="center"

src/layout/index.tsx

@@ -23,7 +23,7 @@ import { LAYOUT_CONTENT_REF } from '@/app-config/routerConfig'
 import { layoutHeaderCssVars } from '@/layout/layoutResize'
 import useAppLockScreen from '@/app-components/app/AppLockScreen/appLockVar'
 
-const RLayout = defineComponent({
+export default defineComponent({
   name: 'RLayout',
   setup() {
     const layoutSiderBarRef = ref<HTMLElement>()
@@ -68,11 +68,9 @@ const RLayout = defineComponent({
           >
             <ContentWrapper />
           </NLayoutContent>
-          {this.footerSwitch ? <FooterWrapper ref="layoutFooterRef" /> : ''}
+          {this.footerSwitch ? <FooterWrapper ref="layoutFooterRef" /> : null}
         </NLayoutContent>
       </NLayout>
     ) : null
   },
 })
-
-export default RLayout

src/store/modules/setting/index.ts

@@ -38,6 +38,7 @@ export const useSetting = defineStore(
       lockScreenInputSwitch: false, // 锁屏输入状态开关(预留该字段是为了方便拓展用, 但是舍弃了该字段, 改为使用 useAppLockScreen 方法)
       footerSwitch: true, // 底部区域开关
       contentTransition: 'scale', // 切换过渡效果
+      watermarkSwitch: false, // 水印开关,
     })
 
     /** 更新过渡效果 */

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
 }

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

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,13 +84,25 @@ const TableView = defineComponent({
       {
         title: 'Action',
         key: 'actions',
-        render: (row: RowData) =>
-          h(
-            NButton,
+        render: (row: RowData) => (
+          <NSpace wrapItem={false} align="center">
+            <NButton size="tiny">查看</NButton>
+            <RMoreDropdown
+              options={[
                 {
-              size: 'small',
+                  label: '编辑',
+                  key: 'edit',
                 },
-            { default: () => 'Send Email' },
+                {
+                  label: '新增',
+                  key: 'add',
+                },
+              ]}
+              onSelect={(key) => {
+                window.$message.info(`当前选择: ${key}`)
+              }}
+            />
+          </NSpace>
         ),
       },
     ]

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