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

v4.1.6

Browse Source
This commit is contained in:
XiaoDaiGua-Ray 2023-08-09 16:43:59 +08:00
parent be406cc026
commit 5eb201b25b
29 changed files with 320 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.vscode/settings.json vendored
View File

@ -8,5 +8,6 @@
"i18n-ally.sourceLanguage": "zh-CN",
"i18n-ally.displayLanguage": "zh-CN",
"i18n-ally.enabledFrameworks": ["vue", "react"],
"typescript.tsdk": "node_modules/typescript/lib"
"typescript.tsdk": "node_modules/typescript/lib",
"synthwave84.disableGlow": true
}

13
CHANGELOG.md
View File

@ -1,5 +1,18 @@
# CHANGE LOG
## 4.1.6
### Feats
- 现在支持切换内容区域的过渡动画效果
- 优化了一些布局的样式细节
- 将过渡动画与 Spin 动画结合
- 拆分了布局组件，使得它看起来更合理
### Fixes
- 修复 RayChart 组件不能根据内容区域尺寸变化更新 chart 图
## 4.1.5
### Fixes

2
package.json
View File

@ -76,7 +76,7 @@
"husky": "^8.0.3",
"lint-staged": "^13.1.0",
"postcss": "^8.1.0",
"postcss-px-to-viewport-update": "1.2.0",
"postcss-px-to-viewport-8-plugin": "1.2.2",
"prettier": "^2.7.1",
"rollup-plugin-visualizer": "^5.8.3",
"svg-sprite-loader": "^6.0.11",

39
postcss.config.cjs
View File

@ -11,25 +11,26 @@ module.exports = {
],
grid: true,
},
// 由于该库的作者很久没更新了，导致 exclude include 并没有生效，所以使用的是其一个 fork 版本
// 'postcss-px-to-viewport-update': {
// inlinePxToViewport: true,
// /** 视窗的宽度(设计稿的宽度) */
// viewportWidth: 1920,
// /** 视窗的高度(设计稿高度, 一般无需指定) */
// viewportHeight: 1080,
// /** 指定 px 转换为视窗单位值的小数位数 */
// unitPrecision: 3,
// /** 指定需要转换成的视窗单位 */
// viewportUnit: 'vw',
// /** 指定不转换为视窗单位的类 */
// selectorBlackList: ['.ignore'],
// /** 小于或等于 1px 不转换为视窗单位 */
// minPixelValue: 1,
// /** 允许在媒体查询中转换 px */
// mediaQuery: false,
// 为了适配 postcss8.x 版本的转换库
'postcss-px-to-viewport-8-plugin': {
inlinePxToViewport: true,
/** 视窗的宽度(设计稿的宽度) */
viewportWidth: 1920,
/** 视窗的高度(设计稿高度, 一般无需指定) */
viewportHeight: 1080,
/** 指定 px 转换为视窗单位值的小数位数 */
unitPrecision: 3,
/** 指定需要转换成的视窗单位 */
viewportUnit: 'rem',
/** 指定不转换为视窗单位的类 */
selectorBlackList: ['.ignore'],
/** 小于或等于 1px 不转换为视窗单位 */
minPixelValue: 1,
/** 允许在媒体查询中转换 px */
mediaQuery: false,
// exclude: /(\/|\\)(node_modules)(\/|\\)/, // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
// include: [/^src[/\\].*\.(vue|tsx|jsx|ts(?!d))$/],
// },
include: [/^src[/\\].*\.(vue|tsx|jsx|ts(?!d))$/],
preserve: true,
},
},
}

2
src/app-components/provider/AppRequestCanceler/index.tsx
View File

@ -14,7 +14,7 @@
* 路由更新前，取消上一路由所有请求
*
* 生命周期示意图：
* beforeRouteUpdate -> cancelAllRequest -> routerUpdate
* beforeRouteUpdate -> cancelAllRequest -> routeUpdate
*/
import { axiosCanceler } from '@/axios/helper/interceptor'

