version: 5.0.0

CHANGELOG.md

@@ -1,5 +1,24 @@
 # CHANGE LOG
 
+## 5.0.0
+
+## Feats
+
+- `RTable` 组件现在默认 `attrs` 透传不会再透传至 `Table` 而是透传至容器 `Card`
+- `AppAvatar` 组件获取用户信息由 `localStorage` 缓存获取变更为 `getSigningCallback` 响应式获取
+- 移除 `SUPER_ADMIN` 默认值
+- 移除 `APP_KEEP_ALIVE` 配置项，迁移至 `settingStore`
+- 移除 `SIDE_BAR_LOGO_DEFAULT` 配置项，迁移至 `settingStore`
+- 移除 `APP_MENU_CONFIG` 配置项，迁移至 `settingStore`
+- 移除所有的 `ray-template` 相关注释信息
+- `SettingDrawer` 新增更多配置项，允许通过配置入口配置更多的配置项
+- 新增 `DatePicker`, `InputNumber` 样式，默认设置 `width` 为 `100%`
+- 新增 `updateObjectValue` 方法，并且全局替换重复类似方法
+- `useTheme` 新增 `syncSystemTheme` 方法，允许同步系统主题
+- 新增 `ThemeSegment` 主题切换组件
+- 移除 `watchOnce` 方法引入，使用原生 `watch` 方法替代
+- 取消 `SettingDrawer` 自动聚焦可选中元素
+
 ## 4.9.7
 
 从该版本开始，默认关闭了 `cdn` 构建生产环境；因为国内厂商真心不给力。

mock/shared/database.ts

@@ -1,14 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-08-11
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
 import Mock from 'mockjs'
 
 /**

mock/shared/utils.ts

@@ -1,14 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-08-11
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
 export function array(length: number) {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ray-template",
   "private": false,
-  "version": "4.9.7",
+  "version": "5.0.0",
   "type": "module",
   "engines": {
     "node": "^18.0.0 || >=20.0.0",

src/api/demo/test.ts

@@ -1,14 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-03-31
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
 /**
  *
  * 该方法演示如何封装一个通用请求方法

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

@@ -1,14 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-05-31
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
 /**
  *
  * 系统管理员头像与名称
@@ -17,17 +6,13 @@
  * 默认读取本地 session catch 缓存
  */
 
-import './index.scss'
-
 import { NAvatar, NButton, NFlex } from 'naive-ui'
 
 import { avatarProps } from 'naive-ui'
-import { APP_CATCH_KEY } from '@/app-config'
+import { useSigningGetters } from '@/store'
-import { getStorage } from '@/utils'
 
 import type { PropType } from 'vue'
 import type { AvatarProps, FlexProps } from 'naive-ui'
