mirror of
https://github.com/XiaoDaiGua-Ray/ray-template.git
synced 2025-04-06 03:57:49 +08:00
Compare commits
7 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
eb5a6aa9e2 | ||
|
|
674539edd3 | ||
|
ff0bcb5022 | ||
|
d3d98190a3 | ||
|
|
0bb707bba0 | ||
|
|
4bfdbccd88 | ||
|
|
3b2bba391e |
55
CHANGELOG.md
55
CHANGELOG.md
@ -1,4 +1,57 @@
|
|||||||
# CHANGE LOG
|
## 5.1.0
|
||||||
|
|
||||||
|
## Feats
|
||||||
|
|
||||||
|
- 主流依赖更新
|
||||||
|
- `RDraggableCard` 组件 `defaultPosition` 配置项新增 `center`, `top-center`, `bottom-center` 配置项，并且该配置项支持动态更新了
|
||||||
|
- `RDraggableCard` 组件容器 `id` 由 `draggable-card-container` 变更为 `r-draggable-card-container`
|
||||||
|
- `views/demo` 包命名调整
|
||||||
|
|
||||||
|
## Fixes
|
||||||
|
|
||||||
|
- 修复 `RDraggableCard` 组件设置 `dad` 为 `false` 时，初始化位置错误的问题
|
||||||
|
|
||||||
|
## 5.0.10
|
||||||
|
|
||||||
|
## Feats
|
||||||
|
|
||||||
|
- `RDraggableCard` 组件现在不会在抛出获取 `dom` 失败的异常，因为可能存在异步组件加载的可能
|
||||||
|
- `RModal`, `useModal` 方法，移除 `dad` 相关所有配置，使用 `draggable` 配置项替代
|
||||||
|
- 刷新的样式现在会跟随主题变化
|
||||||
|
- 锁屏密码现在会进行加密存储，并且会进行校验处理了
|
||||||
|
- 新增 `decrypt`, `decrypt` 方法，放置于 `utils/c` 包中
|
||||||
|
|
||||||
|
## Fixes
|
||||||
|
|
||||||
|
- 修复因为错误的注册全局事件，导致事件污染的问题，但是默认的 `ctrl + k`, `cmd + k` 快捷键依旧保留为全局按键
|
||||||
|
|
||||||
|
## 5.0.9
|
||||||
|
|
||||||
|
## Feats
|
||||||
|
|
||||||
|
- `RDraggableCard` 组件
|
||||||
|
- 新增 `restrictionElement` 配置项，允许设置拖拽限制元素
|
||||||
|
- 新增 `padding` 配置项，允许配置元素初始化位置的间隔值
|
||||||
|
- `defaultPosition` 配置项新增 `top-left`, `top-right`, `bottom-left`, `bottom-right` 配置项，允许配置元素初始化位置
|
||||||
|
- `RTablePro` 组件
|
||||||
|
- 现在会自动删除重复的请求参数
|
||||||
|
- 暴露 `resetTablePagination` 方法，允许手动重置表格分页
|
||||||
|
- `logout` 方法现在会在执行的时候，清空所有的 `router-route`
|
||||||
|
- 更新依赖为主流版本
|
||||||
|
|
||||||
|
## 5.0.8
|
||||||
|
|
||||||
|
## Feats
|
||||||
|
|
||||||
|
- 修改 `menuTagOptions` 的缓存方式，现在会缓存至 `sessionStorage` 中，兼容可能多系统版本部署与多开系统页面标签页冲突的问题
|
||||||
|
- 新增 `RDraggableCard` 组件
|
||||||
|
- 更新 `vite` 版本至 `6.0.4`
|
||||||
|
|
||||||
|
## Fixes
|
||||||
|
|
||||||
|
- 修复 `updateObjectValue` 方法对于对象值判断不准确的问题
|
||||||
|
- 修复 `SettingDrawer` 组件初始化时，没有正确初始化 `settingStore` 的问题
|
||||||
|
- 修复 `RTable` 组件在未设置 `title` 与 `tool` 为 `false` 时，导致 `headerStyle` 样式会高一些的问题
|
||||||
|
|
||||||
## 5.0.7
|
## 5.0.7
|
||||||
|
|
||||||
|
|||||||
39
index.html
39
index.html
@ -15,6 +15,27 @@
|
|||||||
--preloading-title-color: <%= preloadingConfig.titleColor %>;
|
--preloading-title-color: <%= preloadingConfig.titleColor %>;
|
||||||
--ray-theme-primary-fade-color: <%= appPrimaryColor.primaryFadeColor %>;
|
--ray-theme-primary-fade-color: <%= appPrimaryColor.primaryFadeColor %>;
|
||||||
--ray-theme-primary-color: <%= appPrimaryColor.primaryColor %>;
|
--ray-theme-primary-color: <%= appPrimaryColor.primaryColor %>;
|
||||||
|
--global-loading-bg-color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
#pre-loading-animation {
|
||||||
|
background-color: var(--global-loading-bg-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: light) {
|
||||||
|
#pre-loading-animation {
|
||||||
|
background-color: var(--global-loading-bg-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
html.dark #pre-loading-animation {
|
||||||
|
background-color: var(--global-loading-bg-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
html.light #pre-loading-animation {
|
||||||
|
background-color: var(--global-loading-bg-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
#pre-loading-animation {
|
#pre-loading-animation {
|
||||||
@ -23,13 +44,9 @@
|
|||||||
right: 0;
|
right: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
background-color: #ffffff;
|
|
||||||
color: var(--preloading-title-color);
|
color: var(--preloading-title-color);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
background-color: var(--global-loading-bg-color);
|
||||||
|
|
||||||
.ray-template--dark #pre-loading-animation {
|
|
||||||
background-color: #2a3146;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#pre-loading-animation .pre-loading-animation__wrapper {
|
#pre-loading-animation .pre-loading-animation__wrapper {
|
||||||
@ -95,6 +112,18 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
<script>
|
||||||
|
;(function () {
|
||||||
|
const html = document.documentElement
|
||||||
|
const store = window.localStorage.getItem('piniaSettingStore')
|
||||||
|
const { _appTheme = false } = store ? JSON.parse(store) : {}
|
||||||
|
const loadingBgColor = _appTheme ? '#1c1e23' : '#ffffff'
|
||||||
|
|
||||||
|
html.classList.add(_appTheme ? 'dark' : 'light')
|
||||||
|
html.style.setProperty('--global-loading-bg-color', loadingBgColor)
|
||||||
|
html.style.setProperty('background-color', loadingBgColor)
|
||||||
|
})()
|
||||||
|
</script>
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
<div id="pre-loading-animation">
|
<div id="pre-loading-animation">
|
||||||
|
|||||||
96
package.json
96
package.json
@ -1,7 +1,7 @@
|
|||||||
{
|
{
|
||||||
"name": "ray-template",
|
"name": "ray-template",
|
||||||
"private": false,
|
"private": false,
|
||||||
"version": "5.0.7",
|
"version": "5.1.0",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": "^18.0.0 || ^20.0.0 || >=22.0.0",
|
"node": "^18.0.0 || ^20.0.0 || >=22.0.0",
|
||||||
@ -33,79 +33,81 @@
|
|||||||
]
|
]
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@logicflow/core": "2.0.6",
|
"@logicflow/core": "2.0.10",
|
||||||
"@logicflow/extension": "2.0.10",
|
"@logicflow/extension": "2.0.14",
|
||||||
"@vueuse/core": "^12.0.0",
|
"@vueuse/core": "^12.4.0",
|
||||||
"axios": "^1.7.9",
|
"axios": "^1.7.9",
|
||||||
"clipboard": "^2.0.11",
|
"clipboard": "^2.0.11",
|
||||||
|
"crypto-js": "4.2.0",
|
||||||
"currency.js": "^2.0.4",
|
"currency.js": "^2.0.4",
|
||||||
"dayjs": "^1.11.13",
|
"dayjs": "^1.11.13",
|
||||||
"echarts": "^5.5.1",
|
"echarts": "^5.6.0",
|
||||||
"html-to-image": "1.11.11",
|
"html-to-image": "1.11.11",
|
||||||
"interactjs": "1.10.27",
|
"interactjs": "1.10.27",
|
||||||
"jsbarcode": "3.11.6",
|
"jsbarcode": "3.11.6",
|
||||||
"lodash-es": "^4.17.21",
|
"lodash-es": "^4.17.21",
|
||||||
"mockjs": "1.1.0",
|
"mockjs": "1.1.0",
|
||||||
"naive-ui": "^2.40.3",
|
"naive-ui": "^2.41.0",
|
||||||
"pinia": "^2.3.0",
|
"pinia": "^2.3.0",
|
||||||
"pinia-plugin-persistedstate": "^4.1.3",
|
"pinia-plugin-persistedstate": "^4.2.0",
|
||||||
"print-js": "^1.6.0",
|
"print-js": "^1.6.0",
|
||||||
"vue": "^3.5.13",
|
"vue": "^3.5.13",
|
||||||
"vue-demi": "0.14.10",
|
"vue-demi": "0.14.10",
|
||||||
"vue-hooks-plus": "2.2.1",
|
"vue-hooks-plus": "2.2.3",
|
||||||
"vue-i18n": "^9.13.1",
|
"vue-i18n": "^9.13.1",
|
||||||
"vue-router": "^4.4.0",
|
"vue-router": "^4.4.0",
|
||||||
"vue3-next-qrcode": "2.0.10"
|
"vue3-next-qrcode": "2.0.10"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@commitlint/cli": "^19.3.0",
|
"@amap/amap-jsapi-types": "0.0.15",
|
||||||
"@commitlint/config-conventional": "^19.2.2",
|
"@ant-design/icons-vue": "7.0.1",
|
||||||
"@eslint/eslintrc": "3.1.0",
|
"@commitlint/cli": "19.3.0",
|
||||||
"@eslint/js": "9.11.0",
|
"@commitlint/config-conventional": "19.2.2",
|
||||||
"@interactjs/types": "1.10.27",
|
"@interactjs/types": "1.10.27",
|
||||||
"@intlify/unplugin-vue-i18n": "^4.0.0",
|
"@intlify/unplugin-vue-i18n": "4.0.0",
|
||||||
"@types/crypto-js": "^4.2.2",
|
"@types/crypto-js": "4.2.2",
|
||||||
"@types/jsbarcode": "3.11.4",
|
"@types/jsbarcode": "3.11.4",
|
||||||
"@types/lodash-es": "^4.17.12",
|
"@types/lodash-es": "4.17.12",
|
||||||
"@types/mockjs": "1.0.10",
|
"@types/mockjs": "1.0.10",
|
||||||
"@typescript-eslint/eslint-plugin": "^8.16.0",
|
"@types/three": "0.171.0",
|
||||||
"@typescript-eslint/parser": "^8.16.0",
|
"@typescript-eslint/eslint-plugin": "8.20.0",
|
||||||
"@vitejs/plugin-vue": "^5.1.0",
|
"@typescript-eslint/parser": "8.20.0",
|
||||||
"@vitejs/plugin-vue-jsx": "^4.1.1",
|
"@vitejs/plugin-vue": "5.2.1",
|
||||||
"@vitest/ui": "1.5.2",
|
"@vitejs/plugin-vue-jsx": "4.1.1",
|
||||||
"@vue/eslint-config-prettier": "^9.0.0",
|
"@vitest/ui": "2.1.8",
|
||||||
"@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",
|
"@vue/test-utils": "2.4.6",
|
||||||
"autoprefixer": "^10.4.20",
|
"autoprefixer": "10.4.20",
|
||||||
"depcheck": "^1.4.7",
|
"depcheck": "1.4.7",
|
||||||
"eslint": "^9.11.0",
|
"eslint": "9.18.0",
|
||||||
"eslint-config-prettier": "^9.1.0",
|
"eslint-config-prettier": "10.0.1",
|
||||||
"eslint-plugin-prettier": "^5.1.3",
|
"eslint-plugin-prettier": "5.2.2",
|
||||||
"eslint-plugin-vue": "^9.26.0",
|
"eslint-plugin-vue": "9.32.0",
|
||||||
"globals": "15.12.0",
|
"globals": "15.14.0",
|
||||||
"happy-dom": "14.12.3",
|
"happy-dom": "16.6.0",
|
||||||
"husky": "8.0.3",
|
"husky": "8.0.3",
|
||||||
"lint-staged": "^15.2.2",
|
"lint-staged": "15.3.0",
|
||||||
"postcss": "^8.4.49",
|
"postcss": "8.5.1",
|
||||||
"postcss-px-to-viewport-8-with-include": "1.2.2",
|
"postcss-px-to-viewport-8-with-include": "1.2.2",
|
||||||
"prettier": "^3.3.2",
|
"prettier": "3.4.2",
|
||||||
"rollup-plugin-gzip": "4.0.1",
|
"rollup-plugin-gzip": "4.0.1",
|
||||||
"sass": "1.77.1",
|
"sass": "1.83.4",
|
||||||
"svg-sprite-loader": "^6.0.11",
|
"svg-sprite-loader": "6.0.11",
|
||||||
"typescript": "^5.6.3",
|
"typescript": "5.6.3",
|
||||||
"unplugin-auto-import": "^0.18.2",
|
"unplugin-auto-import": "19.0.0",
|
||||||
"unplugin-vue-components": "^0.27.4",
|
"unplugin-vue-components": "0.28.0",
|
||||||
"vite": "^6.0.3",
|
"vite": "6.1.0",
|
||||||
"vite-bundle-analyzer": "0.9.4",
|
"vite-bundle-analyzer": "0.16.0",
|
||||||
"vite-plugin-cdn2": "1.1.0",
|
"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-eslint": "1.8.1",
|
||||||
"vite-plugin-inspect": "^0.8.4",
|
"vite-plugin-inspect": "0.8.4",
|
||||||
"vite-plugin-mock-dev-server": "1.8.0",
|
"vite-plugin-mock-dev-server": "1.8.3",
|
||||||
"vite-plugin-svg-icons": "^2.0.1",
|
"vite-plugin-svg-icons": "2.0.1",
|
||||||
"vite-svg-loader": "^5.1.0",
|
"vite-svg-loader": "5.1.0",
|
||||||
"vitest": "2.0.5",
|
"vitest": "2.1.8",
|
||||||
"vue-tsc": "^2.1.10"
|
"vue-tsc": "2.2.0"
|
||||||
},
|
},
|
||||||
"description": "<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->",
|
"description": "<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->",
|
||||||
"main": "index.ts",
|
"main": "index.ts",
|
||||||
|
|||||||
3252
pnpm-lock.yaml
generated
3252
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@ -28,7 +28,7 @@ interface JSONPlaceholder {
|
|||||||
*
|
*
|
||||||
* @returns 测试
|
* @returns 测试
|
||||||
*
|
*
|
||||||
* @medthod get
|
* @method get
|
||||||
*/
|
*/
|
||||||
export const getWeather = (city: string) => {
|
export const getWeather = (city: string) => {
|
||||||
return request<AxiosTestResponse>({
|
return request<AxiosTestResponse>({
|
||||||
|
|||||||
@ -7,6 +7,8 @@ import { rules, useCondition } from '@/app-components/app/AppLockScreen/shared'
|
|||||||
import { useSettingActions } from '@/store'
|
import { useSettingActions } from '@/store'
|
||||||
import { useTemplateRef } from 'vue'
|
import { useTemplateRef } from 'vue'
|
||||||
import { useForm } from '@/components'
|
import { useForm } from '@/components'
|
||||||
|
import { APP_CATCH_KEY } from '@/app-config'
|
||||||
|
import { setStorage, encrypt } from '@/utils'
|
||||||
|
|
||||||
import type { InputInst } from 'naive-ui'
|
import type { InputInst } from 'naive-ui'
|
||||||
|
|
||||||
@ -27,6 +29,11 @@ const LockScreen = defineComponent({
|
|||||||
validate().then(() => {
|
validate().then(() => {
|
||||||
setLockAppScreen(true)
|
setLockAppScreen(true)
|
||||||
updateSettingState('lockScreenSwitch', false)
|
updateSettingState('lockScreenSwitch', false)
|
||||||
|
setStorage(
|
||||||
|
APP_CATCH_KEY.appLockScreenPasswordKey,
|
||||||
|
encrypt(state.lockCondition.lockPassword),
|
||||||
|
'localStorage',
|
||||||
|
)
|
||||||
|
|
||||||
state.lockCondition = useCondition()
|
state.lockCondition = useCondition()
|
||||||
})
|
})
|
||||||
|
|||||||
@ -10,6 +10,8 @@ import { rules, useCondition } from '@/app-components/app/AppLockScreen/shared'
|
|||||||
import useAppLockScreen from '@/app-components/app/AppLockScreen/appLockVar'
|
import useAppLockScreen from '@/app-components/app/AppLockScreen/appLockVar'
|
||||||
import { useDevice } from '@/hooks'
|
import { useDevice } from '@/hooks'
|
||||||
import { useForm } from '@/components'
|
import { useForm } from '@/components'
|
||||||
|
import { APP_CATCH_KEY } from '@/app-config'
|
||||||
|
import { removeStorage, decrypt, getStorage } from '@/utils'
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: 'UnlockScreen',
|
name: 'UnlockScreen',
|
||||||
@ -42,27 +44,56 @@ export default defineComponent({
|
|||||||
state.DDD = dayjs().format(DDD_FORMAT)
|
state.DDD = dayjs().format(DDD_FORMAT)
|
||||||
}, 86_400_000)
|
}, 86_400_000)
|
||||||
|
|
||||||
|
const toSigningFn = () => {
|
||||||
|
removeStorage(APP_CATCH_KEY.appLockScreenPasswordKey, 'localStorage')
|
||||||
|
updateSettingState('lockScreenSwitch', false)
|
||||||
|
setTimeout(() => {
|
||||||
|
logout()
|
||||||
|
}, 100)
|
||||||
|
}
|
||||||
|
|
||||||
const backToSigning = () => {
|
const backToSigning = () => {
|
||||||
window.$dialog.warning({
|
window.$dialog.warning({
|
||||||
title: '警告',
|
title: '警告',
|
||||||
content: '是否返回到登陆页?',
|
content: '是否返回到登陆页并且重新登录',
|
||||||
positiveText: '确定',
|
positiveText: '确定',
|
||||||
negativeText: '取消',
|
negativeText: '重新登录',
|
||||||
onPositiveClick: () => {
|
onPositiveClick: toSigningFn,
|
||||||
updateSettingState('lockScreenSwitch', false)
|
|
||||||
setTimeout(() => {
|
|
||||||
logout()
|
|
||||||
}, 100)
|
|
||||||
},
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
const unlockScreen = () => {
|
const unlockScreen = () => {
|
||||||
validate().then(() => {
|
const catchPassword = getStorage<string>(
|
||||||
setLockAppScreen(false)
|
APP_CATCH_KEY.appLockScreenPasswordKey,
|
||||||
updateSettingState('lockScreenSwitch', false)
|
'localStorage',
|
||||||
|
)
|
||||||
|
|
||||||
state.lockCondition = useCondition()
|
if (!catchPassword) {
|
||||||
|
window.$dialog.warning({
|
||||||
|
title: '警告',
|
||||||
|
content: () => '检测到锁屏密码被修改，请重新登录',
|
||||||
|
closable: false,
|
||||||
|
maskClosable: false,
|
||||||
|
closeOnEsc: false,
|
||||||
|
positiveText: '重新登录',
|
||||||
|
onPositiveClick: toSigningFn,
|
||||||
|
})
|
||||||
|
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const dCatchPassword = decrypt(catchPassword)
|
||||||
|
|
||||||
|
validate().then(() => {
|
||||||
|
if (dCatchPassword === state.lockCondition.lockPassword) {
|
||||||
|
setLockAppScreen(false)
|
||||||
|
updateSettingState('lockScreenSwitch', false)
|
||||||
|
removeStorage(APP_CATCH_KEY.appLockScreenPasswordKey, 'localStorage')
|
||||||
|
|
||||||
|
state.lockCondition = useCondition()
|
||||||
|
} else {
|
||||||
|
window.$message.warning('密码错误，请重新输入')
|
||||||
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -44,7 +44,7 @@ export default defineComponent({
|
|||||||
primaryColor,
|
primaryColor,
|
||||||
)
|
)
|
||||||
// 将主色调任意颜色转换为 rgba 格式
|
// 将主色调任意颜色转换为 rgba 格式
|
||||||
const fp = colorToRgba(p, 0.8)
|
const fp = colorToRgba(p, 0.85)
|
||||||
|
|
||||||
// 设置全局主题色 css 变量
|
// 设置全局主题色 css 变量
|
||||||
html.style.setProperty(rayTemplateThemePrimaryColor, p) // 主色调
|
html.style.setProperty(rayTemplateThemePrimaryColor, p) // 主色调
|
||||||
|
|||||||
@ -53,7 +53,7 @@ export default defineComponent({
|
|||||||
title="发现新版本"
|
title="发现新版本"
|
||||||
content="当前版本已更新，点击确认加载新版本~"
|
content="当前版本已更新，点击确认加载新版本~"
|
||||||
zIndex={999999999}
|
zIndex={999999999}
|
||||||
dad
|
draggable
|
||||||
positiveText="确认"
|
positiveText="确认"
|
||||||
negativeText="取消"
|
negativeText="取消"
|
||||||
onPositiveClick={logout}
|
onPositiveClick={logout}
|
||||||
|
|||||||
@ -93,6 +93,8 @@ export const APP_CATCH_KEY_PREFIX = ''
|
|||||||
* - appPiniaMenuStore: pinia menu store key
|
* - appPiniaMenuStore: pinia menu store key
|
||||||
* - appPiniaSigningStore: pinia signing store key
|
* - appPiniaSigningStore: pinia signing store key
|
||||||
* - appVersionProvider: 版本信息缓存 key
|
* - appVersionProvider: 版本信息缓存 key
|
||||||
|
* - appMenuTagOptions: 标签页菜单列表
|
||||||
|
* - appLockScreenPasswordKey: 锁屏密码缓存 key
|
||||||
*/
|
*/
|
||||||
export const APP_CATCH_KEY = {
|
export const APP_CATCH_KEY = {
|
||||||
signing: 'signing',
|
signing: 'signing',
|
||||||
@ -106,6 +108,8 @@ export const APP_CATCH_KEY = {
|
|||||||
appVersionProvider: 'appVersionProvider',
|
appVersionProvider: 'appVersionProvider',
|
||||||
isAppLockScreen: 'isAppLockScreen',
|
isAppLockScreen: 'isAppLockScreen',
|
||||||
appGlobalSearchOptions: 'appGlobalSearchOptions',
|
appGlobalSearchOptions: 'appGlobalSearchOptions',
|
||||||
|
appMenuTagOptions: 'appMenuTagOptions',
|
||||||
|
appLockScreenPasswordKey: 'appLockScreenPasswordKey',
|
||||||
} as const
|
} as const
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
@ -20,7 +20,7 @@ export const APP_THEME: AppTheme = {
|
|||||||
// 主题色
|
// 主题色
|
||||||
primaryColor: '#2d8cf0',
|
primaryColor: '#2d8cf0',
|
||||||
// 主题辅助色(用于整体 hover、active 等之类颜色)
|
// 主题辅助色(用于整体 hover、active 等之类颜色)
|
||||||
primaryFadeColor: 'rgba(45, 140, 240, 0.8)',
|
primaryFadeColor: 'rgba(45, 140, 240, 0.85)',
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
@ -52,14 +52,12 @@ export const APP_THEME: AppTheme = {
|
|||||||
common: {
|
common: {
|
||||||
borderRadius: '4px',
|
borderRadius: '4px',
|
||||||
baseColor: 'rgb(18, 18, 18)',
|
baseColor: 'rgb(18, 18, 18)',
|
||||||
textColorBase: 'rgb(255, 255, 255)',
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
light: {
|
light: {
|
||||||
common: {
|
common: {
|
||||||
borderRadius: '4px',
|
borderRadius: '4px',
|
||||||
baseColor: 'rgb(255, 255, 255)',
|
baseColor: 'rgb(255, 255, 255)',
|
||||||
textColorBase: 'rgb(31, 31, 31)',
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|||||||
@ -1,10 +1,3 @@
|
|||||||
/**
|
|
||||||
*
|
|
||||||
* 请求拦截器与响应拦截器
|
|
||||||
* 如果有需要拓展拦截器, 请在 inject 目录下参照示例方法继续拓展
|
|
||||||
* 该页面不应该做过多的改动与配置
|
|
||||||
*/
|
|
||||||
|
|
||||||
import axios from 'axios'
|
import axios from 'axios'
|
||||||
import { AXIOS_CONFIG } from '@/app-config'
|
import { AXIOS_CONFIG } from '@/app-config'
|
||||||
import { useAxiosInterceptor } from '@/axios/utils/interceptor'
|
import { useAxiosInterceptor } from '@/axios/utils/interceptor'
|
||||||
@ -17,23 +10,33 @@ import {
|
|||||||
setupRequestErrorInterceptor,
|
setupRequestErrorInterceptor,
|
||||||
} from '@/axios/axios-interceptor/request'
|
} from '@/axios/axios-interceptor/request'
|
||||||
|
|
||||||
import type { AxiosInstanceExpand } from './types'
|
import type { AxiosInstanceExpand, RequestInterceptorConfig } from './types'
|
||||||
|
|
||||||
|
// 创建 axios 实例
|
||||||
const server: AxiosInstanceExpand = axios.create(AXIOS_CONFIG)
|
const server: AxiosInstanceExpand = axios.create(AXIOS_CONFIG)
|
||||||
|
// 获取拦截器实例
|
||||||
const { createAxiosInstance, beforeFetch, fetchError } = useAxiosInterceptor()
|
const { createAxiosInstance, beforeFetch, fetchError } = useAxiosInterceptor()
|
||||||
|
|
||||||
// 请求拦截器
|
// 请求拦截器
|
||||||
server.interceptors.request.use(
|
server.interceptors.request.use(
|
||||||
(request) => {
|
(request) => {
|
||||||
createAxiosInstance(request, 'requestInstance') // 生成 request instance
|
// 生成 request instance
|
||||||
setupRequestInterceptor() // 初始化拦截器所有已注入方法
|
createAxiosInstance(
|
||||||
beforeFetch('requestInstance', 'implementRequestInterceptorArray', 'ok') // 执行拦截器所有已注入方法
|
request as RequestInterceptorConfig<unknown>,
|
||||||
|
'requestInstance',
|
||||||
|
)
|
||||||
|
// 初始化拦截器所有已注入方法
|
||||||
|
setupRequestInterceptor()
|
||||||
|
// 执行拦截器所有已注入方法
|
||||||
|
beforeFetch('requestInstance', 'implementRequestInterceptorArray', 'ok')
|
||||||
|
|
||||||
return request
|
return request
|
||||||
},
|
},
|
||||||
(error) => {
|
(error) => {
|
||||||
setupRequestErrorInterceptor() // 初始化拦截器所有已注入方法(错误状态)
|
// 初始化拦截器所有已注入方法(错误状态)
|
||||||
fetchError('requestError', error, 'implementRequestInterceptorErrorArray') // 执行所有已注入方法
|
setupRequestErrorInterceptor()
|
||||||
|
// 执行所有已注入方法
|
||||||
|
fetchError('requestError', error, 'implementRequestInterceptorErrorArray')
|
||||||
|
|
||||||
return Promise.reject(error)
|
return Promise.reject(error)
|
||||||
},
|
},
|
||||||
@ -42,17 +45,22 @@ server.interceptors.request.use(
|
|||||||
// 响应拦截器
|
// 响应拦截器
|
||||||
server.interceptors.response.use(
|
server.interceptors.response.use(
|
||||||
(response) => {
|
(response) => {
|
||||||
createAxiosInstance(response, 'responseInstance') // 创建响应实例
|
// 创建响应实例
|
||||||
setupResponseInterceptor() // 注入响应成功待执行队列
|
createAxiosInstance(response, 'responseInstance')
|
||||||
beforeFetch('responseInstance', 'implementResponseInterceptorArray', 'ok') // 执行响应成功拦截器
|
// 注入响应成功待执行队列
|
||||||
|
setupResponseInterceptor()
|
||||||
|
// 执行响应成功拦截器
|
||||||
|
beforeFetch('responseInstance', 'implementResponseInterceptorArray', 'ok')
|
||||||
|
|
||||||
const { data } = response
|
const { data } = response
|
||||||
|
|
||||||
return Promise.resolve(data)
|
return Promise.resolve(data)
|
||||||
},
|
},
|
||||||
(error) => {
|
(error) => {
|
||||||
setupResponseErrorInterceptor() // 注入响应失败待执行队列
|
// 注入响应失败待执行队列
|
||||||
fetchError('responseError', error, 'implementResponseInterceptorErrorArray') // 执行响应失败后拦截器
|
setupResponseErrorInterceptor()
|
||||||
|
// 执行响应失败后拦截器
|
||||||
|
fetchError('responseError', error, 'implementResponseInterceptorErrorArray')
|
||||||
|
|
||||||
return Promise.reject(error)
|
return Promise.reject(error)
|
||||||
},
|
},
|
||||||
|
|||||||
@ -1,14 +1,3 @@
|
|||||||
/**
|
|
||||||
*
|
|
||||||
* axios 拦截器注入
|
|
||||||
*
|
|
||||||
* 请求拦截器、响应拦截器
|
|
||||||
* 暴露启动方法调用所有已注册方法
|
|
||||||
*
|
|
||||||
* 该拦截器仅适合放置公共的 axios 拦截器操作, 并且采用队列形式管理请求拦截器的注入
|
|
||||||
* 所以在使用的时候, 需要按照约定格式进行参数传递
|
|
||||||
*/
|
|
||||||
|
|
||||||
import RequestCanceler from '@/axios/utils/RequestCanceler'
|
import RequestCanceler from '@/axios/utils/RequestCanceler'
|
||||||
import { getAppEnvironment } from '@/utils'
|
import { getAppEnvironment } from '@/utils'
|
||||||
|
|
||||||
@ -24,31 +13,36 @@ import type {
|
|||||||
import type { AnyFC } from '@/types'
|
import type { AnyFC } from '@/types'
|
||||||
import type { AxiosError } from 'axios'
|
import type { AxiosError } from 'axios'
|
||||||
|
|
||||||
/** 当前请求的实例 */
|
// 当前请求的实例
|
||||||
const axiosFetchInstance: AxiosFetchInstance = {
|
const axiosFetchInstance: AxiosFetchInstance = {
|
||||||
requestInstance: null,
|
requestInstance: null,
|
||||||
responseInstance: null,
|
responseInstance: null,
|
||||||
}
|
}
|
||||||
/** 请求失败返回值 */
|
// 请求失败返回值
|
||||||
const axiosFetchError: AxiosFetchError<AxiosError<unknown, unknown>> = {
|
const axiosFetchError: AxiosFetchError<AxiosError<unknown, unknown>> = {
|
||||||
requestError: null,
|
requestError: null,
|
||||||
responseError: null,
|
responseError: null,
|
||||||
}
|
}
|
||||||
/** 请求队列(区分 resolve 与 reject 状态) */
|
// 请求队列(区分 resolve 与 reject 状态)
|
||||||
const implement: ImplementQueue = {
|
const implement: ImplementQueue = {
|
||||||
implementRequestInterceptorArray: [],
|
implementRequestInterceptorArray: [],
|
||||||
implementResponseInterceptorArray: [],
|
implementResponseInterceptorArray: [],
|
||||||
}
|
}
|
||||||
|
// 请求失败队列
|
||||||
const errorImplement: ErrorImplementQueue = {
|
const errorImplement: ErrorImplementQueue = {
|
||||||
implementRequestInterceptorErrorArray: [],
|
implementRequestInterceptorErrorArray: [],
|
||||||
implementResponseInterceptorErrorArray: [],
|
implementResponseInterceptorErrorArray: [],
|
||||||
}
|
}
|
||||||
|
|
||||||
/** 取消器实例 */
|
type ImplementKeys = keyof ImplementQueue
|
||||||
|
|
||||||
|
type ErrorImplementKeys = keyof ErrorImplementQueue
|
||||||
|
|
||||||
|
// 取消器实例
|
||||||
export const axiosCanceler = new RequestCanceler()
|
export const axiosCanceler = new RequestCanceler()
|
||||||
|
|
||||||
export const useAxiosInterceptor = () => {
|
export const useAxiosInterceptor = () => {
|
||||||
/** 创建拦截器实例 */
|
// 创建拦截器实例
|
||||||
const createAxiosInstance = (
|
const createAxiosInstance = (
|
||||||
instance: RequestInterceptorConfig | ResponseInterceptorConfig,
|
instance: RequestInterceptorConfig | ResponseInterceptorConfig,
|
||||||
instanceKey: keyof AxiosFetchInstance,
|
instanceKey: keyof AxiosFetchInstance,
|
||||||
@ -60,33 +54,33 @@ export const useAxiosInterceptor = () => {
|
|||||||
instance as ResponseInterceptorConfig)
|
instance as ResponseInterceptorConfig)
|
||||||
}
|
}
|
||||||
|
|
||||||
/** 获取当前实例 */
|
// 获取当前实例
|
||||||
const getAxiosInstance = (instanceKey: keyof AxiosFetchInstance) => {
|
const getAxiosInstance = (instanceKey: keyof AxiosFetchInstance) => {
|
||||||
return axiosFetchInstance[instanceKey]
|
return axiosFetchInstance[instanceKey]
|
||||||
}
|
}
|
||||||
|
|
||||||
/** 设置注入方法队列 */
|
// 设置注入方法队列
|
||||||
const setImplement = (
|
const setImplement = (
|
||||||
key: keyof ImplementQueue | keyof ErrorImplementQueue,
|
key: ImplementKeys | ErrorImplementKeys,
|
||||||
func: AnyFC[],
|
func: AnyFC[],
|
||||||
fetchType: FetchType,
|
fetchType: FetchType,
|
||||||
) => {
|
) => {
|
||||||
fetchType === 'ok'
|
fetchType === 'ok'
|
||||||
? (implement[key as keyof ImplementQueue] = func)
|
? (implement[key as ImplementKeys] = func)
|
||||||
: (errorImplement[key as keyof ErrorImplementQueue] = func)
|
: (errorImplement[key as ErrorImplementKeys] = func)
|
||||||
}
|
}
|
||||||
|
|
||||||
/** 获取队列中所有的所有拦截器方法 */
|
// 获取队列中所有的所有拦截器方法
|
||||||
const getImplement = (
|
const getImplement = (
|
||||||
key: keyof ImplementQueue | keyof ErrorImplementQueue,
|
key: ImplementKeys | ErrorImplementKeys,
|
||||||
fetchType: FetchType,
|
fetchType: FetchType,
|
||||||
): AnyFC[] => {
|
): AnyFC[] => {
|
||||||
return fetchType === 'ok'
|
return fetchType === 'ok'
|
||||||
? implement[key as keyof ImplementQueue]
|
? implement[key as ImplementKeys]
|
||||||
: errorImplement[key as keyof ErrorImplementQueue]
|
: errorImplement[key as ErrorImplementKeys]
|
||||||
}
|
}
|
||||||
|
|
||||||
/** 队列执行器 */
|
// 队列执行器
|
||||||
const implementer = (funcs: AnyFC[], ...args: any[]) => {
|
const implementer = (funcs: AnyFC[], ...args: any[]) => {
|
||||||
if (Array.isArray(funcs)) {
|
if (Array.isArray(funcs)) {
|
||||||
funcs.forEach((curr) => {
|
funcs.forEach((curr) => {
|
||||||
@ -97,16 +91,16 @@ export const useAxiosInterceptor = () => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/** 请求、响应前执行拦截器队列中的所有方法 */
|
// 请求、响应前执行拦截器队列中的所有方法
|
||||||
const beforeFetch = (
|
const beforeFetch = (
|
||||||
key: keyof AxiosFetchInstance,
|
key: keyof AxiosFetchInstance,
|
||||||
implementKey: keyof ImplementQueue | keyof ErrorImplementQueue,
|
implementKey: ImplementKeys | ErrorImplementKeys,
|
||||||
fetchType: FetchType,
|
fetchType: FetchType,
|
||||||
) => {
|
) => {
|
||||||
const funcArr =
|
const funcArr =
|
||||||
fetchType === 'ok'
|
fetchType === 'ok'
|
||||||
? implement[implementKey as keyof ImplementQueue]
|
? implement[implementKey as ImplementKeys]
|
||||||
: errorImplement[implementKey as keyof ErrorImplementQueue]
|
: errorImplement[implementKey as ErrorImplementKeys]
|
||||||
const instance = getAxiosInstance(key)
|
const instance = getAxiosInstance(key)
|
||||||
const { MODE } = getAppEnvironment()
|
const { MODE } = getAppEnvironment()
|
||||||
|
|
||||||
@ -115,11 +109,11 @@ export const useAxiosInterceptor = () => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/** 请求、响应错误时执行队列中所有方法 */
|
// 请求、响应错误时执行队列中所有方法
|
||||||
const fetchError = (
|
const fetchError = (
|
||||||
key: keyof AxiosFetchError,
|
key: keyof AxiosFetchError,
|
||||||
error: AxiosError<unknown, unknown>,
|
error: AxiosError<unknown, unknown>,
|
||||||
errorImplementKey: keyof ErrorImplementQueue,
|
errorImplementKey: ErrorImplementKeys,
|
||||||
) => {
|
) => {
|
||||||
axiosFetchError[key] = error
|
axiosFetchError[key] = error
|
||||||
|
|
||||||
|
|||||||
388
src/components/base/RDraggableCard/DraggableCard.tsx
Normal file
388
src/components/base/RDraggableCard/DraggableCard.tsx
Normal file
@ -0,0 +1,388 @@
|
|||||||
|
import './index.scss'
|
||||||
|
|
||||||
|
import { NCard } from 'naive-ui'
|
||||||
|
import { Teleport, Transition } from 'vue'
|
||||||
|
|
||||||
|
import interact from 'interactjs'
|
||||||
|
import { cardProps } from 'naive-ui'
|
||||||
|
import { unrefElement, completeSize, queryElements } from '@/utils'
|
||||||
|
|
||||||
|
import type { VNode } from 'vue'
|
||||||
|
import type { MaybeElement, MaybeRefOrGetter } from '@vueuse/core'
|
||||||
|
import type { AnyFC } from '@/types'
|
||||||
|
|
||||||
|
type RestrictRectOptions = Parameters<typeof interact.modifiers.restrictRect>[0]
|
||||||
|
|
||||||
|
type Padding = {
|
||||||
|
x: number
|
||||||
|
y: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export type DefaultPosition =
|
||||||
|
| Padding
|
||||||
|
| 'top-left'
|
||||||
|
| 'top-right'
|
||||||
|
| 'bottom-left'
|
||||||
|
| 'bottom-right'
|
||||||
|
| 'center'
|
||||||
|
| 'top-center'
|
||||||
|
| 'bottom-center'
|
||||||
|
|
||||||
|
const props = {
|
||||||
|
...cardProps,
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @description
|
||||||
|
* 需要限制的区域位置。
|
||||||
|
*
|
||||||
|
* @default body
|
||||||
|
*/
|
||||||
|
restrictionElement: {
|
||||||
|
type: [String, HTMLElement, Function, Object] as PropType<
|
||||||
|
string | HTMLElement | (() => VNode) | MaybeRefOrGetter<MaybeElement>
|
||||||
|
>,
|
||||||
|
default: 'body',
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @description
|
||||||
|
* 是否启用拖拽。
|
||||||
|
*
|
||||||
|
* @default true
|
||||||
|
*/
|
||||||
|
dad: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @description
|
||||||
|
* 自定义限制拖拽范围。
|
||||||
|
*
|
||||||
|
* @default undefined
|
||||||
|
*/
|
||||||
|
restrictRectOptions: {
|
||||||
|
type: Object as PropType<RestrictRectOptions>,
|
||||||
|
default: void 0,
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @description
|
||||||
|
* 默认位置。
|
||||||
|
*
|
||||||
|
* @default { x: 0, y: 0 }
|
||||||
|
*/
|
||||||
|
defaultPosition: {
|
||||||
|
type: [Object, String] as PropType<DefaultPosition>,
|
||||||
|
default: () => ({
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @description
|
||||||
|
* 拖拽卡片宽度。
|
||||||
|
*
|
||||||
|
* @default 600
|
||||||
|
*/
|
||||||
|
width: {
|
||||||
|
type: [String, Number] as PropType<string | number>,
|
||||||
|
default: 600,
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @description
|
||||||
|
* 拖拽卡片 z-index。
|
||||||
|
*
|
||||||
|
* @default undefined
|
||||||
|
*/
|
||||||
|
zIndex: {
|
||||||
|
type: Number,
|
||||||
|
default: void 0,
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @description
|
||||||
|
* 是否启用动画。
|
||||||
|
*
|
||||||
|
* @default false
|
||||||
|
*/
|
||||||
|
animation: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @description
|
||||||
|
* 默认的边距。
|
||||||
|
* 设置该属性后，卡片首次出现的位置会根据该属性进行偏移。
|
||||||
|
*
|
||||||
|
* @default undefined
|
||||||
|
*/
|
||||||
|
padding: {
|
||||||
|
type: Object as PropType<Padding>,
|
||||||
|
default: void 0,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: 'RDraggableCard',
|
||||||
|
props,
|
||||||
|
setup(props, { expose }) {
|
||||||
|
const cardRef = useTemplateRef<HTMLElement>('cardRef')
|
||||||
|
let interactInst: ReturnType<typeof interact> | null = null
|
||||||
|
const position = {
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
}
|
||||||
|
const CONTAINER_ID = 'r-draggable-card-container'
|
||||||
|
const cssVars = computed(() => {
|
||||||
|
return {
|
||||||
|
'--r-draggable-card-width': completeSize(props.width),
|
||||||
|
'--r-draggable-card-z-index': props.zIndex,
|
||||||
|
}
|
||||||
|
})
|
||||||
|
let isSetup = false
|
||||||
|
const cacheProps = {
|
||||||
|
defaultPosition: props.defaultPosition,
|
||||||
|
dad: props.dad,
|
||||||
|
}
|
||||||
|
|
||||||
|
// 创建 DraggableCard 容器
|
||||||
|
const createDraggableCardContainer = () => {
|
||||||
|
if (!document.getElementById(CONTAINER_ID)) {
|
||||||
|
const container = document.createElement('div')
|
||||||
|
|
||||||
|
container.id = CONTAINER_ID
|
||||||
|
document.documentElement.appendChild(container)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
createDraggableCardContainer()
|
||||||
|
|
||||||
|
// 获取 card, restrictionElement 的 dom 信息
|
||||||
|
const getDom = () => {
|
||||||
|
const card = unrefElement(cardRef)
|
||||||
|
const re =
|
||||||
|
typeof props.restrictionElement === 'string'
|
||||||
|
? queryElements<HTMLElement>(props.restrictionElement)
|
||||||
|
: props.restrictionElement
|
||||||
|
let restrictionElement: HTMLElement | null = null
|
||||||
|
|
||||||
|
if (Array.isArray(re)) {
|
||||||
|
restrictionElement = re[0]
|
||||||
|
} else {
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||||
|
restrictionElement = unrefElement<HTMLElement>(re as any) as HTMLElement
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
card,
|
||||||
|
restrictionElement,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取 container, card 的位置
|
||||||
|
const getPosition = (containerRect: DOMRect, cardRect: DOMRect) => {
|
||||||
|
const { defaultPosition, padding } = props
|
||||||
|
const { x: paddingX = 0, y: paddingY = 0 } = padding ?? {}
|
||||||
|
// 默认的 body restrictionElement 的偏移量是 0
|
||||||
|
const {
|
||||||
|
x: containerX,
|
||||||
|
y: containerY,
|
||||||
|
width: containerWidth,
|
||||||
|
height: containerHeight,
|
||||||
|
} = containerRect
|
||||||
|
const { width: cardWidth, height: cardHeight } = cardRect
|
||||||
|
|
||||||
|
if (typeof defaultPosition === 'string') {
|
||||||
|
switch (defaultPosition) {
|
||||||
|
case 'top-center': {
|
||||||
|
const cx1 = (containerWidth - cardWidth) / 2 + containerX
|
||||||
|
const cy1 = paddingY + containerY
|
||||||
|
const cx2 = paddingX + cx1
|
||||||
|
const cy2 = cy1
|
||||||
|
|
||||||
|
return { x: cx2, y: cy2 }
|
||||||
|
}
|
||||||
|
|
||||||
|
case 'bottom-center': {
|
||||||
|
const cx1 = (containerWidth - cardWidth) / 2 + containerX
|
||||||
|
const cy1 = containerHeight - cardHeight - paddingY + containerY
|
||||||
|
const cx2 = paddingX + cx1
|
||||||
|
const cy2 = cy1
|
||||||
|
|
||||||
|
return { x: cx2, y: cy2 }
|
||||||
|
}
|
||||||
|
|
||||||
|
case 'center': {
|
||||||
|
const cx1 = (containerWidth - cardWidth) / 2 + containerX
|
||||||
|
const cy1 = (containerHeight - cardHeight) / 2 + containerY
|
||||||
|
const cx2 = paddingX + cx1
|
||||||
|
const cy2 = paddingY + cy1
|
||||||
|
|
||||||
|
return { x: cx2, y: cy2 }
|
||||||
|
}
|
||||||
|
|
||||||
|
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,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 初始化设置 card 的位置，并且根据配置启用拖拽
|
||||||
|
const setupDraggable = () => {
|
||||||
|
const { card, restrictionElement } = getDom()
|
||||||
|
|
||||||
|
if (!card) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const restrictionRect = restrictionElement?.getBoundingClientRect()
|
||||||
|
const cardHeader = card.querySelector('.n-card-header')
|
||||||
|
const restrictRectOptions = Object.assign(
|
||||||
|
{},
|
||||||
|
{
|
||||||
|
restriction: restrictionElement,
|
||||||
|
endOnly: true,
|
||||||
|
},
|
||||||
|
props.restrictRectOptions,
|
||||||
|
)
|
||||||
|
|
||||||
|
if (restrictionRect && !isSetup) {
|
||||||
|
// 计算偏移位置
|
||||||
|
const p = getPosition(restrictionRect, card.getBoundingClientRect())
|
||||||
|
|
||||||
|
// 设置初始位置
|
||||||
|
card.style.transform = `translate(${p.x}px, ${p.y}px)`
|
||||||
|
position.x = p.x
|
||||||
|
position.y = p.y
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!props.dad) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
interactInst = interact(card)
|
||||||
|
.draggable({
|
||||||
|
inertia: true,
|
||||||
|
autoScroll: true,
|
||||||
|
allowFrom: cardHeader ? '.n-card-header' : '.n-card__content',
|
||||||
|
modifiers: [interact.modifiers.restrictRect(restrictRectOptions)],
|
||||||
|
listeners: {
|
||||||
|
move: (event) => {
|
||||||
|
card.setAttribute('can-drag', 'true')
|
||||||
|
|
||||||
|
position.x += event.dx
|
||||||
|
position.y += event.dy
|
||||||
|
|
||||||
|
card.style.transform = `translate(${position.x}px, ${position.y}px)`
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
|
.resizable(false)
|
||||||
|
|
||||||
|
isSetup = true
|
||||||
|
}
|
||||||
|
|
||||||
|
// 取消拖拽
|
||||||
|
const resetDraggable = () => {
|
||||||
|
interactInst?.unset()
|
||||||
|
|
||||||
|
interactInst = null
|
||||||
|
}
|
||||||
|
|
||||||
|
// 更新拖拽
|
||||||
|
const refreshDraggableWhenPropsChange = (fn: AnyFC) => {
|
||||||
|
isSetup = false
|
||||||
|
|
||||||
|
fn()
|
||||||
|
setupDraggable()
|
||||||
|
}
|
||||||
|
|
||||||
|
expose()
|
||||||
|
|
||||||
|
watchEffect(() => {
|
||||||
|
props.dad ? setupDraggable() : resetDraggable()
|
||||||
|
|
||||||
|
if (props.defaultPosition !== cacheProps.defaultPosition) {
|
||||||
|
refreshDraggableWhenPropsChange(() => {
|
||||||
|
cacheProps.defaultPosition = props.defaultPosition
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
nextTick(() => {
|
||||||
|
setupDraggable()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
return {
|
||||||
|
cardRef,
|
||||||
|
CONTAINER_ID,
|
||||||
|
cssVars,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
render() {
|
||||||
|
const { $attrs, $slots, $props, CONTAINER_ID, cssVars, animation } = this
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Teleport to={`#${CONTAINER_ID}`}>
|
||||||
|
{animation ? (
|
||||||
|
<Transition name="draggable-card" appear mode="out-in">
|
||||||
|
<NCard
|
||||||
|
{...$attrs}
|
||||||
|
{...$props}
|
||||||
|
class="r-draggable-card"
|
||||||
|
style={[cssVars]}
|
||||||
|
ref="cardRef"
|
||||||
|
>
|
||||||
|
{{ ...$slots }}
|
||||||
|
</NCard>
|
||||||
|
</Transition>
|
||||||
|
) : (
|
||||||
|
<NCard
|
||||||
|
{...$attrs}
|
||||||
|
{...$props}
|
||||||
|
class="r-draggable-card"
|
||||||
|
style={[cssVars]}
|
||||||
|
ref="cardRef"
|
||||||
|
>
|
||||||
|
{{ ...$slots }}
|
||||||
|
</NCard>
|
||||||
|
)}
|
||||||
|
</Teleport>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
})
|
||||||
25
src/components/base/RDraggableCard/index.scss
Normal file
25
src/components/base/RDraggableCard/index.scss
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
.n-card.r-draggable-card {
|
||||||
|
transform-origin: 0 0;
|
||||||
|
position: absolute;
|
||||||
|
width: var(--r-draggable-card-width);
|
||||||
|
z-index: var(--r-draggable-card-z-index);
|
||||||
|
}
|
||||||
|
|
||||||
|
#r-draggable-card-container {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// draggable-card 的 Transition 样式
|
||||||
|
.draggable-card-enter-active,
|
||||||
|
.draggable-card-leave-active {
|
||||||
|
transition: opacity 0.3s var(--r-bezier);
|
||||||
|
}
|
||||||
|
|
||||||
|
.draggable-card-enter-from,
|
||||||
|
.draggable-card-leave-to {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
@ -36,7 +36,10 @@ import type { Recordable } from '@/types'
|
|||||||
* },
|
* },
|
||||||
* })
|
* })
|
||||||
*/
|
*/
|
||||||
const useForm = <T extends Recordable, R extends RFormRules>(
|
const useForm = <
|
||||||
|
T extends Recordable = Recordable,
|
||||||
|
R extends RFormRules = RFormRules,
|
||||||
|
>(
|
||||||
model?: T,
|
model?: T,
|
||||||
rules?: R,
|
rules?: R,
|
||||||
) => {
|
) => {
|
||||||
|
|||||||
@ -4,14 +4,12 @@ import { NModal } from 'naive-ui'
|
|||||||
|
|
||||||
import props from './props'
|
import props from './props'
|
||||||
import { completeSize, uuid } from '@/utils'
|
import { completeSize, uuid } from '@/utils'
|
||||||
import { setupInteract } from './utils'
|
|
||||||
import {
|
import {
|
||||||
FULLSCREEN_CARD_TYPE_CLASS,
|
FULLSCREEN_CARD_TYPE_CLASS,
|
||||||
R_MODAL_CLASS,
|
R_MODAL_CLASS,
|
||||||
CSS_VARS_KEYS,
|
CSS_VARS_KEYS,
|
||||||
} from './constant'
|
} from './constant'
|
||||||
|
|
||||||
import type interact from 'interactjs'
|
|
||||||
import type { ModalProps } from 'naive-ui'
|
import type { ModalProps } from 'naive-ui'
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
@ -24,57 +22,11 @@ export default defineComponent({
|
|||||||
[CSS_VARS_KEYS['dialogWidth']]: completeSize(props.dialogWidth ?? 446),
|
[CSS_VARS_KEYS['dialogWidth']]: completeSize(props.dialogWidth ?? 446),
|
||||||
}))
|
}))
|
||||||
const uuidEl = uuid()
|
const uuidEl = uuid()
|
||||||
let intractable: null | ReturnType<typeof interact>
|
|
||||||
// 记录拖拽的位置
|
|
||||||
const position = {
|
|
||||||
x: 0,
|
|
||||||
y: 0,
|
|
||||||
}
|
|
||||||
// 当前是否为预设 card 类型并且设置了 fullscreen
|
// 当前是否为预设 card 类型并且设置了 fullscreen
|
||||||
const isFullscreenCardType = computed(
|
const isFullscreenCardType = computed(
|
||||||
() => props.preset === 'card' && props.fullscreen,
|
() => props.preset === 'card' && props.fullscreen,
|
||||||
)
|
)
|
||||||
|
|
||||||
watch(
|
|
||||||
() => props.show,
|
|
||||||
(ndata) => {
|
|
||||||
if (
|
|
||||||
ndata &&
|
|
||||||
props.dad &&
|
|
||||||
(props.preset === 'card' || props.preset === 'dialog')
|
|
||||||
) {
|
|
||||||
nextTick(() => {
|
|
||||||
const target = document.getElementById(uuidEl)
|
|
||||||
|
|
||||||
if (target) {
|
|
||||||
setupInteract(target, {
|
|
||||||
preset: props.preset,
|
|
||||||
x: position.x,
|
|
||||||
y: position.y,
|
|
||||||
dargCallback: (x, y) => {
|
|
||||||
position.x = x
|
|
||||||
position.y = y
|
|
||||||
},
|
|
||||||
}).then((res) => {
|
|
||||||
intractable = res
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
if (props.memo && target) {
|
|
||||||
target.style.transform = `translate(${position.x}px, ${position.y}px)`
|
|
||||||
}
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
intractable?.unset()
|
|
||||||
|
|
||||||
intractable = null
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
immediate: true,
|
|
||||||
},
|
|
||||||
)
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
cssVars,
|
cssVars,
|
||||||
isFullscreenCardType,
|
isFullscreenCardType,
|
||||||
|
|||||||
@ -1,5 +1,4 @@
|
|||||||
import { useModal as useNaiveModal, NScrollbar } from 'naive-ui'
|
import { useModal as useNaiveModal, NScrollbar } from 'naive-ui'
|
||||||
import { setupInteract } from '../utils'
|
|
||||||
import { queryElements, setStyle, completeSize, setClass } from '@/utils'
|
import { queryElements, setStyle, completeSize, setClass } from '@/utils'
|
||||||
import { R_MODAL_CLASS, CSS_VARS_KEYS } from '../constant'
|
import { R_MODAL_CLASS, CSS_VARS_KEYS } from '../constant'
|
||||||
|
|
||||||
@ -21,10 +20,10 @@ const useModal = () => {
|
|||||||
color: 'rgba(0, 0, 0, 0)',
|
color: 'rgba(0, 0, 0, 0)',
|
||||||
colorHover: 'rgba(0, 0, 0, 0)',
|
colorHover: 'rgba(0, 0, 0, 0)',
|
||||||
},
|
},
|
||||||
trigger: 'none',
|
trigger: 'hover',
|
||||||
style: {
|
style: {
|
||||||
width: 'auto',
|
width: 'auto',
|
||||||
height:
|
maxHeight:
|
||||||
'calc(var(--html-height) - 29px - var(--n-padding-bottom) - var(--n-padding-bottom) - var(--n-padding-top))',
|
'calc(var(--html-height) - 29px - var(--n-padding-bottom) - var(--n-padding-bottom) - var(--n-padding-top))',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
@ -35,7 +34,7 @@ const useModal = () => {
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
const { preset, dad, fullscreen, width, cardWidth, dialogWidth } = options
|
const { preset, fullscreen, width, cardWidth, dialogWidth } = options
|
||||||
const modalReactive = naiveCreate({
|
const modalReactive = naiveCreate({
|
||||||
...rest,
|
...rest,
|
||||||
content: contentNode,
|
content: contentNode,
|
||||||
@ -55,15 +54,6 @@ const useModal = () => {
|
|||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
// 是否启用拖拽
|
|
||||||
if (dad) {
|
|
||||||
setupInteract(modalElement, {
|
|
||||||
preset,
|
|
||||||
x: 0,
|
|
||||||
y: 0,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// preset 为 card，fullscreen 为 true 时，最大化 modal
|
// preset 为 card，fullscreen 为 true 时，最大化 modal
|
||||||
if (fullscreen && preset === 'card') {
|
if (fullscreen && preset === 'card') {
|
||||||
setStyle(modalElement, {
|
setStyle(modalElement, {
|
||||||
|
|||||||
@ -4,6 +4,11 @@
|
|||||||
// 当设置全屏时，启用滚动
|
// 当设置全屏时，启用滚动
|
||||||
& .n-card__content {
|
& .n-card__content {
|
||||||
overflow: scroll;
|
overflow: scroll;
|
||||||
|
max-height: calc(
|
||||||
|
var(--html-height) - var(--n-padding-bottom) - var(--n-padding-bottom) - var(
|
||||||
|
--n-padding-top
|
||||||
|
)
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -3,17 +3,6 @@ import type { PropType } from 'vue'
|
|||||||
|
|
||||||
const props = {
|
const props = {
|
||||||
...modalProps,
|
...modalProps,
|
||||||
/**
|
|
||||||
*
|
|
||||||
* @description
|
|
||||||
* 是否记住上一次的位置。
|
|
||||||
*
|
|
||||||
* @default true
|
|
||||||
*/
|
|
||||||
memo: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true,
|
|
||||||
},
|
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* @description
|
* @description
|
||||||
@ -58,18 +47,6 @@ const props = {
|
|||||||
type: [String, Number] as PropType<string | number>,
|
type: [String, Number] as PropType<string | number>,
|
||||||
default: 446,
|
default: 446,
|
||||||
},
|
},
|
||||||
/**
|
|
||||||
*
|
|
||||||
* @description
|
|
||||||
* 是否启用拖拽。
|
|
||||||
* 当启用拖拽时，可以通过拖拽 header 部分控制模态框。
|
|
||||||
*
|
|
||||||
* @default false
|
|
||||||
*/
|
|
||||||
dad: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default props
|
export default props
|
||||||
|
|||||||
@ -1,14 +1,6 @@
|
|||||||
import type { ModalOptions as NaiveModalOptions } from 'naive-ui'
|
import type { ModalOptions as NaiveModalOptions } from 'naive-ui'
|
||||||
|
|
||||||
export interface RModalProps extends NaiveModalOptions {
|
export interface RModalProps extends NaiveModalOptions {
|
||||||
/**
|
|
||||||
*
|
|
||||||
* @description
|
|
||||||
* 是否记住上一次的位置。
|
|
||||||
*
|
|
||||||
* @default true
|
|
||||||
*/
|
|
||||||
memo?: boolean
|
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* @description
|
* @description
|
||||||
@ -41,13 +33,4 @@ export interface RModalProps extends NaiveModalOptions {
|
|||||||
* @default 446
|
* @default 446
|
||||||
*/
|
*/
|
||||||
dialogWidth?: number | string
|
dialogWidth?: number | string
|
||||||
/**
|
|
||||||
*
|
|
||||||
* @description
|
|
||||||
* 是否启用拖拽。
|
|
||||||
* 当启用拖拽时，可以通过拖拽 header 部分控制模态框。
|
|
||||||
*
|
|
||||||
* @default false
|
|
||||||
*/
|
|
||||||
dad?: boolean
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,101 +0,0 @@
|
|||||||
import interact from 'interactjs'
|
|
||||||
|
|
||||||
import type { ModalProps } from 'naive-ui'
|
|
||||||
import type { RModalProps } from './types'
|
|
||||||
|
|
||||||
interface SetupDraggableOptions {
|
|
||||||
scheduler?: (event: Interact.DragEvent) => void
|
|
||||||
}
|
|
||||||
|
|
||||||
interface SetupInteractOptions {
|
|
||||||
preset: ModalProps['preset']
|
|
||||||
memo?: RModalProps['memo']
|
|
||||||
x: number
|
|
||||||
y: number
|
|
||||||
dargCallback?: (x: number, y: number, event: Interact.DragEvent) => void
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
*
|
|
||||||
* @param bindModal modal 预设元素
|
|
||||||
* @param preset 预设类型
|
|
||||||
*
|
|
||||||
* @description
|
|
||||||
* 根据预设模态框设置拖拽效果
|
|
||||||
* 但是该效果有且仅有 card, dialog 有效
|
|
||||||
*
|
|
||||||
* 默认添加 30ms 延迟，避免诡异问题
|
|
||||||
*/
|
|
||||||
export const setupDraggable = (
|
|
||||||
bindModal: HTMLElement,
|
|
||||||
preset: ModalProps['preset'],
|
|
||||||
options?: SetupDraggableOptions,
|
|
||||||
): Promise<ReturnType<typeof interact>> => {
|
|
||||||
const { scheduler } = options ?? {}
|
|
||||||
|
|
||||||
return new Promise((resolve) => {
|
|
||||||
setTimeout(() => {
|
|
||||||
const allowFromStr =
|
|
||||||
preset === 'card' ? '.n-card-header__main' : '.n-dialog__title'
|
|
||||||
|
|
||||||
if (bindModal) {
|
|
||||||
const dad = interact(bindModal)
|
|
||||||
.draggable({
|
|
||||||
inertia: true,
|
|
||||||
autoScroll: true,
|
|
||||||
allowFrom: allowFromStr,
|
|
||||||
modifiers: [
|
|
||||||
interact.modifiers.restrictRect({
|
|
||||||
restriction: 'parent',
|
|
||||||
endOnly: true,
|
|
||||||
}),
|
|
||||||
],
|
|
||||||
listeners: {
|
|
||||||
move: (event) => {
|
|
||||||
scheduler?.(event)
|
|
||||||
},
|
|
||||||
},
|
|
||||||
})
|
|
||||||
.resizable(false)
|
|
||||||
|
|
||||||
resolve(dad)
|
|
||||||
}
|
|
||||||
}, 30)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
export const setupInteract = (
|
|
||||||
target: HTMLElement | string,
|
|
||||||
options: SetupInteractOptions,
|
|
||||||
): Promise<ReturnType<typeof interact>> => {
|
|
||||||
const _target =
|
|
||||||
typeof target === 'string'
|
|
||||||
? (document.querySelector(target) as HTMLElement)
|
|
||||||
: target
|
|
||||||
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
if (_target) {
|
|
||||||
_target.setAttribute('can-drag', 'true')
|
|
||||||
|
|
||||||
const { preset, dargCallback } = options
|
|
||||||
let { x, y } = options
|
|
||||||
|
|
||||||
setupDraggable(_target, preset, {
|
|
||||||
scheduler: (event) => {
|
|
||||||
const target = event.target
|
|
||||||
|
|
||||||
x += event.dx
|
|
||||||
y += event.dy
|
|
||||||
|
|
||||||
target.style.transform = `translate(${x}px, ${y}px)`
|
|
||||||
|
|
||||||
dargCallback?.(x, y, event)
|
|
||||||
},
|
|
||||||
}).then((res) => {
|
|
||||||
resolve(res)
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
reject()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
@ -94,7 +94,6 @@ export default defineComponent({
|
|||||||
return (
|
return (
|
||||||
<NTabs
|
<NTabs
|
||||||
{...($props as TabsProps)}
|
{...($props as TabsProps)}
|
||||||
ref="segmentRef"
|
|
||||||
style={[cssVars]}
|
style={[cssVars]}
|
||||||
class="r-segment"
|
class="r-segment"
|
||||||
type="segment"
|
type="segment"
|
||||||
|
|||||||
@ -61,6 +61,23 @@ export default defineComponent({
|
|||||||
pick(props, 'striped', 'bordered'),
|
pick(props, 'striped', 'bordered'),
|
||||||
),
|
),
|
||||||
)
|
)
|
||||||
|
// 默认设置 card header style
|
||||||
|
const cardHeaderStyle = computed(() => {
|
||||||
|
const { title, tool, cardProps } = props
|
||||||
|
const { headerStyle = {} } = cardProps ?? {}
|
||||||
|
|
||||||
|
if (!title && !tool) {
|
||||||
|
return Object.assign(
|
||||||
|
{},
|
||||||
|
{
|
||||||
|
paddingTop: '0px',
|
||||||
|
},
|
||||||
|
headerStyle,
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return headerStyle
|
||||||
|
})
|
||||||
|
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
@ -231,6 +248,7 @@ export default defineComponent({
|
|||||||
tool,
|
tool,
|
||||||
wrapperRef,
|
wrapperRef,
|
||||||
propsPopselectValue,
|
propsPopselectValue,
|
||||||
|
cardHeaderStyle,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
render() {
|
render() {
|
||||||
@ -243,6 +261,7 @@ export default defineComponent({
|
|||||||
uuidWrapper,
|
uuidWrapper,
|
||||||
privateReactive,
|
privateReactive,
|
||||||
propsPopselectValue,
|
propsPopselectValue,
|
||||||
|
cardHeaderStyle,
|
||||||
} = this
|
} = this
|
||||||
const { class: className, ...restAttrs } = $attrs
|
const { class: className, ...restAttrs } = $attrs
|
||||||
const { tool, combineRowProps, contextMenuSelect } = this
|
const { tool, combineRowProps, contextMenuSelect } = this
|
||||||
@ -255,11 +274,12 @@ export default defineComponent({
|
|||||||
tableFlexHeight,
|
tableFlexHeight,
|
||||||
cardProps,
|
cardProps,
|
||||||
...restProps
|
...restProps
|
||||||
} = $props as ExtractPublicPropTypes<typeof props>
|
} = $props
|
||||||
|
const { headerStyle, ...restCardProps } = cardProps ?? {}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<NCard
|
<NCard
|
||||||
{...cardProps}
|
{...restCardProps}
|
||||||
{...{
|
{...{
|
||||||
id: uuidWrapper,
|
id: uuidWrapper,
|
||||||
}}
|
}}
|
||||||
@ -267,6 +287,7 @@ export default defineComponent({
|
|||||||
ref="wrapperRef"
|
ref="wrapperRef"
|
||||||
bordered={wrapperBordered}
|
bordered={wrapperBordered}
|
||||||
class={className}
|
class={className}
|
||||||
|
style={cardHeaderStyle}
|
||||||
>
|
>
|
||||||
{{
|
{{
|
||||||
default: () => (
|
default: () => (
|
||||||
|
|||||||
@ -1,4 +1,5 @@
|
|||||||
import RCollapse from '../components/pro/RCollapse/Collapse'
|
import RCollapse from '../components/pro/RCollapse/Collapse'
|
||||||
|
import RDraggableCard from '../components/base/RDraggableCard/DraggableCard'
|
||||||
|
|
||||||
// 导出所有自定义组件
|
// 导出所有自定义组件
|
||||||
export * from './base/RChart'
|
export * from './base/RChart'
|
||||||
@ -14,7 +15,7 @@ export * from './base/RSegment'
|
|||||||
export * from './base/RBarcode'
|
export * from './base/RBarcode'
|
||||||
export * from '../components/pro/RTablePro'
|
export * from '../components/pro/RTablePro'
|
||||||
export * from './base/RFlow'
|
export * from './base/RFlow'
|
||||||
export { RCollapse }
|
export { RCollapse, RDraggableCard }
|
||||||
|
|
||||||
// 导出自定义组件类型
|
// 导出自定义组件类型
|
||||||
export type * from './base/RChart/src/types'
|
export type * from './base/RChart/src/types'
|
||||||
@ -32,3 +33,4 @@ export type {
|
|||||||
FlowGraphData,
|
FlowGraphData,
|
||||||
FlowOptions,
|
FlowOptions,
|
||||||
} from './base/RFlow/src/types'
|
} from './base/RFlow/src/types'
|
||||||
|
export type { DefaultPosition } from './base/RDraggableCard/DraggableCard'
|
||||||
|
|||||||
@ -2,7 +2,7 @@ import { RTable } from '@/components'
|
|||||||
|
|
||||||
import props from './props'
|
import props from './props'
|
||||||
import { useTable } from '@/components'
|
import { useTable } from '@/components'
|
||||||
import { call } from '@/utils'
|
import { call, removeDuplicateKeys } from '@/utils'
|
||||||
import { usePagination } from '@/hooks'
|
import { usePagination } from '@/hooks'
|
||||||
|
|
||||||
import type { TablePagination, TableRequestConfig, TableProInst } from './types'
|
import type { TablePagination, TableRequestConfig, TableProInst } from './types'
|
||||||
@ -62,7 +62,8 @@ export default defineComponent({
|
|||||||
const combineRequestParams = (extraConfig?: TableRequestConfig) => {
|
const combineRequestParams = (extraConfig?: TableRequestConfig) => {
|
||||||
const config = Object.assign({}, props.requestConfig, extraConfig)
|
const config = Object.assign({}, props.requestConfig, extraConfig)
|
||||||
|
|
||||||
const { params, formatRangeTime } = config
|
const { formatRangeTime } = config
|
||||||
|
let params = config.params || {}
|
||||||
|
|
||||||
// 转换时间范围，该功能仅支持 NDatePicker range 模式参数
|
// 转换时间范围，该功能仅支持 NDatePicker range 模式参数
|
||||||
if (formatRangeTime?.length && params) {
|
if (formatRangeTime?.length && params) {
|
||||||
@ -84,6 +85,8 @@ export default defineComponent({
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
params = removeDuplicateKeys(params)
|
||||||
|
|
||||||
const requestParams = Object.assign({}, params, {
|
const requestParams = Object.assign({}, params, {
|
||||||
page: getPage(),
|
page: getPage(),
|
||||||
pageSize: getPageSize(),
|
pageSize: getPageSize(),
|
||||||
@ -139,6 +142,7 @@ export default defineComponent({
|
|||||||
filter,
|
filter,
|
||||||
getCurrentTableRequestParams:
|
getCurrentTableRequestParams:
|
||||||
combineRequestParams as TableProInst['getCurrentTableRequestParams'],
|
combineRequestParams as TableProInst['getCurrentTableRequestParams'],
|
||||||
|
resetTablePagination: resetPagination,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
@ -1,7 +1,6 @@
|
|||||||
import type { Recordable } from '@/types'
|
import type { Recordable } from '@/types'
|
||||||
import type { TableProInst, TableRequestConfig } from '../types'
|
import type { TableProInst, TableRequestConfig } from '../types'
|
||||||
import type {
|
import type {
|
||||||
RTableInst,
|
|
||||||
CsvOptionsType,
|
CsvOptionsType,
|
||||||
FilterState,
|
FilterState,
|
||||||
ScrollToOptions,
|
ScrollToOptions,
|
||||||
@ -152,6 +151,14 @@ export const useTablePro = () => {
|
|||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
getTableProInstance().getCurrentTableRequestParams.call(null, extraConfig)
|
getTableProInstance().getCurrentTableRequestParams.call(null, extraConfig)
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @description
|
||||||
|
* 重置表格分页。
|
||||||
|
*/
|
||||||
|
const resetTablePagination = () =>
|
||||||
|
getTableProInstance().resetTablePagination.call(null)
|
||||||
|
|
||||||
return [
|
return [
|
||||||
register,
|
register,
|
||||||
{
|
{
|
||||||
@ -167,6 +174,7 @@ export const useTablePro = () => {
|
|||||||
runTableRequest,
|
runTableRequest,
|
||||||
print,
|
print,
|
||||||
getCurrentTableRequestParams,
|
getCurrentTableRequestParams,
|
||||||
|
resetTablePagination,
|
||||||
},
|
},
|
||||||
] as const
|
] as const
|
||||||
}
|
}
|
||||||
|
|||||||
@ -72,4 +72,10 @@ export interface TableProInst extends Omit<RTableInst, 'getTableInstance'> {
|
|||||||
getCurrentTableRequestParams: <T = Recordable>(
|
getCurrentTableRequestParams: <T = Recordable>(
|
||||||
extraConfig?: TableRequestConfig<T>,
|
extraConfig?: TableRequestConfig<T>,
|
||||||
) => TableRequestConfig<T>['params'] & Recordable
|
) => TableRequestConfig<T>['params'] & Recordable
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @description
|
||||||
|
* 重置表格分页。
|
||||||
|
*/
|
||||||
|
resetTablePagination: () => void
|
||||||
}
|
}
|
||||||
|
|||||||
@ -53,7 +53,7 @@ $menuTagWrapperWidth: 76px;
|
|||||||
|
|
||||||
.ray-template--light {
|
.ray-template--light {
|
||||||
.menu-tag__btn-icon:hover {
|
.menu-tag__btn-icon:hover {
|
||||||
filter: brightness(2);
|
filter: brightness(1.2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -84,7 +84,14 @@ export default defineComponent({
|
|||||||
let searchElementIndex = 0
|
let searchElementIndex = 0
|
||||||
// 缓存索引
|
// 缓存索引
|
||||||
let preSearchElementIndex = searchElementIndex
|
let preSearchElementIndex = searchElementIndex
|
||||||
const { isTabletOrSmaller } = useDevice()
|
const { isTabletOrSmaller } = useDevice({
|
||||||
|
observer: (val) => {
|
||||||
|
// 当处于小尺寸状态时，自动关闭搜索框
|
||||||
|
if (val) {
|
||||||
|
modelShow.value = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
})
|
||||||
const loading = ref(false)
|
const loading = ref(false)
|
||||||
// 激活样式 class name
|
// 激活样式 class name
|
||||||
const ACTIVE_CLASS = 'content-item--active'
|
const ACTIVE_CLASS = 'content-item--active'
|
||||||
@ -309,22 +316,7 @@ export default defineComponent({
|
|||||||
</NFlex>
|
</NFlex>
|
||||||
)
|
)
|
||||||
|
|
||||||
watchEffect(() => {
|
useEventListener(window, 'keydown', registerArouseKeyboard)
|
||||||
// 当处于小尺寸状态时，自动关闭搜索框
|
|
||||||
if (isTabletOrSmaller.value) {
|
|
||||||
modelShow.value = false
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
useEventListener(
|
|
||||||
window,
|
|
||||||
'keydown',
|
|
||||||
(e: KeyboardEvent) => {
|
|
||||||
registerArouseKeyboard(e)
|
|
||||||
registerChangeSearchElementIndex(e)
|
|
||||||
},
|
|
||||||
true,
|
|
||||||
)
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
...toRefs(state),
|
...toRefs(state),
|
||||||
@ -336,11 +328,16 @@ export default defineComponent({
|
|||||||
isTabletOrSmaller,
|
isTabletOrSmaller,
|
||||||
SearchItem,
|
SearchItem,
|
||||||
loading,
|
loading,
|
||||||
|
registerChangeSearchElementIndex,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
render() {
|
render() {
|
||||||
const { isTabletOrSmaller, searchOptions, loading } = this
|
const { isTabletOrSmaller, searchOptions, loading } = this
|
||||||
const { SearchItem, fuzzySearchMenuOptions } = this
|
const {
|
||||||
|
SearchItem,
|
||||||
|
fuzzySearchMenuOptions,
|
||||||
|
registerChangeSearchElementIndex,
|
||||||
|
} = this
|
||||||
|
|
||||||
return isTabletOrSmaller ? (
|
return isTabletOrSmaller ? (
|
||||||
<div style="display: none;"></div>
|
<div style="display: none;"></div>
|
||||||
@ -350,7 +347,11 @@ export default defineComponent({
|
|||||||
transformOrigin="center"
|
transformOrigin="center"
|
||||||
displayDirective="if"
|
displayDirective="if"
|
||||||
>
|
>
|
||||||
<div class="global-search global-search--dark global-search--light">
|
<div
|
||||||
|
class="global-search global-search--dark global-search--light"
|
||||||
|
tabindex="-1"
|
||||||
|
onKeydown={registerChangeSearchElementIndex}
|
||||||
|
>
|
||||||
<div class="global-search__wrapper">
|
<div class="global-search__wrapper">
|
||||||
<NCard
|
<NCard
|
||||||
class="global-search__card"
|
class="global-search__card"
|
||||||
|
|||||||
@ -3,7 +3,7 @@ import type { InjectionKey, Reactive } from 'vue'
|
|||||||
import type { DebouncedFunc } from 'lodash-es'
|
import type { DebouncedFunc } from 'lodash-es'
|
||||||
|
|
||||||
interface SettingDrawerInjectKey extends SettingState {
|
interface SettingDrawerInjectKey extends SettingState {
|
||||||
throttleSetupAppMenu: DebouncedFunc<() => void>
|
throttleSetupAppMenu: DebouncedFunc<() => Promise<void>>
|
||||||
}
|
}
|
||||||
|
|
||||||
export const SETTING_DRAWER_INJECT_KEY: Reactive<
|
export const SETTING_DRAWER_INJECT_KEY: Reactive<
|
||||||
|
|||||||
@ -16,7 +16,7 @@ import SegmentViewsCustomMenu from './segment-views/CustomMenu'
|
|||||||
|
|
||||||
import { useSettingGetters, useSettingActions, useMenuActions } from '@/store'
|
import { useSettingGetters, useSettingActions, useMenuActions } from '@/store'
|
||||||
import { SETTING_DRAWER_INJECT_KEY } from './constant'
|
import { SETTING_DRAWER_INJECT_KEY } from './constant'
|
||||||
import { forIn, throttle } from 'lodash-es'
|
import { cloneDeep, forIn, throttle } from 'lodash-es'
|
||||||
import { drawerProps } from 'naive-ui'
|
import { drawerProps } from 'naive-ui'
|
||||||
import { useModal } from '@/components'
|
import { useModal } from '@/components'
|
||||||
import { getDefaultSettingConfig } from '@/store/modules/setting/constant'
|
import { getDefaultSettingConfig } from '@/store/modules/setting/constant'
|
||||||
@ -71,11 +71,13 @@ export default defineComponent({
|
|||||||
positiveText: '确认初始化',
|
positiveText: '确认初始化',
|
||||||
negativeText: '取消',
|
negativeText: '取消',
|
||||||
onPositiveClick: () => {
|
onPositiveClick: () => {
|
||||||
forIn(getDefaultSettingConfig(), (value, key) => {
|
forIn(cloneDeep(getDefaultSettingConfig()), (value, key) => {
|
||||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
modelReactive[key] = value
|
modelReactive[key] = value
|
||||||
|
|
||||||
|
console.log(value, key)
|
||||||
|
|
||||||
updateSettingState(key as keyof SettingState, value)
|
updateSettingState(key as keyof SettingState, value)
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
@ -37,21 +37,28 @@ import type { VNode } from 'vue'
|
|||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: 'AppSiderBar',
|
name: 'AppSiderBar',
|
||||||
setup() {
|
setup() {
|
||||||
|
// 获取 setting 相关值
|
||||||
const { updateLocale, updateSettingState } = useSettingActions()
|
const { updateLocale, updateSettingState } = useSettingActions()
|
||||||
const { t } = useI18n()
|
const { t } = useI18n()
|
||||||
|
// 获取全屏相关方法
|
||||||
const [isFullscreen, { toggleFullscreen, isEnabled }] = useFullscreen(
|
const [isFullscreen, { toggleFullscreen, isEnabled }] = useFullscreen(
|
||||||
document.getElementsByTagName('html')[0],
|
document.getElementsByTagName('html')[0],
|
||||||
)
|
)
|
||||||
|
// 获取设置相关方法
|
||||||
const { getDrawerPlacement, getBreadcrumbSwitch } = useSettingGetters()
|
const { getDrawerPlacement, getBreadcrumbSwitch } = useSettingGetters()
|
||||||
const showSettings = ref(false) // 是否显示设置抽屉
|
// 是否显示设置抽屉
|
||||||
const globalSearchShown = ref(false) // 是否展示全局搜索
|
const showSettings = ref(false)
|
||||||
|
// 是否展示全局搜索
|
||||||
|
const globalSearchShown = ref(false)
|
||||||
|
// 当前是否为平板或者更小的设备
|
||||||
const { isTabletOrSmaller } = useDevice()
|
const { isTabletOrSmaller } = useDevice()
|
||||||
|
// 获取全局 drawer 的值
|
||||||
const globalDrawerValue = getVariableToRefs('globalDrawerValue')
|
const globalDrawerValue = getVariableToRefs('globalDrawerValue')
|
||||||
|
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* 顶部左边操作栏
|
* @description
|
||||||
|
* 顶部左边操作栏。
|
||||||
*/
|
*/
|
||||||
const leftIconOptions = computed(() =>
|
const leftIconOptions = computed(() =>
|
||||||
createLeftIconOptions({
|
createLeftIconOptions({
|
||||||
@ -61,7 +68,8 @@ export default defineComponent({
|
|||||||
)
|
)
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* 顶部右边提示框操作栏
|
* @description
|
||||||
|
* 顶部右边提示框操作栏。
|
||||||
*/
|
*/
|
||||||
const rightTooltipIconOptions = computed(() =>
|
const rightTooltipIconOptions = computed(() =>
|
||||||
createRightIconOptions({
|
createRightIconOptions({
|
||||||
|
|||||||
@ -29,5 +29,6 @@
|
|||||||
"TemplateHooks": "Template Api",
|
"TemplateHooks": "Template Api",
|
||||||
"scrollReveal": "Scroll Reveal",
|
"scrollReveal": "Scroll Reveal",
|
||||||
"TablePro": "Table Pro",
|
"TablePro": "Table Pro",
|
||||||
"Flow": "Flow"
|
"Flow": "Flow",
|
||||||
|
"DraggableCard": "Draggable Card"
|
||||||
}
|
}
|
||||||
|
|||||||
@ -29,5 +29,6 @@
|
|||||||
"TemplateHooks": "模板内置 Api",
|
"TemplateHooks": "模板内置 Api",
|
||||||
"scrollReveal": "滚动动画",
|
"scrollReveal": "滚动动画",
|
||||||
"TablePro": "高级表格",
|
"TablePro": "高级表格",
|
||||||
"Flow": "流程图"
|
"Flow": "流程图",
|
||||||
|
"DraggableCard": "拖拽卡片"
|
||||||
}
|
}
|
||||||
|
|||||||
@ -5,7 +5,7 @@ import type { AppRouteRecordRaw } from '@/router/types'
|
|||||||
|
|
||||||
const barcode: AppRouteRecordRaw = {
|
const barcode: AppRouteRecordRaw = {
|
||||||
path: 'barcode',
|
path: 'barcode',
|
||||||
component: () => import('@/views/demo/BarcodeDemo'),
|
component: () => import('@/views/demo/barcode-demo'),
|
||||||
meta: {
|
meta: {
|
||||||
i18nKey: t('menu.Barcode'),
|
i18nKey: t('menu.Barcode'),
|
||||||
icon: 'other',
|
icon: 'other',
|
||||||
|
|||||||
19
src/router/modules/demo/draggable-card.ts
Normal file
19
src/router/modules/demo/draggable-card.ts
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
import { t } from '@/hooks/web/useI18n'
|
||||||
|
import { LAYOUT } from '@/router/constant'
|
||||||
|
|
||||||
|
import type { AppRouteRecordRaw } from '@/router/types'
|
||||||
|
|
||||||
|
const r: AppRouteRecordRaw = {
|
||||||
|
path: '/draggable-card',
|
||||||
|
component: () => import('@/views/demo/draggable-card'),
|
||||||
|
meta: {
|
||||||
|
i18nKey: t('menu.DraggableCard'),
|
||||||
|
icon: 'other',
|
||||||
|
order: 2,
|
||||||
|
extra: {
|
||||||
|
label: 'drag',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
export default r
|
||||||
@ -5,7 +5,7 @@ import type { AppRouteRecordRaw } from '@/router/types'
|
|||||||
|
|
||||||
const r: AppRouteRecordRaw = {
|
const r: AppRouteRecordRaw = {
|
||||||
path: '/flow',
|
path: '/flow',
|
||||||
component: () => import('@/views/demo/Flow'),
|
component: () => import('@/views/demo/flow-demo'),
|
||||||
meta: {
|
meta: {
|
||||||
i18nKey: t('menu.Flow'),
|
i18nKey: t('menu.Flow'),
|
||||||
icon: 'other',
|
icon: 'other',
|
||||||
@ -5,7 +5,7 @@ import type { AppRouteRecordRaw } from '@/router/types'
|
|||||||
|
|
||||||
const r: AppRouteRecordRaw = {
|
const r: AppRouteRecordRaw = {
|
||||||
path: '/table-pro',
|
path: '/table-pro',
|
||||||
component: () => import('@/views/demo/TablePro'),
|
component: () => import('@/views/demo/table-pro-demo'),
|
||||||
meta: {
|
meta: {
|
||||||
i18nKey: t('menu.TablePro'),
|
i18nKey: t('menu.TablePro'),
|
||||||
icon: 'other',
|
icon: 'other',
|
||||||
|
|||||||
@ -16,10 +16,6 @@ export const orderRoutes = (routes: AppRouteRecordRaw[]) => {
|
|||||||
const currOrder = curr.meta?.order ?? 1
|
const currOrder = curr.meta?.order ?? 1
|
||||||
const nextOrder = next.meta?.order ?? 0
|
const nextOrder = next.meta?.order ?? 0
|
||||||
|
|
||||||
if (typeof currOrder !== 'number' || typeof nextOrder !== 'number') {
|
|
||||||
throw new TypeError('orderRoutes error: order must be a number!')
|
|
||||||
}
|
|
||||||
|
|
||||||
if (currOrder === nextOrder) {
|
if (currOrder === nextOrder) {
|
||||||
// 如果两个路由的 order 值相同，则按照路由名进行排序
|
// 如果两个路由的 order 值相同，则按照路由名进行排序
|
||||||
return curr.name
|
return curr.name
|
||||||
|
|||||||
@ -1,5 +1,4 @@
|
|||||||
import { piniaMenuStore } from '../modules/menu'
|
import { piniaMenuStore } from '../modules/menu'
|
||||||
import { useAppRoot } from '@/hooks'
|
|
||||||
|
|
||||||
export const useMenuGetters = () => {
|
export const useMenuGetters = () => {
|
||||||
const variable = piniaMenuStore()
|
const variable = piniaMenuStore()
|
||||||
@ -31,25 +30,7 @@ export const useMenuGetters = () => {
|
|||||||
* 获取菜单标签列表。
|
* 获取菜单标签列表。
|
||||||
*/
|
*/
|
||||||
const getMenuTagOptions = computed(() => {
|
const getMenuTagOptions = computed(() => {
|
||||||
const { getRootPath } = useAppRoot()
|
return variable.menuTagOptions
|
||||||
|
|
||||||
return variable.menuTagOptions.map((curr, _idx, currentArray) => {
|
|
||||||
if (curr.key === getMenuKey.value && curr.key !== getRootPath.value) {
|
|
||||||
curr.closeable = true
|
|
||||||
} else {
|
|
||||||
curr.closeable = false
|
|
||||||
}
|
|
||||||
|
|
||||||
if (curr.key === getRootPath.value) {
|
|
||||||
curr.closeable = false
|
|
||||||
}
|
|
||||||
|
|
||||||
if (currentArray.length <= 1) {
|
|
||||||
curr.closeable = false
|
|
||||||
}
|
|
||||||
|
|
||||||
return curr
|
|
||||||
})
|
|
||||||
})
|
})
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
@ -8,6 +8,7 @@ import {
|
|||||||
createMenuIcon,
|
createMenuIcon,
|
||||||
getCatchMenuKey,
|
getCatchMenuKey,
|
||||||
createMenuExtra,
|
createMenuExtra,
|
||||||
|
getCatchMenuTagOptions,
|
||||||
} from './utils'
|
} from './utils'
|
||||||
import { useI18n } from '@/hooks'
|
import { useI18n } from '@/hooks'
|
||||||
import { getAppRawRoutes } from '@/router/app-route-modules'
|
import { getAppRawRoutes } from '@/router/app-route-modules'
|
||||||
@ -73,7 +74,7 @@ export const piniaMenuStore = defineStore(
|
|||||||
menuKey: getCatchMenuKey(), // 当前菜单 `key`
|
menuKey: getCatchMenuKey(), // 当前菜单 `key`
|
||||||
options: [], // 菜单列表
|
options: [], // 菜单列表
|
||||||
collapsed: false, // 是否折叠菜单
|
collapsed: false, // 是否折叠菜单
|
||||||
menuTagOptions: [], // tag 标签菜单
|
menuTagOptions: getCatchMenuTagOptions(), // tag 标签菜单
|
||||||
breadcrumbOptions: [], // 面包屑菜单
|
breadcrumbOptions: [], // 面包屑菜单
|
||||||
currentMenuOption: null, // 当前激活菜单项
|
currentMenuOption: null, // 当前激活菜单项
|
||||||
})
|
})
|
||||||
@ -117,11 +118,7 @@ export const piniaMenuStore = defineStore(
|
|||||||
|
|
||||||
// 设置 label, i18nKey 优先级最高
|
// 设置 label, i18nKey 优先级最高
|
||||||
const label = computed(() => (i18nKey ? t(`${i18nKey}`) : noLocalTitle))
|
const label = computed(() => (i18nKey ? t(`${i18nKey}`) : noLocalTitle))
|
||||||
/**
|
// 拼装菜单项，容错处理，兼容以前版本 key 选取为 path 的情况
|
||||||
*
|
|
||||||
* 拼装菜单项
|
|
||||||
* 容错处理，兼容以前版本 key 选取为 path 的情况
|
|
||||||
*/
|
|
||||||
const route = {
|
const route = {
|
||||||
...option,
|
...option,
|
||||||
key: option.fullPath,
|
key: option.fullPath,
|
||||||
@ -137,10 +134,12 @@ export const piniaMenuStore = defineStore(
|
|||||||
extra: createMenuExtra(option),
|
extra: createMenuExtra(option),
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// 如果当前菜单项与缓存菜单项相同，则更新当前菜单项
|
||||||
if (option.fullPath === getCatchMenuKey()) {
|
if (option.fullPath === getCatchMenuKey()) {
|
||||||
menuState.currentMenuOption = attr
|
menuState.currentMenuOption = attr
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 验证菜单项是否显示
|
||||||
attr.show = validMenuItemShow(attr)
|
attr.show = validMenuItemShow(attr)
|
||||||
|
|
||||||
return attr
|
return attr
|
||||||
@ -163,12 +162,13 @@ export const piniaMenuStore = defineStore(
|
|||||||
|
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* @param options menu tag options
|
* @param options menu tag option(s)
|
||||||
* @param isAppend is append
|
* @param isAppend true: 追加操作(push), false: 覆盖操作
|
||||||
*
|
*
|
||||||
* @description
|
* @description
|
||||||
* 设置标签菜单。
|
* 设置标签页。
|
||||||
* true: 追加操作（push），false: 覆盖操作。
|
* 如果传递的 options 为数组，则进行追加操作。
|
||||||
|
* 如果传递的 options 为单个对象，则进行覆盖操作。
|
||||||
*/
|
*/
|
||||||
const setMenuTagOptions = (
|
const setMenuTagOptions = (
|
||||||
options: MenuTagOptions | MenuTagOptions[],
|
options: MenuTagOptions | MenuTagOptions[],
|
||||||
@ -180,6 +180,8 @@ export const piniaMenuStore = defineStore(
|
|||||||
isAppend
|
isAppend
|
||||||
? menuState.menuTagOptions.push(...arr)
|
? menuState.menuTagOptions.push(...arr)
|
||||||
: (menuState.menuTagOptions = arr)
|
: (menuState.menuTagOptions = arr)
|
||||||
|
|
||||||
|
setStorage(APP_CATCH_KEY.appMenuTagOptions, menuState.menuTagOptions)
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -199,6 +201,13 @@ export const piniaMenuStore = defineStore(
|
|||||||
if (!tag) {
|
if (!tag) {
|
||||||
menuState.menuTagOptions.push(option as MenuTagOptions)
|
menuState.menuTagOptions.push(option as MenuTagOptions)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 清理所有非根路径的标签页
|
||||||
|
menuState.menuTagOptions = menuState.menuTagOptions.filter((curr) =>
|
||||||
|
curr.fullPath?.startsWith('/'),
|
||||||
|
)
|
||||||
|
|
||||||
|
setStorage(APP_CATCH_KEY.appMenuTagOptions, menuState.menuTagOptions)
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -402,8 +411,13 @@ export const piniaMenuStore = defineStore(
|
|||||||
* @description
|
* @description
|
||||||
* 关闭 menu tag 标签。
|
* 关闭 menu tag 标签。
|
||||||
*/
|
*/
|
||||||
const spliceMenTagOptions = (idx: number, length = 1) =>
|
const spliceMenTagOptions = (idx: number, length = 1) => {
|
||||||
menuState.menuTagOptions.splice(idx, length)
|
const r = menuState.menuTagOptions.splice(idx, length)
|
||||||
|
|
||||||
|
setStorage(APP_CATCH_KEY.appMenuTagOptions, menuState.menuTagOptions)
|
||||||
|
|
||||||
|
return r
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
@ -451,7 +465,7 @@ export const piniaMenuStore = defineStore(
|
|||||||
persist: {
|
persist: {
|
||||||
key: APP_CATCH_KEY.appPiniaMenuStore,
|
key: APP_CATCH_KEY.appPiniaMenuStore,
|
||||||
storage: window.localStorage,
|
storage: window.localStorage,
|
||||||
pick: ['breadcrumbOptions', 'menuKey', 'menuTagOptions', 'collapsed'],
|
pick: ['menuKey', 'collapsed'],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
)
|
)
|
||||||
|
|||||||
@ -264,3 +264,17 @@ export const getCatchMenuKey = () => {
|
|||||||
|
|
||||||
return cacheMenuKey
|
return cacheMenuKey
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @returns 获取缓存的菜单标签页
|
||||||
|
*/
|
||||||
|
export const getCatchMenuTagOptions = () => {
|
||||||
|
return getStorage<AppMenuOption[]>(
|
||||||
|
APP_CATCH_KEY.appMenuTagOptions,
|
||||||
|
'sessionStorage',
|
||||||
|
{
|
||||||
|
defaultValue: [],
|
||||||
|
},
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|||||||
@ -3,7 +3,7 @@ import { colorToRgba, setStorage, updateObjectValue, setStyle } from '@/utils'
|
|||||||
import { useI18n, useDayjs } from '@/hooks'
|
import { useI18n, useDayjs } from '@/hooks'
|
||||||
import { APP_CATCH_KEY, APP_THEME, GLOBAL_CLASS_NAMES } from '@/app-config'
|
import { APP_CATCH_KEY, APP_THEME, GLOBAL_CLASS_NAMES } from '@/app-config'
|
||||||
import { getDefaultSettingConfig } from './constant'
|
import { getDefaultSettingConfig } from './constant'
|
||||||
import { merge } from 'lodash-es'
|
import { cloneDeep, merge } from 'lodash-es'
|
||||||
|
|
||||||
import type { SettingState } from '@/store/modules/setting/types'
|
import type { SettingState } from '@/store/modules/setting/types'
|
||||||
import type { LocalKey } from '@/hooks'
|
import type { LocalKey } from '@/hooks'
|
||||||
@ -24,8 +24,8 @@ export const piniaSettingStore = defineStore(
|
|||||||
common: {
|
common: {
|
||||||
primaryColor: primaryColor,
|
primaryColor: primaryColor,
|
||||||
primaryColorHover: primaryFadeColor,
|
primaryColorHover: primaryFadeColor,
|
||||||
primaryColorPressed: primaryFadeColor,
|
primaryColorPressed: primaryColor,
|
||||||
primaryColorSuppl: colorToRgba(primaryColor, 0.9),
|
primaryColorSuppl: primaryFadeColor,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
// 内部使用，用于判断是否为黑夜主题（为了兼容历史遗留版本）；true 为黑夜主题，false 为明亮主题
|
// 内部使用，用于判断是否为黑夜主题（为了兼容历史遗留版本）；true 为黑夜主题，false 为明亮主题
|
||||||
@ -48,7 +48,7 @@ export const piniaSettingStore = defineStore(
|
|||||||
url: '/dashboard',
|
url: '/dashboard',
|
||||||
jumpType: 'station',
|
jumpType: 'station',
|
||||||
},
|
},
|
||||||
...getDefaultSettingConfig(),
|
...cloneDeep(getDefaultSettingConfig()),
|
||||||
})
|
})
|
||||||
|
|
||||||
// 修改当前语言
|
// 修改当前语言
|
||||||
@ -65,14 +65,13 @@ export const piniaSettingStore = defineStore(
|
|||||||
* @description
|
* @description
|
||||||
* 切换主题色，传递对应颜色即可更新 naive-ui 的主题色。
|
* 切换主题色，传递对应颜色即可更新 naive-ui 的主题色。
|
||||||
*/
|
*/
|
||||||
const changePrimaryColor = (value: string, alpha = 0.8) => {
|
const changePrimaryColor = (value: string, alpha = 0.85) => {
|
||||||
const alphaColor1 = colorToRgba(value, alpha)
|
const alphaColor1 = colorToRgba(value, alpha)
|
||||||
const alphaColor2 = colorToRgba(value, 0.9)
|
|
||||||
const themeOverrides = {
|
const themeOverrides = {
|
||||||
primaryColor: value,
|
primaryColor: value,
|
||||||
primaryColorHover: alphaColor1,
|
primaryColorHover: alphaColor1,
|
||||||
primaryColorPressed: alphaColor1,
|
primaryColorPressed: value,
|
||||||
primaryColorSuppl: alphaColor2,
|
primaryColorSuppl: alphaColor1,
|
||||||
}
|
}
|
||||||
const { rayTemplateThemePrimaryColor, rayTemplateThemePrimaryFadeColor } =
|
const { rayTemplateThemePrimaryColor, rayTemplateThemePrimaryFadeColor } =
|
||||||
GLOBAL_CLASS_NAMES
|
GLOBAL_CLASS_NAMES
|
||||||
|
|||||||
@ -22,6 +22,7 @@ import type {
|
|||||||
export const piniaSigningStore = defineStore(
|
export const piniaSigningStore = defineStore(
|
||||||
'signing',
|
'signing',
|
||||||
() => {
|
() => {
|
||||||
|
const { clearRoutes, replace } = useRouter()
|
||||||
const state = reactive({
|
const state = reactive({
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
@ -95,7 +96,8 @@ export const piniaSigningStore = defineStore(
|
|||||||
closeAll()
|
closeAll()
|
||||||
|
|
||||||
if (toSigning) {
|
if (toSigning) {
|
||||||
window.location.replace('#/')
|
clearRoutes()
|
||||||
|
replace('/')
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
window.location.reload()
|
window.location.reload()
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
@import '@/styles/animate.scss';
|
@use '@/styles/animate.scss' as *;
|
||||||
@import '@/styles/root.scss';
|
@use '@/styles/root.scss' as *;
|
||||||
@import '@/styles/naive.scss';
|
@use '@/styles/naive.scss' as *;
|
||||||
@import '@/styles/print-css.scss';
|
@use '@/styles/print-css.scss' as *;
|
||||||
|
|
||||||
body,
|
body,
|
||||||
h1,
|
h1,
|
||||||
|
|||||||
6
src/utils/c/constant.ts
Normal file
6
src/utils/c/constant.ts
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
/**
|
||||||
|
*
|
||||||
|
* @description
|
||||||
|
* 约定加密 key。
|
||||||
|
*/
|
||||||
|
export const CRYPTO_KEY = '4cP+dX5FI2EVYzln'
|
||||||
32
src/utils/c/decrypt.ts
Normal file
32
src/utils/c/decrypt.ts
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
import { AES, enc } from 'crypto-js'
|
||||||
|
import { CRYPTO_KEY } from './constant'
|
||||||
|
|
||||||
|
import type { CipherParams, WordArray } from './types'
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @param data AES 加密后的数据
|
||||||
|
* @param key 解密 key
|
||||||
|
*
|
||||||
|
* @description
|
||||||
|
* 使用 AES 解密数据。
|
||||||
|
*
|
||||||
|
* @example
|
||||||
|
* const data = 'U2FsdGVkX1+3Q
|
||||||
|
* const key = CRYPTO_KEY
|
||||||
|
*
|
||||||
|
* const decrypted = decrypt(data, key) // { name: 'John Doe' }
|
||||||
|
*/
|
||||||
|
export const decrypt = (
|
||||||
|
data: string | CipherParams,
|
||||||
|
key?: string | WordArray,
|
||||||
|
) => {
|
||||||
|
try {
|
||||||
|
const decrypted = AES.decrypt(data, key || CRYPTO_KEY)
|
||||||
|
const decryptedData = decrypted.toString(enc.Utf8)
|
||||||
|
|
||||||
|
return JSON.parse(decryptedData)
|
||||||
|
} catch (e) {
|
||||||
|
console.error(`Unknown error: ${e}`)
|
||||||
|
}
|
||||||
|
}
|
||||||
24
src/utils/c/encrypt.ts
Normal file
24
src/utils/c/encrypt.ts
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
import { AES } from 'crypto-js'
|
||||||
|
import { CRYPTO_KEY } from './constant'
|
||||||
|
|
||||||
|
import type { WordArray } from './types'
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @param data 待加密数据
|
||||||
|
* @param key 加密 key
|
||||||
|
*
|
||||||
|
* @description
|
||||||
|
* 使用 AES 加密数据。
|
||||||
|
*
|
||||||
|
* @example
|
||||||
|
* const data = { name: 'John Doe' }
|
||||||
|
* const key = CRYPTO_KEY
|
||||||
|
*
|
||||||
|
* const encrypted = encrypt(data, key) // 'U2FsdGVkX1+3Q'
|
||||||
|
*/
|
||||||
|
export const encrypt = (data: unknown, key?: string | WordArray) => {
|
||||||
|
const encrypted = AES.encrypt(JSON.stringify(data), key || CRYPTO_KEY)
|
||||||
|
|
||||||
|
return encrypted.toString()
|
||||||
|
}
|
||||||
5
src/utils/c/index.ts
Normal file
5
src/utils/c/index.ts
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
import { CRYPTO_KEY } from './constant'
|
||||||
|
import { decrypt } from './decrypt'
|
||||||
|
import { encrypt } from './encrypt'
|
||||||
|
|
||||||
|
export { CRYPTO_KEY, decrypt, encrypt }
|
||||||
4
src/utils/c/types.ts
Normal file
4
src/utils/c/types.ts
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
import type CryptoJS from 'crypto-js'
|
||||||
|
|
||||||
|
export type WordArray = CryptoJS.lib.WordArray
|
||||||
|
export type CipherParams = CryptoJS.lib.CipherParams
|
||||||
@ -123,7 +123,7 @@ function getStorage<T = unknown>(
|
|||||||
try {
|
try {
|
||||||
const data = storage.getItem(prefixedKey)
|
const data = storage.getItem(prefixedKey)
|
||||||
|
|
||||||
return data === null ? defaultValue ?? null : (JSON.parse(data) as T)
|
return data === null ? (defaultValue ?? null) : (JSON.parse(data) as T)
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error(
|
console.error(
|
||||||
`[getStorage]: Failed to get stored data for key '${key}'`,
|
`[getStorage]: Failed to get stored data for key '${key}'`,
|
||||||
|
|||||||
@ -7,5 +7,7 @@ export * from './element'
|
|||||||
export * from './precision'
|
export * from './precision'
|
||||||
export * from './vue'
|
export * from './vue'
|
||||||
export * from './app'
|
export * from './app'
|
||||||
|
export * from './c'
|
||||||
export { positionSelectedMenuItem }
|
export { positionSelectedMenuItem }
|
||||||
export { updateObjectValue } from './update-object-value'
|
export { updateObjectValue } from './update-object-value'
|
||||||
|
export { removeDuplicateKeys } from './remove-duplicate-keys'
|
||||||
|
|||||||
26
src/utils/remove-duplicate-keys.ts
Normal file
26
src/utils/remove-duplicate-keys.ts
Normal 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,
|
||||||
|
)
|
||||||
|
}
|
||||||
@ -1,3 +1,5 @@
|
|||||||
|
import { isValueType } from '@/utils'
|
||||||
|
|
||||||
import type { Recordable, AnyFC } from '@/types'
|
import type { Recordable, AnyFC } from '@/types'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -42,7 +44,7 @@ export const updateObjectValue = <
|
|||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
if (typeof value === 'object' && value !== null) {
|
if (isValueType<object>(value, 'Object')) {
|
||||||
targetObject[key] = {
|
targetObject[key] = {
|
||||||
...targetObject[key],
|
...targetObject[key],
|
||||||
...value,
|
...value,
|
||||||
|
|||||||
@ -8,6 +8,7 @@ import {
|
|||||||
NFlex,
|
NFlex,
|
||||||
NP,
|
NP,
|
||||||
NH6,
|
NH6,
|
||||||
|
NText,
|
||||||
} from 'naive-ui'
|
} from 'naive-ui'
|
||||||
import { RIcon } from '@/components'
|
import { RIcon } from '@/components'
|
||||||
import AppShareLink from '@/app-components/app/AppShareLink'
|
import AppShareLink from '@/app-components/app/AppShareLink'
|
||||||
@ -48,12 +49,16 @@ const Dashboard = defineComponent({
|
|||||||
des: () => (
|
des: () => (
|
||||||
<NFlex align="center">
|
<NFlex align="center">
|
||||||
如果有希望补充的功能可以在
|
如果有希望补充的功能可以在
|
||||||
<a
|
<NText
|
||||||
|
tag="a"
|
||||||
class="dashboard-link"
|
class="dashboard-link"
|
||||||
href="https://github.com/XiaoDaiGua-Ray/ray-template"
|
type="primary"
|
||||||
|
{...{
|
||||||
|
href: 'https://github.com/XiaoDaiGua-Ray/ray-template/issues',
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
GitHub
|
GitHub
|
||||||
</a>
|
</NText>
|
||||||
提一个 Issues
|
提一个 Issues
|
||||||
</NFlex>
|
</NFlex>
|
||||||
),
|
),
|
||||||
|
|||||||
98
src/views/demo/draggable-card.tsx
Normal file
98
src/views/demo/draggable-card.tsx
Normal file
@ -0,0 +1,98 @@
|
|||||||
|
import { RDraggableCard } from '@/components'
|
||||||
|
import { NButton, NCard, NFlex, NRadio, NRadioGroup, NSwitch } from 'naive-ui'
|
||||||
|
|
||||||
|
import type { DefaultPosition } from '@/components'
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: 'DraggableCardDemo',
|
||||||
|
setup() {
|
||||||
|
const card3 = ref(false)
|
||||||
|
const domRef = useTemplateRef<HTMLElement>('domRef')
|
||||||
|
const positionRadioOptions = [
|
||||||
|
{ label: 'center', value: 'center' },
|
||||||
|
{ label: 'top-center', value: 'top-center' },
|
||||||
|
{ label: 'bottom-center', value: 'bottom-center' },
|
||||||
|
{ label: 'top-left', value: 'top-left' },
|
||||||
|
{ label: 'top-right', value: 'top-right' },
|
||||||
|
{ label: 'bottom-left', value: 'bottom-left' },
|
||||||
|
{ label: 'bottom-right', value: 'bottom-right' },
|
||||||
|
]
|
||||||
|
const positionRadioValue = ref('center')
|
||||||
|
const card3Dad = ref(true)
|
||||||
|
|
||||||
|
return {
|
||||||
|
card3,
|
||||||
|
card3Dad,
|
||||||
|
domRef,
|
||||||
|
positionRadioOptions,
|
||||||
|
positionRadioValue,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
render() {
|
||||||
|
const { card3, domRef, positionRadioOptions } = this
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
ref="domRef"
|
||||||
|
style={{
|
||||||
|
width: '100%',
|
||||||
|
height: '400px',
|
||||||
|
backgroundColor: 'rgba(255, 10, 20, 1)',
|
||||||
|
}}
|
||||||
|
></div>
|
||||||
|
<RDraggableCard animation title="Body">
|
||||||
|
我被限制在 body 中。
|
||||||
|
</RDraggableCard>
|
||||||
|
{card3 ? (
|
||||||
|
<RDraggableCard
|
||||||
|
animation
|
||||||
|
title="Custom Container"
|
||||||
|
restrictionElement={domRef}
|
||||||
|
closable
|
||||||
|
onClose={() => (this.card3 = false)}
|
||||||
|
defaultPosition={this.positionRadioValue as DefaultPosition}
|
||||||
|
dad={this.card3Dad}
|
||||||
|
>
|
||||||
|
{{
|
||||||
|
default: () =>
|
||||||
|
'我被限制在红色区域中。并且我支持 NCard 的所有配置与插槽。',
|
||||||
|
'header-extra': () => '其实我就是 NCard 封装的',
|
||||||
|
footer: () => '我支持 footer 插槽',
|
||||||
|
action: () => '我支持 action 插槽',
|
||||||
|
}}
|
||||||
|
</RDraggableCard>
|
||||||
|
) : null}
|
||||||
|
<NCard title="显示与隐藏卡片">
|
||||||
|
<NFlex vertical>
|
||||||
|
<NFlex>
|
||||||
|
<NSwitch v-model:value={this.card3Dad}>
|
||||||
|
{{
|
||||||
|
checked: () => '拖拽',
|
||||||
|
unchecked: () => '禁用',
|
||||||
|
}}
|
||||||
|
</NSwitch>
|
||||||
|
</NFlex>
|
||||||
|
<NFlex>
|
||||||
|
<NRadioGroup v-model:value={this.positionRadioValue}>
|
||||||
|
{positionRadioOptions.map((curr) => (
|
||||||
|
<NRadio key={curr.value} value={curr.value}>
|
||||||
|
{curr.label}
|
||||||
|
</NRadio>
|
||||||
|
))}
|
||||||
|
</NRadioGroup>
|
||||||
|
</NFlex>
|
||||||
|
<NFlex>
|
||||||
|
<NButton
|
||||||
|
type="primary"
|
||||||
|
onClick={() => (this.card3 = !this.card3)}
|
||||||
|
>
|
||||||
|
点一下试试
|
||||||
|
</NButton>
|
||||||
|
</NFlex>
|
||||||
|
</NFlex>
|
||||||
|
</NCard>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
})
|
||||||
@ -16,6 +16,8 @@ export default defineComponent({
|
|||||||
|
|
||||||
const getInst = () => {
|
const getInst = () => {
|
||||||
console.log(getFlowInstance())
|
console.log(getFlowInstance())
|
||||||
|
|
||||||
|
window.$message.info('获取实例成功，请在 console 中查看')
|
||||||
}
|
}
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
@ -16,7 +16,7 @@ export default defineComponent({
|
|||||||
const createCardModal = () => {
|
const createCardModal = () => {
|
||||||
create({
|
create({
|
||||||
title: '卡片模态框',
|
title: '卡片模态框',
|
||||||
dad: true,
|
draggable: true,
|
||||||
preset: 'card',
|
preset: 'card',
|
||||||
content: () => (
|
content: () => (
|
||||||
<div style="height: 3000px;">我可以被拖拽的全屏card模态框</div>
|
<div style="height: 3000px;">我可以被拖拽的全屏card模态框</div>
|
||||||
@ -30,7 +30,7 @@ export default defineComponent({
|
|||||||
title: '模态框',
|
title: '模态框',
|
||||||
content: '内容',
|
content: '内容',
|
||||||
preset: 'dialog',
|
preset: 'dialog',
|
||||||
dad: true,
|
draggable: true,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -47,12 +47,7 @@ export default defineComponent({
|
|||||||
<NFlex vertical>
|
<NFlex vertical>
|
||||||
<NCard title="props">
|
<NCard title="props">
|
||||||
<NFlex vertical>
|
<NFlex vertical>
|
||||||
<h3>
|
|
||||||
memoryPosition: 是否记住上一次被拖拽的位置，如果设置为
|
|
||||||
true，那么下一次打开的时候会自动定位到上一次的位置。
|
|
||||||
</h3>
|
|
||||||
<h3>fullscreen: 全屏模态框。</h3>
|
<h3>fullscreen: 全屏模态框。</h3>
|
||||||
<h3>dad: 启用拖拽，当配置为 false 时，会禁用拖拽效果。</h3>
|
|
||||||
</NFlex>
|
</NFlex>
|
||||||
</NCard>
|
</NCard>
|
||||||
<RModal
|
<RModal
|
||||||
@ -67,7 +62,7 @@ export default defineComponent({
|
|||||||
v-model:show={this.modal2}
|
v-model:show={this.modal2}
|
||||||
preset="card"
|
preset="card"
|
||||||
title="可拖拽卡片模态框"
|
title="可拖拽卡片模态框"
|
||||||
dad
|
draggable
|
||||||
>
|
>
|
||||||
<p>我可以被拖拽</p>
|
<p>我可以被拖拽</p>
|
||||||
</RModal>
|
</RModal>
|
||||||
@ -75,7 +70,7 @@ export default defineComponent({
|
|||||||
v-model:show={this.modal3}
|
v-model:show={this.modal3}
|
||||||
preset="dialog"
|
preset="dialog"
|
||||||
title="可拖拽卡片模态框"
|
title="可拖拽卡片模态框"
|
||||||
dad
|
draggable
|
||||||
>
|
>
|
||||||
<p>我可以被拖拽</p>
|
<p>我可以被拖拽</p>
|
||||||
</RModal>
|
</RModal>
|
||||||
|
|||||||
@ -114,7 +114,7 @@ export default defineComponent({
|
|||||||
// 表格数据
|
// 表格数据
|
||||||
const tableDataRef = ref<RowData[]>([])
|
const tableDataRef = ref<RowData[]>([])
|
||||||
// 表格列
|
// 表格列
|
||||||
const baseColumns: DataTableColumns<RowData> = [
|
const baseColumns = ref<DataTableColumns<RowData>>([
|
||||||
{
|
{
|
||||||
type: 'selection',
|
type: 'selection',
|
||||||
},
|
},
|
||||||
@ -159,7 +159,7 @@ export default defineComponent({
|
|||||||
title: 'Remark',
|
title: 'Remark',
|
||||||
key: 'remark',
|
key: 'remark',
|
||||||
},
|
},
|
||||||
]
|
])
|
||||||
// 表格分页数据
|
// 表格分页数据
|
||||||
const itemCountRef = ref(0)
|
const itemCountRef = ref(0)
|
||||||
// 查询条件
|
// 查询条件
|
||||||
@ -452,7 +452,7 @@ export default defineComponent({
|
|||||||
<RTablePro
|
<RTablePro
|
||||||
onRegister={tableProRegister}
|
onRegister={tableProRegister}
|
||||||
data={tableDataRef}
|
data={tableDataRef}
|
||||||
columns={baseColumns}
|
v-model:columns={this.baseColumns}
|
||||||
loading={loadingGetPersonList}
|
loading={loadingGetPersonList}
|
||||||
// 如果需要设置分页功能，则该参数必传
|
// 如果需要设置分页功能，则该参数必传
|
||||||
paginationCount={itemCountRef}
|
paginationCount={itemCountRef}
|
||||||
@ -79,6 +79,13 @@
|
|||||||
"watchSyncEffect": true,
|
"watchSyncEffect": true,
|
||||||
"ExtractDefaultPropTypes": true,
|
"ExtractDefaultPropTypes": true,
|
||||||
"ExtractPropTypes": 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
7
unplugin/auto-imports.d.ts
vendored
@ -3,6 +3,7 @@
|
|||||||
// @ts-nocheck
|
// @ts-nocheck
|
||||||
// noinspection JSUnusedGlobalSymbols
|
// noinspection JSUnusedGlobalSymbols
|
||||||
// Generated by unplugin-auto-import
|
// Generated by unplugin-auto-import
|
||||||
|
// biome-ignore lint: disable
|
||||||
export {}
|
export {}
|
||||||
declare global {
|
declare global {
|
||||||
const EffectScope: typeof import('vue')['EffectScope']
|
const EffectScope: typeof import('vue')['EffectScope']
|
||||||
@ -46,6 +47,7 @@ declare global {
|
|||||||
const onServerPrefetch: typeof import('vue')['onServerPrefetch']
|
const onServerPrefetch: typeof import('vue')['onServerPrefetch']
|
||||||
const onUnmounted: typeof import('vue')['onUnmounted']
|
const onUnmounted: typeof import('vue')['onUnmounted']
|
||||||
const onUpdated: typeof import('vue')['onUpdated']
|
const onUpdated: typeof import('vue')['onUpdated']
|
||||||
|
const onWatcherCleanup: typeof import('vue')['onWatcherCleanup']
|
||||||
const provide: typeof import('vue')['provide']
|
const provide: typeof import('vue')['provide']
|
||||||
const reactive: typeof import('vue')['reactive']
|
const reactive: typeof import('vue')['reactive']
|
||||||
const readonly: typeof import('vue')['readonly']
|
const readonly: typeof import('vue')['readonly']
|
||||||
@ -66,10 +68,13 @@ declare global {
|
|||||||
const useAttrs: typeof import('vue')['useAttrs']
|
const useAttrs: typeof import('vue')['useAttrs']
|
||||||
const useCssModule: typeof import('vue')['useCssModule']
|
const useCssModule: typeof import('vue')['useCssModule']
|
||||||
const useCssVars: typeof import('vue')['useCssVars']
|
const useCssVars: typeof import('vue')['useCssVars']
|
||||||
|
const useId: typeof import('vue')['useId']
|
||||||
const useLink: typeof import('vue-router')['useLink']
|
const useLink: typeof import('vue-router')['useLink']
|
||||||
|
const useModel: typeof import('vue')['useModel']
|
||||||
const useRoute: typeof import('vue-router')['useRoute']
|
const useRoute: typeof import('vue-router')['useRoute']
|
||||||
const useRouter: typeof import('vue-router')['useRouter']
|
const useRouter: typeof import('vue-router')['useRouter']
|
||||||
const useSlots: typeof import('vue')['useSlots']
|
const useSlots: typeof import('vue')['useSlots']
|
||||||
|
const useTemplateRef: typeof import('vue')['useTemplateRef']
|
||||||
const watch: typeof import('vue')['watch']
|
const watch: typeof import('vue')['watch']
|
||||||
const watchEffect: typeof import('vue')['watchEffect']
|
const watchEffect: typeof import('vue')['watchEffect']
|
||||||
const watchPostEffect: typeof import('vue')['watchPostEffect']
|
const watchPostEffect: typeof import('vue')['watchPostEffect']
|
||||||
@ -78,6 +83,6 @@ declare global {
|
|||||||
// for type re-export
|
// for type re-export
|
||||||
declare global {
|
declare global {
|
||||||
// @ts-ignore
|
// @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')
|
import('vue')
|
||||||
}
|
}
|
||||||
|
|||||||
@ -13,7 +13,7 @@ export const mixinCss = (options?: string[]) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const mixinString = options.reduce((pre, curr) => {
|
const mixinString = options.reduce((pre, curr) => {
|
||||||
const temp = `@import "${curr}";`
|
const temp = `@use "${curr}" as *;`
|
||||||
|
|
||||||
return (pre += temp)
|
return (pre += temp)
|
||||||
}, '')
|
}, '')
|
||||||
|
|||||||
@ -5,7 +5,7 @@ import viteVueJSX from '@vitejs/plugin-vue-jsx'
|
|||||||
import viteVeI18nPlugin from '@intlify/unplugin-vue-i18n/vite'
|
import viteVeI18nPlugin from '@intlify/unplugin-vue-i18n/vite'
|
||||||
import viteInspect from 'vite-plugin-inspect'
|
import viteInspect from 'vite-plugin-inspect'
|
||||||
import viteSvgLoader from 'vite-svg-loader'
|
import viteSvgLoader from 'vite-svg-loader'
|
||||||
import { analyzer, adapter } from 'vite-bundle-analyzer'
|
import { analyzer } from 'vite-bundle-analyzer'
|
||||||
import gzipPlugin from 'rollup-plugin-gzip'
|
import gzipPlugin from 'rollup-plugin-gzip'
|
||||||
import { ViteEjsPlugin as viteEjsPlugin } from 'vite-plugin-ejs'
|
import { ViteEjsPlugin as viteEjsPlugin } from 'vite-plugin-ejs'
|
||||||
import viteAutoImport from 'unplugin-auto-import/vite'
|
import viteAutoImport from 'unplugin-auto-import/vite'
|
||||||
@ -33,12 +33,12 @@ function onlyReportOptions(mode: string): PluginOption[] {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return [
|
return [
|
||||||
adapter(
|
analyzer({
|
||||||
analyzer({
|
// 以默认服务器代理打开文件
|
||||||
analyzerMode: 'server', // 以默认服务器代理打开文件
|
analyzerMode: 'server',
|
||||||
openAnalyzer: true, // 以默认服务器代理打开文件
|
// 以默认服务器代理打开文件
|
||||||
}),
|
openAnalyzer: true,
|
||||||
),
|
}),
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user