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

version: v5.0.9

Browse Source
This commit is contained in:
XiaoDaiGua-Ray 2025-01-03 21:44:32 +08:00
parent 3b2bba391e
commit 4bfdbccd88
19 changed files with 1125 additions and 852 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.nvmrc
View File

@ -1 +1 @@
v22.11.0
v22.12.0

14
CHANGELOG.md
View File

@ -1,4 +1,16 @@
# CHANGE LOG
## 5.0.9
## Feats
- `RDraggableCard` 组件
- 新增 `restrictionElement` 配置项，允许设置拖拽限制元素
- 新增 `padding` 配置项，允许配置元素初始化位置的间隔值
- `defaultPosition` 配置项新增 `top-left`, `top-right`, `bottom-left`, `bottom-right` 配置项，允许配置元素初始化位置
- `RTablePro` 组件
- 现在会自动删除重复的请求参数
- 暴露 `resetTablePagination` 方法，允许手动重置表格分页
- `logout` 方法现在会在执行的时候，清空所有的 `router-route`
- 更新依赖为主流版本
## 5.0.8

77
package.json
View File

@ -1,7 +1,7 @@
{
"name": "ray-template",
"private": false,
"version": "5.0.8",
"version": "5.0.9",
"type": "module",
"engines": {
"node": "^18.0.0 || ^20.0.0 || >=22.0.0",
@ -46,7 +46,7 @@
"jsbarcode": "3.11.6",
"lodash-es": "^4.17.21",
"mockjs": "1.1.0",
"naive-ui": "^2.40.3",
"naive-ui": "^2.40.4",
"pinia": "^2.3.0",
"pinia-plugin-persistedstate": "^4.1.3",
"print-js": "^1.6.0",
@ -58,54 +58,55 @@
"vue3-next-qrcode": "2.0.10"
},
"devDependencies": {
"@commitlint/cli": "^19.3.0",
"@commitlint/config-conventional": "^19.2.2",
"@eslint/eslintrc": "3.1.0",
"@eslint/js": "9.11.0",
"@amap/amap-jsapi-types": "0.0.15",
"@ant-design/icons-vue": "7.0.1",
"@commitlint/cli": "19.3.0",
"@commitlint/config-conventional": "19.2.2",
"@interactjs/types": "1.10.27",
"@intlify/unplugin-vue-i18n": "^4.0.0",
"@types/crypto-js": "^4.2.2",
"@intlify/unplugin-vue-i18n": "4.0.0",
"@types/crypto-js": "4.2.2",
"@types/jsbarcode": "3.11.4",
"@types/lodash-es": "^4.17.12",
"@types/lodash-es": "4.17.12",
"@types/mockjs": "1.0.10",
"@typescript-eslint/eslint-plugin": "^8.16.0",
"@typescript-eslint/parser": "^8.16.0",
"@vitejs/plugin-vue": "^5.1.0",
"@vitejs/plugin-vue-jsx": "^4.1.1",
"@types/three": "0.169.0",
"@typescript-eslint/eslint-plugin": "8.18.2",
"@typescript-eslint/parser": "8.18.2",
"@vitejs/plugin-vue": "5.2.1",
"@vitejs/plugin-vue-jsx": "4.1.1",
"@vitest/ui": "1.5.2",
"@vue/eslint-config-prettier": "^9.0.0",
"@vue/eslint-config-typescript": "^14.1.4",
"@vue/eslint-config-prettier": "10.1.0",
"@vue/eslint-config-typescript": "14.2.0",
"@vue/test-utils": "2.4.6",
"autoprefixer": "^10.4.20",
"depcheck": "^1.4.7",
"eslint": "^9.11.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-prettier": "^5.1.3",
"eslint-plugin-vue": "^9.26.0",
"globals": "15.12.0",
"autoprefixer": "10.4.20",
"depcheck": "1.4.7",
"eslint": "9.11.0",
"eslint-config-prettier": "9.1.0",
"eslint-plugin-prettier": "5.2.1",
"eslint-plugin-vue": "9.32.0",
"globals": "15.14.0",
"happy-dom": "14.12.3",
"husky": "8.0.3",
"lint-staged": "^15.2.2",
"postcss": "^8.4.49",
"lint-staged": "15.2.2",
"postcss": "8.4.49",
"postcss-px-to-viewport-8-with-include": "1.2.2",
"prettier": "^3.3.2",
"prettier": "3.3.2",
"rollup-plugin-gzip": "4.0.1",
"sass": "1.77.1",
"svg-sprite-loader": "^6.0.11",
"typescript": "^5.6.3",
"unplugin-auto-import": "^0.18.2",
"unplugin-vue-components": "^0.27.4",
"vite": "^6.0.4",
"vite-bundle-analyzer": "0.9.4",
"sass": "1.83.0",
"svg-sprite-loader": "6.0.11",
"typescript": "5.6.3",
"unplugin-auto-import": "0.19.0",
"unplugin-vue-components": "0.28.0",
"vite": "6.0.7",
"vite-bundle-analyzer": "0.15.2",
"vite-plugin-cdn2": "1.1.0",
"vite-plugin-ejs": "^1.7.0",
"vite-plugin-ejs": "1.7.0",
"vite-plugin-eslint": "1.8.1",
"vite-plugin-inspect": "^0.8.4",
"vite-plugin-mock-dev-server": "1.8.0",
"vite-plugin-svg-icons": "^2.0.1",
"vite-svg-loader": "^5.1.0",
"vite-plugin-inspect": "0.8.4",
"vite-plugin-mock-dev-server": "1.8.3",
"vite-plugin-svg-icons": "2.0.1",
"vite-svg-loader": "5.1.0",
"vitest": "2.0.5",
"vue-tsc": "^2.1.10"
"vue-tsc": "2.1.10"
},
"description": "<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->",
"main": "index.ts",

1669
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

101
src/components/base/RDraggableCard/DraggableCard.tsx
View File

@ -5,18 +5,25 @@ import { Teleport, Transition } from 'vue'
import interact from 'interactjs'
import { cardProps } from 'naive-ui'
import { unrefElement, completeSize, queryElements } from '@/utils'
import { useTemplateRef } from 'vue'
import { unrefElement, completeSize, queryElements, isValueType } from '@/utils'
import type { VNode } from 'vue'
import type { MaybeElement, MaybeRefOrGetter } from '@vueuse/core'
type RestrictRectOptions = Parameters<typeof interact.modifiers.restrictRect>[0]
type Position = {
type Padding = {
x: number
y: number
}
type Position =
| Padding
| 'top-left'
| 'top-right'
| 'bottom-left'
| 'bottom-right'
const props = {
...cardProps,
/**
@ -27,8 +34,8 @@ const props = {
* @default body
*/
restrictionElement: {
type: [String, HTMLElement, Function] as PropType<
string | HTMLElement | (() => VNode)
type: [String, HTMLElement, Function, Object] as PropType<
string | HTMLElement | (() => VNode) | MaybeRefOrGetter<MaybeElement>
>,
default: 'body',
},
@ -62,7 +69,7 @@ const props = {
* @default { x: 0, y: 0 }
*/
defaultPosition: {
type: Object as PropType<Position>,
type: [Object, String] as PropType<Position>,
default: () => ({
x: 0,
y: 0,
@ -101,6 +108,18 @@ const props = {
type: Boolean,
default: false,
},
/**
*
* @description
* 默认的边距。
* 设置该属性后，卡片首次出现的位置会根据该属性进行偏移。
*
* @default undefined
*/
padding: {
type: Object as PropType<Padding>,
default: void 0,
},
}
export default defineComponent({
@ -110,7 +129,8 @@ export default defineComponent({
const cardRef = useTemplateRef<HTMLElement>('cardRef')
let interactInst: ReturnType<typeof interact> | null = null
const position = {
...props.defaultPosition,
x: 0,
y: 0,
}
const CONTAINER_ID = 'draggable-card-container'
const cssVars = computed(() => {
@ -142,11 +162,15 @@ export default defineComponent({
if (Array.isArray(re)) {
restrictionElement = re[0]
} else if (typeof re === 'function') {
} else {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
restrictionElement = unrefElement<HTMLElement>(re as any) as HTMLElement
} else {
restrictionElement = re
}
if (!restrictionElement) {
throw new Error(
'[RDraggableCard]: if set restrictionElement, it must be a HTMLElement or a ref of HTMLElement.',
)
}
return {
@ -155,6 +179,54 @@ export default defineComponent({
}
}
const getPosition = (containerRect: DOMRect, cardRect: DOMRect) => {
const { defaultPosition, padding } = props
const { x: paddingX = 0, y: paddingY = 0 } = padding ?? {}
const {
x: containerX,
y: containerY,
width: containerWidth,
height: containerHeight,
} = containerRect
const { width: cardWidth, height: cardHeight } = cardRect
if (typeof defaultPosition === 'string') {
switch (defaultPosition) {
case 'top-left':
return { x: paddingX + containerX, y: paddingY + containerY }
case 'top-right':
return {
x: containerWidth - cardWidth - paddingX + containerX,
y: paddingY + containerY,
}
case 'bottom-left':
return {
x: paddingX + containerX,
y: containerHeight - cardHeight - paddingY + containerY,
}
case 'bottom-right':
return {
x: containerWidth - cardWidth - paddingX + containerX,
y: containerHeight - cardHeight - paddingY + containerY,
}
// 默认为左上角
default:
return { x: paddingX + containerX, y: paddingY + containerY }
}
} else {
const { x: defaultX, y: defaultY } = defaultPosition
return {
x: defaultX + containerX + paddingX,
y: defaultY + containerY + paddingY,
}
}
}
const setupDraggable = () => {
const { card, restrictionElement } = getDom()
@ -175,13 +247,12 @@ export default defineComponent({
if (restrictionRect && !isSetup) {
// 计算偏移位置
const offsetX = restrictionRect.x + position.x
const offsetY = restrictionRect.y + position.y
const p = getPosition(restrictionRect, card.getBoundingClientRect())
// 设置初始位置
card.style.transform = `translate(${offsetX}px, ${offsetY}px)`
position.x = offsetX
position.y = offsetY
card.style.transform = `translate(${p.x}px, ${p.y}px)`
position.x = p.x
position.y = p.y
}
interactInst = interact(card)

8
src/components/pro/RTablePro/src/TablePro.tsx
View File

@ -2,7 +2,7 @@ import { RTable } from '@/components'
import props from './props'
import { useTable } from '@/components'
import { call } from '@/utils'
import { call, removeDuplicateKeys } from '@/utils'
import { usePagination } from '@/hooks'
import type { TablePagination, TableRequestConfig, TableProInst } from './types'
@ -62,7 +62,8 @@ export default defineComponent({
const combineRequestParams = (extraConfig?: TableRequestConfig) => {
const config = Object.assign({}, props.requestConfig, extraConfig)
const { params, formatRangeTime } = config
const { formatRangeTime } = config
let params = config.params || {}
// 转换时间范围，该功能仅支持 NDatePicker range 模式参数
if (formatRangeTime?.length && params) {
@ -84,6 +85,8 @@ export default defineComponent({
})
}
params = removeDuplicateKeys(params)
const requestParams = Object.assign({}, params, {
page: getPage(),
pageSize: getPageSize(),
@ -139,6 +142,7 @@ export default defineComponent({
filter,
getCurrentTableRequestParams:
combineRequestParams as TableProInst['getCurrentTableRequestParams'],
resetTablePagination: resetPagination,
})
}
})

10
src/components/pro/RTablePro/src/hooks/useTablePro.ts
View File

@ -1,7 +1,6 @@
import type { Recordable } from '@/types'
import type { TableProInst, TableRequestConfig } from '../types'
import type {
RTableInst,
CsvOptionsType,
FilterState,
ScrollToOptions,
@ -152,6 +151,14 @@ export const useTablePro = () => {
// @ts-ignore
getTableProInstance().getCurrentTableRequestParams.call(null, extraConfig)
/**
*
* @description
* 重置表格分页。
*/
const resetTablePagination = () =>
getTableProInstance().resetTablePagination.call(null)
return [
register,
{
@ -167,6 +174,7 @@ export const useTablePro = () => {
runTableRequest,
print,
getCurrentTableRequestParams,
resetTablePagination,
},
] as const
}

6
src/components/pro/RTablePro/src/types.ts
View File

@ -72,4 +72,10 @@ export interface TableProInst extends Omit<RTableInst, 'getTableInstance'> {
getCurrentTableRequestParams: <T = Recordable>(
extraConfig?: TableRequestConfig<T>,
) => TableRequestConfig<T>['params'] & Recordable
/**
*
* @description
* 重置表格分页。
*/
resetTablePagination: () => void
}

2
src/layout/components/SiderBar/components/SettingDrawer/constant.ts
View File

@ -3,7 +3,7 @@ import type { InjectionKey, Reactive } from 'vue'
import type { DebouncedFunc } from 'lodash-es'
interface SettingDrawerInjectKey extends SettingState {
throttleSetupAppMenu: DebouncedFunc<() => void>
throttleSetupAppMenu: DebouncedFunc<() => Promise<void>>
}
export const SETTING_DRAWER_INJECT_KEY: Reactive<

2
src/store/modules/menu/index.ts
View File

@ -465,7 +465,7 @@ export const piniaMenuStore = defineStore(
persist: {
key: APP_CATCH_KEY.appPiniaMenuStore,
storage: window.localStorage,
pick: ['breadcrumbOptions', 'menuKey', 'collapsed'],
pick: ['menuKey', 'collapsed'],
},
},
)

4
src/store/modules/signing/index.ts
View File

@ -22,6 +22,7 @@ import type {
export const piniaSigningStore = defineStore(
'signing',
() => {
const { clearRoutes, replace } = useRouter()
const state = reactive({
/**
*
@ -95,7 +96,8 @@ export const piniaSigningStore = defineStore(
closeAll()
if (toSigning) {
window.location.replace('#/')
clearRoutes()
replace('/')
setTimeout(() => {
window.location.reload()

8
src/styles/base.scss
View File

@ -1,7 +1,7 @@
@import '@/styles/animate.scss';
@import '@/styles/root.scss';
@import '@/styles/naive.scss';
@import '@/styles/print-css.scss';
@use '@/styles/animate.scss' as *;
@use '@/styles/root.scss' as *;
@use '@/styles/naive.scss' as *;
@use '@/styles/print-css.scss' as *;
body,
h1,

1
src/utils/index.ts
View File

@ -9,3 +9,4 @@ export * from './vue'
export * from './app'
export { positionSelectedMenuItem }
export { updateObjectValue } from './update-object-value'
export { removeDuplicateKeys } from './remove-duplicate-keys'

26
src/utils/remove-duplicate-keys.ts Normal file
View File

@ -0,0 +1,26 @@
import { reduce } from 'lodash-es'
import type { Recordable } from '@/types'
/**
*
* @param targetObject target object
*
* @description
* 移除对象中重复的键。
* 以最后一次出现的键为准。
*
* @example
* removeDuplicateKeys({ a: 1, b: 2, a: 3 }) // { a: 3, b: 2 }
*/
export const removeDuplicateKeys = <T extends Recordable>(targetObject: T) => {
return reduce(
Object.entries(targetObject).reverse(),
(result, [key, value]) => {
result[key as keyof T] = value
return result
},
{} as T,
)
}

11
src/views/dashboard/index.tsx
View File

@ -8,6 +8,7 @@ import {
NFlex,
NP,
NH6,
NText,
} from 'naive-ui'
import { RIcon } from '@/components'
import AppShareLink from '@/app-components/app/AppShareLink'
@ -48,12 +49,16 @@ const Dashboard = defineComponent({
des: () => (
<NFlex align="center">
如果有希望补充的功能可以在
<a
<NText
as="a"
class="dashboard-link"
href="https://github.com/XiaoDaiGua-Ray/ray-template"
type="primary"
{...{
href: 'https://github.com/XiaoDaiGua-Ray/ray-template/issues',
}}
>
GitHub
</a>
</NText>
提一个 Issues
</NFlex>
),

18
src/views/demo/draggable-card.tsx
View File

@ -5,30 +5,40 @@ export default defineComponent({
name: 'DraggableCardDemo',
setup() {
const card3 = ref(false)
const domRef = useTemplateRef<HTMLElement>('domRef')
return {
card3,
domRef,
}
},
render() {
const { card3 } = this
const { card3, domRef } = this
return (
<div>
<div
ref="domRef"
style={{
width: '100%',
height: '400px',
backgroundColor: 'red',
}}
></div>
<RDraggableCard animation title="Body">
我被限制在 body 中。
</RDraggableCard>
{card3 ? (
<RDraggableCard
animation
title="Layout Container"
restrictionElement=".r-layout-full__viewer-content"
title="Custom Container"
restrictionElement={domRef}
closable
onClose={() => (this.card3 = false)}
>
{{
default: () =>
'我被限制在 Layout Container 中。并且我支持 NCard 的所有配置与插槽。',
'我被限制在红色区域中。并且我支持 NCard 的所有配置与插槽。',
'header-extra': () => '其实我就是 NCard 封装的',
footer: () => '我支持 footer 插槽',
action: () => '我支持 action 插槽',

9
unplugin/.eslintrc-auto-import.json
View File

@ -79,6 +79,13 @@
"watchSyncEffect": true,
"ExtractDefaultPropTypes": true,
"ExtractPropTypes": true,
"ExtractPublicPropTypes": true
"ExtractPublicPropTypes": true,
"DirectiveBinding": true,
"MaybeRef": true,
"MaybeRefOrGetter": true,
"onWatcherCleanup": true,
"useId": true,
"useModel": true,
"useTemplateRef": true
}
}

7
unplugin/auto-imports.d.ts vendored
View File

@ -3,6 +3,7 @@
// @ts-nocheck
// noinspection JSUnusedGlobalSymbols
// Generated by unplugin-auto-import
// biome-ignore lint: disable
export {}
declare global {
const EffectScope: typeof import('vue')['EffectScope']
@ -46,6 +47,7 @@ declare global {
const onServerPrefetch: typeof import('vue')['onServerPrefetch']
const onUnmounted: typeof import('vue')['onUnmounted']
const onUpdated: typeof import('vue')['onUpdated']
const onWatcherCleanup: typeof import('vue')['onWatcherCleanup']
const provide: typeof import('vue')['provide']
const reactive: typeof import('vue')['reactive']
const readonly: typeof import('vue')['readonly']
@ -66,10 +68,13 @@ declare global {
const useAttrs: typeof import('vue')['useAttrs']
const useCssModule: typeof import('vue')['useCssModule']
const useCssVars: typeof import('vue')['useCssVars']
const useId: typeof import('vue')['useId']
const useLink: typeof import('vue-router')['useLink']
const useModel: typeof import('vue')['useModel']
const useRoute: typeof import('vue-router')['useRoute']
const useRouter: typeof import('vue-router')['useRouter']
const useSlots: typeof import('vue')['useSlots']
const useTemplateRef: typeof import('vue')['useTemplateRef']
const watch: typeof import('vue')['watch']
const watchEffect: typeof import('vue')['watchEffect']
const watchPostEffect: typeof import('vue')['watchPostEffect']
@ -78,6 +83,6 @@ declare global {
// for type re-export
declare global {
// @ts-ignore
export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
import('vue')
}

2
vite-helper/mixin-css.ts
View File

@ -13,7 +13,7 @@ export const mixinCss = (options?: string[]) => {
}
const mixinString = options.reduce((pre, curr) => {
const temp = `@import "${curr}";`
const temp = `@use "${curr}" as *;`
return (pre += temp)
}, '')