-import type { SigningCallback } from '@/store/modules/signing/types'
 
 const AppAvatar = defineComponent({
   name: 'AppAvatar',
@@ -50,30 +35,27 @@ const AppAvatar = defineComponent({
       default: false,
     },
   },
-  setup(props) {
+  setup() {
-    const signing = getStorage<SigningCallback>(
+    const { getSigningCallback } = useSigningGetters()
-      APP_CATCH_KEY.signing,
-      'localStorage',
-    )
 
     return {
-      signing,
+      getSigningCallback,
     }
   },
   render() {
-    const { signing, avatarSize, spaceSize, $props, vertical } = this
+    const { getSigningCallback, avatarSize, spaceSize, $props, vertical } = this
 
     return (
       <NButton quaternary strong>
         <NFlex align="center" size={spaceSize} vertical={vertical}>
           <NAvatar
             {...($props as AvatarProps)}
-            src={signing?.avatar}
+            src={getSigningCallback?.avatar}
             objectFit="cover"
             round
             size={avatarSize}
           />
-          {signing?.name}
+          {getSigningCallback?.name}
         </NFlex>
       </NButton>
     )

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

@@ -1,14 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-01-18
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
 /**
  *
  * 全屏加载效果

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

@@ -1,14 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-06-20
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
 /**
  *
  * 统一管理是否处于锁屏状态

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

@@ -1,16 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-06-20
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
-/** 锁屏界面 */
-
 import { NInput, NForm, NFormItem, NButton } from 'naive-ui'
 
 import useAppLockScreen from '@/app-components/app/AppLockScreen/appLockVar'

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

@@ -1,16 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-06-20
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
-/** 解锁界面 */
-
 import { NInput, NForm, NFormItem, NButton, NFlex } from 'naive-ui'
 import AppAvatar from '@/app-components/app/AppAvatar'
 

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

@@ -1,14 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-05-13
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
 /**
  *
  * 这里没有做解锁密码校验, 只要符合校验规则值皆可

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

@@ -1,14 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-06-20
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
 import type { InputInst } from 'naive-ui'
 import type { Ref } from 'vue'
 

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

@@ -1,8 +1,3 @@
-/**
- *
- * 友情链接组件，无实际项目意义
- */
-
 import { NAvatar, NTooltip, NFlex } from 'naive-ui'
 
 interface AvatarOptions {

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

@@ -1,14 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-06-14
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
 /**
  *
  * 全局注入 naive ui 提示性组件

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

@@ -1,14 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-07-21
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
 /**
  *
  * 路由更新前，取消上一路由所有请求

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

@@ -1,14 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-07-08
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
 import { get } from 'lodash-es'
 import {
   setClass,

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

@@ -1,14 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2024-01-01
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
 /**
  *
  * 检测当前版本是否为最新版本

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

@@ -1,14 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-10-21
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
 /**
  *
  * 全局水印注入

src/app-config/app-config.ts

@@ -1,18 +1,4 @@
-/**
+import type { AppMenuConfig, PreloadingConfig } from '@/types'
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-05-23
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
-/** 系统配置 */
-
-import type { LayoutSideBarLogo, PreloadingConfig } from '@/types'
-import type { AppMenuConfig, AppKeepAlive } from '@/types'
 import type { MessageProviderProps } from 'naive-ui'
 
 /**
@@ -30,8 +16,9 @@ export const MESSAGE_PROVIDER: MessageProviderProps = {
 
 /**
  *
+ * @description
  * 是否启用路由切换 spin 加载；
- * 如果启用该配置项，啧会在路由更新时触发内容区域的加载状态，直到路由加载完成。
+ * 如果启用该配置项，则会在路由更新时触发内容区域的加载状态，直到路由加载完成。
  *
  * 在 v4.7.5 版本后，默认关闭了该配置项。
  */
@@ -39,25 +26,11 @@ export const LAYOUT_CONTENT_SPIN_WHEN_ROUTE_CHANGE = false
 
 /**
  *
- * 全局 Spin 加载内容
+ * @description
+ * 全局 Spin 加载内容。
  */
 export const APP_GLOBAL_LOADING = 'loading'
 
-/**
- *
- * 系统缓存
- *
- * 说明:
- *   - setupKeepAlive: 是否启用系统页面缓存, 设置为 false 则关闭系统页面缓存
- *   - keepAliveExclude: 排除哪些页面不缓存
- *   - maxKeepAliveLength: 最大缓存页面数量
- */
-export const APP_KEEP_ALIVE: Readonly<AppKeepAlive> = {
-  setupKeepAlive: true,
-  keepAliveExclude: [],
-  maxKeepAliveLength: 5,
-}
-
 /**
  *
  * 首屏加载信息配置
@@ -71,61 +44,26 @@ export const PRE_LOADING_CONFIG: PreloadingConfig = {
 
 /**
  *
- * icon: LOGO 图标， 依赖 `RIcon` 实现(如果为空则不会渲染图标)；4.8.2 版本后支持 VNode
+ * @description
- * title: LOGO 标题
+ * 系统缓存 key 前缀。
- * url: 点击跳转地址， 如果不配置该属性， 则不会触发跳转
+ * 可以选择自定义缓存 key 前缀，在使用 getStorage 和 setStorage 时可以考虑是否启用前缀的方式来避免缓存 key 冲突。
- * jumpType: 跳转类型(station: 项目内跳转， outsideStation: 新页面打开)
+ * 该配置项也可以结合 APP_CATCH_KEY 使用。
  *
- * 如果不设置该属性或者为空， 则不会渲染 LOGO
+ * 值得注意的是，该方法整合进了 cache.ts 方法包中。也就是说只要该配置项不为空字符串则会自动启用缓存前缀。
- */
-export const SIDE_BAR_LOGO_DEFAULT: LayoutSideBarLogo | undefined = {
-  icon: 'ray',
-  title: 'Ray Template',
-  url: '/dashboard',
-  jumpType: 'station',
-}
-
-/**
  *
- * 系统菜单折叠配置
+ * 默认不启用。
- *
- * menuCollapsedWidth 配置仅当 menuCollapsedMode 为 width 风格时才有效
- *
- * menuCollapsedMode:
- *   - transform: 边栏将只会移动它的位置而不会改变宽度
- *   - width: Sider 的内容宽度将会被实际改变
- * menuCollapsedIconSize 配置菜单未折叠时图标的大小
- * menuCollapsedIndent 配置菜单每级的缩进
- * menuAccordion 手风琴模式
- */
-export const APP_MENU_CONFIG: Readonly<AppMenuConfig> = {
-  menuCollapsedWidth: 64,
-  menuCollapsedMode: 'width',
-  menuCollapsedIconSize: 22,
-  menuCollapsedIndent: 24,
-  menuAccordion: false,
-}
-
-/**
- *
- * 系统缓存 key 前缀
- * 可以选择自定义缓存 key 前缀，在使用 getStorage 和 setStorage 时可以考虑是否启用前缀的方式来避免缓存 key 冲突
- * 该配置项也可以结合 APP_CATCH_KEY 使用
- *
- * 值得注意的是，该方法整合进了 cache.ts 方法包中。也就是说只要该配置项不为空字符串则会自动启用缓存前缀
- *
- * 默认不启用
  *
  * @example
  * export const APP_CATCH_KEY_PREFIX = 'ray-template:'
  *
- * 'ray-template:signing' // 会自动拼接为
+ * 转换后的缓存 key: ray-template:signing。
  */
 export const APP_CATCH_KEY_PREFIX = ''
 
 /**
  *
- * 系统默认缓存 key 配置
+ * @description
+ * 系统默认缓存 key 配置。
  *
  * 说明:
  *   - signing: 登陆信息缓存 key
@@ -154,9 +92,10 @@ export const APP_CATCH_KEY = {
 
 /**
  *
- * 系统内容切换动画配置
+ * @description
- * 但是在配置的时候，会自动拼接一个 `transform` 前缀
+ * 系统内容切换动画配置。
- * 例如: `transform-fade-bottom`
+ * 但是在配置的时候，会自动拼接一个 transform 前缀。
+ * 例如: transform-fade-bottom。
  */
 export const CONTENT_TRANSITION_OPTIONS = [
   {

src/app-config/design-config.ts

@@ -1,16 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-05-19
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
-/** 系统颜色风格配置入口 */
-
 import type { AppTheme } from '@/types'
 
 export const APP_THEME: AppTheme = {

src/app-config/local-config.ts

@@ -1,16 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-05-19
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
-/** 国际化相关配置 */
-
 import type { TemplateLocale, LocalOptions, DayjsLocalMap } from '@/types'
 import type { ValueOf } from '@/types'
 

src/app-config/regex-config.ts

@@ -1,14 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-06-12
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
 /**
  *
  * 正则入口

src/app-config/request-config.ts

@@ -1,14 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-06-02
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
 import type { AxiosConfig } from '@/types'
 
 /** axios 相关配置 */

src/app-config/router-config.ts

@@ -1,16 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-05-19
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
-/** vue-router 相关配置入口 */
-
 import type { LayoutInst } from 'naive-ui'
 import type { Ref } from 'vue'
 
@@ -71,4 +58,4 @@ export const WHITE_ROUTES: string[] = ['RLogin', 'ErrorPage', 'RayTemplateDoc']
  * 超级管理员
  * 配置默认超级管理员, 默认拥有全部最高权限
  */
-export const SUPER_ADMIN: (string | number)[] = ['admin']
+export const SUPER_ADMIN: (string | number)[] = []

src/axios/axios-interceptor/request/index.ts

@@ -1,14 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-10-23
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
 import { useAxiosInterceptor } from '@/axios/utils/interceptor'
 import implement from './provider'
 

src/axios/axios-interceptor/request/provider.ts

@@ -1,14 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-06-06
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
 /**
  *
  * 请求拦截器入口

src/axios/axios-interceptor/response/index.ts

@@ -1,14 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-10-23
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
 import { useAxiosInterceptor } from '@/axios/utils/interceptor'
 import implement from './provider'
 

src/axios/axios-interceptor/response/provider.ts

@@ -1,14 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-06-06
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
 /**
  *
  * 响应拦截器入口

src/axios/index.ts

@@ -1,14 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-07-11
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
 /**
  *
  * 基于 vue-hook-plus 与 axios 封装

src/axios/instance.ts

@@ -1,14 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2022-11-18
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
 /**
  *
  * 请求拦截器与响应拦截器

src/axios/utils/RequestCanceler.ts

@@ -1,14 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-02-27
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
 /**
  *
  * 自动取消重复请求

src/axios/utils/axios-copilot.ts

@@ -1,16 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-06-02
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
-/** axios 拦截器工具 */
-
 import type { RawAxiosRequestHeaders, AxiosRequestConfig } from 'axios'
 import type { RequestHeaderOptions } from '../types'
 

src/axios/utils/interceptor.ts

@@ -1,14 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-06-05
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
 /**
  *
  * axios 拦截器注入

src/components-pro/RCollapse/Collapse.tsx

@@ -1,14 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2024-05-16
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
 import { RCollapseGrid, RForm } from '@/components'
 
 import { collapseGridProps, formProps } from '@/components'
@@ -23,21 +12,21 @@ import type { FormProps, GridProps } from 'naive-ui'
  */
 export default defineComponent({
   name: 'RCollapse',
-  props: Object.assign(
+  props: Object.assign({}, formProps, {
-    {},
+    ...collapseGridProps,
-    {
+    open: {
-      ...collapseGridProps,
+      type: Boolean,
-      open: {
+      default: true,
-        type: Boolean,
-        default: true,
-      },
-      cols: {
-        type: Number,
-        default: 4,
-      },
     },
-    formProps,
+    cols: {
-  ),
+      type: Number,
+      default: 4,
+    },
+    bordered: {
+      type: Boolean,
+      default: true,
+    },
+  }),
   render() {
     const { $slots, $props } = this
     const { labelPlacement, showFeedback, ...rest } = $props as FormProps &

src/components-pro/RTablePro/src/TablePro.tsx

@@ -1,14 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2024-05-10
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
 import { RTable } from '@/components'
 
 import props from './props'

src/components/RBarcode/src/Barcode.tsx

@@ -1,14 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2024-04-14
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
 import './index.scss'
 
 import { NSpin } from 'naive-ui'

src/components/RCollapseGrid/src/index.tsx

@@ -1,14 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2022-12-27
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
 /**
  *
  * <https://www.naiveui.com/zh-CN/dark/components/grid>
@@ -92,10 +81,11 @@ export default defineComponent({
       yGap,
       collapsedRows,
       cssVars,
+      bordered,
     } = this
 
     return (
-      <NCard bordered={this.bordered} style={[cssVars]}>
+      <NCard bordered={bordered} style={[cssVars]}>
         {{
           default: () => (
             <NGrid

src/components/RForm/src/Form.tsx

@@ -1,14 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2024-03-27
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
 import { NForm } from 'naive-ui'
 
 import props from './props'

src/components/RIcon/src/index.tsx

@@ -1,14 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-01-04
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
 import './index.scss'
 
 import { completeSize, call } from '@/utils'

src/components/RIcon/src/props.ts

@@ -1,14 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-10-27
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
 import type { PropType } from 'vue'
 import type { MaybeArray } from '@/types'
 

src/components/RIframe/src/index.tsx

@@ -1,14 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-06-09
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
 import './index.scss'
 
 import { NSpin } from 'naive-ui'

src/components/RIframe/src/props.ts

@@ -1,14 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-10-03
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
 import type { PropType } from 'vue'
 import type { MaybeArray } from '@/types'
 import type { SpinProps } from 'naive-ui'

src/components/RIframe/src/types.ts

@@ -1,14 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-10-03
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
 export interface RIframeInst {
   iframe: Ref<HTMLIFrameElement>
 }

src/components/RModal/src/Modal.tsx

@@ -1,14 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-11-22
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
 import './index.scss'
 
 import { NModal } from 'naive-ui'

src/components/RModal/src/props.ts

@@ -1,14 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-11-22
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
 import { modalProps } from 'naive-ui'
 import type { PropType } from 'vue'
 

src/components/RMoreDropdown/src/index.tsx

@@ -1,14 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-10-21
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
 import { NDropdown } from 'naive-ui'
 import { RIcon } from '@/components'
 

src/components/RMoreDropdown/src/props.ts

@@ -1,14 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-10-21
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
 import { dropdownProps } from 'naive-ui'
 
 const props = {

src/components/RSegment/src/Segment.tsx

@@ -1,21 +1,10 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2024-04-10
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
 import './index.scss'
 
 import { NTabs, NTab, NPopover, NFlex } from 'naive-ui'
 
 import props from './props'
 import { themeOverrides } from './constant'
-import { completeSize, isValueType } from '@/utils'
+import { completeSize, isValueType, renderNode } from '@/utils'
 
 import type { TabsProps } from 'naive-ui'
 import type { RSegmentOptions } from './types'
@@ -26,7 +15,7 @@ const iconSegmentTab = (option: RSegmentOptions) => {
   if (icon) {
     return (
       <NFlex align="center" wrap={false} size="small">
-        <icon />
+        {renderNode(icon)?.()}
         <div>{label}</div>
       </NFlex>
     )

src/components/RSegment/src/types.ts

@@ -54,7 +54,7 @@ export interface RSegmentOptions {
    * @description
    * 自定义图标。
    */
-  icon?: VNode
+  icon?: VNode | (() => VNode)
 }
 
 export type RSegmentWidth = number | 'block' | 'fitContent'

src/components/RTable/src/Table.tsx

@@ -1,14 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-10-04
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
 import './index.scss'
 
 import { NCard, NDataTable, NDropdown, NFlex } from 'naive-ui'
@@ -258,7 +247,7 @@ export default defineComponent({
       propsPopselectValue,
       renderWrapperHeader,
     } = this
-    const { class: className } = $attrs
+    const { class: className, ...restAttrs } = $attrs
     const { tool, combineRowProps, contextMenuSelect } = this
 
     return (
@@ -267,6 +256,7 @@ export default defineComponent({
         {...{
           id: uuidWrapper,
         }}
+        {...restAttrs}
         ref="wrapperRef"
         bordered={wrapperBordered}
         class={className}
@@ -278,7 +268,6 @@ export default defineComponent({
                 {...{
                   id: uuidTable,
                 }}
-                {...$attrs}
                 {...($props as DataTableProps)}
                 {...propsPopselectValue}
                 rowProps={combineRowProps.bind(this)}

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

@@ -1,14 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-10-04
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
 /**
  *
  * 自定义表格列的顺序

src/components/RTable/src/components/Fullscreen.tsx

@@ -1,14 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-10-04
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
 import { RIcon } from '@/components'
 
 import { config } from '../shared'

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

@@ -1,14 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-10-05
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
 import { RIcon } from '@/components'
 
 import { config } from '../shared'

src/components/RTable/src/components/Props.tsx

@@ -1,14 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-10-04
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
 import { NPopselect } from 'naive-ui'
 import { RIcon } from '@/components'
 

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

@@ -1,14 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-10-04
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
 import { NPopselect } from 'naive-ui'
 import { RIcon } from '@/components'
 

src/components/RTable/src/props.ts

@@ -1,14 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-10-04
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
 import { dataTableProps } from 'naive-ui'
 
 import type { PropType, VNode } from 'vue'

src/components/RTable/src/shared.ts

@@ -1,14 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-10-04
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
 export const config = {
   tableIconSize: '18',
   tableKey: Symbol('r-table'),

src/components/RTransitionComponent/src/index.vue

@@ -9,10 +9,10 @@
         >
           <Suspense>
             <KeepAlive
-              v-if="setupKeepAlive"
+              v-if="getKeepAliveConfig.setupKeepAlive"
-              :max="maxKeepAliveLength"
+              :max="getKeepAliveConfig.maxKeepAliveLength"
               :include="getKeepAliveInclude"
-              :exclude="keepAliveExclude"
+              :exclude="getKeepAliveConfig.keepAliveExclude"
             >
               <Component :is="Component" :key="route.fullPath" />
             </KeepAlive>
@@ -24,8 +24,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { useKeepAliveGetters } from '@/store'
+import { useSettingGetters, useKeepAliveGetters } from '@/store'
-import { APP_KEEP_ALIVE } from '@/app-config'
 import props from './props'
 
 import type { TransitionProps } from './types'
@@ -41,5 +40,5 @@ defineOptions({
 withDefaults(defineProps<TransitionProps>(), props)
 
 const { getKeepAliveInclude } = useKeepAliveGetters()
-const { setupKeepAlive, maxKeepAliveLength, keepAliveExclude } = APP_KEEP_ALIVE
+const { getKeepAliveConfig } = useSettingGetters()
 </script>

src/dayjs/index.ts

@@ -1,14 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-06-02
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
 import dayjs from 'dayjs'
 import { DEFAULT_DAYJS_LOCAL } from '@/app-config'
 import 'dayjs/locale/zh-cn'

src/directives/index.ts

@@ -1,14 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-06-24
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
 import { combineDirective } from './utils/combine'
 import { forIn } from 'lodash-es'
 

src/directives/modules/copy/index.ts

@@ -1,14 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-06-24
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
 /**
  *
  * directive name: copy

src/directives/modules/debounce/index.ts

@@ -1,14 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-06-24
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
 /**
  *
  * directive name: debounce

src/directives/modules/disabled/index.ts

@@ -1,14 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-06-26
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
 /**
  *
  * directive name: disabled

src/directives/modules/throttle/index.ts

@@ -1,14 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-06-24
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
 /**
  *
  * directive name: throttle

src/directives/utils/combine.ts

@@ -1,14 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-06-24
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
 import type { DirectiveModules, CustomDirectiveFC } from '@/directives/types'
 
 export const combineDirective = <

src/global-variable/index.ts

@@ -1,14 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-09-11
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
 export * from './variable'
 
 export type * from './variable'

src/global-variable/variable.ts

@@ -1,14 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-09-11
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
 /**
  *
  * @description

src/hooks/components/useContextmenuCoordinate.ts

@@ -1,14 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-12-01
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
 import { useEventListener, onClickOutside } from '@vueuse/core'
 
 import type { BasicTarget } from '@/types'

src/hooks/template/useAppNavigation.ts

@@ -1,14 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-11-03
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
 import { useMenuGetters } from '@/store'
 import { useVueRouter } from '@/hooks'
 

src/hooks/template/useAppRoot.ts

@@ -1,14 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-11-17
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
 import { useSettingGetters, useSettingActions } from '@/store'
 
 import type { AppRootRoute } from '@/store/modules/setting/types'

src/hooks/template/useMaximize.ts

@@ -1,14 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-11-30
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
 import { setVariable, getVariableToRefs } from '@/global-variable'
 import { LAYOUT_CONTENT_REF } from '@/app-config'
 import { unrefElement } from '@/utils'

src/hooks/template/useSiderBar.ts

@@ -1,14 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-11-03
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
 import { useMenuGetters, useMenuActions } from '@/store'
 import { useVueRouter, useAppRoot } from '@/hooks'
 import { pick } from 'lodash-es'

src/hooks/template/useSpinning.ts

@@ -1,14 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-11-30
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
 import { setVariable } from '@/global-variable'
 
 export const useSpinning = () => {

src/hooks/template/useTheme.ts

@@ -1,17 +1,7 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-11-30
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
 import { useSettingActions, useSettingGetters } from '@/store'
 import { useI18n } from '@/hooks'
 import { APP_THEME } from '@/app-config'
+import { useColorMode } from '@vueuse/core'
 
 export type ThemeLabel = 'Dark' | 'Light'
 
@@ -93,7 +83,8 @@ export const useTheme = () => {
   const darkTheme = () => {
     const { updateSettingState } = useSettingActions()
 
-    updateSettingState('appTheme', true)
+    updateSettingState('_appTheme', true)
+    updateSettingState('appTheme', 'dark')
     setThemeOverrides(true)
   }
 
@@ -108,10 +99,29 @@ export const useTheme = () => {
   const lightTheme = () => {
     const { updateSettingState } = useSettingActions()
 
-    updateSettingState('appTheme', false)
+    updateSettingState('_appTheme', false)
+    updateSettingState('appTheme', 'light')
     setThemeOverrides(false)
   }
 
+  /**
+   *
+   * @description
+   * 同步系统主题。
+   *
+   * @example
+   * syncSystemTheme()
+   */
+  const syncSystemTheme = () => {
+    const { getAppTheme } = useSettingGetters()
+    const { updateSettingState } = useSettingActions()
+    const { system } = useColorMode()
+
+    updateSettingState('_appTheme', system.value === 'dark')
+    updateSettingState('appTheme', 'auto')
+    setThemeOverrides(getAppTheme.value)
+  }
+
   /**
    *
    * @param theme 当前主题色
@@ -129,7 +139,8 @@ export const useTheme = () => {
     const { theme } = getAppTheme()
     const { updateSettingState } = useSettingActions()
 
-    updateSettingState('appTheme', !theme)
+    updateSettingState('_appTheme', !theme)
+    updateSettingState('appTheme', !theme ? 'dark' : 'light')
     setThemeOverrides(!theme)
   }
 
@@ -138,6 +149,7 @@ export const useTheme = () => {
     lightTheme,
     toggleTheme,
     getAppTheme,
+    syncSystemTheme,
   }
 }
 

src/hooks/template/useWatermark.ts

@@ -1,14 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-11-30
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
 import { useSettingActions, useSettingGetters } from '@/store'
 
 export const useWatermark = () => {

src/hooks/web/useDayjs.ts

@@ -1,15 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-09-11
- *
- * @workspace ray-template
- *
- * @description
- * 今天也是元气满满撸代码的一天。
- */
-
 import dayjs from 'dayjs'
 import { DEFAULT_DAYJS_LOCAL, DAYJS_LOCAL_MAP } from '@/app-config'
 

src/hooks/web/useDevice.ts

@@ -1,19 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-10-24
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
-/**
- *
- * 检测当前尺寸是否为平板或者更小
- */
-
 import { useWindowSize } from '@vueuse/core'
 import { watchEffectWithTarget } from '@/utils'
 

src/hooks/web/useI18n.ts

@@ -1,14 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-09-11
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
 import { i18n } from '@/locales'
 
 import type { I18n } from 'vue-i18n'

src/hooks/web/useVueRouter.ts

@@ -1,14 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-06-02
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
 import { router } from '@/router'
 
 import type { Router } from 'vue-router'

src/icons/template/dark.svg

@@ -1,3 +1,6 @@
-<svg t="1669094703884" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="24094" width="200" height="200">
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="#fff">
-  <path d="M335.22 240.91c0-57.08 10.68-111.66 30.15-161.87-167.51 64.86-286.3 227.51-286.3 417.92 0 247.42 200.58 448 448 448 190.34 0 352.95-118.71 417.85-286.13-50.16 19.42-104.69 30.08-161.71 30.08-247.41 0-447.99-200.57-447.99-448z" fill="#ffd93d" p-id="24095"></path>
+  <path fill="none" d="M0 0h24v24H0z"></path>
+  <path
+    fill="currentColor"
+    d="M11.38 2.019a7.5 7.5 0 1 0 10.6 10.6C21.662 17.854 17.316 22 12.001 22 6.477 22 2 17.523 2 12c0-5.315 4.146-9.661 9.38-9.981"></path>
 </svg>

src/icons/template/light.svg

@@ -1,6 +1,6 @@
-<svg t="1669092652781" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="22947" width="200" height="200">
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="#fff">
-  <path d="M512 511.4m-212 0a212 212 0 1 0 424 0 212 212 0 1 0-424 0Z" fill="#ffd93d" p-id="22948"></path>
+  <path fill="none" d="M0 0h24v24H0z"></path>
-  <path d="M512 511.4m-198.3 0a198.3 198.3 0 1 0 396.6 0 198.3 198.3 0 1 0-396.6 0Z" fill="#ffd93d" p-id="22949"></path>
+  <path
-  <path d="M511.7 130.2c12.9-0.2 24.2 11.3 24.5 24.3l0.4 79.6c0.2 12.9-11.3 24.2-24.3 24.5-12.9 0.2-24.2-11.3-24.5-24.3l-0.4-79.6c0.9-14.9 11.4-24.3 24.3-24.5zM901.5 510c-0.2 12.9-9.6 23.4-24.5 24.3l-79.6-0.4c-12.9-0.2-24.5-11.5-24.3-24.5 0.2-12.9 11.5-24.5 24.5-24.3l79.6 0.4c12.9 0.3 24.5 11.6 24.3 24.5zM250.9 510c-0.2 12.9-9.6 23.4-24.5 24.3l-79.6-0.4c-12.9-0.2-24.5-11.5-24.3-24.5 0.2-12.9 11.5-24.5 24.5-24.3l79.6 0.4c12.9 0.3 24.5 11.6 24.3 24.5zM512.3 893.8c-12.9 0.2-24.2-11.3-24.5-24.3l-0.4-79.6c-0.2-12.9 11.3-24.2 24.3-24.5 12.9-0.2 24.2 11.3 24.5 24.3l0.4 79.6c-0.9 14.9-11.4 24.3-24.3 24.5z" fill="#ffd93d" p-id="22950"></path>
+    fill="currentColor"
-  <path d="M781.2 242.3c9.3 9 9.1 25.1 0.1 34.5l-56 56.5c-9 9.3-25.1 9.1-34.5 0.1-9.3-9-9.1-25.1-0.1-34.5l56-56.5c11.1-9.9 25.1-9.1 34.5-0.1zM788.2 786.5c-9.3 9-23.3 9.8-34.5-0.1l-56-56.5c-9-9.3-9.2-25.5 0.1-34.5 9.3-9 25.5-9.2 34.5 0.1l56 56.5c9 9.3 9.2 25.5-0.1 34.5zM328.1 326.4c-9.3 9-23.3 9.8-34.5-0.1l-56-56.5c-9-9.3-9.2-25.5 0.1-34.5 9.3-9 25.5-9.2 34.5 0.1l56 56.5c9 9.4 9.3 25.5-0.1 34.5zM241.6 782.6c-9.3-9-9.1-25.1-0.1-34.5l56-56.5c9-9.3 25.1-9.1 34.5-0.1 9.3 9 9.1 25.1 0.1 34.5l-56 56.5c-11.1 9.9-25.2 9.1-34.5 0.1z" fill="#ffd93d" p-id="22951"></path>
+    d="M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12M11 1h2v3h-2zm0 19h2v3h-2zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414zm2.121-14.85 1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414zM23 11v2h-3v-2zM4 11v2H1v-2z"></path>
 </svg>

src/icons/template/system_os.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="icon" viewBox="0 0 1024 1024"
+>
+  <path
+    fill="currentColor"
+    d="M554 849.574c0 23.365-18.635 42.307-42 42.307s-42-18.941-42-42.307V662.719c0-23.365 18.635-42.307 42-42.307v-7.051c23.365 0 42 25.993 42 49.358z"></path>
+  <path
+    fill="currentColor"
+    d="M893 888.5c0 17.397-14.103 31.5-31.5 31.5h-700c-17.397 0-31.5-14.103-31.5-31.5s14.103-31.5 31.5-31.5h700c17.397 0 31.5 14.103 31.5 31.5m33-714.074C926 135.484 894.686 105 855.744 105H168.256C129.314 105 98 135.484 98 174.426V533h828zM98 630.988C98 669.931 129.314 702 168.256 702h687.488C894.686 702 926 669.931 926 630.988V596H98z"></path>
+</svg>

src/icons/tip/question.svg

@@ -0,0 +1,12 @@
+<svg t="1729254196667" class="icon" viewBox="0 0 1024 1024" version="1.1"
+  xmlns="http://www.w3.org/2000/svg" p-id="5087" width="200" height="200">
+  <path
+    fill="currentColor"
+    d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
+    p-id="5088"></path>
+  <path
+    fill="currentColor"
+    d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7c0-19.7 12.4-37.7 30.9-44.8 59-22.7 97.1-74.7 97.1-132.5 0.1-39.3-17.1-76-48.3-103.3z"
+    p-id="5089"></path>
+  <path d="M512 732m-40 0a40 40 0 1 0 80 0 40 40 0 1 0-80 0Z" p-id="5090"></path>
+</svg>

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

@@ -1,14 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-08-08
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
 .ray-menu__logo {
   height: $layoutHeaderHeight;
   padding: 0 18px 0 24px;

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

@@ -1,14 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-08-08
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
 import './index.scss'
 
 import { NEllipsis, NTooltip } from 'naive-ui'

src/layout/components/Menu/index.tsx

@@ -1,23 +1,12 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2022-10-11
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
 import './index.scss'
 
 import { NMenu, NLayoutSider, NDrawer } from 'naive-ui'
 import SiderBarLogo from './components/SiderBarLogo'
 
-import { APP_MENU_CONFIG, LAYOUT_SIDER_REF } from '@/app-config'
+import { LAYOUT_SIDER_REF } from '@/app-config'
 import { useDevice } from '@/hooks'
 import { getVariableToRefs, setVariable } from '@/global-variable'
-import { useMenuGetters, useMenuActions } from '@/store'
+import { useMenuGetters, useMenuActions, useSettingGetters } from '@/store'
 
 import type { MenuInst } from 'naive-ui'
 import type { NaiveMenuOptions } from '@/types'
@@ -30,6 +19,7 @@ export default defineComponent({
 
     const { changeMenuModelValue, collapsedMenu, updateMenuState } =
       useMenuActions()
+    const { getMenuConfig } = useSettingGetters()
     const { getMenuOptions, getCollapsed, getMenuKey } = useMenuGetters()
 
     const modelMenuKey = computed({
@@ -87,8 +77,8 @@ export default defineComponent({
       <NLayoutSider
         class="app-menu__sider"
         showTrigger={!isTabletOrSmaller.value}
-        collapseMode={APP_MENU_CONFIG.menuCollapsedMode}
+        collapseMode={getMenuConfig.value.collapsedMode}
-        collapsedWidth={APP_MENU_CONFIG.menuCollapsedWidth}
+        collapsedWidth={getMenuConfig.value.collapsedWidth}
         onUpdateCollapsed={collapsedMenu.bind(this)}
         nativeScrollbar={false}
         ref={LAYOUT_SIDER_REF}
@@ -107,14 +97,14 @@ export default defineComponent({
           keyField="fullPath"
           v-model:value={modelMenuKey.value}
           options={getMenuOptions.value as NaiveMenuOptions[]}
-          indent={APP_MENU_CONFIG.menuCollapsedIndent}
+          indent={getMenuConfig.value.collapsedIndent}
           collapsed={getCollapsed.value}
-          collapsedIconSize={APP_MENU_CONFIG.menuCollapsedIconSize}
+          collapsedIconSize={getMenuConfig.value.collapsedIconSize}
-          collapsedWidth={APP_MENU_CONFIG.menuCollapsedWidth}
+          collapsedWidth={getMenuConfig.value.collapsedWidth}
           onUpdateValue={(key, op) => {
             changeMenuModelValue(key, op as unknown as AppMenuOption)
           }}
-          accordion={APP_MENU_CONFIG.menuAccordion}
+          accordion={getMenuConfig.value.accordion}
         />
       </NLayoutSider>
     )

src/layout/components/MenuTag/index.tsx

@@ -1,14 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2022-12-08
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
 /**
  *
  * @description

src/layout/components/Search/GlobalSearch/index.tsx

@@ -1,14 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-04-16
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
 /**
  *
  * app search 搜索功能

src/layout/components/Search/GlobalSearchButton/index.tsx

@@ -1,14 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2024-01-23
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
 import './index.scss'
 
 import { NButton, NFlex } from 'naive-ui'

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

@@ -1,14 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-03-03
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
 /**
  *
  * 顶部面包屑

src/layout/components/SiderBar/components/SettingDrawer/components/ThemeSegment.tsx

@@ -0,0 +1,80 @@
+import { RSegment, RIcon } from '@/components'
+
+import { useSettingGetters, useSettingActions } from '@/store'
+import { useColorMode } from '@vueuse/core'
+
+import type { SettingState } from '@/store/modules/setting/types'
+
+export default defineComponent({
+  name: 'ThemeSegment',
+  setup() {
+    const { system } = useColorMode()
+    const { getAppThemeStr, getAppTheme } = useSettingGetters()
+    const { updateSettingState } = useSettingActions()
+    const options = [
+      {
+        label: '深色',
+        key: 'dark',
+        icon: () => <RIcon name="dark" size="16" />,
+      },
+      {
+        label: '浅色',
+        key: 'light',
+        icon: () => <RIcon name="light" size="16" />,
+      },
+      {
+        label: '自动',
+        key: 'auto',
+        icon: () => <RIcon name="system_os" size="16" />,
+      },
+    ]
+    const modelAppTheme = computed({
+      get: () => {
+        if (getAppThemeStr.value === 'auto') {
+          return 'auto'
+        }
+
+        return getAppTheme.value ? 'dark' : 'light'
+      },
+      set: (val) => {
+        updateThemeFn(val, system.value)
+      },
+    })
+
+    const updateThemeFn = (
+      themeModel: SettingState['appTheme'],
+      systemTheme: 'dark' | 'light',
+    ) => {
+      if (themeModel === 'auto') {
+        updateSettingState('_appTheme', systemTheme === 'dark')
+        updateSettingState('appTheme', 'auto')
+
+        return
+      }
+
+      updateSettingState('_appTheme', themeModel === 'dark')
+      updateSettingState('appTheme', themeModel)
+    }
+
+    watchEffect(() => {
+      updateThemeFn(modelAppTheme.value, system.value)
+    })
+
+    return {
+      options,
+      modelAppTheme,
+    }
+  },
+  render() {
+    const { options } = this
+
+    return (
+      <RSegment
+        options={options}
+        size="small"
+        width="block"
+        v-model:value={this.modelAppTheme}
+      />
+    )
+  },
+})

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

@@ -1,14 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-04-02
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
 import { NFlex, NSwitch, NTooltip } from 'naive-ui'
 import { RIcon } from '@/components'
 

src/layout/components/SiderBar/components/SettingDrawer/constant.ts

@@ -0,0 +1,21 @@
+import type { SettingState } from '@/store/modules/setting/types'
+
+export const defaultSettingConfig: Partial<SettingState> = {
+  contentTransition: 'scale',
+  watermarkSwitch: false,
+  keepAliveConfig: {
+    maxKeepAliveLength: 10,
+    setupKeepAlive: true,
+  },
+  menuConfig: {
+    collapsedWidth: 64,
+    collapsedMode: 'width',
+    collapsedIconSize: 22,
+    collapsedIndent: 24,
+    accordion: false,
+  },
+  menuTagSwitch: true,
+  breadcrumbSwitch: true,
+  copyrightSwitch: true,
+  drawerPlacement: 'right',
+}

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

@@ -1,13 +1,3 @@
-/**
- *
- * app setting 抽屉
- * 提供了一些基础的动态配置能力
- * 如果需要其他额外的配置项，可以按照当前的方式进行拓展
- *
- * 可能会疑问，为什么可配置项那么少？
- * 其实并不少，只是有一些东西，在我看来是没多大意义需要动态的去改动的，所以都是在 `app-config` 包中进行配置维护
- */
-
 import './index.scss'
 
 import {
@@ -20,14 +10,24 @@ import {
   NDescriptions,
   NDescriptionsItem,
   NSelect,
+  NInputNumber,
+  NFormItem,
+  NForm,
+  NButton,
+  NText,
+  NTooltip,
 } from 'naive-ui'
-import ThemeSwitch from '@/layout/components/SiderBar/components/SettingDrawer/components/ThemeSwitch'
+import ThemeSegment from './components/ThemeSegment'
+import { RIcon } from '@/components'
 
 import { APP_THEME, CONTENT_TRANSITION_OPTIONS } from '@/app-config'
 import { useSettingGetters, useSettingActions } from '@/store'
+import { defaultSettingConfig } from './constant'
+import { forIn } from 'lodash-es'
 
 import type { PropType } from 'vue'
 import type { Placement } from '@/types'
+import type { SettingState } from '@/store/modules/setting/types'
 
 export default defineComponent({
   name: 'SettingDrawer',
@@ -56,6 +56,9 @@ export default defineComponent({
       getCopyrightSwitch,
       getContentTransition,
       getWatermarkSwitch,
+      getKeepAliveConfig,
+      getMenuConfig,
+      getDrawerPlacement,
     } = useSettingGetters()
 
     const modelShow = computed({
@@ -65,7 +68,7 @@ export default defineComponent({
       },
     })
     // 为了方便管理多个 computed，因为 computed 不能被逆向修改
-    const modelSwitchReactive = computed({
+    const modelReactive = computed({
       get: () => {
         return {
           getMenuTagSwitch: getMenuTagSwitch.value,
@@ -73,35 +76,52 @@ export default defineComponent({
           getCopyrightSwitch: getCopyrightSwitch.value,
           getContentTransition: getContentTransition.value,
           getWatermarkSwitch: getWatermarkSwitch.value,
+          getKeepAliveConfig: getKeepAliveConfig.value,
+          getMenuConfig: getMenuConfig.value,
+          getDrawerPlacement: getDrawerPlacement.value,
         }
       },
       set: (value) => {},
     })
 
+    const defaultSettingBtnClick = () => {
+      forIn(defaultSettingConfig, (value, key) => {
+        updateSettingState(key as keyof SettingState, value)
+      })
+    }
+
     return {
       modelShow,
       changePrimaryColor,
       getAppTheme,
       getPrimaryColorOverride,
       updateSettingState,
-      modelSwitchReactive,
+      modelReactive,
+      defaultSettingBtnClick,
     }
   },
   render() {
-    const { $t, changePrimaryColor, updateSettingState } = this
+    const {
+      $t,
+      changePrimaryColor,
+      updateSettingState,
+      defaultSettingBtnClick,
+    } = this
 
     return (
       <NDrawer
         v-model:show={this.modelShow}
         placement={this.placement}
         width={this.width}
+        trapFocus={false}
+        autoFocus={false}
       >
-        <NDrawerContent title={$t('headerSettingOptions.Title')}>
+        <NDrawerContent title="系统配置">
           <NFlex class="setting-drawer__space" vertical>
             <NDivider titlePlacement="center">
               {$t('headerSettingOptions.ThemeOptions.Title')}
             </NDivider>
-            <ThemeSwitch />
+            <ThemeSegment />
             <NDivider titlePlacement="center">
               {$t('headerSettingOptions.ThemeOptions.PrimaryColorConfig')}
             </NDivider>
@@ -114,19 +134,56 @@ export default defineComponent({
               {$t('headerSettingOptions.ContentTransition')}
             </NDivider>
             <NSelect
-              v-model:value={this.modelSwitchReactive.getContentTransition}
+              v-model:value={this.modelReactive.getContentTransition}
               options={CONTENT_TRANSITION_OPTIONS}
               onUpdateValue={(value) => {
                 updateSettingState('contentTransition', value)
               }}
             />
-            <NDivider titlePlacement="center">
+            <NDivider titlePlacement="center">抽屉位置</NDivider>
-              {$t('headerSettingOptions.InterfaceDisplay')}
+            <NSelect
-            </NDivider>
+              v-model:value={this.modelReactive.getDrawerPlacement}
+              options={[
+                {
+                  label: '右边',
+                  value: 'right',
+                },
+                {
+                  label: '左边',
+                  value: 'left',
+                },
+              ]}
+              onUpdateValue={(value) => {
+                updateSettingState('drawerPlacement', value)
+              }}
+            />
+            <NDivider titlePlacement="center">系统设置</NDivider>
             <NDescriptions labelPlacement="left" column={1}>
+              <NDescriptionsItem label="菜单手风琴">
+                <NSwitch
+                  v-model:value={this.modelReactive.getMenuConfig.accordion}
+                  onUpdateValue={(bool: boolean) =>
+                    updateSettingState('menuConfig', {
+                      accordion: bool,
+                    })
+                  }
+                />
+              </NDescriptionsItem>
+              <NDescriptionsItem label="页面缓存">
+                <NSwitch
+                  v-model:value={
+                    this.modelReactive.getKeepAliveConfig.setupKeepAlive
+                  }
+                  onUpdateValue={(bool: boolean) =>
+                    updateSettingState('keepAliveConfig', {
+                      setupKeepAlive: bool,
+                    })
+                  }
+                />
+              </NDescriptionsItem>
               <NDescriptionsItem label="多标签">
                 <NSwitch
-                  v-model:value={this.modelSwitchReactive.getMenuTagSwitch}
+                  v-model:value={this.modelReactive.getMenuTagSwitch}
                   onUpdateValue={(bool: boolean) =>
                     updateSettingState('menuTagSwitch', bool)
                   }
@@ -134,7 +191,7 @@ export default defineComponent({
               </NDescriptionsItem>
               <NDescriptionsItem label="面包屑">
                 <NSwitch
-                  v-model:value={this.modelSwitchReactive.getBreadcrumbSwitch}
+                  v-model:value={this.modelReactive.getBreadcrumbSwitch}
                   onUpdateValue={(bool: boolean) =>
                     updateSettingState('breadcrumbSwitch', bool)
                   }
@@ -142,7 +199,7 @@ export default defineComponent({
               </NDescriptionsItem>
               <NDescriptionsItem label="水印">
                 <NSwitch
-                  v-model:value={this.modelSwitchReactive.getWatermarkSwitch}
+                  v-model:value={this.modelReactive.getWatermarkSwitch}
                   onUpdateValue={(bool: boolean) =>
                     updateSettingState('watermarkSwitch', bool)
                   }
@@ -150,13 +207,91 @@ export default defineComponent({
               </NDescriptionsItem>
               <NDescriptionsItem label="版权信息">
                 <NSwitch
-                  v-model:value={this.modelSwitchReactive.getCopyrightSwitch}
+                  v-model:value={this.modelReactive.getCopyrightSwitch}
                   onUpdateValue={(bool: boolean) =>
                     updateSettingState('copyrightSwitch', bool)
                   }
                 />
               </NDescriptionsItem>
             </NDescriptions>
+            <NDivider titlePlacement="center">菜单样式</NDivider>
+            <NForm showFeedback={true} showRequireMark={false}>
+              <NFormItem label="每级菜单缩进">
+                <NInputNumber
+                  v-model:value={
+                    this.modelReactive.getMenuConfig.collapsedIndent
+                  }
+                  min={24}
+                  precision={0}
+                  onUpdateValue={(value) => {
+                    if (value !== null) {
+                      updateSettingState('menuConfig', {
+                        collapsedIndent: value,
+                      })
+                    }
+                  }}
+                />
+              </NFormItem>
+              <NFormItem label="折叠菜单图标尺寸">
+                <NInputNumber
+                  v-model:value={
+                    this.modelReactive.getMenuConfig.collapsedIconSize
+                  }
+                  min={22}
+                  precision={0}
+                  onUpdateValue={(value) => {
+                    if (value !== null) {
+                      updateSettingState('menuConfig', {
+                        collapsedIconSize: value,
+                      })
+                    }
+                  }}
+                />
+              </NFormItem>
+              <NFormItem label="折叠菜单宽度" showFeedback={false}>
+                <NInputNumber
+                  v-model:value={
+                    this.modelReactive.getMenuConfig.collapsedWidth
+                  }
+                  min={64}
+                  precision={0}
+                  onUpdateValue={(value) => {
+                    if (value !== null) {
+                      updateSettingState('menuConfig', {
+                        collapsedWidth: value,
+                      })
+                    }
+                  }}
+                />
+              </NFormItem>
+            </NForm>
+            <NDivider titlePlacement="center">
+              <NFlex wrap={false} align="center" size={[4, 0]}>
+                <NTooltip placement="top" showArrow={false}>
+                  {{
+                    trigger: () => <RIcon name="question" size="16" />,
+                    default: () => '当设置为【0】时，缓存将会失效',
+                  }}
+                </NTooltip>
+                <NText>最大缓存数</NText>
+              </NFlex>
+            </NDivider>
+            <NInputNumber
+              v-model:value={
+                this.modelReactive.getKeepAliveConfig.maxKeepAliveLength
+              }
+              showButton={true}
+              min={0}
+              max={100}
+              precision={0}
+              disabled={!this.modelReactive.getKeepAliveConfig.setupKeepAlive}
+            />
+            <NDivider titlePlacement="center">操作</NDivider>
+            <NFlex>
+              <NButton type="primary" block onClick={defaultSettingBtnClick}>
+                清除设置
+              </NButton>
+            </NFlex>
           </NFlex>
         </NDrawerContent>
       </NDrawer>

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

@@ -1,14 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2022-12-29
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
 import './index.scss'
 
 import { NTooltip } from 'naive-ui'

src/layout/components/SiderBar/index.tsx

@@ -1,14 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-01-04
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
 /**
  *
  * 本来想通过写数据配置化的方式实现顶部的功能小按钮, 结果事实发现...

src/layout/default/ContentWrapper/index.tsx

@@ -1,14 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-04-21
- *
- * @workspace ray-template-mine
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
 /**
  *
  * 使用 NSpin 组件实现 loading 效果

src/layout/default/FeatureWrapper/index.tsx

@@ -1,14 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-08-09
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
 import MenuTag from '@/layout/components/MenuTag'
 
 export default defineComponent({

src/layout/default/FooterWrapper/index.tsx

@@ -1,14 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-04-21
- *
- * @workspace ray-template-mine
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
 import './index.scss'
 
 export default defineComponent({

src/layout/default/HeaderWrapper/index.tsx

@@ -1,14 +1,3 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-08-09
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
 import { NFlex } from 'naive-ui'
 import SiderBar from '@/layout/components/SiderBar'