blackteay/ray-template
1
0
Fork 0
mirror of https://github.com/XiaoDaiGua-Ray/ray-template.git synced 2025-04-06 03:57:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

version: 5.0.0

Browse Source
This commit is contained in:
XiaoDaiGua-Ray 2024-10-20 01:15:12 +08:00
parent 73792144a8
commit 2f42571b3b
156 changed files with 611 additions and 1714 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
CHANGELOG.md
View File

@ -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` 构建生产环境；因为国内厂商真心不给力。

11
mock/shared/database.ts
View File

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

11
mock/shared/utils.ts
View File

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

2
package.json
View File

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

11
src/api/demo/test.ts
View File

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

32
src/app-components/app/AppAvatar/index.tsx
View File

@ -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 { getStorage } from '@/utils'
import { useSigningGetters } from '@/store'
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) {
const signing = getStorage<SigningCallback>(
APP_CATCH_KEY.signing,
'localStorage',
)
setup() {
const { getSigningCallback } = useSigningGetters()
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>
)

11
src/app-components/app/AppGlobalSpin/index.tsx
View File

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

11
src/app-components/app/AppLockScreen/appLockVar.ts
View File

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

13
src/app-components/app/AppLockScreen/components/LockScreen/index.tsx
View File

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

13
src/app-components/app/AppLockScreen/components/UnlockScreen/index.tsx
View File

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

11
src/app-components/app/AppLockScreen/index.tsx
View File

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

11
src/app-components/app/AppLockScreen/shared.ts
View File

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

5
src/app-components/app/AppShareLink/index.tsx
View File

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

11
src/app-components/provider/AppNaiveGlobalProvider/index.tsx
View File

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

11
src/app-components/provider/AppRequestCancelerProvider/index.tsx
View File

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

11
src/app-components/provider/AppStyleProvider/index.tsx
View File

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

11
src/app-components/provider/AppVersionProvider/index.tsx
View File

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

11
src/app-components/provider/AppWatermarkProvider/index.tsx
View File

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

97
src/app-config/app-config.ts
View File

@ -1,18 +1,4 @@
/**
*
* @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 { AppMenuConfig, PreloadingConfig } 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
* title: LOGO 标题
* url: 点击跳转地址， 如果不配置该属性， 则不会触发跳转
* jumpType: 跳转类型(station: 项目内跳转， outsideStation: 新页面打开)
* @description
* 系统缓存 key 前缀。
* 可以选择自定义缓存 key 前缀，在使用 getStorage 和 setStorage 时可以考虑是否启用前缀的方式来避免缓存 key 冲突。
* 该配置项也可以结合 APP_CATCH_KEY 使用。
*
* 如果不设置该属性或者为空， 则不会渲染 LOGO
*/
export const SIDE_BAR_LOGO_DEFAULT: LayoutSideBarLogo | undefined = {
icon: 'ray',
title: 'Ray Template',
url: '/dashboard',
jumpType: 'station',
}
/**
* 值得注意的是，该方法整合进了 cache.ts 方法包中。也就是说只要该配置项不为空字符串则会自动启用缓存前缀。
*
* 系统菜单折叠配置
*
* 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 = {
/**
*
* 系统内容切换动画配置
* 但是在配置的时候，会自动拼接一个 `transform` 前缀
* 例如: `transform-fade-bottom`
* @description
* 系统内容切换动画配置。
* 但是在配置的时候，会自动拼接一个 transform 前缀。
* 例如: transform-fade-bottom。
*/
export const CONTENT_TRANSITION_OPTIONS = [
{

13
src/app-config/design-config.ts
View File

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

13
src/app-config/local-config.ts
View File

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

11
src/app-config/regex-config.ts
View File

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

11
src/app-config/request-config.ts
View File

@ -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 相关配置 */

15
src/app-config/router-config.ts
View File

@ -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)[] = []

11
src/axios/axios-interceptor/request/index.ts
View File

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

11
src/axios/axios-interceptor/request/provider.ts
View File

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

11
src/axios/axios-interceptor/response/index.ts
View File

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

11
src/axios/axios-interceptor/response/provider.ts
View File

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

11
src/axios/index.ts
View File

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

11
src/axios/instance.ts
View File

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

11
src/axios/utils/RequestCanceler.ts
View File

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

13
src/axios/utils/axios-copilot.ts
View File

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

11
src/axios/utils/interceptor.ts
View File

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

39
src/components-pro/RCollapse/Collapse.tsx
View File

@ -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(
{},
{
...collapseGridProps,
open: {
type: Boolean,
default: true,
},
cols: {
type: Number,
default: 4,
},
props: Object.assign({}, formProps, {
...collapseGridProps,
open: {
type: Boolean,
default: true,
},
formProps,
),
cols: {
type: Number,
default: 4,
},
bordered: {
type: Boolean,
default: true,
},
}),
render() {
const { $slots, $props } = this
const { labelPlacement, showFeedback, ...rest } = $props as FormProps &

11
src/components-pro/RTablePro/src/TablePro.tsx
View File

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

11
src/components/RBarcode/src/Barcode.tsx
View File

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

14
src/components/RCollapseGrid/src/index.tsx
View File

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

11
src/components/RForm/src/Form.tsx
View File

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

11
src/components/RIcon/src/index.tsx
View File

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

11
src/components/RIcon/src/props.ts
View File

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

11
src/components/RIframe/src/index.tsx
View File

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

11
src/components/RIframe/src/props.ts
View File

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

11
src/components/RIframe/src/types.ts
View File

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

11
src/components/RModal/src/Modal.tsx
View File

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

11
src/components/RModal/src/props.ts
View File

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

11
src/components/RMoreDropdown/src/index.tsx
View File

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

11
src/components/RMoreDropdown/src/props.ts
View File

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

15
src/components/RSegment/src/Segment.tsx
View File

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

2
src/components/RSegment/src/types.ts
View File

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

15
src/components/RTable/src/Table.tsx
View File

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

11
src/components/RTable/src/components/C.tsx
View File

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

11
src/components/RTable/src/components/Fullscreen.tsx
View File

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

11
src/components/RTable/src/components/Print.tsx
View File

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

11
src/components/RTable/src/components/Props.tsx
View File

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

11
src/components/RTable/src/components/Size.tsx
View File

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

11
src/components/RTable/src/props.ts
View File

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

11
src/components/RTable/src/shared.ts
View File

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

11
src/components/RTransitionComponent/src/index.vue
View File

@ -9,10 +9,10 @@
>
<Suspense>
<KeepAlive
v-if="setupKeepAlive"
:max="maxKeepAliveLength"
v-if="getKeepAliveConfig.setupKeepAlive"
: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 { APP_KEEP_ALIVE } from '@/app-config'
import { useSettingGetters, useKeepAliveGetters } from '@/store'
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>

11
src/dayjs/index.ts
View File

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

11
src/directives/index.ts
View File

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

11
src/directives/modules/copy/index.ts
View File

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

11
src/directives/modules/debounce/index.ts
View File

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

11
src/directives/modules/disabled/index.ts
View File

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

11
src/directives/modules/throttle/index.ts
View File

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

11
src/directives/utils/combine.ts
View File

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

11
src/global-variable/index.ts
View File

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

11
src/global-variable/variable.ts
View File

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

11
src/hooks/components/useContextmenuCoordinate.ts
View File

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

11
src/hooks/template/useAppNavigation.ts
View File

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

11
src/hooks/template/useAppRoot.ts
View File

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

11
src/hooks/template/useMaximize.ts
View File

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

11
src/hooks/template/useSiderBar.ts
View File

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

11
src/hooks/template/useSpinning.ts
View File

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

40
src/hooks/template/useTheme.ts
View File

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

11
src/hooks/template/useWatermark.ts
View File

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

12
src/hooks/web/useDayjs.ts
View File

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

16
src/hooks/web/useDevice.ts
View File

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

11
src/hooks/web/useI18n.ts
View File

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

11
src/hooks/web/useVueRouter.ts
View File

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

7
src/icons/template/dark.svg
View File

@ -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">
<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>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="#fff">
<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>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 428 B

After

Width:  |  Height:  |  Size: 321 B

10
src/icons/template/light.svg
View File

@ -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">
<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 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 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>
<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>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="#fff">
<path fill="none" d="M0 0h24v24H0z"></path>
<path
fill="currentColor"
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>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 494 B

9
src/icons/template/system_os.svg Normal file
View File

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

After

Width:  |  Height:  |  Size: 681 B

12
src/icons/tip/question.svg Normal file
View File

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

After

Width:  |  Height:  |  Size: 921 B

11
src/layout/components/Menu/components/SiderBarLogo/index.scss
View File

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

11
src/layout/components/Menu/components/SiderBarLogo/index.tsx
View File

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

28
src/layout/components/Menu/index.tsx
View File

@ -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}
collapsedWidth={APP_MENU_CONFIG.menuCollapsedWidth}
collapseMode={getMenuConfig.value.collapsedMode}
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}
collapsedWidth={APP_MENU_CONFIG.menuCollapsedWidth}
collapsedIconSize={getMenuConfig.value.collapsedIconSize}
collapsedWidth={getMenuConfig.value.collapsedWidth}
onUpdateValue={(key, op) => {
changeMenuModelValue(key, op as unknown as AppMenuOption)
}}
accordion={APP_MENU_CONFIG.menuAccordion}
accordion={getMenuConfig.value.accordion}
/>
</NLayoutSider>
)

11
src/layout/components/MenuTag/index.tsx
View File

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

11
src/layout/components/Search/GlobalSearch/index.tsx
View File

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

11
src/layout/components/Search/GlobalSearchButton/index.tsx
View File

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

11
src/layout/components/SiderBar/components/Breadcrumb/index.tsx
View File

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

80
src/layout/components/SiderBar/components/SettingDrawer/components/ThemeSegment.tsx Normal file
View File

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

11
src/layout/components/SiderBar/components/SettingDrawer/components/ThemeSwitch/index.tsx → src/layout/components/SiderBar/components/SettingDrawer/components/ThemeSwitch.tsx
View File

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

21
src/layout/components/SiderBar/components/SettingDrawer/constant.ts Normal file
View File

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

183
src/layout/components/SiderBar/components/SettingDrawer/index.tsx
View File

@ -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">
{$t('headerSettingOptions.InterfaceDisplay')}
</NDivider>
<NDivider titlePlacement="center">抽屉位置</NDivider>
<NSelect
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>

11
src/layout/components/SiderBar/components/TooltipIcon/index.tsx
View File

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

11
src/layout/components/SiderBar/index.tsx
View File

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

11
src/layout/default/ContentWrapper/index.tsx
View File

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

11
src/layout/default/FeatureWrapper/index.tsx
View File

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

11
src/layout/default/FooterWrapper/index.tsx
View File

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

11
src/layout/default/HeaderWrapper/index.tsx
View File

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

Some files were not shown because too many files have changed in this diff Show More