2
src/appConfig/appConfig.ts
View File

@ -61,7 +61,7 @@ export const ROOT_ROUTE: Readonly<RootRoute> = {
*
* 如果不设置该属性或者为空, 则不会渲染 LOGO
*/
export const SIDE_BAR_LOGO: LayoutSideBarLogo = {
export const SIDE_BAR_LOGO: LayoutSideBarLogo | undefined = {
icon: 'ray',
title: 'Ray Template',
url: '/dashboard',

2
src/appConfig/routerConfig.ts
View File

@ -28,7 +28,7 @@ import type { LayoutInst } from 'naive-ui'
* })
* ```
*/
export const LAYOUT_CONTENT_REF = ref<LayoutInst>()
export const LAYOUT_CONTENT_REF = ref<LayoutInst | null>(null)
export const SETUP_ROUTER_ACTION = {
/** 是否启用路由切换时顶部加载条 */

1
src/components/RayChart/index.scss
View File

@ -4,4 +4,5 @@
border: none;
outline: none;
box-sizing: border-box;
transition: width 0.35s var(--r-bezier);
}

12
src/components/RayChart/index.tsx
View File

@ -43,6 +43,7 @@ import { cloneDeep, throttle } from 'lodash-es'
import { on, off, completeSize } from '@/utils/element'
import { call } from '@/utils/vue/index'
import { setupChartTheme, loadingOptions } from './helper'
import { LAYOUT_CONTENT_REF } from '@/appConfig/routerConfig'
import type { PropType } from 'vue'
import type { EChartsInstance } from '@/types/modules/component'
@ -53,6 +54,7 @@ import type {
AutoResize,
ChartTheme,
} from '@/components/RayChart/type'
import type { UseResizeObserverReturn } from '@vueuse/core'
export type EChartsExtensionInstallRegisters = typeof CanvasRenderer
@ -186,6 +188,7 @@ const RayChart = defineComponent({
const echartInstanceRef = ref<EChartsInstance>() // `echart` 拷贝实例, 解决直接使用响应式实例带来的问题
let echartInstance: EChartsInstance // `echart` 实例
let resizeThrottle: DebouncedFunc<AnyFC> // resize 防抖方法实例
let resizeOvserverReturn: UseResizeObserverReturn | undefined
const cssVarsRef = computed(() => {
const cssVars = {
@ -431,10 +434,16 @@ const RayChart = defineComponent({
/** 注册事件 */
if (props.autoResize) {
resizeThrottle = throttle(resizeChart, 1000)
resizeThrottle = throttle(resizeChart, 500)
on(window, 'resize', resizeThrottle)
}
/** 监听内容区域尺寸变化更新 chart */
resizeOvserverReturn = useResizeObserver(
LAYOUT_CONTENT_REF.value as unknown as Ref<HTMLElement>,
resizeThrottle,
)
})
})
@ -445,6 +454,7 @@ const RayChart = defineComponent({
off(window, 'resize', resizeThrottle)
/** 注销防抖 */
resizeThrottle.cancel()
resizeOvserverReturn?.stop?.()
})
expose({

4
src/layout/components/Menu/index.scss → src/layout/components/Menu/components/SiderBarLogo/index.scss
View File

@ -2,7 +2,7 @@
*
* @author Ray <https://github.com/XiaoDaiGua-Ray>
*
* @date 2023-01-06
* @date 2023-08-08
*
* @workspace ray-template
*
@ -10,7 +10,7 @@
*/
.ray-menu__logo {
height: 50px;
height: $layoutHeaderHeight;
padding: 0 18px 0 24px;
display: flex;
flex-wrap: nowrap;

74
src/layout/components/Menu/components/SiderBarLogo/index.tsx Normal file
View File

@ -0,0 +1,74 @@
/**
*
* @author Ray <https://github.com/XiaoDaiGua-Ray>
*
* @date 2023-08-08
*
* @workspace ray-template
*
* @remark 今天也是元气满满撸代码的一天
*/
import './index.scss'
import { NEllipsis } from 'naive-ui'
import RayIcon from '@/components/RayIcon/index'
const SiderBarLogo = defineComponent({
name: 'SiderBarLogo',
props: {
collapsed: {
type: Boolean,
required: true,
},
},
setup() {
const router = useRouter()
const {
layout: { sideBarLogo },
} = __APP_CFG__
const handleSideBarLogoClick = () => {
if (sideBarLogo && sideBarLogo.url) {
sideBarLogo.jumpType === 'station'
? router.push(sideBarLogo.url)
: window.open(sideBarLogo.url)
}
}
return {
sideBarLogo,
handleSideBarLogoClick,
}
},
render() {
return this.sideBarLogo?.icon && this.sideBarLogo?.title ? (
<div
class={[
'ray-menu__logo',
this.sideBarLogo?.url ? 'ray-menu__logo-url' : '',
]}
onClick={this.handleSideBarLogoClick.bind(this)}
>
{this.sideBarLogo?.icon ? (
<RayIcon name={this.sideBarLogo.icon} size="30" />
) : (
''
)}
<h1
class={[
!this.collapsed ? 'ray-menu__logo-title--open' : '',
'ray-menu__logo-title',
]}
>
<NEllipsis>{this.sideBarLogo?.title}</NEllipsis>
</h1>
</div>
) : (
''
)
},
})
export default SiderBarLogo

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

@ -1,11 +1,19 @@
import './index.scss'
/**
*
* @author Ray <https://github.com/XiaoDaiGua-Ray>
*
* @date 2022-10-11
*
* @workspace ray-template
*
* @remark 今天也是元气满满撸代码的一天
*/
import { NMenu, NLayoutSider, NEllipsis } from 'naive-ui'
import RayIcon from '@/components/RayIcon/index'
import { NMenu, NLayoutSider } from 'naive-ui'
import SiderBarLogo from './components/SiderBarLogo/index'
import { useMenu } from '@/store'
import { APP_MENU_CONFIG } from '@/appConfig/appConfig'
import { useVueRouter } from '@/router/helper/useVueRouter'
import type { MenuInst } from 'naive-ui'
import type { NaiveMenuOptions } from '@/types/modules/component'
@ -17,7 +25,6 @@ const LayoutMenu = defineComponent({
const menuRef = ref<MenuInst | null>(null)
const menuStore = useMenu()
const { router } = useVueRouter()
const { changeMenuModelValue, collapsedMenu } = menuStore
const modelMenuKey = computed({
@ -33,17 +40,6 @@ const LayoutMenu = defineComponent({
})
const modelMenuOptions = computed(() => menuStore.options)
const modelCollapsed = computed(() => menuStore.collapsed)
const {
layout: { sideBarLogo },
} = __APP_CFG__
const handleSideBarLogoClick = () => {
if (sideBarLogo && sideBarLogo.url) {
sideBarLogo.jumpType === 'station'
? router.push(sideBarLogo.url)
: window.open(sideBarLogo.url)
}
}
const showMenuOption = () => {
const key = modelMenuKey.value as string
@ -59,8 +55,6 @@ const LayoutMenu = defineComponent({
modelMenuOptions,
modelCollapsed,
collapsedMenu,
sideBarLogo,
handleSideBarLogoClick,
menuRef,
}
},
@ -74,31 +68,7 @@ const LayoutMenu = defineComponent({
onUpdateCollapsed={this.collapsedMenu.bind(this)}
nativeScrollbar={false}
>
{this.sideBarLogo ? (
<div
class={[
'ray-menu__logo',
this.sideBarLogo.url ? 'ray-menu__logo-url' : '',
]}
onClick={this.handleSideBarLogoClick.bind(this)}
>
{this.sideBarLogo.icon ? (
<RayIcon name={this.sideBarLogo.icon} size="30" />
) : (
''
)}
<h1
class={[
!this.modelCollapsed ? 'ray-menu__logo-title--open' : '',
'ray-menu__logo-title',
]}
>
<NEllipsis>{this.sideBarLogo.title}</NEllipsis>
</h1>
</div>
) : (
''
)}
<SiderBarLogo collapsed={this.modelCollapsed} />
<NMenu
ref="menuRef"
v-model:value={this.modelMenuKey}

1
src/layout/components/MenuTag/index.scss
View File

@ -6,6 +6,7 @@ $menuTagWrapperWidth: 76px;
border-bottom: solid 1px var(--n-border-color);
display: flex;
align-items: center;
padding: 4px 0;
& .menu-tag-sapce {
width: calc(100% - $space * 2);

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

@ -388,7 +388,9 @@ const MenuTag = defineComponent({
if (tags?.length) {
const [menuTag] = tags
nextTick(() => {
menuTag.scrollIntoView?.()
})
}
})
}

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

@ -22,7 +22,7 @@ import { NDropdown, NBreadcrumb, NBreadcrumbItem } from 'naive-ui'
import { useMenu } from '@/store'
import type { DropdownOption, MenuOption } from 'naive-ui'
import type { DropdownOption } from 'naive-ui'
import type {
AppMenuOption,
MenuTagOptions,

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

@ -1,4 +1,5 @@
import './index.scss'
import {
NDrawer,
NDrawerContent,
@ -8,6 +9,7 @@ import {
NColorPicker,
NDescriptions,
NDescriptionsItem,
NSelect,
} from 'naive-ui'
import ThemeSwitch from '@/layout/components/SiderBar/components/SettingDrawer/components/ThemeSwitch/index'
@ -39,7 +41,8 @@ const SettingDrawer = defineComponent({
const { t } = useI18n()
const settingStore = useSetting()
const { changePrimaryColor, changeSwitcher } = settingStore
const { changePrimaryColor, changeSwitcher, updateContentTransition } =
settingStore
const {
themeValue,
primaryColorOverride,
@ -47,6 +50,7 @@ const SettingDrawer = defineComponent({
breadcrumbSwitch,
invertSwitch,
footerSwitch,
contentTransition,
} = storeToRefs(settingStore)
const modelShow = computed({
@ -55,6 +59,24 @@ const SettingDrawer = defineComponent({
emit('update:show', bool)
},
})
const contentTransitionOptions = [
{
label: '无',
value: 'none',
},
{
label: '缩放效果',
value: 'scale',
},
{
label: '淡入淡出',
value: 'fade',
},
{
label: '闪入效果',
value: 'opacity',
},
]
return {
modelShow,
@ -67,6 +89,9 @@ const SettingDrawer = defineComponent({
breadcrumbSwitch,
invertSwitch,
footerSwitch,
contentTransitionOptions,
contentTransition,
updateContentTransition,
}
},
render() {
@ -92,6 +117,16 @@ const SettingDrawer = defineComponent({
v-model:value={this.primaryColorOverride.common!.primaryColor}
onUpdateValue={this.changePrimaryColor.bind(this)}
/>
<NDivider titlePlacement="center">
{t('headerSettingOptions.ContentTransition')}
</NDivider>
<NSelect
v-model:value={this.contentTransition}
options={this.contentTransitionOptions}
onUpdateValue={(value) => {
this.updateContentTransition(value)
}}
/>
<NDivider titlePlacement="center">
{t('headerSettingOptions.InterfaceDisplay')}
</NDivider>

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

@ -17,8 +17,8 @@
import './index.scss'
import RayTransitionComponent from '@/components/RayTransitionComponent/index.vue'
import { NSpin } from 'naive-ui'
import RayTransitionComponent from '@/components/RayTransitionComponent/index.vue'
import AppRequestCanceler from '@/app-components/provider/AppRequestCanceler/index'
import { useSetting } from '@/store'
@ -31,7 +31,7 @@ const ContentWrapper = defineComponent({
const settingStore = useSetting()
const router = useRouter()
const { reloadRouteSwitch } = storeToRefs(settingStore)
const { reloadRouteSwitch, contentTransition } = storeToRefs(settingStore)
const spinning = ref(false)
const thmeOverridesSpin: GlobalThemeOverrides['Spin'] = {
opacitySpinning: '0',
@ -43,9 +43,7 @@ const ContentWrapper = defineComponent({
})
router.afterEach(() => {
setTimeout(() => {
spinning.value = false
}, 300)
})
}
@ -55,6 +53,7 @@ const ContentWrapper = defineComponent({
reloadRouteSwitch,
spinning,
thmeOverridesSpin,
contentTransition,
}
},
render() {
@ -69,7 +68,7 @@ const ContentWrapper = defineComponent({
{this.reloadRouteSwitch ? (
<RayTransitionComponent
class="content-wrapper"
transitionPropName="layout-content"
transitionPropName={this.contentTransition + '-transform'}
/>
) : (
''

24
src/layout/default/FeatureWrapper/index.tsx Normal file
View File

@ -0,0 +1,24 @@
/**
*
* @author Ray <https://github.com/XiaoDaiGua-Ray>
*
* @date 2023-08-09
*
* @workspace ray-template
*
* @remark 今天也是元气满满撸代码的一天
*/
import MenuTag from '@/layout/components/MenuTag/index'
const FeatureWrapper = defineComponent({
name: 'FeatureWrapper',
setup() {
return {}
},
render() {
return <MenuTag />
},
})
export default FeatureWrapper

2
src/layout/default/FooterWrapper/index.scss
View File

@ -1,4 +1,4 @@
.layout-footer-wrapper {
padding: 20px;
padding: 0 20px 8px 20px;
text-align: center;
}

29
src/layout/default/HeaderWrapper/index.tsx Normal file
View File

@ -0,0 +1,29 @@
/**
*
* @author Ray <https://github.com/XiaoDaiGua-Ray>
*
* @date 2023-08-09
*
* @workspace ray-template
*
* @remark 今天也是元气满满撸代码的一天
*/
import { NSpace } from 'naive-ui'
import SiderBar from '@/layout/components/SiderBar/index'
const HeaderWrapper = defineComponent({
name: 'HeaderWrapper',
setup() {
return {}
},
render() {
return (
<NSpace wrapItem={false} size={[0, 0]}>
<SiderBar />
</NSpace>
)
},
})
export default HeaderWrapper

2
src/layout/index.scss
View File

@ -1,4 +1,4 @@
.r-layout-full.r-layout-full {
.r-layout-full {
position: fixed;
inset: 0;

18
src/layout/index.tsx
View File

@ -11,19 +11,19 @@
import './index.scss'
import { NLayout, NLayoutContent, NScrollbar } from 'naive-ui'
import { NLayout, NLayoutContent } from 'naive-ui'
import Menu from './components/Menu/index'
import SiderBar from './components/SiderBar/index'
import MenuTag from './components/MenuTag/index'
import ContentWrapper from '@/layout/default/ContentWrapper'
import FooterWrapper from '@/layout/default/FooterWrapper'
import HeaderWrapper from './default/HeaderWrapper'
import FeatureWrapper from './default/FeatureWrapper'
import { useSetting } from '@/store'
import { LAYOUT_CONTENT_REF } from '@/appConfig/routerConfig'
import { layoutHeaderCssVars } from '@/layout/layoutResize'
import useAppLockScreen from '@/app-components/app/AppLockScreen/appLockVar'
const Layout = defineComponent({
const RLayout = defineComponent({
name: 'RLayout',
setup() {
const layoutSiderBarRef = ref<HTMLElement>()
@ -57,8 +57,12 @@ const Layout = defineComponent({
<NLayout class="r-layout-full" style={[this.cssVarsRef]} hasSider>
<Menu />
<NLayoutContent class="r-layout-full__viewer">
<SiderBar ref="layoutSiderBarRef" />
{this.modelMenuTagSwitch ? <MenuTag ref="layoutMenuTagRef" /> : ''}
<HeaderWrapper ref="layoutSiderBarRef" />
{this.modelMenuTagSwitch ? (
<FeatureWrapper ref="layoutMenuTagRef" />
) : (
''
)}
<NLayoutContent
ref="LAYOUT_CONTENT_REF"
class="r-layout-full__viewer-content"
@ -75,4 +79,4 @@ const Layout = defineComponent({
},
})
export default Layout
export default RLayout

3
src/locales/lang/en-US/headerSettingOptions.json
View File

@ -6,5 +6,6 @@
"Light": "Light",
"PrimaryColorConfig": "Primary Color"
},
"InterfaceDisplay": "Display"
"InterfaceDisplay": "Display",
"ContentTransition": "Content Transition"
}

3
src/locales/lang/zh-CN/headerSettingOptions.json
View File

@ -6,5 +6,6 @@
"Light": "明亮",
"PrimaryColorConfig": "主题色"
},
"InterfaceDisplay": "界面显示"
"InterfaceDisplay": "界面显示",
"ContentTransition": "动画效果"
}

1
src/router/README.md
View File

@ -55,7 +55,6 @@ interface RouteMeta {
keepAlive?: boolean
sameLevel?: boolean
dev?: string | string[]
needCancel?: boolean
}
```

7
src/store/modules/setting/index.ts
View File

@ -38,8 +38,14 @@ export const useSetting = defineStore(
lockScreenSwitch: false, // 锁屏开关
lockScreenInputSwitch: false, // 锁屏输入状态开关(预留该字段是为了方便拓展用, 但是舍弃了该字段, 改为使用 useAppLockScreen 方法)
footerSwitch: true, // 底部区域开关
contentTransition: 'scale', // 切换过渡效果
})
/** 更新过渡效果 */
const updateContentTransition = (value: string) => {
settingState.contentTransition = value
}
/** 修改当前语言 */
const updateLocale = (key: string) => {
locale(key)
@ -103,6 +109,7 @@ export const useSetting = defineStore(
updateLocale,
changePrimaryColor,
changeSwitcher,
updateContentTransition,
}
},
{

1
src/store/modules/setting/type.ts
View File

@ -14,4 +14,5 @@ export interface SettingState {
lockScreenSwitch: boolean
lockScreenInputSwitch: boolean
footerSwitch: boolean
contentTransition: string
}

61
src/styles/animate.scss vendored
View File

@ -15,17 +15,64 @@
opacity: 0;
}
.fade-enter-active,
.fade-leave-active {
transition: all 0.35s ease;
/* fade-transform */
.fade-transform-leave-active,
.fade-transform-enter-active {
transition: all 0.5s;
}
.fade-enter-from {
.fade-transform-enter-from {
opacity: 0;
transform: translateX(-30px);
transform: translateX(-50px);
}
.fade-leave-to {
.fade-transform-leave-to {
opacity: 0;
transform: translateX(50px);
}
/* down-transform */
.down-transform-leave-active,
.down-transform-enter-active {
transition: all 0.5s;
}
.down-transform-enter-from {
opacity: 0;
transform: translateY(-50px);
}
.down-transform-leave-to {
opacity: 0;
transform: translateY(50px);
}
/* scale-transform */
.scale-transform-leave-active,
.scale-transform-enter-active {
transition: all 0.5s;
}
.scale-transform-enter-from {
opacity: 0;
transform: scale(2);
}
.scale-transform-leave-to {
opacity: 0;
transform: scale(0.5);
}
/* opacity-transform */
.opacity-transform-leave-active,
.opacity-transform-enter-active {
transition: all 0.5s;
}
.opacity-transform-enter-from {
opacity: 0;
}
.opacity-transform-leave-to {
opacity: 0;
transform: translateX(30px);
}

2
vite.config.ts
View File

@ -67,7 +67,7 @@ export default defineConfig(async ({ mode }) => {
alias: alias,
},
plugins: [
vue({ reactivityTransform: true }),
vue(),
viteVueJSX(),
title,
viteVeI18nPlugin({}),